mirror of
https://github.com/penpot/penpot.git
synced 2025-07-10 06:27:18 +02:00
✨ Selection area on rules
This commit is contained in:
alonso.torres
parent
5cac5eb26b
commit
1dee767762
10 changed files with 148 additions and 54 deletions
|
|
@ -69,15 +69,9 @@
|
|||
::mf/wrap [mf/memo]}
|
||||
[props]
|
||||
(let [layout (obj/get props "layout")
|
||||
{:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
|
||||
(use-resize-hook :right-sidebar 255 255 500 :x true :right)
|
||||
|
||||
drawing-tool (:tool (mf/deref refs/workspace-drawing))]
|
||||
[:aside.settings-bar.settings-bar-right {:ref parent-ref
|
||||
:style #js {"--width" (str size "px")}}
|
||||
[:div.resize-area {:on-pointer-down on-pointer-down
|
||||
:on-lost-pointer-capture on-lost-pointer-capture
|
||||
:on-mouse-move on-mouse-move}]
|
||||
|
||||
[:aside.settings-bar.settings-bar-right
|
||||
[:div.settings-bar-inside
|
||||
(cond
|
||||
(= drawing-tool :comments)
|
||||
|
|
|
|||
|
|
@ -52,7 +52,6 @@
|
|||
[{:keys [local selected-ids current-file-id file-typographies shared-libs]}]
|
||||
|
||||
(let [state (mf/use-state {:show-menu false})
|
||||
|
||||
selected (mf/use-state :file)
|
||||
|
||||
file-id
|
||||
|
|
@ -116,18 +115,7 @@
|
|||
{:on-click #(reset! selected :file)}
|
||||
(when (= selected :file) i/tick)
|
||||
[:div.library-name (str (tr "workspace.libraries.colors.file-library")
|
||||
(str/format " (%s)" (count file-typographies)))]]
|
||||
|
||||
#_[:li.palette-library
|
||||
{:on-click #(st/emit! (mdc/change-palette-selected :recent))}
|
||||
(when (= selected :recent) i/tick)
|
||||
[:div.library-name (str (tr "workspace.libraries.colors.recent-colors")
|
||||
(str/format " (%s)" (count recent-colors)))]
|
||||
[:div.color-sample
|
||||
(for [[idx color] (map-indexed vector (take 7 (reverse recent-colors))) ]
|
||||
[:& cb/color-bullet {:key (str "color-" idx)
|
||||
:color color}])]]
|
||||
]]
|
||||
(str/format " (%s)" (count file-typographies)))]]]]
|
||||
|
||||
[:div.color-palette-actions
|
||||
{:on-click #(swap! state assoc :show-menu true)}
|
||||
|
|
@ -136,7 +124,7 @@
|
|||
[:span.left-arrow {:on-click on-left-arrow-click} i/arrow-slide]
|
||||
|
||||
[:div.color-palette-content {:ref container :on-wheel on-wheel}
|
||||
[:div.color-palette-inside {:style {:position "relative"}}
|
||||
[:div.color-palette-inside
|
||||
(for [[idx item] (map-indexed vector current-typographies)]
|
||||
[:& typography-item
|
||||
{:key idx
|
||||
|
|
@ -145,9 +133,7 @@
|
|||
:selected-ids selected-ids
|
||||
:typography item}])]]
|
||||
|
||||
[:span.right-arrow {:on-click on-right-arrow-click} i/arrow-slide]])
|
||||
|
||||
)
|
||||
[:span.right-arrow {:on-click on-right-arrow-click} i/arrow-slide]]))
|
||||
|
||||
(def local-data
|
||||
(l/derived #(select-keys % [:editors]) refs/workspace-local =))
|
||||
|
|
|
|||
|
|
@ -367,7 +367,8 @@
|
|||
[:*
|
||||
[:& rules/rules
|
||||
{:zoom zoom
|
||||
:vbox vbox}]
|
||||
:vbox vbox
|
||||
:selected-shapes selected-shapes}]
|
||||
|
||||
[:& guides/viewport-guides
|
||||
{:zoom zoom
|
||||
|
|
|
|||
|
|
@ -8,7 +8,9 @@
|
|||
(:require
|
||||
[app.common.colors :as colors]
|
||||
[app.common.data :as d]
|
||||
[app.common.geom.shapes :as gsh]
|
||||
[app.common.math :as mth]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
[app.util.object :as obj]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
|
|
@ -16,6 +18,11 @@
|
|||
(def rules-size 4)
|
||||
(def rules-width 1)
|
||||
|
||||
(def rule-area-size 22)
|
||||
(def rule-area-half-size (/ rule-area-size 2))
|
||||
|
||||
(def rules-background "var(--color-gray-50)")
|
||||
|
||||
;; ----------------
|
||||
;; RULES
|
||||
;; ----------------
|
||||
|
|
@ -59,12 +66,12 @@
|
|||
(let [x (:x vbox)
|
||||
y (:y vbox)
|
||||
width (:width vbox)
|
||||
height (/ 22 zoom)]
|
||||
height (/ rule-area-size zoom)]
|
||||
{:x x :y y :width width :height height})
|
||||
|
||||
(let [x (:x vbox)
|
||||
y (+ (:y vbox) (/ 22 zoom))
|
||||
width (/ 22 zoom)
|
||||
y (+ (:y vbox) (/ rule-area-size zoom))
|
||||
width (/ rule-area-size zoom)
|
||||
height (- (:height vbox) (/ 21 zoom))]
|
||||
{:x x :y y :width width :height height})))
|
||||
|
||||
|
|
@ -107,7 +114,7 @@
|
|||
|
||||
[:*
|
||||
(let [{:keys [x y width height]} (get-background-area vbox zoom axis)]
|
||||
[:rect {:x x :y y :width width :height height :style {:fill "#303236"}}])
|
||||
[:rect {:x x :y y :width width :height height :style {:fill rules-background}}])
|
||||
|
||||
[:g.rules {:clipPath (str "url(#" clip-id ")")}
|
||||
|
||||
|
|
@ -147,13 +154,118 @@
|
|||
:style {:stroke colors/gray-30
|
||||
:stroke-width rules-width}}]])))]]))
|
||||
|
||||
(def selection-area-color "var(--color-primary)")
|
||||
(def selection-area-opacity 0.3)
|
||||
(def over-number-size 50)
|
||||
(def over-number-opacity 0.7)
|
||||
|
||||
(mf/defc selection-area
|
||||
[{:keys [vbox zoom selection-rect]}]
|
||||
[:g.selection-area
|
||||
[:g
|
||||
[:rect {:x (:x selection-rect)
|
||||
:y (:y vbox)
|
||||
:width (:width selection-rect)
|
||||
:height (/ rule-area-size zoom)
|
||||
:style {:fill selection-area-color
|
||||
:fill-opacity selection-area-opacity}}]
|
||||
|
||||
[:rect {:x (- (:x selection-rect) (/ over-number-size zoom))
|
||||
:y (:y vbox)
|
||||
:width (/ over-number-size zoom)
|
||||
:height (/ rule-area-size zoom)
|
||||
:style {:fill rules-background
|
||||
:fill-opacity over-number-opacity}}]
|
||||
|
||||
[:text {:x (- (:x1 selection-rect) (/ 4 zoom))
|
||||
:y (+ (:y vbox) (/ 12 zoom))
|
||||
:text-anchor "end"
|
||||
:dominant-baseline "middle"
|
||||
:style {:font-size (/ 13 zoom)
|
||||
:font-family "sourcesanspro"
|
||||
:fill selection-area-color}}
|
||||
(str (mth/round (:x1 selection-rect)))]
|
||||
|
||||
[:rect {:x (:x2 selection-rect)
|
||||
:y (:y vbox)
|
||||
:width (/ over-number-size zoom)
|
||||
:height (/ rule-area-size zoom)
|
||||
:style {:fill rules-background
|
||||
:fill-opacity over-number-opacity}}]
|
||||
|
||||
[:text {:x (+ (:x2 selection-rect) (/ 4 zoom))
|
||||
:y (+ (:y vbox) (/ 12 zoom))
|
||||
:text-anchor "start"
|
||||
:dominant-baseline "middle"
|
||||
:style {:font-size (/ 13 zoom)
|
||||
:font-family "sourcesanspro"
|
||||
:fill selection-area-color}}
|
||||
(str (mth/round (:x2 selection-rect)))]]
|
||||
|
||||
(let [center-x (+ (:x vbox) (/ rule-area-half-size zoom))
|
||||
center-y (- (+ (:y selection-rect) (/ (:height selection-rect) 2)) (/ rule-area-half-size zoom))]
|
||||
|
||||
[:g {:transform (str "rotate(-90 " center-x "," center-y ")")}
|
||||
[:rect {:x (- center-x (/ (:height selection-rect) 2) (/ rule-area-half-size zoom))
|
||||
:y (- center-y (/ rule-area-half-size zoom))
|
||||
:width (:height selection-rect)
|
||||
:height (/ rule-area-size zoom)
|
||||
:style {:fill selection-area-color
|
||||
:fill-opacity selection-area-opacity}}]
|
||||
|
||||
[:rect {:x (- center-x (/ (:height selection-rect) 2) (/ rule-area-half-size zoom) (/ over-number-size zoom))
|
||||
:y (- center-y (/ rule-area-half-size zoom))
|
||||
:width (/ over-number-size zoom)
|
||||
:height (/ rule-area-size zoom)
|
||||
:style {:fill rules-background
|
||||
:fill-opacity over-number-opacity}}]
|
||||
|
||||
[:rect {:x (+ (- center-x (/ (:height selection-rect) 2) (/ rule-area-half-size zoom) ) (:height selection-rect))
|
||||
:y (- center-y (/ rule-area-half-size zoom))
|
||||
:width (/ over-number-size zoom)
|
||||
:height (/ rule-area-size zoom)
|
||||
:style {:fill rules-background
|
||||
:fill-opacity over-number-opacity}}]
|
||||
|
||||
[:text {:x (- center-x (/ (:height selection-rect) 2) (/ 15 zoom))
|
||||
:y center-y
|
||||
:text-anchor "end"
|
||||
:dominant-baseline "middle"
|
||||
:style {:font-size (/ 13 zoom)
|
||||
:font-family "sourcesanspro"
|
||||
:fill selection-area-color}}
|
||||
(str (mth/round (:y2 selection-rect)))]
|
||||
|
||||
[:text {:x (+ center-x (/ (:height selection-rect) 2) )
|
||||
:y center-y
|
||||
:text-anchor "start"
|
||||
:dominant-baseline "middle"
|
||||
:style {:font-size (/ 13 zoom)
|
||||
:font-family "sourcesanspro"
|
||||
:fill selection-area-color}}
|
||||
(str (mth/round (:y1 selection-rect)))]])])
|
||||
|
||||
(mf/defc rules
|
||||
{::mf/wrap-props false
|
||||
::mf/wrap [mf/memo]}
|
||||
::mf/wrap [#(mf/memo' % (mf/check-props ["zoom" "vbox" "selected-shapes"]))]}
|
||||
[props]
|
||||
(let [zoom (obj/get props "zoom")
|
||||
vbox (obj/get props "vbox")]
|
||||
(let [zoom (obj/get props "zoom")
|
||||
vbox (obj/get props "vbox")
|
||||
selected-shapes (-> (obj/get props "selected-shapes")
|
||||
(hooks/use-equal-memo))
|
||||
|
||||
selection-rect
|
||||
(mf/use-memo
|
||||
(mf/deps selected-shapes)
|
||||
#(when (d/not-empty? selected-shapes)
|
||||
(gsh/selection-rect selected-shapes)))]
|
||||
|
||||
(when (some? vbox)
|
||||
[:g.rules {:pointer-events "none"}
|
||||
[:& rules-axis {:zoom zoom :vbox vbox :axis :x}]
|
||||
[:& rules-axis {:zoom zoom :vbox vbox :axis :y}]])))
|
||||
[:& rules-axis {:zoom zoom :vbox vbox :axis :y}]
|
||||
|
||||
(when (some? selection-rect)
|
||||
[:& selection-area {:zoom zoom
|
||||
:vbox vbox
|
||||
:selection-rect selection-rect}])])))
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue