From adbc0c7edd432b73882a0ae89e4afeb258a76a2b Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Mon, 28 Dec 2015 11:28:01 +0200 Subject: [PATCH] Move canvas related stuff into separated ns. --- frontend/uxbox/ui/workspace/canvas.cljs | 125 +++++++++++++++++++++ frontend/uxbox/ui/workspace/toolboxes.cljs | 3 +- frontend/uxbox/ui/workspace/workarea.cljs | 109 +----------------- 3 files changed, 128 insertions(+), 109 deletions(-) create mode 100644 frontend/uxbox/ui/workspace/canvas.cljs diff --git a/frontend/uxbox/ui/workspace/canvas.cljs b/frontend/uxbox/ui/workspace/canvas.cljs new file mode 100644 index 000000000..f6a1a79de --- /dev/null +++ b/frontend/uxbox/ui/workspace/canvas.cljs @@ -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]})) + diff --git a/frontend/uxbox/ui/workspace/toolboxes.cljs b/frontend/uxbox/ui/workspace/toolboxes.cljs index b3f053031..da135ecb6 100644 --- a/frontend/uxbox/ui/workspace/toolboxes.cljs +++ b/frontend/uxbox/ui/workspace/toolboxes.cljs @@ -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)])]]))) diff --git a/frontend/uxbox/ui/workspace/workarea.cljs b/frontend/uxbox/ui/workspace/workarea.cljs index 5d2791e44..6eaa12743 100644 --- a/frontend/uxbox/ui/workspace/workarea.cljs +++ b/frontend/uxbox/ui/workspace/workarea.cljs @@ -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