🎉 New cursors in viewport

2025-02-13 10:38:13 -05:00 · 2020-06-02 10:44:32 +02:00 · 2020-06-02 10:44:32 +02:00 · bedd244f44
commit bedd244f44
parent b3237524bd
10 changed files with 49 additions and 34 deletions
--- a/frontend/resources/styles/main/partials/workspace.scss
+++ b/frontend/resources/styles/main/partials/workspace.scss
@ -145,15 +145,6 @@

      g.controls {
        rect.main { pointer-events: none; }
-        circle.rotate { cursor: ns-resize; } // TODO
-        .top-left { cursor: nwse-resize; }
-        .bottom-right { cursor: nwse-resize; }
-        .top-right { cursor: nesw-resize; }
-        .bottom-left { cursor: nesw-resize; }
-        .top { cursor: ns-resize; }
-        .bottom { cursor: ns-resize; }
-        .left { cursor: ew-resize; }
-        .right { cursor: ew-resize; }
      }
    }

--- a/frontend/src/uxbox/main/data/workspace.cljs
+++ b/frontend/src/uxbox/main/data/workspace.cljs
@ -315,6 +315,14 @@

        (reduce reduce-fn state groups-to-adjust)))))

+(defn start-pan [state]
+  (-> state
+      (assoc-in [:workspace-local :panning] true)))
+
+(defn finish-pan [state]
+  (-> state
+      (update :workspace-local dissoc :panning)))
+

 ;; --- Toggle layout flag

