mirror of
https://github.com/penpot/penpot.git
synced 2025-03-16 01:31:22 -05:00
Bring the shape resize handlers to the front (#26)
This commit is contained in:
parent
87f9e8b38d
commit
4c193d6026
5 changed files with 103 additions and 112 deletions
|
@ -44,17 +44,16 @@
|
|||
}
|
||||
|
||||
svg {
|
||||
g.shape {
|
||||
&.selected {
|
||||
circle.top-left { cursor: nwse-resize; }
|
||||
circle.bottom-right { cursor: nwse-resize; }
|
||||
circle.top-right { cursor: nesw-resize; }
|
||||
circle.bottom-left { cursor: nesw-resize; }
|
||||
rect.top { cursor: ns-resize; }
|
||||
rect.bottom { cursor: ns-resize; }
|
||||
rect.left { cursor: ew-resize; }
|
||||
rect.right { cursor: ew-resize; }
|
||||
}
|
||||
g.controls {
|
||||
rect.main { pointer-events: none; }
|
||||
circle.top-left { cursor: nwse-resize; }
|
||||
circle.bottom-right { cursor: nwse-resize; }
|
||||
circle.top-right { cursor: nesw-resize; }
|
||||
circle.bottom-left { cursor: nesw-resize; }
|
||||
rect.top { cursor: ns-resize; }
|
||||
rect.bottom { cursor: ns-resize; }
|
||||
rect.left { cursor: ew-resize; }
|
||||
rect.right { cursor: ew-resize; }
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -58,8 +58,6 @@
|
|||
(dom/stop-propagation event)
|
||||
(uuc/release-action! "ui.shape"))))
|
||||
|
||||
(declare handlers)
|
||||
|
||||
(defmethod uusc/render-component :default ;; :icon
|
||||
[own shape]
|
||||
(let [{:keys [id x y width height group]} shape
|
||||
|
@ -71,91 +69,7 @@
|
|||
[:g.shape {:class (when selected? "selected")
|
||||
:on-mouse-down on-mouse-down
|
||||
:on-mouse-up on-mouse-up}
|
||||
(uusc/render-shape shape #(uusc/shape %))
|
||||
(when (and selected? (= (count selected) 1))
|
||||
(handlers shape))])))
|
||||
|
||||
;; --- Icon Handlers
|
||||
|
||||
(defn- handlers-render
|
||||
[own shape]
|
||||
(letfn [(on-mouse-down [vid event]
|
||||
(dom/stop-propagation event)
|
||||
(uuc/acquire-action! "ui.shape.resize"
|
||||
{:vid vid :shape (:id shape)}))
|
||||
|
||||
(on-mouse-up [vid event]
|
||||
(dom/stop-propagation event)
|
||||
(uuc/release-action! "ui.shape.resize"))]
|
||||
(let [{:keys [x y width height]} (geom/inner-rect shape)]
|
||||
(html
|
||||
[:g.controls
|
||||
[:rect {:x x :y y :width width :height height :stroke-dasharray "5,5"
|
||||
:style {:stroke "#333" :fill "transparent"
|
||||
:stroke-opacity "1"}}]
|
||||
[:rect.top
|
||||
{:fill "#333"
|
||||
:on-mouse-up #(on-mouse-up 5 %)
|
||||
:on-mouse-down #(on-mouse-down 5 %)
|
||||
:x (- (+ x (/ width 2)) 7)
|
||||
:width 14
|
||||
:height 3
|
||||
:y (- y 5)}]
|
||||
[:rect.right
|
||||
{:fill "#333"
|
||||
:on-mouse-up #(on-mouse-up 6 %)
|
||||
:on-mouse-down #(on-mouse-down 6 %)
|
||||
:y (- (+ y (/ height 2)) 7)
|
||||
:width 3
|
||||
:height 14
|
||||
:x (+ x width 2)}]
|
||||
[:rect.bottom
|
||||
{:fill "#333"
|
||||
:on-mouse-up #(on-mouse-up 7 %)
|
||||
:on-mouse-down #(on-mouse-down 7 %)
|
||||
:x (- (+ x (/ width 2)) 7)
|
||||
:width 14
|
||||
:height 3
|
||||
:y (+ y height 2)}]
|
||||
[:rect.left
|
||||
{:fill "#333"
|
||||
:on-mouse-up #(on-mouse-up 8 %)
|
||||
:on-mouse-down #(on-mouse-down 8 %)
|
||||
:y (- (+ y (/ height 2)) 7)
|
||||
:width 3
|
||||
:height 14
|
||||
:x (- x 5)}]
|
||||
[:circle.top-left
|
||||
(merge uusc/+circle-props+
|
||||
{:on-mouse-up #(on-mouse-up 1 %)
|
||||
:on-mouse-down #(on-mouse-down 1 %)
|
||||
:cx x
|
||||
:cy y})]
|
||||
[:circle.top-right
|
||||
(merge uusc/+circle-props+
|
||||
{:on-mouse-up #(on-mouse-up 2 %)
|
||||
:on-mouse-down #(on-mouse-down 2 %)
|
||||
:cx (+ x width)
|
||||
:cy y})]
|
||||
[:circle.bottom-left
|
||||
(merge uusc/+circle-props+
|
||||
{:on-mouse-up #(on-mouse-up 3 %)
|
||||
:on-mouse-down #(on-mouse-down 3 %)
|
||||
:cx x
|
||||
:cy (+ y height)})]
|
||||
[:circle.bottom-right
|
||||
(merge uusc/+circle-props+
|
||||
{:on-mouse-up #(on-mouse-up 4 %)
|
||||
:on-mouse-down #(on-mouse-down 4 %)
|
||||
:cx (+ x width)
|
||||
:cy (+ y height)})]]))))
|
||||
|
||||
(def ^:const handlers
|
||||
(mx/component
|
||||
{:render handlers-render
|
||||
:name "handlers"
|
||||
:mixins [mx/static]}))
|
||||
|
||||
(uusc/render-shape shape #(uusc/shape %))])))
|
||||
;; --- Shape & Shape Svg
|
||||
|
||||
(defmethod uusc/render-shape :icon
|
||||
|
|
|
@ -116,9 +116,7 @@
|
|||
:ref "main"
|
||||
:on-mouse-down on-mouse-down
|
||||
:on-mouse-up on-mouse-up}
|
||||
(uusc/render-shape (assoc shape :editing? (:edition @local false)) nil)
|
||||
(when (and selected? (not (:edition @local false)))
|
||||
(uusi/handlers shape))])))
|
||||
(uusc/render-shape (assoc shape :editing? (:edition @local false)) nil)])))
|
||||
|
||||
(def ^:const text-component
|
||||
(mx/component
|
||||
|
|
|
@ -65,11 +65,11 @@
|
|||
:height height}
|
||||
(background)
|
||||
[:svg.page-layout {}
|
||||
(selection-handlers)
|
||||
[:g.main {}
|
||||
(for [item (reverse (:shapes page))]
|
||||
(-> (uus/shape item)
|
||||
(rum/with-key (str item))))
|
||||
(selection-handlers)
|
||||
(draw-area)]]])))
|
||||
|
||||
(def canvas
|
||||
|
|
|
@ -12,7 +12,10 @@
|
|||
[lentes.core :as l]
|
||||
[uxbox.state :as st]
|
||||
[uxbox.ui.mixins :as mx]
|
||||
[uxbox.util.geom :as geom]))
|
||||
[uxbox.ui.shapes.core :as uusc]
|
||||
[uxbox.ui.core :as uuc]
|
||||
[uxbox.util.geom :as geom]
|
||||
[uxbox.util.dom :as dom]))
|
||||
|
||||
;; --- Lenses
|
||||
|
||||
|
@ -25,17 +28,94 @@
|
|||
|
||||
;; --- Selection Handlers (Component)
|
||||
|
||||
(defn- multiple-selection-handlers-render
|
||||
[shapes]
|
||||
(let [{:keys [width height x y]} (geom/outer-rect-coll shapes)]
|
||||
(html
|
||||
[:g.controls
|
||||
[:rect.main {:x x :y y :width width :height height :stroke-dasharray "5,5"
|
||||
:style {:stroke "#333" :fill "transparent" :stroke-opacity "1"}}]])))
|
||||
|
||||
(defn- single-selection-handlers-render
|
||||
[shape]
|
||||
(letfn [
|
||||
(on-mouse-down [vid event]
|
||||
(dom/stop-propagation event)
|
||||
(uuc/acquire-action! "ui.shape.resize"
|
||||
{:vid vid :shape (:id shape)}))
|
||||
|
||||
(on-mouse-up [vid event]
|
||||
(dom/stop-propagation event)
|
||||
(uuc/release-action! "ui.shape.resize"))]
|
||||
(let [{:keys [x y width height]} (geom/outer-rect shape)]
|
||||
(html
|
||||
[:g.controls
|
||||
[:rect.main {:x x :y y :width width :height height :stroke-dasharray "5,5"
|
||||
:style {:stroke "#333" :fill "transparent" :stroke-opacity "1"}}]
|
||||
[:rect.top
|
||||
{:fill "#333"
|
||||
:on-mouse-up #(on-mouse-up 5 %)
|
||||
:on-mouse-down #(on-mouse-down 5 %)
|
||||
:x (- (+ x (/ width 2)) 7)
|
||||
:width 14
|
||||
:height 3
|
||||
:y (- y 5)}]
|
||||
[:rect.right
|
||||
{:fill "#333"
|
||||
:on-mouse-up #(on-mouse-up 6 %)
|
||||
:on-mouse-down #(on-mouse-down 6 %)
|
||||
:y (- (+ y (/ height 2)) 7)
|
||||
:width 3
|
||||
:height 14
|
||||
:x (+ x width 2)}]
|
||||
[:rect.bottom
|
||||
{:fill "#333"
|
||||
:on-mouse-up #(on-mouse-up 7 %)
|
||||
:on-mouse-down #(on-mouse-down 7 %)
|
||||
:x (- (+ x (/ width 2)) 7)
|
||||
:width 14
|
||||
:height 3
|
||||
:y (+ y height 2)}]
|
||||
[:rect.left
|
||||
{:fill "#333"
|
||||
:on-mouse-up #(on-mouse-up 8 %)
|
||||
:on-mouse-down #(on-mouse-down 8 %)
|
||||
:y (- (+ y (/ height 2)) 7)
|
||||
:width 3
|
||||
:height 14
|
||||
:x (- x 5)}]
|
||||
[:circle.top-left
|
||||
(merge uusc/+circle-props+
|
||||
{:on-mouse-up #(on-mouse-up 1 %)
|
||||
:on-mouse-down #(on-mouse-down 1 %)
|
||||
:cx x
|
||||
:cy y})]
|
||||
[:circle.top-right
|
||||
(merge uusc/+circle-props+
|
||||
{:on-mouse-up #(on-mouse-up 2 %)
|
||||
:on-mouse-down #(on-mouse-down 2 %)
|
||||
:cx (+ x width)
|
||||
:cy y})]
|
||||
[:circle.bottom-left
|
||||
(merge uusc/+circle-props+
|
||||
{:on-mouse-up #(on-mouse-up 3 %)
|
||||
:on-mouse-down #(on-mouse-down 3 %)
|
||||
:cx x
|
||||
:cy (+ y height)})]
|
||||
[:circle.bottom-right
|
||||
(merge uusc/+circle-props+
|
||||
{:on-mouse-up #(on-mouse-up 4 %)
|
||||
:on-mouse-down #(on-mouse-down 4 %)
|
||||
:cx (+ x width)
|
||||
:cy (+ y height)})]]))))
|
||||
|
||||
(defn selection-handlers-render
|
||||
[own]
|
||||
(let [shapes (rum/react selected-shapes-l)]
|
||||
(when (> (count shapes) 1)
|
||||
(let [{:keys [width height x y]} (geom/outer-rect-coll shapes)]
|
||||
(html
|
||||
[:g.controls
|
||||
[:rect {:x x :y y :width width :height height
|
||||
:stroke-dasharray "5,5"
|
||||
:style {:stroke "#333" :fill "transparent"
|
||||
:stroke-opacity "1"}}]])))))
|
||||
(let [shapes (rum/react selected-shapes-l)
|
||||
shapes-num (count shapes)]
|
||||
(cond
|
||||
(> shapes-num 1) (multiple-selection-handlers-render shapes)
|
||||
(= shapes-num 1) (single-selection-handlers-render (first shapes)))))
|
||||
|
||||
(def selection-handlers
|
||||
(mx/component
|
||||
|
|
Loading…
Add table
Reference in a new issue