mirror of
https://github.com/penpot/penpot.git
synced 2025-03-11 07:11:32 -05:00
Add initial work on shape rendering in canvas.
With selection rectangle/circles.
This commit is contained in:
parent
75b3aaf2a6
commit
f393e301f0
1 changed files with 48 additions and 2 deletions
|
@ -120,6 +120,52 @@
|
|||
:name "grid"
|
||||
:mixins [mx/static]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Shape
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(def ^:private
|
||||
selection-circle-style
|
||||
{:fillOpacity "0.5"
|
||||
:strokeWidth "1px"
|
||||
:vectorEffect "non-scaling-stroke"
|
||||
:cursor "move"})
|
||||
|
||||
(def ^:private
|
||||
default-selection-props
|
||||
{:r 4 :style selection-circle-style
|
||||
:fill "lavender"
|
||||
:stroke "gray"})
|
||||
|
||||
(defn- shape-render
|
||||
[own shape]
|
||||
(let [local (:rum/local own)
|
||||
x 30
|
||||
y 30
|
||||
width 100
|
||||
height 100]
|
||||
(html
|
||||
[:g
|
||||
(shapes/render shape {:x x :y y :width width :height height})
|
||||
[:g {:class "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)})]]])))
|
||||
|
||||
(def shape
|
||||
(util/component
|
||||
{:render shape-render
|
||||
:name "shape"
|
||||
:mixins [mx/static]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Canvas
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
@ -137,6 +183,7 @@
|
|||
;; (filter #(not (contains? selection-uuids (:shape/uuid %))))
|
||||
;; (map :shape/data))
|
||||
;; shapes)
|
||||
item (first _icons/+external+)
|
||||
]
|
||||
(html
|
||||
[:svg#page-canvas
|
||||
|
@ -150,8 +197,7 @@
|
|||
}
|
||||
(background)
|
||||
[:svg#page-layout
|
||||
(shapes/render (first _icons/+material+)
|
||||
{:x 20 :y 20 :width 300 :height 300})]
|
||||
(shape item)]
|
||||
#_(apply vector :svg#page-layout (map shapes/shape->svg raw-shapes))
|
||||
#_(when-let [shape (rum/react drawing)]
|
||||
(shapes/shape->drawing-svg shape))
|
||||
|
|
Loading…
Add table
Reference in a new issue