Fork me on GitHub
#hoplon
<
2019-07-21
>
George Ciobanu18:07:26

Hi! I have a potentially silly question about using Hoplon - I apologize if the answer is super obvious. I have a map of maps like so (simplified) (defc= canvasItems {:button1 {:type "button" :width 50 :height 60} :button2 {:type "button" width 100 :heigh 200} :label {:type "label" :width 20 :text "meow"}}) This is simply a list of items shown on the screen that the user can add/remove by dragging and dropping. She can also modify the items by resizing them, moving them around etc. It's a GUI editor so the number of items in it changes over time. I then have code that uses for-tpl to render the canvasItems collection. However, when the user resizes just the label I don't really need to update all of the elements in the canvas - just the label. But if I understand for-tpl correctly is simply goes through the collection and redraws every item. Pseudo code: (for-tpl [item canvasItems] (case (:type item) :button (div "Button" ...) :label (div "Label" ...) So each item is rendered based on its type. What I'd like to optimize is to make sure that only the dom element for the modified item is updated when the user resizes it. I looked into lenses and they might provide a way but I haven't found an elegant solution yet. Thank you so much! P.s. ideally there should also be a way to mark items the user deleted for garbage collectiin, since changes to the canvas will often be significant and never reuse items that were previously deleted.

George Ciobanu18:07:19

I'm open to using other data structures for the items collection, so feel free to ignore any of my assumptions if that helps