From 46d6ef2a6829857110f0629cbc83d50de8b915fd Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Sun, 24 Jan 2016 02:25:49 +0200 Subject: [PATCH] Initial work on basic shapes rendering. --- .../ui/workspace/toolboxes/drawtools.cljs | 52 ++++++++++++++++--- src/uxbox/ui/workspace/toolboxes/layers.cljs | 2 + 2 files changed, 48 insertions(+), 6 deletions(-) diff --git a/src/uxbox/ui/workspace/toolboxes/drawtools.cljs b/src/uxbox/ui/workspace/toolboxes/drawtools.cljs index 93538767c7..8be607486a 100644 --- a/src/uxbox/ui/workspace/toolboxes/drawtools.cljs +++ b/src/uxbox/ui/workspace/toolboxes/drawtools.cljs @@ -2,6 +2,7 @@ (:require [sablono.core :as html :refer-macros [html]] [rum.core :as rum] [cats.labs.lens :as l] + [uxbox.locales :refer (tr)] [uxbox.router :as r] [uxbox.rstore :as rs] [uxbox.state :as st] @@ -14,6 +15,18 @@ [uxbox.ui.mixins :as mx] [uxbox.ui.dom :as dom])) +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; Lenses +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; + +(def ^:private ^:static drawing-shape + "A focused vision of the drawing property + of the workspace status. This avoids + rerender the whole toolbox on each workspace + change." + (as-> (l/in [:workspace :drawing]) $ + (l/focus-atom $ st/state))) + ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Draw Tools ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; @@ -21,24 +34,49 @@ (def ^:staric +draw-tools+ {:rect {:icon i/box - :help "Box (Ctrl + B)" + :help (tr "ds.help.rect") + :shape {:type :builtin/rect + :name "Rect" + :width 20 + :height 20 + :stroke "#000000" + :stroke-width "1" + :view-box [0 0 20 20]} :priority 10} :circle {:icon i/circle - :help "Circle (Ctrl + E)" + :help (tr "ds.help.circle") + :shape {:type :builtin/circle + :name "Circle" + :width 20 + :height 20 + :stroke "#000000" + :stroke-width "1" + :view-box [0 0 20 20]} :priority 20} :line {:icon i/line - :help "Line (Ctrl + L)" + :help (tr "ds.help.line") + :shape {:type :builtin/line + :width 20 + :height 20 + :view-box [0 0 20 20]} :priority 30}}) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Draw Tool Box ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +(defn- select-for-draw + [icon] + (if (= (:drawing @wb/workspace-l) icon) + (rs/emit! (dw/select-for-drawing nil)) + (rs/emit! (dw/select-for-drawing icon)))) + (defn draw-tools-render [open-toolboxes] (let [workspace (rum/react wb/workspace-l) + drawing (rum/react drawing-shape) close #(rs/emit! (dw/toggle-toolbox :draw)) tools (->> (into [] +draw-tools+) (sort-by (comp :priority second)))] @@ -46,14 +84,16 @@ [:div#form-tools.tool-window [:div.tool-window-bar [:div.tool-window-icon i/window] - [:span "Tools"] + [:span (tr "ds.tools")] [:div.tool-window-close {:on-click close} i/close]] [:div.tool-window-content - (for [[key props] tools] + (for [[key props] tools + :let [selected? (= drawing (:shape props))]] [:div.tool-btn.tooltip.tooltip-hover {:alt (:help props) + :class (when selected? "selected") :key (name key) - :on-click (constantly nil)} + :on-click (partial select-for-draw (:shape props))} (:icon props)])]]))) (def ^:static draw-toolbox diff --git a/src/uxbox/ui/workspace/toolboxes/layers.cljs b/src/uxbox/ui/workspace/toolboxes/layers.cljs index a53db284b7..e2cd0e7611 100644 --- a/src/uxbox/ui/workspace/toolboxes/layers.cljs +++ b/src/uxbox/ui/workspace/toolboxes/layers.cljs @@ -144,6 +144,7 @@ :let [key (str (:id shape))]] ;; TODO: make polymorphic (case (:type shape) + :builtin/rect (rum/with-key (layer-element shape selected) key) :builtin/icon (rum/with-key (layer-element shape selected) key) :builtin/group (rum/with-key (layer-group shape selected) key)))])]))) @@ -175,6 +176,7 @@ :let [key (str (:id shape))]] ;; TODO: make polymorphic (case (:type shape) + :builtin/rect (rum/with-key (layer-element shape selected) key) :builtin/icon (rum/with-key (layer-element shape selected) key) :builtin/group (rum/with-key (layer-group shape selected) key)))]] [:div.layers-tools