Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-08 16:00:19 -05:00
Code Issues Activity

Add proper styles to selected shape controls.

Browse source
This commit is contained in:
Andrey Antukh 2015-12-31 19:27:21 +02:00
parent fb833f34c8
commit cfc8c51537
2 changed files with 36 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
frontend/uxbox/ui/workspace/canvas.cljs
View file

@ -40,8 +40,7 @@
selection-circle-style
{:fillOpacity "0.5"
:strokeWidth "1px"
:vectorEffect "non-scaling-stroke"
:cursor "move"})
:vectorEffect "non-scaling-stroke"})
(def ^:private
default-selection-props
@ -73,22 +72,23 @@
(dom/stop-propagation event)
(reset! wb/shapes-dragging? false))]
(html
[:g {:on-mouse-down on-mouse-down
:on-mouse-up on-mouse-up}
[:g.shape {:class (when selected? "selected")
:on-mouse-down on-mouse-down
:on-mouse-up on-mouse-up}
(shapes/render shape)
(if selected?
[:g {:class "controls"}
[:g.controls
[:rect {:x x :y y :width width :height height
:style {:stroke "black" :fill "transparent"
:stroke-opacity "0.5"}}]
[:circle (merge default-selection-props
{:cx x :cy y})]
[:circle (merge default-selection-props
{:cx (+ x width) :cy y})]
[:circle (merge default-selection-props
{:cx x :cy (+ y height)})]
[:circle (merge default-selection-props
{:cx (+ x width) :cy (+ y height)})]])]))))
[: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 shape
(util/component
@ -114,23 +114,23 @@
(dom/stop-propagation event)
(reset! wb/shapes-dragging? false))]
(html
[:g.selected
{:on-mouse-down on-mouse-down
:on-mouse-up on-mouse-up}
[:g {:class "shape selected"
:on-mouse-down on-mouse-down
:on-mouse-up on-mouse-up}
(for [item shapes]
(shapes/render item))
[:g {:class "controls"}
[:g.controls
[:rect {:x x :y y :width width :height height
:style {:stroke "black" :fill "transparent"
:stroke-opacity "0.5"}}]
[:circle (merge default-selection-props
{:cx x :cy y})]
[:circle (merge default-selection-props
{:cx (+ x width) :cy y})]
[:circle (merge default-selection-props
{:cx x :cy (+ y height)})]
[:circle (merge default-selection-props
{:cx (+ x width) :cy (+ y height)})]]]))))
[: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
(util/component

11
resources/public/styles/partials/workspace-canvas.scss
View file

@ -14,9 +14,20 @@
&.drawing {
cursor: cell;
}
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; }
}
}
}
.viewport, .page-canvas, .page-layout {
overflow: visible;
}
}