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

Add initial work on shape rendering in canvas.

Browse source 
With selection rectangle/circles.
This commit is contained in:
Andrey Antukh 2015-12-26 18:07:21 +02:00
parent 75b3aaf2a6
commit f393e301f0
1 changed files with 48 additions and 2 deletions

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

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