3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-10 10:01:39 +02:00
Code Issues Projects Releases Packages Wiki Activity

⚡ better rules performance

Browse source
This commit is contained in:
Aitor 2023-05-04 12:46:37 +02:00
parent 86b0e95458
commit 19727a648d
3 changed files with 63 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/app/main/data/workspace/zoom.cljs
View file

@ -25,6 +25,7 @@
vbox' (gsh/transform-rect vbox mtx)] vbox' (gsh/transform-rect vbox mtx)]
(-> local (-> local
(assoc :zoom new-zoom) (assoc :zoom new-zoom)
(assoc :zoom-inverse (/ 1 new-zoom))
(update :vbox merge (select-keys vbox' [:x :y :width :height]))))) (update :vbox merge (select-keys vbox' [:x :y :width :height])))))
(defn increase-zoom (defn increase-zoom

2
frontend/src/app/main/ui/workspace/viewport.cljs
View file

@ -79,6 +79,7 @@
vbox vbox
vport vport
zoom zoom
zoom-inverse
edition]} wlocal edition]} wlocal
{:keys [options-mode {:keys [options-mode
@ -509,6 +510,7 @@
(when show-rules? (when show-rules?
[:& rules/rules [:& rules/rules
{:zoom zoom {:zoom zoom
:zoom-inverse zoom-inverse
:vbox vbox :vbox vbox
:selected-shapes selected-shapes :selected-shapes selected-shapes
:offset-x offset-x :offset-x offset-x

118
frontend/src/app/main/ui/workspace/viewport/rules.cljs
View file

@ -53,33 +53,33 @@
:else 1)) :else 1))
(defn get-clip-area (defn get-clip-area
[vbox zoom axis] [vbox zoom-inverse axis]
(if (= axis :x) (if (= axis :x)
(let [x (+ (:x vbox) (/ 25 zoom)) (let [x (+ (:x vbox) (* 25 zoom-inverse))
y (:y vbox) y (:y vbox)
width (- (:width vbox) (/ 21 zoom)) width (- (:width vbox) (* 21 zoom-inverse))
height (/ 25 zoom)] height (* 25 zoom-inverse)]
{:x x :y y :width width :height height}) {:x x :y y :width width :height height})
(let [x (:x vbox) (let [x (:x vbox)
y (+ (:y vbox) (/ 25 zoom)) y (+ (:y vbox) (* 25 zoom-inverse))
width (/ 25 zoom) width (* 25 zoom-inverse)
height (- (:height vbox) (/ 21 zoom))] height (- (:height vbox) (* 21 zoom-inverse))]
{:x x :y y :width width :height height}))) {:x x :y y :width width :height height})))
(defn get-background-area (defn get-background-area
[vbox zoom axis] [vbox zoom-inverse axis]
(if (= axis :x) (if (= axis :x)
(let [x (:x vbox) (let [x (:x vbox)
y (:y vbox) y (:y vbox)
width (:width vbox) width (:width vbox)
height (/ rule-area-size zoom)] height (* rule-area-size zoom-inverse)]
{:x x :y y :width width :height height}) {:x x :y y :width width :height height})
(let [x (:x vbox) (let [x (:x vbox)
y (+ (:y vbox) (/ rule-area-size zoom)) y (+ (:y vbox) (* rule-area-size zoom-inverse))
width (/ rule-area-size zoom) width (* rule-area-size zoom-inverse)
height (- (:height vbox) (/ 21 zoom))] height (- (:height vbox) (* 21 zoom-inverse))]
{:x x :y y :width width :height height}))) {:x x :y y :width width :height height})))
(defn get-rule-params (defn get-rule-params
@ -94,39 +94,39 @@
{:start start :end end}))) {:start start :end end})))
(defn get-rule-axis (defn get-rule-axis
[val vbox zoom axis] [val vbox zoom-inverse axis]
(let [rules-pos (/ rules-pos zoom) (let [rules-pos (* rules-pos zoom-inverse)
rules-size (/ rules-size zoom)] rules-size (* rules-size zoom-inverse)]
(if (= axis :x) (if (= axis :x)
{:text-x val {:text-x val
:text-y (+ (:y vbox) (- rules-pos (/ 4 zoom))) :text-y (+ (:y vbox) (- rules-pos (* 4 zoom-inverse)))
:line-x1 val :line-x1 val
:line-y1 (+ (:y vbox) rules-pos (/ 2 zoom)) :line-y1 (+ (:y vbox) rules-pos (* 2 zoom-inverse))
:line-x2 val :line-x2 val
:line-y2 (+ (:y vbox) rules-pos (/ 2 zoom) rules-size)} :line-y2 (+ (:y vbox) rules-pos (* 2 zoom-inverse) rules-size)}
{:text-x (+ (:x vbox) (- rules-pos (/ 4 zoom))) {:text-x (+ (:x vbox) (- rules-pos (* 4 zoom-inverse)))
:text-y val :text-y val
:line-x1 (+ (:x vbox) rules-pos (/ 2 zoom)) :line-x1 (+ (:x vbox) rules-pos (* 2 zoom-inverse))
:line-y1 val :line-y1 val
:line-x2 (+ (:x vbox) rules-pos (/ 2 zoom) rules-size) :line-x2 (+ (:x vbox) rules-pos (* 2 zoom-inverse) rules-size)
:line-y2 val}))) :line-y2 val})))
(mf/defc rules-axis (mf/defc rules-axis
[{:keys [zoom vbox axis offset]}] [{:keys [zoom zoom-inverse vbox axis offset]}]
(let [rules-width (/ rules-width zoom) (let [rules-width (* rules-width zoom-inverse)
step (calculate-step-size zoom) step (calculate-step-size zoom)
clip-id (str "clip-rule-" (d/name axis))] clip-id (str "clip-rule-" (d/name axis))]
[:* [:*
(let [{:keys [x y width height]} (get-background-area vbox zoom axis)] (let [{:keys [x y width height]} (get-background-area vbox zoom-inverse axis)]
[:rect {:x x :y y :width width :height height :style {:fill rules-background}}]) [:rect {:x x :y y :width width :height height :style {:fill rules-background}}])
[:g.rules {:clipPath (str "url(#" clip-id ")")} [:g.rules {:clipPath (str "url(#" clip-id ")")}
[:defs [:defs
[:clipPath {:id clip-id} [:clipPath {:id clip-id}
(let [{:keys [x y width height]} (get-clip-area vbox zoom axis)] (let [{:keys [x y width height]} (get-clip-area vbox zoom-inverse axis)]
[:rect {:x x :y y :width width :height height}])]] [:rect {:x x :y y :width width :height height}])]]
(let [{:keys [start end]} (get-rule-params vbox axis) (let [{:keys [start end]} (get-rule-params vbox axis)
@ -141,14 +141,14 @@
(for [step-val (range minv (inc maxv) step)] (for [step-val (range minv (inc maxv) step)]
(let [{:keys [text-x text-y line-x1 line-y1 line-x2 line-y2]} (let [{:keys [text-x text-y line-x1 line-y1 line-x2 line-y2]}
(get-rule-axis step-val vbox zoom axis)] (get-rule-axis step-val vbox zoom-inverse axis)]
[:* {:key (dm/str "text-" (d/name axis) "-" step-val)} [:* {:key (dm/str "text-" (d/name axis) "-" step-val)}
[:text {:x text-x [:text {:x text-x
:y text-y :y text-y
:text-anchor "middle" :text-anchor "middle"
:dominant-baseline "middle" :dominant-baseline "middle"
:transform (when (= axis :y) (str "rotate(-90 " text-x "," text-y ")")) :transform (when (= axis :y) (str "rotate(-90 " text-x "," text-y ")"))
:style {:font-size (/ font-size zoom) :style {:font-size (* font-size zoom-inverse)
:font-family font-family :font-family font-family
:fill colors/gray-30}} :fill colors/gray-30}}
;; If the guide is associated to a frame we show the position relative to the frame ;; If the guide is associated to a frame we show the position relative to the frame
@ -163,79 +163,79 @@
:stroke-width rules-width}}]])))]])) :stroke-width rules-width}}]])))]]))
(mf/defc selection-area (mf/defc selection-area
[{:keys [vbox zoom selection-rect offset-x offset-y]}] [{:keys [vbox zoom-inverse selection-rect offset-x offset-y]}]
;; When using the format-number callls we consider if the guide is associated to a frame and we show the position relative to it with the offset ;; When using the format-number callls we consider if the guide is associated to a frame and we show the position relative to it with the offset
[:g.selection-area [:g.selection-area
[:g [:g
[:rect {:x (:x selection-rect) [:rect {:x (:x selection-rect)
:y (:y vbox) :y (:y vbox)
:width (:width selection-rect) :width (:width selection-rect)
:height (/ rule-area-size zoom) :height (* rule-area-size zoom-inverse)
:style {:fill selection-area-color :style {:fill selection-area-color
:fill-opacity selection-area-opacity}}] :fill-opacity selection-area-opacity}}]
[:rect {:x (- (:x selection-rect) (/ over-number-size zoom)) [:rect {:x (- (:x selection-rect) (* over-number-size zoom-inverse))
:y (:y vbox) :y (:y vbox)
:width (/ over-number-size zoom) :width (* over-number-size zoom-inverse)
:height (/ rule-area-size zoom) :height (* rule-area-size zoom-inverse)
:style {:fill rules-background :style {:fill rules-background
:fill-opacity over-number-opacity}}] :fill-opacity over-number-opacity}}]
[:text {:x (- (:x1 selection-rect) (/ 4 zoom)) [:text {:x (- (:x1 selection-rect) (* 4 zoom-inverse))
:y (+ (:y vbox) (/ 12 zoom)) :y (+ (:y vbox) (* 12 zoom-inverse))
:text-anchor "end" :text-anchor "end"
:dominant-baseline "middle" :dominant-baseline "middle"
:style {:font-size (/ font-size zoom) :style {:font-size (* font-size zoom-inverse)
:font-family font-family :font-family font-family
:fill selection-area-color}} :fill selection-area-color}}
(fmt/format-number (- (:x1 selection-rect) offset-x))] (fmt/format-number (- (:x1 selection-rect) offset-x))]
[:rect {:x (:x2 selection-rect) [:rect {:x (:x2 selection-rect)
:y (:y vbox) :y (:y vbox)
:width (/ over-number-size zoom) :width (* over-number-size zoom-inverse)
:height (/ rule-area-size zoom) :height (* rule-area-size zoom-inverse)
:style {:fill rules-background :style {:fill rules-background
:fill-opacity over-number-opacity}}] :fill-opacity over-number-opacity}}]
[:text {:x (+ (:x2 selection-rect) (/ 4 zoom)) [:text {:x (+ (:x2 selection-rect) (* 4 zoom-inverse))
:y (+ (:y vbox) (/ 12 zoom)) :y (+ (:y vbox) (* 12 zoom-inverse))
:text-anchor "start" :text-anchor "start"
:dominant-baseline "middle" :dominant-baseline "middle"
:style {:font-size (/ font-size zoom) :style {:font-size (* font-size zoom-inverse)
:font-family font-family :font-family font-family
:fill selection-area-color}} :fill selection-area-color}}
(fmt/format-number (- (:x2 selection-rect) offset-x))]] (fmt/format-number (- (:x2 selection-rect) offset-x))]]
(let [center-x (+ (:x vbox) (/ rule-area-half-size zoom)) (let [center-x (+ (:x vbox) (* rule-area-half-size zoom-inverse))
center-y (- (+ (:y selection-rect) (/ (:height selection-rect) 2)) (/ rule-area-half-size zoom))] center-y (- (+ (:y selection-rect) (/ (:height selection-rect) 2)) (* rule-area-half-size zoom-inverse))]
[:g {:transform (str "rotate(-90 " center-x "," center-y ")")} [:g {:transform (str "rotate(-90 " center-x "," center-y ")")}
[:rect {:x (- center-x (/ (:height selection-rect) 2) (/ rule-area-half-size zoom)) [:rect {:x (- center-x (/ (:height selection-rect) 2) (* rule-area-half-size zoom-inverse))
:y (- center-y (/ rule-area-half-size zoom)) :y (- center-y (* rule-area-half-size zoom-inverse))
:width (:height selection-rect) :width (:height selection-rect)
:height (/ rule-area-size zoom) :height (* rule-area-size zoom-inverse)
:style {:fill selection-area-color :style {:fill selection-area-color
:fill-opacity selection-area-opacity}}] :fill-opacity selection-area-opacity}}]
[:rect {:x (- center-x (/ (:height selection-rect) 2) (/ rule-area-half-size zoom) (/ over-number-size zoom)) [:rect {:x (- center-x (/ (:height selection-rect) 2) (* rule-area-half-size zoom-inverse) (* over-number-size zoom-inverse))
:y (- center-y (/ rule-area-half-size zoom)) :y (- center-y (* rule-area-half-size zoom-inverse))
:width (/ over-number-size zoom) :width (* over-number-size zoom-inverse)
:height (/ rule-area-size zoom) :height (* rule-area-size zoom-inverse)
:style {:fill rules-background :style {:fill rules-background
:fill-opacity over-number-opacity}}] :fill-opacity over-number-opacity}}]
[:rect {:x (+ (- center-x (/ (:height selection-rect) 2) (/ rule-area-half-size zoom) ) (:height selection-rect)) [:rect {:x (+ (- center-x (/ (:height selection-rect) 2) (* rule-area-half-size zoom-inverse) ) (:height selection-rect))
:y (- center-y (/ rule-area-half-size zoom)) :y (- center-y (* rule-area-half-size zoom-inverse))
:width (/ over-number-size zoom) :width (* over-number-size zoom-inverse)
:height (/ rule-area-size zoom) :height (* rule-area-size zoom-inverse)
:style {:fill rules-background :style {:fill rules-background
:fill-opacity over-number-opacity}}] :fill-opacity over-number-opacity}}]
[:text {:x (- center-x (/ (:height selection-rect) 2) (/ 15 zoom)) [:text {:x (- center-x (/ (:height selection-rect) 2) (* 15 zoom-inverse))
:y center-y :y center-y
:text-anchor "end" :text-anchor "end"
:dominant-baseline "middle" :dominant-baseline "middle"
:style {:font-size (/ font-size zoom) :style {:font-size (* font-size zoom-inverse)
:font-family font-family :font-family font-family
:fill selection-area-color}} :fill selection-area-color}}
(fmt/format-number (- (:y2 selection-rect) offset-y))] (fmt/format-number (- (:y2 selection-rect) offset-y))]
@ -244,7 +244,7 @@
:y center-y :y center-y
:text-anchor "start" :text-anchor "start"
:dominant-baseline "middle" :dominant-baseline "middle"
:style {:font-size (/ font-size zoom) :style {:font-size (* font-size zoom-inverse)
:font-family font-family :font-family font-family
:fill selection-area-color}} :fill selection-area-color}}
(fmt/format-number (- (:y1 selection-rect) offset-y))]])]) (fmt/format-number (- (:y1 selection-rect) offset-y))]])])
@ -254,6 +254,7 @@
::mf/wrap [#(mf/memo' % (mf/check-props ["zoom" "vbox" "selected-shapes"]))]} ::mf/wrap [#(mf/memo' % (mf/check-props ["zoom" "vbox" "selected-shapes"]))]}
[props] [props]
(let [zoom (obj/get props "zoom") (let [zoom (obj/get props "zoom")
zoom-inverse (obj/get props "zoom-inverse")
vbox (obj/get props "vbox") vbox (obj/get props "vbox")
offset-x (obj/get props "offset-x") offset-x (obj/get props "offset-x")
offset-y (obj/get props "offset-y") offset-y (obj/get props "offset-y")
@ -268,11 +269,12 @@
(when (some? vbox) (when (some? vbox)
[:g.rules {:pointer-events "none"} [:g.rules {:pointer-events "none"}
[:& rules-axis {:zoom zoom :vbox vbox :axis :x :offset offset-x}] [:& rules-axis {:zoom zoom :zoom-inverse zoom-inverse :vbox vbox :axis :x :offset offset-x}]
[:& rules-axis {:zoom zoom :vbox vbox :axis :y :offset offset-y}] [:& rules-axis {:zoom zoom :zoom-inverse zoom-inverse :vbox vbox :axis :y :offset offset-y}]
(when (some? selection-rect) (when (some? selection-rect)
[:& selection-area {:zoom zoom [:& selection-area {:zoom zoom
:zoom-inverse zoom-inverse
:vbox vbox :vbox vbox
:selection-rect selection-rect :selection-rect selection-rect
:offset-x offset-x :offset-x offset-x