Add circle/elipse rendering.

src/uxbox/data/workspace.cljs

@@ -159,6 +159,9 @@
 
           (dissoc-from-index [state shape]
             (case (:type shape)
+              :builtin/rect (dissoc-icon state shape)
+              :builtin/circle (dissoc-icon state shape)
+              :builtin/line (dissoc-icon state shape)
               :builtin/icon (dissoc-icon state shape)
               :builtin/group (dissoc-group state shape)))]
     (reify
@@ -177,7 +180,7 @@
     rs/UpdateEvent
     (-apply-update [_ state]
       (let [shape (get-in state [:shapes-by-id sid])]
-        (update-in state [:shapes-by-id sid] sh/-move {:dx dx :dy dy})))))
+        (update-in state [:shapes-by-id sid] sh/-move delta)))))
 
 (defn update-shape-rotation
   [sid rotation]
@@ -206,12 +209,13 @@
         (update-in state [:shapes-by-id sid] sh/-resize' size)))))
 
 (defn update-shape-position
-  [sid {:keys [x1 y1 x2 y2] :as opts}]
+  "Update the start position coordenate of the shape."
+  [sid {:keys [x y] :as opts}]
   (sc/validate! +shape-update-position-schema+ opts)
   (reify
     rs/UpdateEvent
     (-apply-update [_ state]
-      (update-in state [:shapes-by-id sid] sh/-initialize opts))))
+      (update-in state [:shapes-by-id sid] sh/-move' [x y]))))
 
 ;; TODO: rename fill to "color" for consistency.
 

src/uxbox/shapes.cljs

@@ -83,23 +83,35 @@
 
 (defmethod -initialize ::shape
   [shape {:keys [x1 y1 x2 y2]}]
-  (merge shape
-         (when x1 {:x x1})
-         (when y1 {:y y1})
-         (when (and x2 x1) {:width (- x2 x1)})
-         (when (and y2 y1) {:height (- y2 y1)})))
+  (assoc shape
+         :x x1
+         :y y1
+         :width (- x2 x1)
+         :height (- y2 y1)))
 
 (defmethod -initialize :builtin/group
-  [shape {:keys [x1 y1 x2 y2]}]
-  shape)
+  [shape {:keys [x1 y1 x2 y2] :as props}]
+  (assoc shape ::initial props))
 
 (defmethod -initialize :builtin/line
   [shape {:keys [x1 y1 x2 y2]}]
-  (merge shape
-         (when x1 {:x1 x1})
-         (when y1 {:y1 y1})
-         (when x2 {:x2 x2})
-         (when y2 {:y2 y2})))
+  (assoc shape
+         :x1 x1
+         :y1 y1
+         :x2 x2
+         :y2 y2))
+
+(defmethod -initialize :builtin/circle
+  [shape {:keys [x1 y1 x2 y2]}]
+  (let [width (- x2 x1)
+        height (- y2 y1)
+
+        rx (/ width 2)
+        ry (/ height 2)
+
+        cx (+ x1 (/ width 2))
+        cy (+ y1 (/ height 2))]
+    (assoc shape :rx rx :ry ry :cx cx :cy cy)))
 
 ;; Resize
 
@@ -108,6 +120,21 @@
   (assoc shape
          :x2 x2 :y2 y2))
 
+(defmethod -resize :builtin/circle
+  [{:keys [cx cy rx ry] :as shape} [x2 y2]]
+  (let [x1 (- cx rx)
+        y1 (- cy ry)
+
+        width (- x2 x1)
+        height (- y2 y1)
+
+        rx (/ width 2)
+        ry (/ height 2)
+
+        cx (+ x1 (/ width 2))
+        cy (+ y1 (/ height 2))]
+    (assoc shape :rx rx :ry ry :cx cx :cy cy)))
+
 (defmethod -resize :builtin/rect
   [shape [x2 y2]]
   (let [{:keys [x y]} shape]
@@ -204,6 +231,16 @@
     (-> (merge shape props)
         (container-rect))))
 
+(defmethod -outer-rect :builtin/circle
+  [{:keys [cx cy rx ry group] :as shape}]
+  (let [group (get-in @st/state [:shapes-by-id group])
+        props {:x (+ (- cx rx) (:dx group 0))
+               :y (+ (- cy ry) (:dy group 0))
+               :width (* rx 2)
+               :height (* ry 2)}]
+    (-> (merge shape props)
+        (container-rect))))
+
 (defmethod -outer-rect :builtin/group
   [{:keys [id group rotation dx dy] :as shape}]
   (let [shapes (->> (:items shape)

src/uxbox/ui/shapes.cljs

@@ -69,6 +69,16 @@
      [:line attrs])))
 
 
+(defmethod sh/-render :builtin/circle
+  [{:keys [id] :as shape}]
+  (let [key (str id)
+        props (select-keys shape [:cx :cy :rx :ry])
+        attrs (-> (extract-style-attrs shape)
+                  (merge {:id key :key key})
+                  (merge props))]
+    (html
+     [:ellipse attrs])))
+
 (defmethod sh/-render :builtin/rect
   [{:keys [id x1 y1 x2 y2] :as shape}]
   (let [key (str id)

src/uxbox/ui/workspace/canvas/draw.cljs

@@ -79,6 +79,7 @@
               (case (:type shape)
                 :builtin/icon (init-icon shape)
                 :builtin/rect (init-shape shape)
+                :builtin/circle (init-shape shape)
                 :builtin/line (init-shape shape))))]
 
     (as-> wb/interactions-b $

src/uxbox/ui/workspace/toolboxes/layers.cljs

@@ -75,6 +75,7 @@
   (case (:type item)
     :builtin/icon (shapes/-render-svg item)
     :builtin/line i/line
+    :builtin/circle i/circle
     :builtin/rect i/box
     :builtin/group i/folder))