mirror of
https://github.com/penpot/penpot.git
synced 2025-01-25 07:58:49 -05:00
Refactor mouse and selected shapes selrect rendering.
This commit is contained in:
Andrey Antukh
parent
d5bc6bb16a
commit
48cb96221e
2 changed files with 57 additions and 105 deletions
|
|
@ -16,7 +16,7 @@
|
|||
[uxbox.ui.mixins :as mx]
|
||||
[uxbox.ui.dom :as dom]
|
||||
[uxbox.ui.workspace.base :as wb]
|
||||
[uxbox.ui.workspace.selrect :refer (mouse-selrect)]
|
||||
[uxbox.ui.workspace.selrect :refer (mouse-selrect shapes-selrect)]
|
||||
[uxbox.ui.workspace.grid :refer (grid)]
|
||||
[uxbox.ui.workspace.options :refer (element-opts)])
|
||||
(:import goog.events.EventType))
|
||||
|
|
@ -45,103 +45,6 @@
|
|||
:name "background"
|
||||
:mixins [mx/static]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Selected shapes.
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(def ^:private
|
||||
selection-circle-style
|
||||
{:fillOpacity "0.5"
|
||||
:strokeWidth "1px"
|
||||
:vectorEffect "non-scaling-stroke"})
|
||||
|
||||
(def ^:private
|
||||
default-selection-props
|
||||
{:r 4 :style selection-circle-style
|
||||
:fill "lavender"
|
||||
:stroke "gray"})
|
||||
|
||||
(defn- selected-shapes-render
|
||||
[own shapes selected]
|
||||
(let [local (:rum/local own)
|
||||
x (apply min (map :x shapes))
|
||||
y (apply min (map :y shapes))
|
||||
x' (apply max (map (fn [{:keys [x width]}] (+ x width)) shapes))
|
||||
y' (apply max (map (fn [{:keys [y height]}] (+ y height)) shapes))
|
||||
width (- x' x)
|
||||
height (- y' y)]
|
||||
(letfn [(on-mouse-down [event]
|
||||
(dom/stop-propagation event)
|
||||
(swap! local assoc :init-coords [x y])
|
||||
(reset! wb/shapes-dragging? true))
|
||||
(on-mouse-up [event]
|
||||
(dom/stop-propagation event)
|
||||
(reset! wb/shapes-dragging? false))]
|
||||
(html
|
||||
[:g {:class "shape selected"
|
||||
:on-mouse-down on-mouse-down
|
||||
:on-mouse-up on-mouse-up}
|
||||
(for [item shapes]
|
||||
(shapes/-render item nil))
|
||||
[:g.controls
|
||||
[:rect {:x x :y y :width width :height height
|
||||
:style {:stroke "black" :fill "transparent"
|
||||
:stroke-opacity "0.5"}}]
|
||||
[:circle.top-left (merge default-selection-props
|
||||
{:cx x :cy y})]
|
||||
[:circle.top-right (merge default-selection-props
|
||||
{:cx (+ x width) :cy y})]
|
||||
[:circle.bottom-left (merge default-selection-props
|
||||
{:cx x :cy (+ y height)})]
|
||||
[:circle.bottom-right (merge default-selection-props
|
||||
{:cx (+ x width) :cy (+ y height)})]]]))))
|
||||
|
||||
(def selected-shapes
|
||||
(mx/component
|
||||
{:render selected-shapes-render
|
||||
:name "selected-shapes"
|
||||
:mixins [mx/static rum/reactive (mx/local {})]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Shape
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn selected-shape-render
|
||||
[own shape selected]
|
||||
(let [{:keys [id x y width height] :as shape} shape]
|
||||
(letfn [(on-mouse-down [event]
|
||||
(when-not (:blocked shape)
|
||||
(let [local (:rum/local own)]
|
||||
(dom/stop-propagation event)
|
||||
(swap! local assoc :init-coords [x y])
|
||||
(reset! wb/shapes-dragging? true))))
|
||||
(on-mouse-up [event]
|
||||
(dom/stop-propagation event)
|
||||
(reset! wb/shapes-dragging? false))]
|
||||
(html
|
||||
[:g.shape {:class "selected"
|
||||
:on-mouse-down on-mouse-down
|
||||
:on-mouse-up on-mouse-up}
|
||||
(shapes/-render shape nil)
|
||||
[:g.controls
|
||||
[:rect {:x x :y y :width width :height height
|
||||
:style {:stroke "black" :fill "transparent"
|
||||
:stroke-opacity "0.5"}}]
|
||||
[:circle.top-left (merge default-selection-props
|
||||
{:cx x :cy y})]
|
||||
[:circle.top-right (merge default-selection-props
|
||||
{:cx (+ x width) :cy y})]
|
||||
[:circle.bottom-left (merge default-selection-props
|
||||
{:cx x :cy (+ y height)})]
|
||||
[:circle.bottom-right (merge default-selection-props
|
||||
{:cx (+ x width) :cy (+ y height)})]]]))))
|
||||
|
||||
(def selected-shape
|
||||
(mx/component
|
||||
{:render selected-shape-render
|
||||
:name "selected-shape"
|
||||
:mixins [mx/static (mx/local {})]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Shape
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
@ -149,23 +52,31 @@
|
|||
(defn shape-render
|
||||
[own shape selected]
|
||||
;; (println "shape" (:id shape))
|
||||
(let [{:keys [id x y width height] :as shape} shape]
|
||||
(let [{:keys [id x y width height] :as shape} shape
|
||||
selected? (contains? selected id)]
|
||||
(letfn [(on-mouse-down [event]
|
||||
(when-not (:blocked shape)
|
||||
(let [local (:rum/local own)]
|
||||
(dom/stop-propagation event)
|
||||
(swap! local assoc :init-coords [x y])
|
||||
(reset! wb/shapes-dragging? true))
|
||||
(cond
|
||||
(and (not selected?)
|
||||
(empty? selected))
|
||||
(rs/emit! (dw/select-shape id))
|
||||
|
||||
(and (not selected?)
|
||||
(not (empty? selected)))
|
||||
(if (.-ctrlKey event)
|
||||
(rs/emit! (dw/select-shape id))
|
||||
(rs/emit! (dw/deselect-all)
|
||||
(dw/select-shape id)))))
|
||||
|
||||
(dw/select-shape id))))))
|
||||
(on-mouse-up [event]
|
||||
(dom/stop-propagation event)
|
||||
(reset! wb/shapes-dragging? false))]
|
||||
(html
|
||||
[:g.shape {:on-mouse-down on-mouse-down
|
||||
[:g.shape {:class (when selected? "selected")
|
||||
:on-mouse-down on-mouse-down
|
||||
:on-mouse-up on-mouse-up}
|
||||
(shapes/-render shape nil)]))))
|
||||
|
||||
|
|
@ -230,19 +141,20 @@
|
|||
(background)
|
||||
(grid 1)
|
||||
[:svg.page-layout {}
|
||||
(shapes-selrect shapes-selected)
|
||||
[:g.main {}
|
||||
(for [item shapes-notselected]
|
||||
(for [item shapes]
|
||||
(-> (shape item workspace-selected)
|
||||
(rum/with-key (str (:id item)))))
|
||||
|
||||
(cond
|
||||
#_(cond
|
||||
(= (count shapes-selected) 1)
|
||||
(let [item (first shapes-selected)]
|
||||
(selected-shape item workspace-selected))
|
||||
|
||||
(> (count shapes-selected) 1)
|
||||
(selected-shapes shapes-selected))
|
||||
(selrect)]]])))
|
||||
(mouse-selrect)]]])))
|
||||
|
||||
(def canvas
|
||||
(mx/component
|
||||
|
|
|
|||
|
|
@ -11,6 +11,10 @@
|
|||
[uxbox.ui.mixins :as mx]
|
||||
[uxbox.ui.dom :as dom]))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Mouse Selection Rect
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn mouse-selrect-render
|
||||
[own]
|
||||
(when-let [data (rum/react wb/selrect-pos)]
|
||||
|
|
@ -28,3 +32,39 @@
|
|||
:name "mouse-selrect"
|
||||
:mixins [mx/static rum/reactive]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Shapes Selection Rect
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(def ^:private selection-circle-style
|
||||
{:fillOpacity "0.5"
|
||||
:strokeWidth "1px"
|
||||
:vectorEffect "non-scaling-stroke"})
|
||||
|
||||
(def ^:private default-selection-props
|
||||
{:r 4 :style selection-circle-style
|
||||
:fill "lavender"
|
||||
:stroke "gray"})
|
||||
|
||||
(defn shapes-selrect-render
|
||||
[own shapes]
|
||||
(let [[width height x y] (sh/group-size-and-position shapes)]
|
||||
(html
|
||||
[:g.controls
|
||||
[:rect {:x x :y y :width width :height height
|
||||
:style {:stroke "black" :fill "transparent"
|
||||
:stroke-opacity "0.5"}}]
|
||||
[:circle.top-left (merge default-selection-props
|
||||
{:cx x :cy y})]
|
||||
[:circle.top-right (merge default-selection-props
|
||||
{:cx (+ x width) :cy y})]
|
||||
[:circle.bottom-left (merge default-selection-props
|
||||
{:cx x :cy (+ y height)})]
|
||||
[:circle.bottom-right (merge default-selection-props
|
||||
{:cx (+ x width) :cy (+ y height)})]])))
|
||||
|
||||
(def ^:static shapes-selrect
|
||||
(mx/component
|
||||
{:render shapes-selrect-render
|
||||
:name "shapes-selrect"
|
||||
:mixins [mx/static]}))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue