diff --git a/frontend/src/app/main/ui/cursors.clj b/frontend/src/app/main/ui/cursors.clj index d7ed83b71..e816aed0f 100644 --- a/frontend/src/app/main/ui/cursors.clj +++ b/frontend/src/app/main/ui/cursors.clj @@ -8,11 +8,10 @@ ;; Copyright (c) 2020 UXBOX Labs SL (ns app.main.ui.cursors - (:import java.net.URLEncoder) - (:require [rumext.alpha] - [clojure.java.io :as io] - [lambdaisland.uri.normalize :as uri] - [cuerdas.core :as str])) + (:require + [clojure.java.io :as io] + [cuerdas.core :as str] + [lambdaisland.uri.normalize :as uri])) (def cursor-folder "images/cursors") @@ -55,22 +54,18 @@ (defn encode-svg-cursor [id rotation x y height] - (let [svg-path (str cursor-folder "/" (name id) ".svg") - data (-> svg-path io/resource slurp parse-svg uri/percent-encode) - transform (if rotation (str " transform='rotate(" rotation ")'") "") - data (clojure.pprint/cl-format - nil - "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='20px' height='~Apx'~A%3E~A%3C/svg%3E\") ~A ~A, auto" - height transform data x y )] - data)) + (let [svg-path (str cursor-folder "/" (name id) ".svg") + data (-> svg-path io/resource slurp parse-svg uri/percent-encode) + transform (if rotation (str " transform='rotate(" rotation ")'") "")] + (str "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='20px' " + "height='" height "px' " transform "%3E" data "%3C/svg%3E\") " x " " y ", auto"))) (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 default-height)) ([id rotation] (encode-svg-cursor id rotation default-hotspot-x default-hotspot-y default-height)) ([id rotation x y] (encode-svg-cursor id rotation x y default-height)) - ([id rotation x y height] (encode-svg-cursor id rotation x y height)) - ) + ([id rotation x y height] (encode-svg-cursor id rotation x y height))) (defmacro cursor-fn "Creates a dynamic cursor that can be rotated in runtime" diff --git a/frontend/src/app/main/ui/cursors.cljs b/frontend/src/app/main/ui/cursors.cljs index 24028c30f..46a1b5d2e 100644 --- a/frontend/src/app/main/ui/cursors.cljs +++ b/frontend/src/app/main/ui/cursors.cljs @@ -13,6 +13,8 @@ [cuerdas.core :as str] [app.util.timers :as ts])) +;; Static cursors +(def comments (cursor-ref :comments 0 2 20)) (def create-artboard (cursor-ref :create-artboard)) (def create-ellipse (cursor-ref :create-ellipse)) (def create-polygon (cursor-ref :create-polygon)) @@ -21,21 +23,23 @@ (def duplicate (cursor-ref :duplicate 0 0 0)) (def hand (cursor-ref :hand)) (def move-pointer (cursor-ref :move-pointer)) -(def pencil (cursor-ref :pencil 0 0 24)) (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-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)) -(def picker (cursor-ref :picker 0 0 24)) -(def pointer-node (cursor-ref :pointer-node 0 0 10 32)) -(def pointer-move (cursor-ref :pointer-move 0 0 10 42)) (def pen-node (cursor-ref :pen-node 0 0 10 36)) -(def comments (cursor-ref :comments 0 2 20)) +(def pencil (cursor-ref :pencil 0 0 24)) +(def picker (cursor-ref :picker 0 0 24)) +(def pointer-inner (cursor-ref :pointer-inner 0 0 0)) +(def pointer-move (cursor-ref :pointer-move 0 0 10 42)) +(def pointer-node (cursor-ref :pointer-node 0 0 10 32)) +(def resize-alt (cursor-ref :resize-alt)) +(def text (cursor-ref :text)) + +;; Dynamic cursors +(def resize-ew (cursor-fn :resize-h 0)) +(def resize-nesw (cursor-fn :resize-h 45)) +(def resize-ns (cursor-fn :resize-h 90)) +(def resize-nwse (cursor-fn :resize-h 135)) +(def rotate (cursor-fn :rotate 90)) + (mf/defc debug-preview {::mf/wrap-props false}