Fix group shape rerender when a transformation is applied to its children shapes.

src/uxbox/main/ui/shapes.cljs

@@ -5,27 +5,7 @@
 ;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
 
 (ns uxbox.main.ui.shapes
-  (:require [lentes.core :as l]
+  (:require [uxbox.main.ui.shapes.group :as group]))
-            [rum.core :as rum]
-            [uxbox.main.state :as st]
-            [uxbox.util.mixins :as mx]
-            [uxbox.main.ui.shapes.group :as group]))
 
 (def render-component group/render-component)
-
+(def shape group/component-container)
-(defn- focus-shape
-  [id]
-  (-> (l/in [:shapes-by-id id])
-      (l/derive st/state)))
-
-(defn- shape-render
-  [own id]
-  (let [shape (mx/react (focus-shape id))]
-    (when-not (:hidden shape)
-      (render-component shape))))
-
-(def shape
-  (mx/component
-   {:render shape-render
-    :name "shape"
-    :mixins [mx/static mx/reactive]}))

src/uxbox/main/ui/shapes/group.cljs

@@ -5,11 +5,9 @@
 ;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
 
 (ns uxbox.main.ui.shapes.group
-  (:require [sablono.core :refer-macros [html]]
+  (:require [lentes.core :as l]
-            [rum.core :as rum]
-            [lentes.core :as l]
             [uxbox.main.state :as st]
-            [uxbox.util.mixins :as mx]
+            [uxbox.util.mixins :as mx :include-macros true]
             [uxbox.main.ui.shapes.common :as common]
             [uxbox.main.ui.shapes.attrs :as attrs]
             [uxbox.main.ui.shapes.icon :as icon]
@@ -23,10 +21,14 @@
 
 (declare group-component)
 
+(defn- focus-shape
+  [id]
+  (-> (l/in [:shapes-by-id id])
+      (l/derive st/state)))
+
 (defn render-component
-  [{:keys [type] :as shape}]
+  [shape]
-  ;; (println "render-component" (pr-str shape))
+  (case (:type shape)
-  (case type
     :group (group-component shape)
     :text (text/text-component shape)
     :icon (icon/icon-component shape)
@@ -34,50 +36,40 @@
     :path (path/path-component shape)
     :circle (circle/circle-component shape)))
 
+(mx/defc component-container
+  {:mixins [mx/reactive mx/static]}
+  [id]
+  (let [shape (mx/react (focus-shape id))]
+    (when-not (:hidden shape)
+      (render-component shape))))
+
 ;; --- Group Component
 
 (declare group-shape)
 
-(defn- group-component-render
+(mx/defc group-component
-  [own shape]
+  {:mixins [mx/static mx/reactive]}
-  (let [{:keys [id x y width height group]} shape
+  [{:keys [id x y width height group] :as shape}]
-        selected (mx/react common/selected-ref)
+  (let [selected (mx/react common/selected-ref)
         selected? (contains? selected id)
         on-mouse-down #(common/on-mouse-down % shape selected)]
-    (html
     [:g.shape.group-shape
      {:class (when selected? "selected")
       :on-mouse-down on-mouse-down}
-      (group-shape shape render-component)])))
+     (group-shape shape component-container)]))
-
-(def group-component
-  (mx/component
-   {:render group-component-render
-    :name "group-component"
-    :mixins [mx/static mx/reactive]}))
 
 ;; --- Group Shape
 
-(defn- group-shape-render
+(mx/defc group-shape
-  [own {:keys [items id dx dy rotation] :as shape} factory]
+  {:mixins [mx/static mx/reactive]}
+  [{:keys [items id dx dy rotation] :as shape} factory]
   (let [key (str "shape-" id)
         rfm (geom/transformation-matrix shape)
         attrs (merge {:id key :key key :transform (str rfm)}
                      (attrs/extract-style-attrs shape)
-                     (attrs/make-debug-attrs shape))
+                     (attrs/make-debug-attrs shape))]
-        shapes-by-id (get @st/state :shapes-by-id)
-        xf (comp
-            (map #(get shapes-by-id %))
-            (remove :hidden))]
-    (html
     [:g attrs
-      (for [item (reverse (into [] xf items))
+     (for [item items :let [key (str item)]]
-            :let [key (str (:id item))]]
        (-> (factory item)
-            (rum/with-key key)))])))
+           (mx/with-key key)))]))
 
-(def group-shape
-  (mx/component
-   {:render group-shape-render
-    :name "group-shape"
-    :mixins [mx/static]}))

src/uxbox/main/ui/shapes/rect.cljs

@@ -37,7 +37,7 @@
 ;; --- Rect Shape
 
 (mx/defc rect-shape
-  [{:keys [id x1 y1 x2 y2] :as shape}]
+  [{:keys [id x1 y1] :as shape}]
   (let [key (str "shape-" id)
         rfm (geom/transformation-matrix shape)
         size (geom/size shape)