Merge pull request #2799 from penpot/alotor-polishing-5

Polishing

common/src/app/common/geom/point.cljc

@@ -274,12 +274,12 @@
    (Point. (mth/precision (dm/get-prop pt :x) decimals)
            (mth/precision (dm/get-prop pt :y) decimals))))
 
-(defn half-round
+(defn round-step
   "Round the coordinates to the closest half-point"
-  [pt]
+  [pt step]
   (assert (point? pt) "expected point instance")
-  (Point. (mth/half-round (dm/get-prop pt :x))
+  (Point. (mth/round (dm/get-prop pt :x) step)
-          (mth/half-round (dm/get-prop pt :y))))
+          (mth/round (dm/get-prop pt :y) step)))
 
 (defn transform
   "Transform a point applying a matrix transformation."

common/src/app/common/geom/shapes/modifiers.cljc

@@ -382,15 +382,24 @@
     result))
 
 (defn set-objects-modifiers
-  ([modif-tree objects ignore-constraints snap-pixel?]
+  ([modif-tree objects]
-   (set-objects-modifiers nil modif-tree objects ignore-constraints snap-pixel?))
+   (set-objects-modifiers modif-tree objects nil))
 
-  ([old-modif-tree modif-tree objects ignore-constraints snap-pixel?]
+  ([modif-tree objects params]
+   (set-objects-modifiers nil modif-tree objects params))
+
+  ([old-modif-tree modif-tree objects
+    {:keys [ignore-constraints snap-pixel? snap-precision]
+     :or {ignore-constraints false snap-pixel? false snap-precision 1}}]
    (let [objects (-> objects
                      (cond-> (some? old-modif-tree)
                        (apply-structure-modifiers old-modif-tree))
                      (apply-structure-modifiers modif-tree))
 
+         modif-tree
+         (cond-> modif-tree
+           snap-pixel? (gpp/adjust-pixel-precision objects snap-precision))
+
          bounds (d/lazy-map (keys objects) #(dm/get-in objects [% :points]))
          bounds (cond-> bounds
                   (some? old-modif-tree)
@@ -417,11 +426,7 @@
          modif-tree
          (if old-modif-tree
            (merge-modif-tree old-modif-tree modif-tree)
-           modif-tree)
+           modif-tree)]
-
-         modif-tree
-         (cond-> modif-tree
-           snap-pixel? (gpp/adjust-pixel-precision objects))]
 
      ;;#?(:cljs
      ;;   (.log js/console ">result" (modif->js modif-tree objects)))

common/src/app/common/geom/shapes/pixel_precision.cljc

@@ -18,7 +18,7 @@
    [app.common.types.modifiers :as ctm]))
 
 (defn size-pixel-precision
-  [modifiers shape points]
+  [modifiers shape points precision]
   (let [origin        (gpo/origin points)
         curr-width    (gpo/width-points points)
         curr-height   (gpo/height-points points)
@@ -29,8 +29,8 @@
         vertical-line?   (and path? (<= curr-width 0.01))
         horizontal-line? (and path? (<= curr-height 0.01))
 
-        target-width  (if vertical-line? curr-width (max 1 (mth/round curr-width)))
+        target-width  (if vertical-line? curr-width (max 1 (mth/round curr-width precision)))
-        target-height (if horizontal-line? curr-height (max 1 (mth/round curr-height)))
+        target-height (if horizontal-line? curr-height (max 1 (mth/round curr-height precision)))
 
         ratio-width  (/ target-width curr-width)
         ratio-height (/ target-height curr-height)
@@ -39,23 +39,23 @@
         (ctm/resize scalev origin transform transform-inverse {:precise? true}))))
 
 (defn position-pixel-precision
-  [modifiers _ points]
+  [modifiers _ points precision]
   (let [bounds        (gpr/bounds->rect points)
         corner        (gpt/point bounds)
-        target-corner (gpt/round corner)
+        target-corner (gpt/round-step corner precision)
         deltav        (gpt/to-vec corner target-corner)]
     (ctm/move modifiers deltav)))
 
 (defn set-pixel-precision
   "Adjust modifiers so they adjust to the pixel grid"
-  [modifiers shape]
+  [modifiers shape precision]
   (let [points (-> shape :points (gco/transform-points (ctm/modifiers->transform modifiers)))
         has-resize? (not (ctm/only-move? modifiers))
 
         [modifiers points]
         (let [modifiers
               (cond-> modifiers
-                has-resize? (size-pixel-precision shape points))
+                has-resize? (size-pixel-precision shape points precision))
 
               points
               (if has-resize?
@@ -63,16 +63,16 @@
                     (gco/transform-points (ctm/modifiers->transform modifiers)) )
                 points)]
           [modifiers points])]
-    (position-pixel-precision modifiers shape points)))
+    (position-pixel-precision modifiers shape points precision)))
 
 (defn adjust-pixel-precision
-  [modif-tree objects]
+  [modif-tree objects precision]
   (let [update-modifiers
         (fn [modif-tree shape]
           (let [modifiers (dm/get-in modif-tree [(:id shape) :modifiers])]
             (cond-> modif-tree
               (ctm/has-geometry? modifiers)
-              (update-in [(:id shape) :modifiers] set-pixel-precision shape))))]
+              (update-in [(:id shape) :modifiers] set-pixel-precision shape precision))))]
 
     (->> (keys modif-tree)
          (map (d/getf objects))

common/src/app/common/math.cljc

@@ -104,15 +104,16 @@
 
 (defn round
   "Returns the value of a number rounded to
-  the nearest integer."
+  the nearest integer.
-  [v]
+  If given step rounds to the next closest step, for example:
-  #?(:cljs (js/Math.round v)
+  (round 13.4 0.5) => 13.5
-     :clj (Math/round (float v))))
+  (round 13.4 0.3) => 13.3"
+  ([v step]
+   (* (round (/ v step)) step))
 
