mirror of
https://github.com/penpot/penpot.git
synced 2025-03-18 18:51:29 -05:00
Move canvas related stuff into separated ns.
This commit is contained in:
Andrey Antukh
parent
fa64f8bbbf
commit
adbc0c7edd
3 changed files with 128 additions and 109 deletions
125
frontend/uxbox/ui/workspace/canvas.cljs
Normal file
125
frontend/uxbox/ui/workspace/canvas.cljs
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
(ns uxbox.ui.workspace.canvas
|
||||
(:require [sablono.core :as html :refer-macros [html]]
|
||||
[rum.core :as rum]
|
||||
[uxbox.router :as r]
|
||||
[uxbox.rstore :as rs]
|
||||
[uxbox.state :as s]
|
||||
[uxbox.shapes :as shapes]
|
||||
[uxbox.library.icons :as _icons]
|
||||
[uxbox.ui.mixins :as mx]
|
||||
[uxbox.ui.util :as util]
|
||||
[uxbox.data.projects :as dp]
|
||||
[uxbox.ui.workspace.base :as wb]
|
||||
[uxbox.ui.workspace.rules :as wr]
|
||||
[uxbox.ui.workspace.toolboxes :as toolboxes]))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Background
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn background-render
|
||||
[]
|
||||
(html
|
||||
[:rect
|
||||
{:x 0 :y 0 :width "100%" :height "100%" :fill "white"}]))
|
||||
|
||||
(def background
|
||||
(util/component
|
||||
{:render background-render
|
||||
:name "background"
|
||||
: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
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn canvas-render
|
||||
[]
|
||||
(let [page (rum/react wb/page-state)
|
||||
page-width (:width page)
|
||||
page-height (:height page)
|
||||
;; selection-uuids (rum/react selected-ids)
|
||||
;; selected-shapes (rum/react selected-shapes)
|
||||
;; raw-shapes (into []
|
||||
;; (comp
|
||||
;; (filter :shape/visible?)
|
||||
;; (filter #(not (contains? selection-uuids (:shape/uuid %))))
|
||||
;; (map :shape/data))
|
||||
;; shapes)
|
||||
item (first _icons/+external+)
|
||||
]
|
||||
(html
|
||||
[:svg#page-canvas
|
||||
{:x wb/document-start-x
|
||||
:y wb/document-start-y
|
||||
:ref "canvas"
|
||||
:width page-width
|
||||
:height page-height
|
||||
;; :on-mouse-down cs/on-mouse-down
|
||||
;; :on-mouse-up cs/on-mouse-up
|
||||
}
|
||||
(background)
|
||||
[:svg#page-layout
|
||||
(shape item)]
|
||||
#_(apply vector :svg#page-layout (map shapes/shape->svg raw-shapes))
|
||||
#_(when-let [shape (rum/react drawing)]
|
||||
(shapes/shape->drawing-svg shape))
|
||||
#_(when-not (empty? selected-shapes)
|
||||
(let [rs selected-shapes]
|
||||
(vec (cons :g
|
||||
(concat
|
||||
(map shapes/shape->selected-svg rs)
|
||||
(map shapes/shape->svg rs))))))])))
|
||||
|
||||
(def canvas
|
||||
(util/component
|
||||
{:render canvas-render
|
||||
:name "canvas"
|
||||
:mixins [rum/reactive wb/mouse-mixin]}))
|
||||
|
||||
|
|
@ -133,8 +133,7 @@
|
|||
:value (pr-str (:id icon-coll))}
|
||||
(:name icon-coll)])]]
|
||||
(for [icon icons]
|
||||
[:div.figure-btn {:key (str "icon" (:id icon))
|
||||
:class nil #_"selected"
|
||||
[:div.figure-btn {:class nil #_"selected"
|
||||
:on-click (constantly nil)}
|
||||
(shapes/render icon)])]])))
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
[uxbox.ui.mixins :as mx]
|
||||
[uxbox.ui.util :as util]
|
||||
[uxbox.data.projects :as dp]
|
||||
[uxbox.ui.workspace.canvas :as wc]
|
||||
[uxbox.ui.workspace.base :as wb]
|
||||
[uxbox.ui.workspace.rules :as wr]
|
||||
[uxbox.ui.workspace.toolboxes :as toolboxes]))
|
||||
|
|
@ -33,18 +34,6 @@
|
|||
:name "coordenates"
|
||||
:mixins [rum/reactive]}))
|
||||
|
||||
(defn background-render
|
||||
[]
|
||||
(html
|
||||
[:rect
|
||||
{:x 0 :y 0 :width "100%" :height "100%" :fill "white"}]))
|
||||
|
||||
(def background
|
||||
(util/component
|
||||
{:render background-render
|
||||
:name "background"
|
||||
:mixins [mx/static]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Grid
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
@ -120,100 +109,6 @@
|
|||
: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
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn canvas-render
|
||||
[]
|
||||
(let [page (rum/react wb/page-state)
|
||||
page-width (:width page)
|
||||
page-height (:height page)
|
||||
;; selection-uuids (rum/react selected-ids)
|
||||
;; selected-shapes (rum/react selected-shapes)
|
||||
;; raw-shapes (into []
|
||||
;; (comp
|
||||
;; (filter :shape/visible?)
|
||||
;; (filter #(not (contains? selection-uuids (:shape/uuid %))))
|
||||
;; (map :shape/data))
|
||||
;; shapes)
|
||||
item (first _icons/+external+)
|
||||
]
|
||||
(html
|
||||
[:svg#page-canvas
|
||||
{:x wb/document-start-x
|
||||
:y wb/document-start-y
|
||||
:ref "canvas"
|
||||
:width page-width
|
||||
:height page-height
|
||||
;; :on-mouse-down cs/on-mouse-down
|
||||
;; :on-mouse-up cs/on-mouse-up
|
||||
}
|
||||
(background)
|
||||
[:svg#page-layout
|
||||
(shape item)]
|
||||
#_(apply vector :svg#page-layout (map shapes/shape->svg raw-shapes))
|
||||
#_(when-let [shape (rum/react drawing)]
|
||||
(shapes/shape->drawing-svg shape))
|
||||
#_(when-not (empty? selected-shapes)
|
||||
(let [rs selected-shapes]
|
||||
(vec (cons :g
|
||||
(concat
|
||||
(map shapes/shape->selected-svg rs)
|
||||
(map shapes/shape->svg rs))))))])))
|
||||
|
||||
(def canvas
|
||||
(util/component
|
||||
{:render canvas-render
|
||||
:name "canvas"
|
||||
:mixins [rum/reactive wb/mouse-mixin]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Viewport
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
@ -228,7 +123,7 @@
|
|||
:height wb/viewport-width}
|
||||
[:g.zoom
|
||||
{:transform (str "scale(" zoom ", " zoom ")")}
|
||||
(canvas)
|
||||
(wc/canvas)
|
||||
(grid (:grid-enabled workspace false) zoom)]])))
|
||||
|
||||
(def viewport
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue