Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-08 07:50:43 -05:00
Code Issues Activity

⚡ Improve performance and space efficiency of cursors namespace

Browse source
This commit is contained in:
Andrey Antukh 2023-12-22 09:01:30 +01:00 committed by Alonso Torres
parent 127b02922f
commit bc91c46a9a
2 changed files with 73 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
frontend/src/app/main/ui/cursors.clj
View file

@ -7,6 +7,7 @@
(ns app.main.ui.cursors (ns app.main.ui.cursors
(:require (:require
[app.common.uri :as u] [app.common.uri :as u]
[clojure.core :as c]
[clojure.java.io :as io] [clojure.java.io :as io]
[cuerdas.core :as str])) [cuerdas.core :as str]))
@ -71,6 +72,20 @@
(defmacro cursor-fn (defmacro cursor-fn
"Creates a dynamic cursor that can be rotated in runtime" "Creates a dynamic cursor that can be rotated in runtime"
[id initial] [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#] `(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]))))))

107
frontend/src/app/main/ui/cursors.cljs
View file

@ -5,71 +5,76 @@
;; Copyright (c) KALEIDOS INC ;; Copyright (c) KALEIDOS INC
(ns app.main.ui.cursors (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 (:require
[app.util.timers :as ts] [app.util.timers :as ts]
[cuerdas.core :as str] [cuerdas.core :as str]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
;; Static cursors ;; Static cursors
(def comments (cursor-ref :comments 0 2 20)) (def ^:cursor comments (cursor-ref :comments 0 2 20))
(def create-artboard (cursor-ref :create-artboard)) (def ^:cursor create-artboard (cursor-ref :create-artboard))
(def create-ellipse (cursor-ref :create-ellipse)) (def ^:cursor create-ellipse (cursor-ref :create-ellipse))
(def create-polygon (cursor-ref :create-polygon)) (def ^:cursor create-polygon (cursor-ref :create-polygon))
(def create-rectangle (cursor-ref :create-rectangle)) (def ^:cursor create-rectangle (cursor-ref :create-rectangle))
(def create-shape (cursor-ref :create-shape)) (def ^:cursor create-shape (cursor-ref :create-shape))
(def duplicate (cursor-ref :duplicate 0 0 0)) (def ^:cursor duplicate (cursor-ref :duplicate 0 0 0))
(def hand (cursor-ref :hand)) (def ^:cursor hand (cursor-ref :hand))
(def move-pointer (cursor-ref :move-pointer)) (def ^:cursor move-pointer (cursor-ref :move-pointer))
(def pen (cursor-ref :pen 0 0 0)) (def ^:cursor pen (cursor-ref :pen 0 0 0))
(def pen-node (cursor-ref :pen-node 0 0 10 36)) (def ^:cursor pen-node (cursor-ref :pen-node 0 0 10 36))
(def pencil (cursor-ref :pencil 0 0 24)) (def ^:cursor pencil (cursor-ref :pencil 0 0 24))
(def picker (cursor-ref :picker 0 0 24)) (def ^:cursor picker (cursor-ref :picker 0 0 24))
(def pointer-inner (cursor-ref :pointer-inner 0 0 0)) (def ^:cursor pointer-inner (cursor-ref :pointer-inner 0 0 0))
(def pointer-move (cursor-ref :pointer-move 0 0 10 42)) (def ^:cursor pointer-move (cursor-ref :pointer-move 0 0 10 42))
(def pointer-node (cursor-ref :pointer-node 0 0 10 32)) (def ^:cursor pointer-node (cursor-ref :pointer-node 0 0 10 32))
(def resize-alt (cursor-ref :resize-alt)) (def ^:cursor resize-alt (cursor-ref :resize-alt))
(def zoom (cursor-ref :zoom)) (def ^:cursor zoom (cursor-ref :zoom))
(def zoom-in (cursor-ref :zoom-in)) (def ^:cursor zoom-in (cursor-ref :zoom-in))
(def zoom-out (cursor-ref :zoom-out)) (def ^:cursor zoom-out (cursor-ref :zoom-out))
;; Dynamic cursors ;; Dynamic cursors
(def resize-ew (cursor-fn :resize-h 0)) (def ^:cursor resize-ew (cursor-fn :resize-h 0))
(def resize-nesw (cursor-fn :resize-h 45)) (def ^:cursor resize-nesw (cursor-fn :resize-h 45))
(def resize-ns (cursor-fn :resize-h 90)) (def ^:cursor resize-ns (cursor-fn :resize-h 90))
(def resize-nwse (cursor-fn :resize-h 135)) (def ^:cursor resize-nwse (cursor-fn :resize-h 135))
(def rotate (cursor-fn :rotate 90)) (def ^:cursor rotate (cursor-fn :rotate 90))
(def text (cursor-fn :text 0)) (def ^:cursor text (cursor-fn :text 0))
;; Text ;; Text
(def scale-ew (cursor-fn :scale-h 0)) (def ^:cursor scale-ew (cursor-fn :scale-h 0))
(def scale-nesw (cursor-fn :scale-h 45)) (def ^:cursor scale-nesw (cursor-fn :scale-h 45))
(def scale-ns (cursor-fn :scale-h 90)) (def ^:cursor scale-ns (cursor-fn :scale-h 90))
(def scale-nwse (cursor-fn :scale-h 135)) (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/defc debug-preview
{::mf/wrap-props false} {::mf/wrap-props false}
[] []
(let [rotation (mf/use-state 0)] (let [rotation (mf/use-state 0)
(mf/use-effect (fn [] (ts/interval 100 #(reset! rotation inc)))) entries (->> (seq (js/Object.entries default))
(sort-by first))]
(mf/with-effect []
(ts/interval 100 #(reset! rotation inc)))
[:section.debug-icons-preview [:section.debug-icons-preview
(for [[key val] (sort-by first (ns-publics 'app.main.ui.cursors))] (for [[key value] entries]
(when (not= key 'debug-icons-preview) (let [value (if (fn? value) (value @rotation) value)]
(let [value (deref val) [:div.cursor-item {:key key}
value (if (fn? value) (value @rotation) value)] [:div {:style {:width "100px"
[:div.cursor-item {:key key} :height "100px"
[:div {:style {:width "100px" :background-image (-> value (str/replace #"(url\(.*\)).*" "$1"))
:height "100px" :background-size "contain"
:background-image (-> value (str/replace #"(url\(.*\)).*" "$1")) :background-repeat "no-repeat"
:background-size "contain" :background-position "center"
:background-repeat "no-repeat" :cursor value}}]
:background-position "center"
:cursor value}}]
[:span {:style {:white-space "nowrap" [:span {:style {:white-space "nowrap"
:margin-right "1rem"}} (pr-str key)]])))])) :margin-right "1rem"}} (pr-str key)]]))]))