Created
February 16, 2014 08:02
-
-
Save selfsame/9030937 to your computer and use it in GitHub Desktop.
Using multiple roots on the same data will still share state bleeding at cursor path similarity
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(sug/defcomp window | |
[data owner] | |
{:render-state | |
(fn [_ state] | |
(let [[x y w h] (:xywh state)] | |
(dom/div #js {:ref "tool" :style #js {:left x :top y :width w :height h :position "absolute" :border "1px solid red"}} | |
(sug/make draggable data {:opts {:className (str "title") | |
:content (str (:view state) (rand-int 100))} | |
:init-state {:drag-start :remember | |
:drag :drag-free}}) | |
(dom/h3 nil (prn-str (:view state))) | |
(dom/p nil (prn-str (:app data) )) | |
))) | |
:on {:remember (fn [e] | |
(let [el-off (element-offset (om/get-node owner "tool")) | |
el-dim (element-dimensions (om/get-node owner "tool")) | |
drag-start (:start-location e)] | |
(om/set-state! owner :drag-start-offset | |
(mapv - drag-start el-off)) | |
(om/set-state! owner :drag-start-offset-dim | |
(mapv - drag-start el-dim)))) | |
:drag-free | |
(fn [e] | |
(let [state (om/get-state owner) | |
[x y] (mapv - (:location e) (state :drag-start-offset )) | |
[ox oy w h] (:xywh state) | |
node (om/get-node owner "tool")] | |
(om/set-state! owner :xywh [x y w h]) | |
))}}) | |
(sug/defcomp router | |
[data owner] | |
{:init-state | |
(fn [_] | |
(let [view (rand-nth [:style :control]) | |
[x y] [(rand-int 200) (rand-int 200)] | |
[w h] (mapv + [(rand-int 200) (rand-int 200)] [100 60])] | |
{:view view :xywh [x y w h]})) | |
:render-state | |
(fn [_ state] | |
(let [] | |
(dom/div nil | |
(sug/make window data {:init-state {:view (:view state) :xywh (:xywh state)}}) )))}) | |
(def DAT (atom {:app {:nodes []}})) | |
(om/root DAT router (.getElementById js/document "window1")) | |
(om/root DAT router (.getElementById js/document "window2")) | |
(om/root DAT router (.getElementById js/document "window3")) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment