Add move cursor when shape is displaced on viewport.

frontend/resources/styles/common/base.scss

@@ -204,6 +204,10 @@ h4 {
   padding: 0 !important;
 }
 
+.move-cursor {
+  cursor: move;
+}
+
 hr {
   border-top: solid 1px $color-gray-light;
   border-right: 0;

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

@@ -10,6 +10,7 @@
             [uxbox.main.geom :as geom]
             [uxbox.main.ui.shapes.common :as common]
             [uxbox.main.ui.shapes.attrs :as attrs]
+            [uxbox.util.data :refer [classnames]]
             [uxbox.util.geom.matrix :as gmt]
             [uxbox.util.geom.point :as gpt]
             [uxbox.util.mixins :as mx :include-macros true]))
@@ -45,10 +46,13 @@
                           (:cy shape))
         rotation (or rotation 0)
 
+        moving? (boolean displacement)
+
         xfmt (-> (gmt/matrix)
                  (gmt/rotate* rotation center))
 
         props {:id (str "shape-" id)
+               :class (classnames :move-cursor moving?)
                :transform (str xfmt)}
 
         attrs (merge props

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

@@ -17,6 +17,7 @@
             [uxbox.main.ui.shapes.text :as text]
             [uxbox.main.ui.shapes.path :as path]
             [uxbox.main.ui.shapes.image :as image]
+            [uxbox.util.data :refer [classnames]]
             [uxbox.util.geom.matrix :as gmt]
             [uxbox.util.mixins :as mx :include-macros true]))
 
@@ -75,7 +76,9 @@
                resize (gmt/multiply resize)
                displacement (gmt/multiply displacement))
 
+        moving? (boolean displacement)
         attrs {:id (str "shape-" id)
+               :class (classnames :move-cursor moving?)
                :transform (str xfmt)}]
     [:g attrs
      (for [item (reverse items)

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

@@ -9,9 +9,11 @@
             [uxbox.main.refs :as refs]
             [uxbox.main.ui.shapes.common :as common]
             [uxbox.main.ui.shapes.attrs :as attrs]
-            [uxbox.util.mixins :as mx :include-macros true]
+            [uxbox.util.data :refer [classnames]]
             [uxbox.util.geom.matrix :as gmt]
-            [uxbox.util.geom.point :as gpt]))
+            [uxbox.util.geom.point :as gpt]
+            [uxbox.util.mixins :as mx :include-macros true]))
+
 
 ;; --- Icon Component
 
@@ -39,7 +41,6 @@
         center (gpt/point x-center y-center)]
     (gmt/rotate* mt rotation center)))
 
-
 (mx/defc icon-shape
   {:mixins [mx/static]}
   [{:keys [id content metadata rotation x1 y1 modifiers] :as shape}]
@@ -56,10 +57,12 @@
         xfmt (cond-> (gmt/matrix)
                (pos? rotation) (rotate shape))
 
+        moving? (boolean displacement)
         props {:id (str id)
                :x x1
                :y y1
                :view-box view-box
+               :class (classnames :move-cursor moving?)
                :width width
                :height height
                :preserve-aspect-ratio "none"

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

@@ -14,8 +14,9 @@
             [uxbox.main.ui.shapes.common :as common]
             [uxbox.main.ui.shapes.attrs :as attrs]
             [uxbox.main.data.images :as udi]
-            [uxbox.util.mixins :as mx :include-macros true]
+            [uxbox.util.data :refer [classnames]]
-            [uxbox.util.geom.matrix :as gmt]))
+            [uxbox.util.geom.matrix :as gmt]
+            [uxbox.util.mixins :as mx :include-macros true]))
 
 ;; --- Refs
 
@@ -62,9 +63,11 @@
                resize (gmt/multiply resize)
                displacement (gmt/multiply displacement))
 
