introduce scale-offset fn and fix styles

Author: sprocketc

src/renderer/element/impl/box.cljs

@@ -2,7 +2,6 @@
   "This serves as an abstraction for box elements that share the
    :x :y :width :height attributes (e.g. rect, svg, image)."
   (:require
-   [clojure.core.matrix :as matrix]
    [renderer.element.hierarchy :as element.hierarchy]
    [renderer.tool.views :as tool.views]
    [renderer.utils.bounds :as utils.bounds]
@@ -18,7 +17,7 @@
 (defmethod element.hierarchy/scale ::element.hierarchy/box
   [el ratio pivot-point]
   (let [[x y] ratio
-        offset (matrix/sub pivot-point (matrix/mul pivot-point ratio))]
+        offset (utils.element/scale-offset ratio pivot-point)]
     (-> (utils.element/update-attrs-with el * [[:width x] [:height y]])
         (element.hierarchy/translate offset))))
 

src/renderer/element/impl/container/canvas.cljs

@@ -53,12 +53,12 @@
         nearest-neighbor @(rf/subscribe [::snap.subs/nearest-neighbor])
         snapped-el-id (-> nearest-neighbor meta :id)
         snapped-el (when snapped-el-id @(rf/subscribe [::element.subs/entity snapped-el-id]))
