From bc91c46a9ac76993f7186e004ced27512f844bd1 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Fri, 22 Dec 2023 09:01:30 +0100 Subject: [PATCH] :zap: Improve performance and space efficiency of cursors namespace --- frontend/src/app/main/ui/cursors.clj | 19 ++++- frontend/src/app/main/ui/cursors.cljs | 107 ++++++++++++++------------ 2 files changed, 73 insertions(+), 53 deletions(-) diff --git a/frontend/src/app/main/ui/cursors.clj b/frontend/src/app/main/ui/cursors.clj index 9b5eb5b0c..6b7680738 100644 --- a/frontend/src/app/main/ui/cursors.clj +++ b/frontend/src/app/main/ui/cursors.clj @@ -7,6 +7,7 @@ (ns app.main.ui.cursors (:require [app.common.uri :as u] + [clojure.core :as c] [clojure.java.io :as io] [cuerdas.core :as str])) @@ -71,6 +72,20 @@ (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 default-height)] + (let [[cp1 cp2] (-> (encode-svg-cursor id "$$$" + default-hotspot-x + default-hotspot-y + default-height) + (str/split #"\$\$\$"))] `(fn [rot#] - (str/replace ~cursor "{{rotation}}" (+ ~initial rot#))))) + (str/concat ~cp1 (+ ~initial rot#) ~cp2)))) + +(defmacro collect-cursors + [] + (let [ns-info (:ns &env)] + `(cljs.core/js-obj + ~@(->> (:defs ns-info) + (map val) + (filter (fn [entry] (-> entry :meta :cursor))) + (mapcat (fn [{:keys [name] :as entry}] + [(-> name c/name str/camel str/capital) name])))))) diff --git a/frontend/src/app/main/ui/cursors.cljs b/frontend/src/app/main/ui/cursors.cljs index 93d2128fd..8b4152816 100644 --- a/frontend/src/app/main/ui/cursors.cljs +++ b/frontend/src/app/main/ui/cursors.cljs @@ -5,71 +5,76 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.cursors - (:require-macros [app.main.ui.cursors :refer [cursor-ref cursor-fn]]) + (:require-macros [app.main.ui.cursors :refer [cursor-ref cursor-fn collect-cursors]]) (:require [app.util.timers :as ts] [cuerdas.core :as str] [rumext.v2 :as mf])) ;; 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)) -(def create-rectangle (cursor-ref :create-rectangle)) -(def create-shape (cursor-ref :create-shape)) -(def duplicate (cursor-ref :duplicate 0 0 0)) -(def hand (cursor-ref :hand)) -(def move-pointer (cursor-ref :move-pointer)) -(def pen (cursor-ref :pen 0 0 0)) -(def pen-node (cursor-ref :pen-node 0 0 10 36)) -(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 zoom (cursor-ref :zoom)) -(def zoom-in (cursor-ref :zoom-in)) -(def zoom-out (cursor-ref :zoom-out)) +(def ^:cursor comments (cursor-ref :comments 0 2 20)) +(def ^:cursor create-artboard (cursor-ref :create-artboard)) +(def ^:cursor create-ellipse (cursor-ref :create-ellipse)) +(def ^:cursor create-polygon (cursor-ref :create-polygon)) +(def ^:cursor create-rectangle (cursor-ref :create-rectangle)) +(def ^:cursor create-shape (cursor-ref :create-shape)) +(def ^:cursor duplicate (cursor-ref :duplicate 0 0 0)) +(def ^:cursor hand (cursor-ref :hand)) +(def ^:cursor move-pointer (cursor-ref :move-pointer)) +(def ^:cursor pen (cursor-ref :pen 0 0 0)) +(def ^:cursor pen-node (cursor-ref :pen-node 0 0 10 36)) +(def ^:cursor pencil (cursor-ref :pencil 0 0 24)) +(def ^:cursor picker (cursor-ref :picker 0 0 24)) +(def ^:cursor pointer-inner (cursor-ref :pointer-inner 0 0 0)) +(def ^:cursor pointer-move (cursor-ref :pointer-move 0 0 10 42)) +(def ^:cursor pointer-node (cursor-ref :pointer-node 0 0 10 32)) +(def ^:cursor resize-alt (cursor-ref :resize-alt)) +(def ^:cursor zoom (cursor-ref :zoom)) +(def ^:cursor zoom-in (cursor-ref :zoom-in)) +(def ^:cursor zoom-out (cursor-ref :zoom-out)) ;; 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)) -(def text (cursor-fn :text 0)) +(def ^:cursor resize-ew (cursor-fn :resize-h 0)) +(def ^:cursor resize-nesw (cursor-fn :resize-h 45)) +(def ^:cursor resize-ns (cursor-fn :resize-h 90)) +(def ^:cursor resize-nwse (cursor-fn :resize-h 135)) +(def ^:cursor rotate (cursor-fn :rotate 90)) +(def ^:cursor text (cursor-fn :text 0)) ;; Text -(def scale-ew (cursor-fn :scale-h 0)) -(def scale-nesw (cursor-fn :scale-h 45)) -(def scale-ns (cursor-fn :scale-h 90)) -(def scale-nwse (cursor-fn :scale-h 135)) +(def ^:cursor scale-ew (cursor-fn :scale-h 0)) +(def ^:cursor scale-nesw (cursor-fn :scale-h 45)) +(def ^:cursor scale-ns (cursor-fn :scale-h 90)) +(def ^:cursor scale-nwse (cursor-fn :scale-h 135)) + +(def ^:cursor resize-ew-2 (cursor-fn :resize-h-2 0)) +(def ^:cursor resize-ns-2 (cursor-fn :resize-h-2 90)) + +(def default + "A collection of all icons" + (collect-cursors)) -;; -(def resize-ew-2 (cursor-fn :resize-h-2 0)) -(def resize-ns-2 (cursor-fn :resize-h-2 90)) - (mf/defc debug-preview {::mf/wrap-props false} [] - (let [rotation (mf/use-state 0)] - (mf/use-effect (fn [] (ts/interval 100 #(reset! rotation inc)))) + (let [rotation (mf/use-state 0) + entries (->> (seq (js/Object.entries default)) + (sort-by first))] + + (mf/with-effect [] + (ts/interval 100 #(reset! rotation inc))) [:section.debug-icons-preview - (for [[key val] (sort-by first (ns-publics 'app.main.ui.cursors))] - (when (not= key 'debug-icons-preview) - (let [value (deref val) - value (if (fn? value) (value @rotation) value)] - [:div.cursor-item {:key key} - [:div {:style {:width "100px" - :height "100px" - :background-image (-> value (str/replace #"(url\(.*\)).*" "$1")) - :background-size "contain" - :background-repeat "no-repeat" - :background-position "center" - :cursor value}}] + (for [[key value] entries] + (let [value (if (fn? value) (value @rotation) value)] + [:div.cursor-item {:key key} + [:div {:style {:width "100px" + :height "100px" + :background-image (-> value (str/replace #"(url\(.*\)).*" "$1")) + :background-size "contain" + :background-repeat "no-repeat" + :background-position "center" + :cursor value}}] - [:span {:style {:white-space "nowrap" - :margin-right "1rem"}} (pr-str key)]])))])) + [:span {:style {:white-space "nowrap" + :margin-right "1rem"}} (pr-str key)]]))]))