Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-08 07:50:43 -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 selection-circle-style
{:fillOpacity "0.5" {:fillOpacity "0.5"
:strokeWidth "1px" :strokeWidth "1px"
:vectorEffect "non-scaling-stroke" :vectorEffect "non-scaling-stroke"})
:cursor "move"})
(def ^:private (def ^:private
default-selection-props default-selection-props
@ -73,22 +72,23 @@
(dom/stop-propagation event) (dom/stop-propagation event)
(reset! wb/shapes-dragging? false))] (reset! wb/shapes-dragging? false))]
(html (html
[:g {:on-mouse-down on-mouse-down [:g.shape {:class (when selected? "selected")
:on-mouse-up on-mouse-up} :on-mouse-down on-mouse-down
:on-mouse-up on-mouse-up}
(shapes/render shape) (shapes/render shape)
(if selected? (if selected?
[:g {:class "controls"} [:g.controls
[:rect {:x x :y y :width width :height height [:rect {:x x :y y :width width :height height
:style {:stroke "black" :fill "transparent" :style {:stroke "black" :fill "transparent"
:stroke-opacity "0.5"}}] :stroke-opacity "0.5"}}]
[:circle (merge default-selection-props [:circle.top-left (merge default-selection-props
{:cx x :cy y})] {:cx x :cy y})]
[:circle (merge default-selection-props [:circle.top-right (merge default-selection-props
{:cx (+ x width) :cy y})] {:cx (+ x width) :cy y})]
[:circle (merge default-selection-props [:circle.bottom-left (merge default-selection-props
{:cx x :cy (+ y height)})] {:cx x :cy (+ y height)})]
[:circle (merge default-selection-props [:circle.bottom-right (merge default-selection-props
{:cx (+ x width) :cy (+ y height)})]])])))) {:cx (+ x width) :cy (+ y height)})]])]))))
(def shape (def shape
(util/component (util/component
@ -114,23 +114,23 @@
(dom/stop-propagation event) (dom/stop-propagation event)
(reset! wb/shapes-dragging? false))] (reset! wb/shapes-dragging? false))]
(html (html
[:g.selected [:g {:class "shape selected"
{:on-mouse-down on-mouse-down :on-mouse-down on-mouse-down
:on-mouse-up on-mouse-up} :on-mouse-up on-mouse-up}
(for [item shapes] (for [item shapes]
(shapes/render item)) (shapes/render item))
[:g {:class "controls"} [:g.controls
[:rect {:x x :y y :width width :height height [:rect {:x x :y y :width width :height height
:style {:stroke "black" :fill "transparent" :style {:stroke "black" :fill "transparent"
:stroke-opacity "0.5"}}] :stroke-opacity "0.5"}}]
[:circle (merge default-selection-props [:circle.top-left (merge default-selection-props
{:cx x :cy y})] {:cx x :cy y})]
[:circle (merge default-selection-props [:circle.top-right (merge default-selection-props
{:cx (+ x width) :cy y})] {:cx (+ x width) :cy y})]
[:circle (merge default-selection-props [:circle.bottom-left (merge default-selection-props
{:cx x :cy (+ y height)})] {:cx x :cy (+ y height)})]
[:circle (merge default-selection-props [:circle.bottom-right (merge default-selection-props
{:cx (+ x width) :cy (+ y height)})]]])))) {:cx (+ x width) :cy (+ y height)})]]]))))
(def selected-shapes (def selected-shapes
(util/component (util/component

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

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