0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-19 03:01:27 -05:00

Move canvas related stuff into separated ns.

This commit is contained in:
Andrey Antukh 2015-12-28 11:28:01 +02:00
parent fa64f8bbbf
commit adbc0c7edd
3 changed files with 128 additions and 109 deletions

View 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]}))

View file

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

View file

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