From 009d27b23dbecaa708582253a660b8ef880bb934 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Fri, 29 Jan 2016 19:49:08 +0200 Subject: [PATCH] Add circle/elipse rendering. --- src/uxbox/data/workspace.cljs | 10 +++- src/uxbox/shapes.cljs | 61 ++++++++++++++++---- src/uxbox/ui/shapes.cljs | 10 ++++ src/uxbox/ui/workspace/canvas/draw.cljs | 1 + src/uxbox/ui/workspace/toolboxes/layers.cljs | 1 + 5 files changed, 68 insertions(+), 15 deletions(-) diff --git a/src/uxbox/data/workspace.cljs b/src/uxbox/data/workspace.cljs index 65709b1dac..05e62ea7be 100644 --- a/src/uxbox/data/workspace.cljs +++ b/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. diff --git a/src/uxbox/shapes.cljs b/src/uxbox/shapes.cljs index 15aa6fc2b3..1e3d6f54eb 100644 --- a/src/uxbox/shapes.cljs +++ b/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) diff --git a/src/uxbox/ui/shapes.cljs b/src/uxbox/ui/shapes.cljs index 42edcdf03f..b9449b65e8 100644 --- a/src/uxbox/ui/shapes.cljs +++ b/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) diff --git a/src/uxbox/ui/workspace/canvas/draw.cljs b/src/uxbox/ui/workspace/canvas/draw.cljs index f5bbdaf40a..c883af76b7 100644 --- a/src/uxbox/ui/workspace/canvas/draw.cljs +++ b/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 $ diff --git a/src/uxbox/ui/workspace/toolboxes/layers.cljs b/src/uxbox/ui/workspace/toolboxes/layers.cljs index d5037319d6..5957727158 100644 --- a/src/uxbox/ui/workspace/toolboxes/layers.cljs +++ 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))