mirror of
https://github.com/penpot/penpot.git
synced 2025-05-22 22:36:12 +02:00
Implement properly the multiselection handler.
This commit is contained in:
parent
1a44b75790
commit
e2af1a451b
3 changed files with 24 additions and 35 deletions
|
@ -79,7 +79,7 @@
|
||||||
:on-mouse-down on-mouse-down
|
:on-mouse-down on-mouse-down
|
||||||
:on-mouse-up on-mouse-up}
|
:on-mouse-up on-mouse-up}
|
||||||
(uusc/render-shape shape #(uusc/shape %))
|
(uusc/render-shape shape #(uusc/shape %))
|
||||||
(when selected?
|
(when (and selected? (= (count selected) 1))
|
||||||
(handlers shape))])))
|
(handlers shape))])))
|
||||||
|
|
||||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||||
|
|
|
@ -56,7 +56,7 @@
|
||||||
(background)
|
(background)
|
||||||
(grid 1)
|
(grid 1)
|
||||||
[:svg.page-layout {}
|
[:svg.page-layout {}
|
||||||
#_(shapes-selection shapes-selected)
|
(shapes-selection)
|
||||||
[:g.main {}
|
[:g.main {}
|
||||||
(for [item (:shapes page)]
|
(for [item (:shapes page)]
|
||||||
(-> (uus/shape item)
|
(-> (uus/shape item)
|
||||||
|
|
|
@ -1,45 +1,34 @@
|
||||||
(ns uxbox.ui.workspace.canvas.selection
|
(ns uxbox.ui.workspace.canvas.selection
|
||||||
(:require [sablono.core :as html :refer-macros [html]]
|
(:require [sablono.core :as html :refer-macros [html]]
|
||||||
[rum.core :as rum]
|
[rum.core :as rum]
|
||||||
[beicon.core :as rx]
|
|
||||||
[cats.labs.lens :as l]
|
[cats.labs.lens :as l]
|
||||||
[uxbox.rstore :as rs]
|
[uxbox.state :as ust]
|
||||||
[uxbox.state :as st]
|
[uxbox.shapes :as ush]
|
||||||
[uxbox.shapes :as sh]
|
[uxbox.util.lens :as ul]
|
||||||
[uxbox.ui.workspace.base :as wb]
|
[uxbox.ui.workspace.base :as wb]
|
||||||
[uxbox.ui.mixins :as mx]
|
[uxbox.ui.mixins :as mx]))
|
||||||
[uxbox.util.dom :as dom]))
|
|
||||||
|
|
||||||
(def ^:private selection-circle-style
|
(def ^:const selected-shapes-l
|
||||||
{:fillOpacity "0.5"
|
(letfn [(getter [state]
|
||||||
:strokeWidth "1px"
|
(let [selected (get-in state [:workspace :selected])]
|
||||||
:vectorEffect "non-scaling-stroke"})
|
(mapv #(get-in state [:shapes-by-id %]) selected)))]
|
||||||
|
(as-> (ul/getter getter) $
|
||||||
(def ^:private default-selection-props
|
(l/focus-atom $ ust/state))))
|
||||||
{:r 5 :style selection-circle-style
|
|
||||||
:fill "#333"
|
|
||||||
:stroke "#333"})
|
|
||||||
|
|
||||||
(defn shapes-selection-render
|
(defn shapes-selection-render
|
||||||
[own shapes]
|
[own]
|
||||||
(when (seq shapes)
|
(let [shapes (rum/react selected-shapes-l)]
|
||||||
(let [{:keys [width height x y]} (sh/outer-rect shapes)]
|
(when (> (count shapes) 1)
|
||||||
|
(let [{:keys [width height x y]} (ush/outer-rect shapes)]
|
||||||
(html
|
(html
|
||||||
[:g.controls
|
[:g.controls
|
||||||
[:rect {:x x :y y :width width :height height :stroke-dasharray "5,5"
|
[:rect {:x x :y y :width width :height height
|
||||||
|
:stroke-dasharray "5,5"
|
||||||
:style {:stroke "#333" :fill "transparent"
|
:style {:stroke "#333" :fill "transparent"
|
||||||
:stroke-opacity "1"}}]
|
:stroke-opacity "1"}}]])))))
|
||||||
[: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-selection
|
(def ^:const shapes-selection
|
||||||
(mx/component
|
(mx/component
|
||||||
{:render shapes-selection-render
|
{:render shapes-selection-render
|
||||||
:name "shapes-selection"
|
:name "shapes-selection"
|
||||||
:mixins [mx/static]}))
|
:mixins [rum/reactive mx/static]}))
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue