Make path resizable.

src/uxbox/main/geom.cljs

@@ -42,7 +42,8 @@
     :rect (move-rect shape dpoint)
     :text (move-rect shape dpoint)
     :line (move-rect shape dpoint)
-    :path (move-path shape dpoint)
+    ;; :path (move-path shape dpoint)
+    :path (move-rect shape dpoint)
     :circle (move-circle shape dpoint)
     :group (move-group shape dpoint)))
 
@@ -141,7 +142,8 @@
     :text (rect-size shape)
     :rect (rect-size shape)
     :icon (rect-size shape)
-    :line (rect-size shape)))
+    :line (rect-size shape)
+    :path (rect-size shape)))
 
 (defn- rect-size
   "A specialized function for calculate size
@@ -176,7 +178,6 @@
     :bottom (gpt/point (/ (+ x1 x2) 2)
                        (/ (+ y1 y2) 2))))
 
-
 (defn- get-circle-vertext-point
   [{:keys [rx ry]} id]
   (gpt/point rx ry))
@@ -194,6 +195,7 @@
     :rect (move-rect-vertex shape vid dpoint)
     :text (move-rect-vertex shape vid dpoint)
     :icon (move-rect-vertex shape vid dpoint)
+    :path (move-rect-vertex shape vid dpoint)
     :circle (move-circle-vertex shape vid dpoint)))
 
 (defn- move-rect-vertex
@@ -260,6 +262,7 @@
     :icon (resize-rect shape point)
     :text (resize-rect shape point)
     :line (resize-line shape point)
+    :path (resize-rect shape point)
     :circle (resize-circle shape point)))
 
 (defn- resize-rect
@@ -443,7 +446,8 @@
                  :text (generic-outer-rect state shape)
                  :icon (generic-outer-rect state shape)
                  :line (generic-outer-rect state shape)
-                 :path (path-outer-rect state shape)
+                 :path (generic-outer-rect state shape)
+                 ;; :path (path-outer-rect state shape)
                  :circle (circle-outer-rect state shape)
                  :group (group-outer-rect state shape))]
      (if (:group shape)
@@ -579,6 +583,7 @@
 (declare text-transformation-matrix)
 (declare circle-transformation-matrix)
 (declare icon-transformation-matrix)
+(declare path-transformation-matrix)
 (declare group-transformation-matrix)
 
 (defn transformation-matrix
@@ -590,6 +595,7 @@
      :text (text-transformation-matrix state shape)
      :circle (circle-transformation-matrix state shape)
      :icon (icon-transformation-matrix state shape)
+     :path (path-transformation-matrix state shape)
      :group (group-transformation-matrix state shape))))
 
 (defn- rect-transformation-matrix
@@ -628,6 +634,22 @@
         (gmt/translate (- center-x) (- center-y))
         (gmt/scale scale-x scale-y))))
 
