Complete refactor of shapes rendering.

This commit is contained in:
Andrey Antukh 2016-02-26 19:42:53 +02:00
parent 2fed551cf1
commit 1572c4cdd3
18 changed files with 403 additions and 261 deletions

View file

@ -4,21 +4,18 @@
[beicon.core :as rx]
[cats.labs.lens :as l]
[goog.events :as events]
[uxbox.router :as r]
[uxbox.rstore :as rs]
[uxbox.state :as st]
[uxbox.xforms :as xf]
[uxbox.shapes :as sh]
[uxbox.util.lens :as ul]
[uxbox.library.icons :as _icons]
[uxbox.data.projects :as dp]
[uxbox.data.workspace :as dw]
[uxbox.ui.mixins :as mx]
[uxbox.util.geom.point :as gpt]
[uxbox.util.dom :as dom]
[uxbox.util.data :refer (parse-int)]
[uxbox.ui.core :as uuc]
[uxbox.ui.keyboard :as kbd]
[uxbox.ui.workspace.base :as wb]
[uxbox.ui.shapes :as uus]
[uxbox.ui.mixins :as mx]
[uxbox.ui.workspace.base :as uuwb]
[uxbox.ui.workspace.canvas.movement]
[uxbox.ui.workspace.canvas.draw :refer (draw-area)]
[uxbox.ui.workspace.canvas.ruler :refer (ruler)]
@ -43,97 +40,27 @@
:name "background"
:mixins [mx/static]}))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Shape
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(declare shape)
(defn shape-render
[own item selected]
(let [{:keys [id x y width height group] :as item} item
selected? (contains? selected id)
local (:rum/local own)]
(letfn [(on-mouse-down [event]
(when-not (:blocked item)
(cond
(and group (:locked (sh/resolve-parent item)))
nil
(and (not selected?) (empty? selected))
(do
(dom/stop-propagation event)
(swap! local assoc :init-coords [x y])
(wb/emit-interaction! :shape/movement)
(rs/emit! (dw/select-shape id)))
(and (not selected?) (not (empty? selected)))
(do
(dom/stop-propagation event)
(swap! local assoc :init-coords [x y])
(if (kbd/shift? event)
(rs/emit! (dw/select-shape id))
(rs/emit! (dw/deselect-all)
(dw/select-shape id))))
:else
(do
(dom/stop-propagation event)
(swap! local assoc :init-coords [x y])
(wb/emit-interaction! :shape/movement)))))
(on-mouse-up [event]
(cond
(and group (:locked (sh/resolve-parent item)))
nil
:else
(do
(dom/stop-propagation event)
(wb/emit-interaction! :nothing)
)))]
(html
[:g.shape {:class (when selected? "selected")
:on-mouse-down on-mouse-down
:on-mouse-up on-mouse-up}
(sh/-render item #(shape % selected))]))))
(def ^:static shape
(mx/component
{:render shape-render
:name "shape"
:mixins [(mx/local {}) rum/reactive]}))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Canvas
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn- canvas-render
[own {:keys [width height id] :as page}]
(let [workspace (rum/react wb/workspace-l)
shapes-by-id (rum/react wb/shapes-by-id-l)
workspace-selected (:selected workspace)
xf (comp
(map #(get shapes-by-id %))
(remove :hidden))
shapes (->> (vals shapes-by-id)
(filter #(= (:page %) id)))
shapes-selected (filter (comp workspace-selected :id) shapes)
shapes-notselected (filter (comp not workspace-selected :id) shapes)]
(let [workspace (rum/react uuwb/workspace-l)]
(html
[:svg.page-canvas {:x wb/canvas-start-x
:y wb/canvas-start-y
[:svg.page-canvas {:x uuwb/canvas-start-x
:y uuwb/canvas-start-y
:ref (str "canvas" id)
:width width
:height height}
(background)
(grid 1)
[:svg.page-layout {}
(shapes-selection shapes-selected)
#_(shapes-selection shapes-selected)
[:g.main {}
(for [item (reverse (sequence xf (:shapes page)))]
(-> (shape item workspace-selected)
(rum/with-key (str (:id item)))))
(for [item (:shapes page)]
(-> (uus/shape item)
(rum/with-key (str item))))
(draw-area)]]])))
(def canvas
@ -148,8 +75,8 @@
(defn viewport-render
[own]
(let [workspace (rum/react wb/workspace-l)
page (rum/react wb/page-l)
(let [workspace (rum/react uuwb/workspace-l)
page (rum/react uuwb/page-l)
drawing? (:drawing workspace)
zoom 1]
(letfn [(on-mouse-down [event]
@ -157,14 +84,14 @@
(when-not (empty? (:selected workspace))
(rs/emit! (dw/deselect-all)))
(if-let [shape (:drawing workspace)]
(wb/emit-interaction! :draw/shape)
(wb/emit-interaction! :draw/selrect)))
(uuc/emit-action! :draw/shape)
(uuc/emit-action! :draw/selrect)))
(on-mouse-up [event]
(dom/stop-propagation event)
(wb/emit-interaction! :nothing))]
(uuc/emit-action! :nothing))]
(html
[:svg.viewport {:width wb/viewport-width
:height wb/viewport-height
[:svg.viewport {:width uuwb/viewport-width
:height uuwb/viewport-height
:ref "viewport"
:class (when drawing? "drawing")
:on-mouse-down on-mouse-down
@ -197,11 +124,11 @@
(on-key-down [event]
(when (kbd/space? event)
(wb/emit-interaction! :scroll/viewport)))
(uuc/emit-action! :scroll/viewport)))
(on-key-up [event]
(when (kbd/space? event)
(wb/emit-interaction! :nothing)))
(uuc/emit-action! :nothing)))
(on-mousemove [event]
(let [wpt (gpt/point (.-clientX event)
@ -213,7 +140,7 @@
:window-coords wpt
:viewport-coords vppt
:canvas-coords cvpt}]
(rx/push! wb/mouse-b event)))]
(rx/push! uuwb/mouse-b event)))]
(let [key1 (events/listen js/document EventType.MOUSEMOVE on-mousemove)
key2 (events/listen js/document EventType.KEYDOWN on-key-down)