Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-19 11:11:21 -05:00
Code Issues Activity

Bring the shape resize handlers to the front (#26)

Browse source
This commit is contained in:
Jesús Espino 2016-05-12 19:00:42 +02:00 • committed by Andrey Antukh
parent 87f9e8b38d
commit 4c193d6026
5 changed files with 103 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
resources/styles/partials/workspace-canvas.scss
View file

@ -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; }
}
}

88
src/uxbox/ui/shapes/icon.cljs
View file

@ -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

4
src/uxbox/ui/shapes/text.cljs
View file

@ -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

2
src/uxbox/ui/workspace/canvas.cljs
View file

@ -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

100
src/uxbox/ui/workspace/selection.cljs
View file

@ -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