-(defn half-round
+  ([v]
-  "Returns a value rounded to the next point or half point"
+   #?(:cljs (js/Math.round v)
-  [v]
+      :clj (Math/round (float v)))))
-  (/ (round (* v 2)) 2))
 
 (defn ceil
   "Returns the smallest integer greater than

common/test/common_tests/geom_point_test.cljc

@@ -203,7 +203,7 @@
 
 (t/deftest halft-round-point
   (let [p1 (gpt/point 1.34567 3.34567)
-        rs (gpt/half-round p1)]
+        rs (gpt/round-step p1 0.5)]
     (t/is (gpt/point? rs))
     (t/is (mth/close? 1.5 (:x rs)))
     (t/is (mth/close? 3.5 (:y rs)))))

frontend/src/app/main/constants.cljs

@@ -190,3 +190,5 @@
    {:name "YouTube thumb"
     :width 1280
     :height 720}])
+
+(def zoom-half-pixel-precision 8)

frontend/src/app/main/data/workspace/drawing/box.cljs

@@ -16,6 +16,7 @@
    [app.common.types.shape-tree :as ctst]
    [app.common.types.shape.layout :as ctl]
    [app.common.uuid :as uuid]
+   [app.main.constants :refer [zoom-half-pixel-precision]]
    [app.main.data.workspace.drawing.common :as common]
    [app.main.data.workspace.state-helpers :as wsh]
    [app.main.snap :as snap]
@@ -70,14 +71,15 @@
       (let [stoper? #(or (ms/mouse-up? %) (= % :interrupt))
             stoper  (rx/filter stoper? stream)
             layout  (get state :workspace-layout)
+            zoom       (get-in state [:workspace-local :zoom] 1)
             snap-pixel? (contains? layout :snap-pixel-grid)
 
-            initial (cond-> @ms/mouse-position snap-pixel? gpt/round)
+            snap-precision (if (>= zoom zoom-half-pixel-precision) 0.5 1)
+            initial (cond-> @ms/mouse-position snap-pixel? (gpt/round-step snap-precision))
 
             page-id    (:current-page-id state)
             objects    (wsh/lookup-page-objects state page-id)
             focus      (:workspace-focus-selected state)
-            zoom       (get-in state [:workspace-local :zoom] 1)
 
             fid        (ctst/top-nested-frame objects initial)
             layout?    (ctl/layout? objects fid)
@@ -119,7 +121,7 @@
                         (rx/map #(conj current %)))))
                 (rx/map
                  (fn [[_ shift? point]]
-                   #(update-drawing % initial (cond-> point snap-pixel? gpt/round) shift?)))))
+                   #(update-drawing % initial (cond-> point snap-pixel? (gpt/round-step snap-precision)) shift?)))))
           (rx/take-until stoper))
 
          (->> (rx/of (common/handle-finish-drawing))

frontend/src/app/main/data/workspace/media.cljs

@@ -8,6 +8,7 @@
   (:require
    [app.common.exceptions :as ex]
    [app.common.logging :as log]
+   [app.common.math :as mth]
    [app.common.pages.changes-builder :as pcb]
    [app.common.spec :as us]
    [app.common.types.container :as ctn]
@@ -52,8 +53,8 @@
             shape {:name name
                    :width width
                    :height height
-                   :x (- x (/ width 2))
+                   :x (mth/round (- x (/ width 2)))
-                   :y (- y (/ height 2))
+                   :y (mth/round (- y (/ height 2)))
                    :metadata {:width width
                               :height height
                               :mtype mtype

frontend/src/app/main/data/workspace/modifiers.cljs

@@ -17,6 +17,7 @@
    [app.common.spec :as us]
    [app.common.types.modifiers :as ctm]
    [app.common.types.shape.layout :as ctl]
+   [app.main.constants :refer [zoom-half-pixel-precision]]
    [app.main.data.workspace.changes :as dch]
    [app.main.data.workspace.comments :as-alias dwcm]
    [app.main.data.workspace.guides :as-alias dwg]
@@ -244,12 +245,15 @@
          (wsh/lookup-page-objects state)
 
          snap-pixel?
-         (and (not ignore-snap-pixel) (contains? (:workspace-layout state) :snap-pixel-grid))]
+         (and (not ignore-snap-pixel) (contains? (:workspace-layout state) :snap-pixel-grid))
+
+         zoom (dm/get-in state [:workspace-local :zoom])
+         snap-precision (if (>= zoom zoom-half-pixel-precision) 0.5 1)]
 
      (as-> objects $
        (apply-text-modifiers $ (get state :workspace-text-modifier))
        ;;(apply-path-modifiers $ (get-in state [:workspace-local :edit-path]))
-       (gsh/set-objects-modifiers modif-tree $ ignore-constraints snap-pixel?)))))
+       (gsh/set-objects-modifiers modif-tree $ {:ignore-constraints ignore-constraints :snap-pixel? snap-pixel? :snap-precision snap-precision})))))
 
 (defn- calculate-update-modifiers
   [old-modif-tree state ignore-constraints ignore-snap-pixel modif-tree]
@@ -259,10 +263,13 @@
         snap-pixel?
         (and (not ignore-snap-pixel) (contains? (:workspace-layout state) :snap-pixel-grid))
 
+        zoom (dm/get-in state [:workspace-local :zoom])
+
+        snap-precision (if (>= zoom zoom-half-pixel-precision) 0.5 1)
         objects
         (-> objects
             (apply-text-modifiers (get state :workspace-text-modifier)))]
-    (gsh/set-objects-modifiers old-modif-tree modif-tree objects ignore-constraints snap-pixel?)))
+    (gsh/set-objects-modifiers old-modif-tree modif-tree objects {:ignore-constraints ignore-constraints :snap-pixel? snap-pixel? :snap-precision snap-precision})))
 
 (defn update-modifiers
   ([modif-tree]
@@ -312,7 +319,7 @@
 
              modif-tree
              (-> (build-modif-tree ids objects get-modifier)
-                 (gsh/set-objects-modifiers objects false false))]
+                 (gsh/set-objects-modifiers objects))]
 
          (assoc state :workspace-modifiers modif-tree))))))
 

frontend/src/app/main/data/workspace/path/streams.cljs

@@ -8,6 +8,7 @@
   (:require
    [app.common.geom.point :as gpt]
    [app.common.geom.shapes.path :as upg]
+   [app.main.constants :refer [zoom-half-pixel-precision]]
    [app.main.data.workspace.path.state :as state]
    [app.main.snap :as snap]
    [app.main.store :as st]
@@ -17,7 +18,6 @@
    [potok.core :as ptk]))
 
 (defonce drag-threshold 5)
-(def zoom-half-pixel-precision 8)
 
 (defn dragging? [start zoom]
   (fn [current]
@@ -36,7 +36,7 @@
       position
 
       (>= zoom zoom-half-pixel-precision)
-      (gpt/half-round position)
+      (gpt/round-step position 0.5)
 
       :else
       (gpt/round position))))

frontend/src/app/main/data/workspace/svg_upload.cljs

@@ -11,6 +11,7 @@
    [app.common.geom.matrix :as gmt]
    [app.common.geom.point :as gpt]
    [app.common.geom.shapes :as gsh]
+   [app.common.math :as mth]
    [app.common.pages.changes-builder :as pcb]
    [app.common.pages.helpers :as cph]
    [app.common.spec :as us :refer [max-safe-int min-safe-int]]
@@ -477,15 +478,17 @@
        (rx/reduce (fn [acc [url image]] (assoc acc url image)) {})))
 
 (defn create-svg-shapes
-  [svg-data {:keys [x y] :as position} objects frame-id parent-id selected center?]
+  [svg-data {:keys [x y]} objects frame-id parent-id selected center?]
   (try
     (let [[vb-x vb-y vb-width vb-height] (svg-dimensions svg-data)
-          x (if center?
+          x (mth/round
-              (- x vb-x (/ vb-width 2))
+             (if center?
-              x)
+               (- x vb-x (/ vb-width 2))
-          y (if center?
+               x))
-              (- y vb-y (/ vb-height 2))
+          y (mth/round
-              y)
+             (if center?
+               (- y vb-y (/ vb-height 2))
+               y))
 
           unames (ctst/retrieve-used-names objects)
 

frontend/src/app/main/data/workspace/transforms.cljs

@@ -240,14 +240,12 @@
     ptk/UpdateEvent
     (update [_ state]
       (let [objects (wsh/lookup-page-objects state)
-            snap-pixel? (and (contains? (:workspace-layout state) :snap-pixel-grid)
-                             (int? value))
             get-modifier
             (fn [shape] (ctm/change-dimensions-modifiers shape attr value))
 
             modif-tree
             (-> (dwm/build-modif-tree ids objects get-modifier)
-                (gsh/set-objects-modifiers objects false snap-pixel?))]
+                (gsh/set-objects-modifiers objects))]
 
         (assoc state :workspace-modifiers modif-tree)))
 
@@ -265,14 +263,13 @@
     ptk/UpdateEvent
     (update [_ state]
       (let [objects     (wsh/lookup-page-objects state)
-            snap-pixel? (contains? (get state :workspace-layout) :snap-pixel-grid)
 
             get-modifier
             (fn [shape] (ctm/change-orientation-modifiers shape orientation))
 
             modif-tree
             (-> (dwm/build-modif-tree ids objects get-modifier)
-                (gsh/set-objects-modifiers objects false snap-pixel?))]
+                (gsh/set-objects-modifiers objects))]
 
         (assoc state :workspace-modifiers modif-tree)))
 