+        moving? (boolean displacement)
         props {:x x1 :y y1
                :id (str "shape-" id)
                :preserve-aspect-ratio "none"
+               :class (classnames :move-cursor moving?)
                :xlink-href (:url image)
                :transform (str xfmt)
                :width width

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

@@ -7,12 +7,13 @@
 (ns uxbox.main.ui.shapes.path
   (:require [potok.core :as ptk]
             [cuerdas.core :as str :include-macros true]
+            [uxbox.main.geom :as geom]
             [uxbox.main.store :as st]
             [uxbox.main.refs :as refs]
+            [uxbox.main.data.shapes :as uds]
             [uxbox.main.ui.shapes.common :as common]
             [uxbox.main.ui.shapes.attrs :as attrs]
-            [uxbox.main.data.shapes :as uds]
+            [uxbox.util.data :refer [classnames]]
-            [uxbox.main.geom :as geom]
             [uxbox.util.geom.matrix :as gmt]
             [uxbox.util.geom.point :as gpt]
             [uxbox.util.mixins :as mx :include-macros true]))
@@ -69,9 +70,14 @@
         shape (cond-> shape
                 displacement (geom/transform displacement)
                 resize (geom/transform resize))
+        moving? (boolean displacement)
+
         pdata (render-path shape)
-        attrs (merge {:id (str id) :d pdata}
+        props {:id (str id)
-                     (attrs/extract-style-attrs shape))]
+               :class (classnames :move-cursor moving?)
+               :d pdata}
+
+        attrs (merge (attrs/extract-style-attrs shape) props)]
     (if background?
       [:g {}
        [:path {:stroke "transparent"

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

@@ -12,6 +12,7 @@
             [uxbox.util.geom.matrix :as gmt]
             [uxbox.util.geom.point :as gpt]
             [uxbox.util.mixins :as mx :include-macros true]
+            [uxbox.util.data :refer [classnames]]
             [uxbox.util.dom :as dom]))
 
 ;; --- Rect Component
@@ -53,11 +54,13 @@
         xfmt (cond-> (gmt/matrix)
                (pos? rotation) (rotate shape))
 
+        moving? (boolean displacement)
+
         props {:x x1 :y y1
                :id (str "shape-" id)
+               :class (classnames :move-cursor moving?)
                :width width
                :height height
                :transform (str xfmt)}
-
         attrs (merge (attrs/extract-style-attrs shape) props)]
     [:rect attrs]))

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

@@ -16,6 +16,7 @@
             [uxbox.main.ui.shapes.common :as common]
             [uxbox.main.ui.shapes.attrs :as attrs]
             [uxbox.util.color :as color]
+            [uxbox.util.data :refer [classnames]]
             [uxbox.util.dom :as dom]
             [uxbox.util.geom.matrix :as gmt]
             [uxbox.util.mixins :as mx :include-macros true])
@@ -166,8 +167,10 @@
 
         {:keys [x1 y1 width height] :as shape} (-> (geom/transform shape xfmt)
                                                    (geom/size))
+        moving? (boolean displacement)
         props {:x x1
                :y y1
+               :class (classnames :move-cursor moving?)
                :id (str id)
                :ref "fobject"
                :width width
@@ -187,16 +190,19 @@
   {:mixins [mx/static]
    :did-mount text-shape-wrapper-did-mount
    :did-remount text-shape-wrapper-did-remount}
-  [{:keys [id content tmp-resize-xform tmp-displacement] :as shape}]
+  [{:keys [id content modifiers] :as shape}]
-  (let [xfmt (cond-> (gmt/matrix)
+  (let [{:keys [displacement resize]} modifiers
-                tmp-displacement (gmt/translate tmp-displacement)
+        xfmt (cond-> (gmt/matrix)
-                tmp-resize-xform (gmt/multiply tmp-resize-xform))
+               displacement (gmt/multiply displacement)
+               resize (gmt/multiply resize))
 
         {:keys [x1 y1 width height] :as shape} (-> (geom/transform shape xfmt)
                                                    (geom/size))
+        moving? (boolean displacement)
         style (make-style shape)]
     [:foreignObject {:x x1
                      :y y1
+                     :class (classnames :move-cursor moving?)
                      :id (str id)
                      :ref "fobject"
                      :width width

frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs

@@ -9,6 +9,7 @@
   (:require [lentes.core :as l]
             [cuerdas.core :as str]
             [potok.core :as ptk]
+            [uxbox.builtins.icons :as i]
             [uxbox.main.store :as st]
             [uxbox.main.refs :as refs]
             [uxbox.main.data.projects :as dp]
@@ -17,13 +18,12 @@
             [uxbox.main.data.lightbox :as udl]
             [uxbox.main.ui.workspace.sidebar.sitemap-pageform]
             [uxbox.main.ui.lightbox :as lbx]
-            [uxbox.builtins.icons :as i]
-            [uxbox.util.mixins :as mx :include-macros true]
             [uxbox.util.i18n :refer (tr)]
             [uxbox.util.router :as r]
-            [uxbox.util.data :refer (classnames)]
+            [uxbox.util.data :refer [classnames]]
             [uxbox.util.dom.dnd :as dnd]
-            [uxbox.util.dom :as dom]))
+            [uxbox.util.dom :as dom]
+            [uxbox.util.mixins :as mx :include-macros true]))
 
 ;; --- Refs