✨ Allow canvas movement and resize.

frontend/src/uxbox/main/data/shapes.cljs

@@ -372,6 +372,7 @@
   (let [xf (comp (map #(get-in state [:shapes %]))
                  (remove :hidden)
                  (remove :blocked)
+                 (remove #(= :canvas (:type %)))
                  (map geom/selection-rect))
         match (partial try-match-shape xf selrect)
         shapes (get-in state [:pages page-id :shapes])]

frontend/src/uxbox/main/geom.cljs

@@ -512,6 +512,7 @@
   "Apply the matrix transformation to shape."
   [{:keys [type] :as shape} xfmt]
   (case type
+    :canvas (transform-rect shape xfmt)
     :rect (transform-rect shape xfmt)
     :icon (transform-rect shape xfmt)
     :text (transform-rect shape xfmt)

frontend/src/uxbox/main/ui/shapes.cljs

@@ -14,12 +14,14 @@
    [uxbox.main.ui.shapes.image :as image]
    [uxbox.main.ui.shapes.path :as path]
    [uxbox.main.ui.shapes.rect :as rect]
+   [uxbox.main.ui.shapes.canvas :as canvas]
    [uxbox.main.ui.shapes.text :as text]))
 
 (defn render-shape
   [shape]
   (mf/html
    (case (:type shape)
+     :canvas [:& canvas/canvas-component {:shape shape}]
      :curve [:& path/path-component {:shape shape}]
      :text [:& text/text-component {:shape shape}]
      :icon [:& icon/icon-component {:shape shape}]

frontend/src/uxbox/main/ui/shapes/common.cljs

@@ -35,30 +35,36 @@
               (rx/take-until stoper))
          (rx/of (dw/materialize-current-modifier id)))))))
 
-(defn start-move-selected
+(def start-move-selected
-  []
   (reify
     ptk/WatchEvent
     (watch [_ state stream]
       (let [pid (get-in state [:workspace :current])
             selected (get-in state [:workspace pid :selected])]
+        (prn "start-move-selected" selected)
         (rx/from-coll (map start-move selected))))))
 
 (defn on-mouse-down
-  [event {:keys [id] :as shape} selected]
+  [event {:keys [id type] :as shape} selected]
   (let [selected? (contains? selected id)
         drawing? @refs/selected-drawing-tool]
+    (prn "on-mouse-down" id type selected? (= type :canvas))
     (when-not (:blocked shape)
       (cond
         drawing?
         nil
 
+        (= type :canvas)
+        (when selected?
+          (dom/stop-propagation event)
+          (st/emit! start-move-selected))
+
         (and (not selected?) (empty? selected))
         (do
           (dom/stop-propagation event)
           (st/emit! (dw/deselect-all)
                     (dw/select-shape id)
-                    (start-move-selected)))
+                    start-move-selected))
 
         (and (not selected?) (not (empty? selected)))
         (do
@@ -67,8 +73,8 @@
             (st/emit! (dw/select-shape id))
             (st/emit! (dw/deselect-all)
                       (dw/select-shape id)
-                      (start-move-selected))))
+                      start-move-selected)))
         :else
         (do
           (dom/stop-propagation event)
-          (st/emit! (start-move-selected)))))))
+          (st/emit! start-move-selected))))))

frontend/src/uxbox/main/ui/shapes/rect.cljs

@@ -25,7 +25,6 @@
   (let [selected (mf/deref refs/selected-shapes)
         selected? (contains? selected (:id shape))
         on-mouse-down #(common/on-mouse-down % shape selected)]
-        ;; shape (assoc shape :modifiers modifiers)]
     [:g.shape {:class (when selected? "selected")
                :on-mouse-down on-mouse-down}
      [:& rect-shape {:shape shape}]]))

frontend/src/uxbox/main/ui/workspace/canvas.cljs

@@ -1,60 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
-;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
-
-(ns uxbox.main.ui.workspace.canvas
-  (:require
-   [lentes.core :as l]
-   [rumext.alpha :as mf]
-   [uxbox.main.constants :as c]
-   [uxbox.main.data.workspace :as dw]
-   [uxbox.main.geom :as geom]
-   [uxbox.main.refs :as refs]
-   [uxbox.main.store :as st]
-   [uxbox.main.ui.keyboard :as kbd]
-   [uxbox.main.ui.shapes :as uus]
-   [uxbox.main.ui.workspace.drawarea :refer [draw-area]]
-   [uxbox.main.ui.workspace.selection :refer [selection-handlers]]
-   [uxbox.main.ui.workspace.streams :as uws]
-   [uxbox.util.data :refer [parse-int]]
-   [uxbox.util.dom :as dom]
-   [uxbox.util.geom.point :as gpt]))
-
-(def selected-canvas
-  (-> (l/key :selected-canvas)
-      (l/derive refs/workspace)))
-
-(defn- make-canvas-iref
-  [id]
-  (-> (l/in [:canvas id])
-      (l/derive st/state)))
-
-(mf/defc canvas
-  [{:keys [id] :as props}]
-  (let [canvas-iref (mf/use-memo #(make-canvas-iref id) #js [id])
-        canvas (-> (mf/deref canvas-iref)
-                   (geom/size))
-        selected (mf/deref selected-canvas)
-        selected? (= id selected)]
-    (letfn [(on-double-click [event]
-              (dom/prevent-default event)
-              (st/emit! (dw/select-canvas id)))
-            (on-mouse-down [event]
-              (when selected?
-                (dom/stop-propagation event)
-                #_(st/emit! (start-move id))))]
-      [:rect.page-canvas
-       {:x (:x1 canvas)
-        :class (when selected? "selected")
-        :y (:y1 canvas)
-        :fill (:background canvas "#ffffff")
-        :width (:width canvas)
-        :height (:height canvas)
-        :on-mouse-down on-mouse-down
-        :on-double-click on-double-click}])))
-
-
-

frontend/src/uxbox/main/ui/workspace/viewport.cljs

@@ -17,7 +17,6 @@
    [uxbox.main.refs :as refs]
    [uxbox.main.store :as st]
    [uxbox.main.ui.keyboard :as kbd]
-   [uxbox.main.ui.workspace.canvas :refer [canvas]]
    [uxbox.main.ui.workspace.grid :refer [grid]]
    [uxbox.main.ui.workspace.ruler :refer [ruler]]
    [uxbox.main.ui.workspace.streams :as uws]
@@ -229,8 +228,6 @@
                   (events/unlistenByKey key2))))]
 
       (mf/use-effect on-mount)
-      ;; (prn "viewport.render" (:id page))
-
       [:*
        [:& coordinates {:zoom zoom}]
        #_[:div.tooltip-container
@@ -249,9 +246,6 @@
         [:g.zoom {:transform (str "scale(" zoom ", " zoom ")")}
          (when page
            [:*
-            (for [id (:canvas page)]
-              [:& canvas {:key id :id id}])
-
             (for [id (reverse (:shapes page))]
               [:& uus/shape-component {:id id :key id}])