+(defn- path-transformation-matrix
+  [state {:keys [x1 y1 rotation view-box] :or {rotation 0} :as shape}]
+  (let [{:keys [width height]} (size shape)
+        orig-width (nth view-box 2)
+        orig-height (nth view-box 3)
+        scale-x (/ width orig-width)
+        scale-y (/ height orig-height)
+        center-x (- width (/ width 2))
+        center-y (- height (/ height 2))]
+    (-> (gmt/matrix)
+        (gmt/translate x1 y1)
+        (gmt/translate center-x center-y)
+        (gmt/rotate rotation)
+        (gmt/translate (- center-x) (- center-y))
+        (gmt/scale scale-x scale-y))))
+
 (defn- circle-transformation-matrix
   [state {:keys [cx cy rx ry rotation] :or {rotation 0} :as shape}]
   (-> (gmt/matrix)

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

@@ -26,6 +26,7 @@
 
 (defn render-component
   [{:keys [type] :as shape}]
+  ;; (println "render-component" (pr-str shape))
   (case type
     :group (group-component shape)
     :text (text/text-component shape)

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

@@ -19,11 +19,9 @@
   [{:keys [id] :as shape}]
   (let [selected (mx/react common/selected-shapes-ref)
         selected? (contains? selected id)
-        on-mouse-down #(common/on-mouse-down % shape selected)
+        on-mouse-down #(common/on-mouse-down % shape selected)]
-        ]
     [:g.shape {:class (when selected? "selected")
-               :on-mouse-down on-mouse-down
+               :on-mouse-down on-mouse-down}
-               }
      (path-shape shape identity)]))
 
 ;; --- Path Shape
@@ -39,10 +37,11 @@
 
 (mx/defc path-shape
   {:mixins [mx/static]}
-  [{:keys [id] :as shape}]
+  [{:keys [id drawing?] :as shape}]
   (let [key (str "shape-" id)
-        props {:d (render-path shape)}
+        rfm (geom/transformation-matrix shape)
         attrs (-> (attrs/extract-style-attrs shape)
-                  (merge {:id key :key key})
+                  (merge {:id key :key key :d (render-path shape)})
-                  (merge props))]
+                  (merge (when-not drawing?
+                           {:transform (str rfm)})))]
     [:path attrs]))

src/uxbox/main/ui/workspace/drawarea.cljs

@@ -101,17 +101,15 @@
                                   (uds/align-point point)
                                   (rx/of point))))
                    (rx/map #(gpt/subtract % canvas-coords)))
-
         stoper (->> wb/events-s
                     (rx/map first)
                     (rx/filter #(= % :mouse/double-click))
                     (rx/take 1))
-        ;; stoper (rx/empty)
         firstpos (rx/take 1 mouse)
         stream (->> (rx/take-until stoper mouse)
                     (rx/skip-while #(nil? @drawing-shape))
                     (rx/with-latest-from vector wb/mouse-ctrl-s))
-        ptstream (->> wb/events-s
+        ptstream (->> (rx/take-until stoper wb/events-s)
                       (rx/map first)
                       (rx/filter #(= % :mouse/click))
                       (rx/with-latest-from vector mouse)
@@ -127,25 +125,49 @@
                 (if (= (count points) index)
                   (append-point shape point)
                   (assoc-in shape [:points index] point))))
+
+            (normalize-shape [{:keys [points] :as shape}]
+              (let [minx (apply min (map :x points))
+                    miny (apply min (map :y points))
+                    maxx (apply max (map :x points))
+                    maxy (apply max (map :y points))
+
+                    dx (- 0 minx)
+                    dy (- 0 miny)
+                    points (mapv #(gpt/add % [dx dy]) points)
+                    width (- maxx minx)
+                    height (- maxy miny)]
+
+                (assoc shape
+                       :x1 minx
+                       :y1 miny
+                       :x2 maxx
+                       :y2 maxy
+                       :view-box [0 0 width height]
+                       :points points)))
+
             (on-first-point [point]
-              (println "on-first-point" point)
               (let [shape (append-point shape point)]
                 (swap! counter inc)
                 (reset! drawing-shape shape)))
+
             (on-click [point]
               (let [shape (append-point @drawing-shape point)]
                 (swap! counter inc)
                 (reset! drawing-shape shape)))
+
             (on-draw [[point ctrl?]]
               (let [shape (update-point @drawing-shape point @counter)]
                 (reset! drawing-shape shape)))
+
             (on-end []
-              (let [shape @drawing-shape]
+              (let [shape (normalize-shape @drawing-shape)]
+                (println "on-end" shape)
                 (rs/emit! (uds/add-shape shape)
                           (udw/select-for-drawing nil)
                           (uds/select-first-shape))
-                (reset! drawing-position nil)
                 (reset! drawing-shape nil)
+                (reset! drawing-position nil)
                 (rlocks/release! :ui/draw)))]
 
       (rx/subscribe firstpos on-first-point)