Add rotatation transformation for rect and circles.

src/uxbox/shapes.cljs

@@ -155,10 +155,6 @@
            :x2 (+ x1 width)
            :y2 (+ y1 height))))
 
-  ;; (merge shape
-  ;;        (when width {:width width})
-  ;;        (when height {:height height})))
-
 (defmethod -resize' :default
   [shape _]
   (throw (ex-info "Not implemented" (select-keys shape [:type]))))
@@ -303,6 +299,23 @@
         (gmt/translate (- center-x) (- center-y))
         (gmt/scale scale-x scale-y))))
 
+(defmethod -transformation :builtin/rect
+  [{:keys [x1 y1 rotation] :or {rotation 0} :as shape}]
+  (let [{:keys [width height]} (-size shape)
+        center-x (+ x1 (/ width 2))
+        center-y (+ y1 (/ height 2))]
+    (-> (gmt/matrix)
+        (gmt/translate center-x center-y)
+        (gmt/rotate rotation)
+        (gmt/translate (- center-x) (- center-y)))))
+
+(defmethod -transformation :builtin/circle
+  [{:keys [cx cy rx ry rotation] :or {rotation 0} :as shape}]
+  (-> (gmt/matrix)
+      (gmt/translate cx cy)
+      (gmt/rotate rotation)
+      (gmt/translate (- cx) (- cy))))
+
 (declare outer-rect)
 
 (defmethod -transformation :builtin/group

src/uxbox/ui/shapes.cljs

@@ -70,9 +70,10 @@
 (defmethod sh/-render :builtin/circle
   [{:keys [id] :as shape}]
   (let [key (str id)
+        rfm (sh/-transformation shape)
         props (select-keys shape [:cx :cy :rx :ry])
         attrs (-> (extract-style-attrs shape)
-                  (merge {:id key :key key})
+                  (merge {:id key :key key :transform (str rfm)})
                   (merge props))]
     (html
      [:ellipse attrs])))
@@ -80,8 +81,9 @@
 (defmethod sh/-render :builtin/rect
   [{:keys [id x1 y1 x2 y2] :as shape}]
   (let [key (str id)
-        props {:x x1 :y y1 :id key :key key}
+        rfm (sh/-transformation shape)
         size (sh/-size shape)
+        props {:x x1 :y y1 :id key :key key :transform (str rfm)}
         attrs (-> (extract-style-attrs shape)
                   (merge props size))]
     (html

src/uxbox/ui/workspace/canvas.cljs

@@ -102,7 +102,7 @@
   (mx/component
    {:render shape-render
     :name "shape"
-    :mixins [(mx/local {}) rum/reactive mx/static]}))
+    :mixins [(mx/local {}) rum/reactive]}))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Canvas