--- a/frontend/src/uxbox/main/data/workspace/transforms.cljs
+++ b/frontend/src/uxbox/main/data/workspace/transforms.cljs
@ -204,7 +204,7 @@
             (rx/take-until stopper)
             (rx/map #(gpt/to-vec initial %))
             (rx/map #(gpt/length %))
-             (rx/filter #(> % 0.5))
+             (rx/filter #(> % 1))
             (rx/take 1)
             (rx/map #(start-move initial selected)))))))

--- a/frontend/src/uxbox/main/ui/cursors.clj
+++ b/frontend/src/uxbox/main/ui/cursors.clj
@ -64,11 +64,13 @@
    data))

 (defmacro cursor-ref
+  "Creates a static cursor given its name, rotation and x/y hotspot"
  ([id] (encode-svg-cursor id default-rotation default-hotspot-x default-hotspot-y))
  ([id rotation] (encode-svg-cursor id rotation default-hotspot-x default-hotspot-y))
  ([id rotation x y] (encode-svg-cursor id rotation x y)))

 (defmacro cursor-fn
+  "Creates a dynamic cursor that can be rotated in runtime"
  [id initial]
  (let [cursor (encode-svg-cursor id "{{rotation}}" default-hotspot-x default-hotspot-y)]
    `(fn [rot#]
--- a/frontend/src/uxbox/main/ui/cursors.cljs
+++ b/frontend/src/uxbox/main/ui/cursors.cljs
@ -26,15 +26,10 @@
 (def pen (cursor-ref :pen 0 0 0))
 (def pointer-inner (cursor-ref :pointer-inner 0 0 0))
 (def resize-alt (cursor-ref :resize-alt))
-
-#_(def resize-nesw (cursor-fn :resize-diagonal 90))
-#_(def resize-nwse (cursor-fn :resize-diagonal 0))
 (def resize-nesw (cursor-fn :resize-h 45))
 (def resize-nwse (cursor-fn :resize-h 135))
-
 (def resize-ew (cursor-fn :resize-h 0))
 (def resize-ns (cursor-fn :resize-h 90))
-
 (def rotate (cursor-fn :rotate 90))
 (def text (cursor-ref :text))

--- a/frontend/src/uxbox/main/ui/workspace/selection.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/selection.cljs
@ -19,6 +19,7 @@
   [uxbox.main.refs :as refs]
   [uxbox.main.store :as st]
   [uxbox.main.streams :as ms]
+   [uxbox.main.ui.cursors :as cur]
   [uxbox.util.dom :as dom]
   [uxbox.util.object :as obj]
   [uxbox.common.geom.shapes :as geom]
@ -26,8 +27,6 @@
   [uxbox.common.geom.matrix :as gmt]
   [uxbox.util.debug :refer [debug?]]))

-(defn rotation-cursor [angle]
-  (str "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20px' height='20px' transform='rotate(" angle ")' viewBox='0 0 132.292 132.006'%3E%3Cpath d='M85.225 3.48c.034 4.989-.093 9.852-.533 14.78-29.218 5.971-54.975 27.9-63.682 56.683-1.51 2.923-1.431 7.632-3.617 9.546-5.825.472-11.544.5-17.393.45 11.047 15.332 20.241 32.328 32.296 46.725 5.632 1.855 7.155-5.529 10.066-8.533 8.12-12.425 17.252-24.318 24.269-37.482-6.25-.86-12.564-.88-18.857-1.057 5.068-17.605 19.763-31.81 37.091-37.122.181 6.402.206 12.825 1.065 19.184 15.838-9.05 30.899-19.617 45.601-30.257 2.985-4.77-3.574-7.681-6.592-9.791C111.753 17.676 98.475 8.889 85.23.046l-.005 3.435z'/%3E%3Cpath fill='%23fff' d='M92.478 23.995s-1.143.906-6.714 1.923c-29.356 5.924-54.352 30.23-59.717 59.973-.605 3.728-1.09 5.49-1.09 5.49l-11.483-.002s7.84 10.845 10.438 15.486c3.333 4.988 6.674 9.971 10.076 14.912a2266.92 2266.92 0 0019.723-29.326c-5.175-.16-10.35-.343-15.522-.572 3.584-27.315 26.742-50.186 53.91-54.096.306 5.297.472 10.628.631 15.91a2206.462 2206.462 0 0029.333-19.726c-9.75-6.7-19.63-13.524-29.483-20.12z'/%3E%3C/svg%3E\") 10 10, auto"))

 (def rotation-handler-size 25)
 (def resize-point-radius 4)
@ -115,7 +114,7 @@
                :top-right 90
                :bottom-right 180
                :bottom-left 270)]
-    [:rect {:style {:cursor (rotation-cursor (+ rotation angle))}
+    [:rect {:style {:cursor (cur/rotate (+ rotation angle))}
            :x x
            :y y
            :width size
@ -124,7 +123,7 @@
            :transform transform
            :on-mouse-down on-rotate}]))

-(mf/defc resize-point-handler [{:keys [cx cy zoom position on-resize transform]}]
+(mf/defc resize-point-handler [{:keys [cx cy zoom position on-resize transform rotation]}]
  (let [{cx' :x cy' :y} (gpt/transform (gpt/point cx cy) transform)
        rot-square (case position
                     :top-left 0
@ -132,34 +131,36 @@
                     :bottom-right 180
                     :bottom-left 270)]
    [:g.resize-handler
-     [:circle {:class (name position)
-               :r (/ resize-point-radius zoom)
+     [:circle {:r (/ resize-point-radius zoom)
               :style {:fillOpacity "1"
                       :strokeWidth "1px"
-                       :vectorEffect "non-scaling-stroke"}
+                       :vectorEffect "non-scaling-stroke"
+                       }
               :fill "#FFFFFF"
               :stroke "#1FDEA7"
               :cx cx'
               :cy cy'}]

-     [:rect {:class (name position)
-             :x cx
+     [:rect {:x cx
             :y cy
             :width (/ resize-point-rect-size zoom)
             :height (/ resize-point-rect-size zoom)
             :fill (if (debug? :resize-handler) "red" "transparent")
             :on-mouse-down on-resize
+             :style {:cursor (if (#{:top-left :bottom-right} position)
+                               (cur/resize-nesw rotation) (cur/resize-nwse rotation))}
             :transform (gmt/multiply transform
                                      (gmt/rotate-matrix rot-square (gpt/point cx cy)))}]
-     [:circle {:class (name position)
-               :on-mouse-down on-resize
+     [:circle {:on-mouse-down on-resize
               :r (/ resize-point-circle-radius zoom)
               :fill (if (debug? :resize-handler) "red" "transparent")
               :cx cx'
-               :cy cy'}]
+               :cy cy'
+               :style {:cursor (if (#{:top-left :bottom-right} position)
+                                 (cur/resize-nesw rotation) (cur/resize-nwse rotation))}}]
     ]))

-(mf/defc resize-side-handler [{:keys [x y length angle zoom position transform on-resize]}]
+(mf/defc resize-side-handler [{:keys [x y length angle zoom position rotation transform on-resize]}]
  [:rect {:x (+ x (/ resize-point-rect-size zoom))
          :y (- y (/ resize-side-height 2 zoom))
          :width (max 0 (- length (/ (* resize-point-rect-size 2) zoom)))
@ -169,8 +170,8 @@
          :on-mouse-down on-resize
          :style {:fill (if (debug? :resize-handler) "yellow" "transparent")
                  :cursor (if (#{:left :right} position)
-                            "ew-resize"
-                            "ns-resize") }}])
+                            (cur/resize-ew rotation)
+                            (cur/resize-ns rotation)) }}])

 (mf/defc controls
  {::mf/wrap-props false}
@ -244,7 +245,7 @@
                     :on-mouse-down #(on-mouse-down % index)
                     :fill "#ffffff"
                     :stroke "#1FDEA7"
-                     :style {:cursor "pointer"}}]))])))
+                     :style {:cursor cur/move-pointer}}]))])))

 ;; TODO: add specs for clarity

--- a/frontend/src/uxbox/main/ui/workspace/shapes/common.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/shapes/common.cljs
@ -48,6 +48,7 @@
              (when-not (or (empty? selected) (kbd/shift? event))
                (st/emit! dw/deselect-all))
              (st/emit! (dw/select-shape id))))
+
          (st/emit! (dw/start-move-selected)))))))

 (defn on-context-menu
--- a/frontend/src/uxbox/main/ui/workspace/shapes/text.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/shapes/text.cljs
@ -18,6 +18,7 @@
   [uxbox.main.data.workspace.texts :as dwt]
   [uxbox.main.refs :as refs]
   [uxbox.main.store :as st]
+   [uxbox.main.ui.cursors :as cur]
   [uxbox.main.ui.workspace.shapes.common :as common]
   [uxbox.main.ui.shapes.text :as text]
   [uxbox.main.ui.keyboard :as kbd]
@ -301,6 +302,7 @@
        :spell-check "false"
        :on-focus on-focus
        :class "rich-text"
+        :style {:cursor cur/text}
        :render-element render-element
        :render-leaf render-text
        :on-mouse-up on-mouse-up
--- a/frontend/src/uxbox/main/ui/workspace/viewport.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/viewport.cljs
@ -15,6 +15,7 @@
   [potok.core :as ptk]
   [rumext.alpha :as mf]
   [uxbox.main.ui.icons :as i]
+   [uxbox.main.ui.cursors :as cur]
   [uxbox.common.data :as d]
   [uxbox.main.constants :as c]
   [uxbox.main.data.workspace :as dw]
@ -96,6 +97,7 @@

        stream (->> ms/mouse-position-delta
                    (rx/take-until stoper))]
+    (st/emit! dw/start-pan)
    (rx/subscribe stream
                  (fn [delta]
                    (let [vbox (.. ^js node -viewBox -baseVal)
@ -136,7 +138,8 @@
                vbox
                edition
                tooltip
-                selected]} local
+                selected
+                panning]} local

        viewport-ref (mf/use-ref nil)
        last-position (mf/use-var nil)
@ -185,7 +188,8 @@
             (st/emit! (ms/->MouseEvent :up ctrl? shift?))

             (when (= 2 (.-which event))
-               (st/emit! ::finish-positioning)))))
+               (st/emit! dw/finish-pan
+                         ::finish-positioning)))))

        on-pointer-down
        (mf/use-callback
@ -251,7 +255,8 @@
                       :shift? shift?
                       :ctrl? ctrl?}]
             (when (kbd/space? event)
-               (st/emit! ::finish-positioning))
+               (st/emit! dw/finish-pan
+                         ::finish-positioning))
             (st/emit! (ms/->KeyboardEvent :up key ctrl? shift?)))))

        translate-point-to-viewport
@ -365,6 +370,15 @@
                               (:height vbox 0)])
      :ref viewport-ref
      :class (when drawing-tool "drawing")
+      :style {:cursor (cond
+                        panning cur/hand
+                        (= drawing-tool :frame) cur/create-artboard
+                        (= drawing-tool :rect) cur/create-rectangle
+                        (= drawing-tool :circle) cur/create-ellipse
+                        (= drawing-tool :path) cur/pen
+                        (= drawing-tool :curve)cur/pencil
+                        drawing-tool cur/create-shape
+                        :else cur/pointer-inner)}
      :on-context-menu on-context-menu
      :on-click on-click
      :on-double-click on-double-click
--- a/frontend/src/uxbox/worker/selection.cljs
+++ b/frontend/src/uxbox/worker/selection.cljs
@ -71,3 +71,4 @@
  [index {:keys [id x y width height] :as obj}]
  (let [rect #js {:x x :y y :width width :height height}]
    (qdt/insert index rect obj)))
+