@@ -623,7 +620,7 @@
               (->> move-events
                    (rx/scan #(gpt/add %1 mov-vec) (gpt/point 0 0))
                    (rx/map #(dwm/create-modif-tree selected (ctm/move-modifiers %)))
-                   (rx/map (partial dwm/set-modifiers))
+                   (rx/map #(dwm/set-modifiers % false true))
                    (rx/take-until stopper))
               (rx/of (nudge-selected-shapes direction shift?)))
 
@@ -669,11 +666,12 @@
             cpos (gpt/point (:x bbox) (:y bbox))
             pos  (gpt/point (or (:x position) (:x bbox))
                             (or (:y position) (:y bbox)))
+
             delta (gpt/subtract pos cpos)
 
             modif-tree (dwm/create-modif-tree [id] (ctm/move-modifiers delta))]
 
-        (rx/of (dwm/set-modifiers modif-tree)
+        (rx/of (dwm/set-modifiers modif-tree false true)
                (dwm/apply-modifiers))))))
 
 (defn- move-shapes-to-frame
@@ -688,7 +686,6 @@
 
             shapes (->> ids (cph/clean-loops objects) (keep lookup))
 
-
             moving-shapes
             (cond->> shapes
               (not layout?)

frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs

@@ -11,6 +11,7 @@
    [app.common.geom.matrix :as gmt]
    [app.common.geom.point :as gpt]
    [app.common.geom.shapes :as gsh]
+   [app.common.pages.helpers :as cph]
    [app.common.types.modifiers :as ctm]
    [app.main.store :as st]
    [app.main.ui.hooks :as hooks]
@@ -30,14 +31,14 @@
 
 (defn get-nodes
   "Retrieve the DOM nodes to apply the matrix transformation"
-  [base-node {:keys [id type masked-group?] :as shape}]
+  [base-node {:keys [id parent-id] :as shape}]
   (when (some? base-node)
-    (let [shape-node (get-shape-node base-node id)
+    (let [shape-node     (get-shape-node base-node id)
-
+          parent-node    (get-shape-node base-node parent-id)
-          frame? (= :frame type)
+          frame?         (cph/frame-shape? shape)
-          group? (= :group type)
+          group?         (cph/group-shape? shape)
-          text? (= :text type)
+          text?          (cph/text-shape? shape)
-          mask?  (and group? masked-group?)]
+          masking-child? (:masking-child? (meta shape))]
       (cond
         frame?
         [shape-node
@@ -48,9 +49,10 @@
 
         ;; For groups we don't want to transform the whole group but only
         ;; its filters/masks
-        mask?
+        masking-child?
-        [(dom/query shape-node ".mask-clip-path")
+        [shape-node
-         (dom/query shape-node ".mask-shape")]
+         (dom/query parent-node ".mask-clip-path")
+         (dom/query parent-node ".mask-shape")]
 
         group?
         (let [shape-defs (dom/query shape-node "defs")]
@@ -74,10 +76,12 @@
              (-> (dom/get-attribute node "data-old-width") d/parse-double)
              (-> (dom/get-attribute node "data-old-height") d/parse-double))
             (gsh/transform-selrect modifiers))]
-    (dom/set-attribute! node "x" x)
+
-    (dom/set-attribute! node "y" y)
+    (when (and (some? x) (some? y) (some? width) (some? height))
-    (dom/set-attribute! node "width" width)
+      (dom/set-attribute! node "x" x)
-    (dom/set-attribute! node "height" height)))
+      (dom/set-attribute! node "y" y)
+      (dom/set-attribute! node "width" width)
+      (dom/set-attribute! node "height" height))))
 
 (defn start-transform!
   [base-node shapes]
@@ -169,6 +173,11 @@
             (or (= (dom/get-tag-name node) "mask")
                 (= (dom/get-tag-name node) "filter"))
             (do
+              (dom/set-attribute! node "x" (dom/get-attribute node "data-old-x"))
+              (dom/set-attribute! node "y" (dom/get-attribute node "data-old-y"))
+              (dom/set-attribute! node "width" (dom/get-attribute node "data-old-width"))
+              (dom/set-attribute! node "height" (dom/get-attribute node "data-old-height"))
+
               (dom/remove-attribute! node "data-old-x")
               (dom/remove-attribute! node "data-old-y")
               (dom/remove-attribute! node "data-old-width")
@@ -190,6 +199,18 @@
     (-> modifiers
         (ctm/resize scalev (-> shape' :points first) (:transform shape') (:transform-inverse shape')))))
 
+(defn add-masking-child?
+  "Adds to the object the information about if the current shape is a masking child. We use the metadata
+  to not adding new parameters to the object."
+  [objects]
+  (fn [{:keys [id parent-id] :as shape}]
+    (let [parent (get objects parent-id)
+          masking-child? (and (cph/mask-shape? parent) (= id (first (:shapes parent))))]
+
+      (cond-> shape
+        masking-child?
+        (with-meta {:masking-child? true})))))
+
 (defn use-dynamic-modifiers
   [objects node modifiers]
 
@@ -198,11 +219,15 @@
          (mf/deps modifiers)
          (fn []
            (when (some? modifiers)
-             (d/mapm (fn [id {modifiers :modifiers}]
+             (d/mapm (fn [id {current-modifiers :modifiers}]
                        (let [shape (get objects id)
-                             adapt-text? (and (= :text (:type shape)) (not (ctm/only-move? modifiers)))
+                             adapt-text? (and (= :text (:type shape)) (not (ctm/only-move? current-modifiers)))
-                             modifiers (cond-> modifiers adapt-text? (adapt-text-modifiers shape))]
+
-                         (ctm/modifiers->transform modifiers)))
+                             current-modifiers
+                             (cond-> current-modifiers
+                               adapt-text?
+                               (adapt-text-modifiers shape))]
+                         (ctm/modifiers->transform current-modifiers)))
                      modifiers))))
 
         add-children (mf/use-memo (mf/deps modifiers) #(ctm/added-children-frames modifiers))
@@ -215,7 +240,7 @@
          (fn []
            (->> (keys transforms)
                 (filter #(some? (get transforms %)))
-                (mapv (d/getf objects)))))
+                (mapv (comp (add-masking-child? objects) (d/getf objects))))))
 
         prev-shapes (mf/use-var nil)
         prev-modifiers (mf/use-var nil)
@@ -252,7 +277,6 @@
     (mf/use-layout-effect
      (mf/deps transforms)
      (fn []
-
        (let [curr-shapes-set (into #{} (map :id) shapes)
              prev-shapes-set (into #{} (map :id) @prev-shapes)
 
@@ -266,7 +290,7 @@
            (update-transform! node shapes transforms modifiers))
 
          (when (d/not-empty? removed-shapes)
-           (remove-transform! node @prev-shapes)))
+           (remove-transform! node removed-shapes)))
 
        (reset! prev-modifiers modifiers)
        (reset! prev-transforms transforms)

frontend/src/app/main/ui/workspace/viewport/widgets.cljs

@@ -22,6 +22,7 @@
    [app.main.ui.workspace.viewport.path-actions :refer [path-actions]]
    [app.main.ui.workspace.viewport.utils :as vwu]
    [app.util.dom :as dom]
+   [app.util.timers :as ts]
    [debug :refer [debug?]]
    [rumext.v2 :as mf]))
 
@@ -86,7 +87,8 @@
 
 
 (mf/defc frame-title
-  {::mf/wrap [mf/memo]}
+  {::mf/wrap [mf/memo
+              #(mf/deferred % ts/raf)]}
   [{:keys [frame selected? zoom show-artboard-names? on-frame-enter on-frame-leave on-frame-select]}]
   (let [workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
         on-mouse-down