-        keyboard-handler #(rf/dispatch-sync [::tool.events/keyboard-event (utils.keyboard/event-formatter %)])]
+        key-handler #(rf/dispatch-sync [::tool.events/keyboard-event (utils.keyboard/event-formatter %)])]
     [:svg#canvas {:on-pointer-up pointer-handler
                   :on-pointer-down pointer-handler
                   :on-pointer-move pointer-handler
-                  :on-key-up keyboard-handler
-                  :on-key-down keyboard-handler
+                  :on-key-up key-handler
+                  :on-key-down key-handler
                   :tab-index 0 ; Enable keyboard events
                   :viewBox viewbox-attr
                   :on-drop drop-handler!

src/renderer/element/impl/custom/blob.cljs

@@ -90,7 +90,7 @@
 
 (defmethod element.hierarchy/scale :blob
   [el ratio pivot-point]
-  (let [offset (matrix/sub pivot-point (matrix/mul pivot-point ratio))
+  (let [offset (utils.element/scale-offset ratio pivot-point)
         ratio (apply min ratio)]
     (-> el
         (attr.hierarchy/update-attr :size * ratio)

src/renderer/element/impl/custom/brush.cljs

@@ -157,16 +157,14 @@
 (defmethod element.hierarchy/scale :brush
   [el ratio pivot-point]
   (let [bbox-min (take 2 (element.hierarchy/bbox el))
-        pivot-point (matrix/sub pivot-point (matrix/mul pivot-point ratio))]
+        offset (utils.element/scale-offset ratio pivot-point)]
     (update-in el
                [:attrs :points]
                #(->> (into [] partition-to-px (utils.attribute/str->seq %))
                      (reduce (fn [points point]
                                (let [rel-point (matrix/sub bbox-min (take 2 point))
-                                     offset (matrix/add pivot-point
-                                                        (matrix/sub rel-point
-                                                                    (matrix/mul rel-point
-                                                                                ratio)))]
+                                     rel-offset (utils.element/scale-offset ratio rel-point)
+                                     offset (matrix/add offset rel-offset)]
                                  (translate offset points point))) [])
                      (string/join " ")))))
 

src/renderer/element/impl/shape/circle.cljs

@@ -32,9 +32,10 @@
 
 (defmethod element.hierarchy/scale :circle
   [el ratio pivot-point]
-  (let [dimensions (utils.bounds/->dimensions (element.hierarchy/bbox el))
-        pivot-point (matrix/sub pivot-point (matrix/div dimensions 2))
-        offset (matrix/sub pivot-point (matrix/mul pivot-point ratio))
+  (let [dimensions (-> el element.hierarchy/bbox utils.bounds/->dimensions)
+        pivot-point (->> (matrix/div dimensions 2)
+                         (matrix/sub pivot-point))
+        offset (utils.element/scale-offset ratio pivot-point)
         ratio (apply min ratio)]
     (-> el
         (attr.hierarchy/update-attr :r * ratio)

src/renderer/element/impl/shape/ellipse.cljs

@@ -33,9 +33,10 @@
 (defmethod element.hierarchy/scale :ellipse
   [el ratio pivot-point]
   (let [[x y] ratio
-        dimensions (utils.bounds/->dimensions (element.hierarchy/bbox el))
-        pivot-point (matrix/sub pivot-point (matrix/div dimensions 2))
-        offset (matrix/sub pivot-point (matrix/mul pivot-point ratio))]
+        dimensions (-> el element.hierarchy/bbox utils.bounds/->dimensions)
+        pivot-point (->> (matrix/div dimensions 2)
+                         (matrix/sub pivot-point))
+        offset (utils.element/scale-offset ratio pivot-point)]
     (-> (utils.element/update-attrs-with el * [[:rx x] [:ry y]])
         (element.hierarchy/translate offset))))
 

src/renderer/element/impl/shape/line.cljs

@@ -34,7 +34,7 @@
         dimensions (utils.bounds/->dimensions (element.hierarchy/bbox el))
         [x y] (matrix/sub dimensions (matrix/mul dimensions ratio))
         pivot-diff (matrix/sub pivot-point dimensions)
-        offset (matrix/sub pivot-diff (matrix/mul pivot-diff ratio))]
+        offset (utils.element/scale-offset ratio pivot-diff)]
     (-> (utils.element/update-attrs-with el + [[(if (< x1 x2) :x1 :x2) x]
                                                [(if (< y1 y2) :y1 :y2) y]])
         (element.hierarchy/translate offset))))

src/renderer/element/impl/shape/path.cljs

@@ -33,11 +33,10 @@
 (defmethod element.hierarchy/scale :path
   [el ratio pivot-point]
   (let [[scale-x scale-y] ratio
+        offset (utils.element/scale-offset ratio pivot-point)
         [x y] (element.hierarchy/bbox el)
-        [x y] (matrix/sub (matrix/add [x y]
-                                      (matrix/sub pivot-point
-                                                  (matrix/mul pivot-point ratio)))
-                          (matrix/mul ratio [x y]))]
+        [x y] (-> (matrix/add [x y] offset)
+                  (matrix/sub (matrix/mul ratio [x y])))]
     (update-in el [:attrs :d] #(-> (svgpath %)
                                    (.scale scale-x scale-y)
                                    (.translate x y)

src/renderer/element/impl/shape/polyshape.cljs

@@ -38,24 +38,29 @@
 (defmethod element.hierarchy/scale ::element.hierarchy/polyshape
   [el ratio pivot-point]
   (let [bounds-min (take 2 (element.hierarchy/bbox el))
-        pivot-point (matrix/sub pivot-point (matrix/mul pivot-point ratio))]
+        offset (utils.element/scale-offset ratio pivot-point)]
     (update-in el
                [:attrs :points]
                #(->> (utils.attribute/str->seq %)
                      (transduce
                       partition-to-px
                       (fn [points point]
                         (let [rel-point (matrix/sub bounds-min point)
-                              offset (matrix/add pivot-point (matrix/sub rel-point (matrix/mul rel-point ratio)))]
+                              offset (->> ratio
+                                          (matrix/mul rel-point)
+                                          (matrix/sub rel-point)
+                                          (matrix/add offset))]
                           (translate offset points point))) [])
                      (string/join " ")
                      (string/trim)))))
 
 (defmethod element.hierarchy/render-edit ::element.hierarchy/polyshape
   [el]
-  [:g (map-indexed (fn [index [x y]]
-                     (let [[x y] (mapv utils.length/unit->px [x y])
-                           [x y] (matrix/add (utils.element/offset el) [x y])]
+  [:g (map-indexed (fn [index point]
+                     (let [offset (utils.element/offset el)
+                           [x y] (->> point
+                                      (mapv utils.length/unit->px)
+                                      (matrix/add offset))]
                        ^{:key index}
                        [tool.views/square-handle {:id (keyword (str index))
                                                   :x x
@@ -87,9 +92,14 @@
         max-y (apply max (map #(utils.length/unit->px (second %)) points))]
     [min-x min-y max-x max-y]))
 
-(defn calc-polygon-area
-  [vertices]
-  (let [count-v (count vertices)]
+(defn ->vertices
+  [el]
+  (-> el :attrs :points points->px))
+
+(defmethod element.hierarchy/area ::element.hierarchy/polyshape
+  [el]
+  (let [vertices (->vertices el)
+        count-v (count vertices)]
     (/ (reduce-kv (fn [area index point]
                     (let [point-b (if (= index (dec count-v))
                                     (first vertices)
@@ -100,17 +110,12 @@
                   0
                   vertices) 2)))
 
-(defmethod element.hierarchy/area ::element.hierarchy/polyshape
-  [{{:keys [points]} :attrs}]
-  (let [points-v (points->px points)]
-    (calc-polygon-area points-v)))
-
 (defmethod element.hierarchy/centroid ::element.hierarchy/polyshape
-  [{{:keys [points]} :attrs}]
-  (let [points-v (points->px points)]
-    (matrix/div (reduce matrix/add [0 0] points-v)
-                (count points-v))))
+  [el]
+  (let [vertices (->vertices el)]
+    (-> (reduce matrix/add [0 0] vertices)
+        (matrix/div (count vertices)))))
 
 (defmethod element.hierarchy/snapping-points ::element.hierarchy/polyshape
-  [{{:keys [points]} :attrs}]
-  (points->px points))
+  [el]
+  (->vertices el))

src/renderer/element/impl/text.cljs

@@ -42,7 +42,7 @@
 
 (defmethod element.hierarchy/scale :text
   [el ratio pivot-point]
-  (let [offset (matrix/sub pivot-point (matrix/mul pivot-point ratio))
+  (let [offset (utils.element/scale-offset ratio pivot-point)
         ratio (apply min ratio)]
     (-> el
         (attr.hierarchy/update-attr :font-size * ratio)

src/renderer/tool/impl/base/edit.cljs

@@ -60,7 +60,8 @@
         db (history.handlers/reset-state db)
         el-id (:element clicked-element)
         handle-id (:id clicked-element)
-        delta (cond-> (matrix/add (tool.handlers/pointer-delta db) (snap.handlers/nearest-delta db))
+        delta (cond-> (matrix/add (tool.handlers/pointer-delta db)
+                                  (snap.handlers/nearest-delta db))
                 (utils.pointer/ctrl? e)
                 (utils.pointer/lock-direction))]
     (cond-> db
@@ -86,8 +87,10 @@
 (defmethod tool.hierarchy/snapping-elements :edit
   [db]
   (let [non-selected-ids (element.handlers/non-selected-ids db)
-        non-selected (select-keys (element.handlers/entities db) (vec non-selected-ids))]
-    (filter :visible (vals non-selected))))
+        non-selected (select-keys (element.handlers/entities db)
+                                  (vec non-selected-ids))]
+    (->> (vals non-selected)
+         (filter :visible))))
 
 (defmethod tool.hierarchy/render :edit
   []

src/renderer/utils/element.cljs

@@ -52,7 +52,9 @@
   [el]
   (let [el-bbox (:bbox el)
         local-bbox (element.hierarchy/bbox el)]
-    (vec (take 2 (matrix/sub el-bbox local-bbox)))))
+    (->> (matrix/sub el-bbox local-bbox)
+         (take 2)
+         (vec))))
 
 (m/=> snapping-points [:-> Element SnapOptions [:* Vec2]])
 (defn snapping-points
@@ -151,3 +153,10 @@
   [el f attrs-map]
   (reduce (fn [el [k & more]]
             (apply attribute.hierarchy/update-attr el k f more)) el attrs-map))
+
+(m/=> scale-offset [:-> Vec2 Vec2 Vec2])
+(defn scale-offset
+  [ratio pivot-point]
+  (->> ratio
+       (matrix/mul pivot-point)
+       (matrix/sub pivot-point)))