wip: enhance scale and refactor handlers

CONTRIBUTING.md

@@ -19,6 +19,15 @@ we use the following conventions
 - el - element
 - attr, attrs - attribute, attributes
 
+We also use the following namespace aliases
+
+- v - views
+- e - events
+- h - handlers
+- s - subs
+
+If the namespace belongs to a different module, we use `module.v`.
+
 ## App structure
 
 Main structure
@@ -39,7 +48,6 @@ module\
 ├── db.cljs       <--- schema, validation
 ├── views.cljs    <--- reagent views
 ├── events.cljs   <--- event handlers
-├── effects.cljs  <--- effectful handlers
 ├── subs.cljs     <--- subscription handlers
 ├── handlers.cljs <--- helper functions for db transformations
 ├── styles.css    <--- styles

src/renderer/attribute/angle.cljs

@@ -3,16 +3,16 @@
   (:require
    ["@radix-ui/react-popover" :as Popover]
    [renderer.attribute.hierarchy :as hierarchy]
-   [renderer.attribute.views :as views]
+   [renderer.attribute.views :as v]
    [renderer.components :as comp]))
 
 (defmethod hierarchy/form-element ::angle
   [k v disabled? initial]
   [:<>
-   [views/form-input {:key k
-                      :value v
-                      :disabled? disabled?
-                      :placeholder initial}]
+   [v/form-input {:key k
+                  :value v
+                  :disabled? disabled?
+                  :placeholder initial}]
    [:> Popover/Root {:modal true}
     [:> Popover/Trigger {:asChild true}
      [:button.button.ml-px.level-2.text-muted

src/renderer/attribute/color.cljs

@@ -5,7 +5,7 @@
    ["@re-path/react-color" :refer [ChromePicker]]
    [re-frame.core :as rf]
    [renderer.attribute.hierarchy :as hierarchy]
-   [renderer.attribute.views :as views]))
+   [renderer.attribute.views :as v]))
 
 (derive :stroke ::color)
 (derive :fill ::color)
@@ -14,10 +14,10 @@
 (defmethod hierarchy/form-element ::color
   [k v disabled? initial]
   [:<>
-   [views/form-input {:key k
-                      :value v
-                      :disabled? disabled?
-                      :placeholder initial}]
+   [v/form-input {:key k
+                  :value v
+                  :disabled? disabled?
+                  :placeholder initial}]
    [:> Popover/Root {:modal true}
     [:> Popover/Trigger {:asChild true}
      [:button.color-drip.ml-px.inline-block

src/renderer/attribute/hierarchy.cljs

@@ -5,8 +5,8 @@
 (defmulti form-element (fn [k _v _disabled? _initial] k))
 
 (defmethod update-attr :default
-  [el attr f & args]
-  (update-in el [:attrs attr] f (first args)))
+  [el attr f & more]
+  (apply update-in el [:attrs attr] f more))
 
 (defmethod description :d
   []

src/renderer/attribute/length.cljs

@@ -3,7 +3,7 @@
   (:require
    [re-frame.core :as rf]
    [renderer.attribute.hierarchy :as hierarchy]
-   [renderer.attribute.views :as views]
+   [renderer.attribute.views :as v]
    [renderer.components :as comp]
    [renderer.utils.units :as units]))
 
@@ -27,7 +27,7 @@
 (defmethod hierarchy/form-element ::length
   [k v disabled? initial]
   [:div.flex.w-full
-   [views/form-input
+   [v/form-input
     {:key k
      :value v
      :disabled? disabled?
@@ -47,5 +47,5 @@
      [comp/icon "plus" {:class "small"}]]]])
 
 (defmethod hierarchy/update-attr ::length
-  [element attribute f & args]
-  (update-in element [:attrs attribute] #(units/transform f (first args) %)))
+  [element attribute f & more]
+  (update-in element [:attrs attribute] #(apply units/transform % f more)))

src/renderer/attribute/overflow.cljs

@@ -1,7 +1,7 @@
 (ns renderer.attribute.overflow
   (:require
    [renderer.attribute.hierarchy :as hierarchy]
-   [renderer.attribute.views :as views]))
+   [renderer.attribute.views :as v]))
 
 (defmethod hierarchy/description :overflow
   []
@@ -11,7 +11,7 @@
 
 (defmethod hierarchy/form-element :overflow
   [k v disabled? _initial]
-  [views/select-input
+  [v/select-input
    {:key k
     :value v
     :disabled? disabled?

src/renderer/attribute/points.cljs

@@ -6,7 +6,7 @@
    [re-frame.core :as rf]
    [renderer.attribute.hierarchy :as hierarchy]
    [renderer.attribute.utils :as utils]
-   [renderer.attribute.views :as views]
+   [renderer.attribute.views :as v]
    [renderer.components :as comp]
    [renderer.utils.vec :as vec]))
 
@@ -26,11 +26,11 @@
   [k v disabled?]
   (let [state-default? (= @(rf/subscribe [:state]) :default)]
     [:<>
-     [views/form-input {:key k
-                        :value (if state-default? v "waiting")
-                        :disabled? (or disabled?
-                                       (not v)
-                                       (not state-default?))}]
+     [v/form-input {:key k
+                    :value (if state-default? v "waiting")
+                    :disabled? (or disabled?
+                                   (not v)
+                                   (not state-default?))}]
      (when v
        [:> Popover/Root {:modal true}
         [:> Popover/Trigger {:asChild true}
@@ -43,7 +43,7 @@
                               :className "popover-content"
                               :align "end"}
           (when state-default?
-            (let [points (utils/points-to-vec v)]
+            (let [points (utils/points->vec v)]
               [:div.flex.flex-col.v-scroll.py-4.pr-2
                {:style {:max-height "500px"}}
                (map-indexed (fn [index [x y]]

src/renderer/attribute/range.cljs

@@ -1,13 +1,13 @@
 (ns renderer.attribute.range
   (:require
    [renderer.attribute.hierarchy :as hierarchy]
-   [renderer.attribute.views :as views]))
+   [renderer.attribute.views :as v]))
 
 (derive :opacity ::range)
 
 (defmethod hierarchy/form-element ::range
   [k v disabled? initial]
-  [views/range-input k v {:disabled disabled?
-                          :min 0
-                          :max 1
-                          :step 0.01} initial])
+  [v/range-input k v {:disabled disabled?
+                      :min 0
+                      :max 1
+                      :step 0.01} initial])

src/renderer/attribute/stroke_linecap.cljs

@@ -1,7 +1,7 @@
 (ns renderer.attribute.stroke-linecap
   (:require
    [renderer.attribute.hierarchy :as hierarchy]
-   [renderer.attribute.views :as views]))
+   [renderer.attribute.views :as v]))
 
 (defmethod hierarchy/description :stroke-linecap
   []
@@ -10,20 +10,20 @@
 
 (defmethod hierarchy/form-element :stroke-linecap
   [k v disabled? initial]
-  [views/select-input {:key k
-                       :value v
-                       :disabled? disabled?
-                       :initial initial
-                       :default-value "butt"
-                       :items [{:key :butt
-                                :value "butt"
-                                :label "Butt"
-                                :icon "linecap-butt"}
-                               {:key :round
-                                :value "round"
-                                :label "Round"
-                                :icon "linecap-round"}
-                               {:key :square
-                                :value "square"
-                                :label "Square"
-                                :icon "linecap-square"}]}])
+  [v/select-input {:key k
+                   :value v
+                   :disabled? disabled?
+                   :initial initial
+                   :default-value "butt"
+                   :items [{:key :butt
+                            :value "butt"
+                            :label "Butt"
+                            :icon "linecap-butt"}
+                           {:key :round
+                            :value "round"
+                            :label "Round"
+                            :icon "linecap-round"}
+                           {:key :square
+                            :value "square"
+                            :label "Square"
+                            :icon "linecap-square"}]}])

src/renderer/attribute/stroke_linejoin.cljs

@@ -1,7 +1,7 @@
 (ns renderer.attribute.stroke-linejoin
   (:require
    [renderer.attribute.hierarchy :as hierarchy]
-   [renderer.attribute.views :as views]))
+   [renderer.attribute.views :as v]))
 
 (defmethod hierarchy/description :stroke-linejoin
   []
@@ -10,17 +10,17 @@
 
 (defmethod hierarchy/form-element :stroke-linejoin
   [k v disabled? initial]
-  [views/select-input {:key k
-                       :value v
-                       :disabled? disabled?
-                       :initial initial
-                       :default-value "miter"
-                       :items [{:key :bevel
-                                :value "bevel"
-                                :label "Bevel"}
-                               {:key :miter
-                                :value "miter"
-                                :label "Miter"}
-                               {:key :round
-                                :value "round"
-                                :label "Round"}]}])
+  [v/select-input {:key k
+                   :value v
+                   :disabled? disabled?
+                   :initial initial
+                   :default-value "miter"
+                   :items [{:key :bevel
+                            :value "bevel"
+                            :label "Bevel"}
+                           {:key :miter
+                            :value "miter"
+                            :label "Miter"}
+                           {:key :round
+                            :value "round"
+                            :label "Round"}]}])

src/renderer/attribute/utils.cljs

@@ -1,6 +1,7 @@
 (ns renderer.attribute.utils
   (:require
-   [clojure.string :as str]))
+   [clojure.string :as str]
+   [renderer.utils.units :as units]))
 
 (def attrs-order
   [:d
@@ -27,9 +28,17 @@
    :id :class :tabindex
    :style])
 
-(defn points-to-vec
+(defn points->vec
   [points]
   (vec (as-> points p
          (str/triml p)
          (str/split p #"\s+")
          (partition 2 p)))) ; OPTIMIZE
+
+(defn points->px
+  [points]
+  (vec (as-> points p
+         (str/triml p)
+         (str/split p #"\s+")
+         (map units/unit->px p)
+         (partition 2 p))))

src/renderer/attribute/views.cljs

@@ -8,7 +8,8 @@
    [re-frame.core :as rf]
    [renderer.attribute.hierarchy :as hierarchy]
    [renderer.components :as comp]
-   [renderer.tools.base :as tools]))
+   [renderer.tools.base :as tools]
+   [renderer.utils.spec :as spec]))
 
 (defn browser-support
   [browser version-added]
@@ -23,12 +24,7 @@
 
 (defn caniusethis
   [{:keys [tag attr]}]
-  (let [data (if attr
-               (or (-> tools/svg-spec :elements tag attr :__compat)
-                   (-> tools/svg-spec :attributes :presentation attr :__compat)
-                   (-> tools/svg-spec :attributes :core attr :__compat)
-                   (-> tools/svg-spec :attributes :style attr :__compat))
-               (-> tools/svg-spec :elements tag :__compat))]
+  (let [data (if attr (spec/compat-data tag attr) (spec/compat-data tag))]
     (when (or (:support data) (isa? tag ::tools/animation))
       [:div.flex.flex-col
        (when (some :version_added (vals (:support data)))

src/renderer/cmdk/views.cljs

@@ -12,8 +12,9 @@
   (when-not (= type :separator)
     [:> Command/CommandItem
      {:key key
-      :on-select #(doall (rf/dispatch action)
-                         (rf/dispatch [:cmdk/set false]))}
+      :on-select (fn []
+                   (rf/dispatch action)
+                   (rf/dispatch [:cmdk/set false]))}
      (str group " / " label)
      [:div.right-slot
       [comp/shortcuts action]]]))

src/renderer/components.cljs

@@ -136,8 +136,8 @@
      [:div.right-slot
       [shortcuts action]]]))
 
-;; TODO: Add and group actions
 (def element-menu
+  ;; TODO: Add and group actions
   [{:label "Cut"
     :action [:element/cut]}
    {:label "Copy"

src/renderer/db.cljs

@@ -9,7 +9,7 @@
 (def app
   [:map
    [:tool keyword?]
-   [:mouse-pos [:tuple double? double?]]
+   [:pointer-pos [:tuple double? double?]]
    [:zoom-factor double?]
    [:state keyword?]
    [:grid? boolean?]
@@ -28,7 +28,7 @@
 
 (def default
   {:tool :select
-   :mouse-pos [0 0]
+   :pointer-pos [0 0]
    :zoom-sensitivity 0.3
    :state :default
    :documents {}

src/renderer/debug.cljs

@@ -21,16 +21,16 @@
                (str (mapv units/->fixed @(rf/subscribe [:frame/viewbox])))]
 
               ["Mouse position"
-               (str @(rf/subscribe [:mouse-pos]))]
+               (str @(rf/subscribe [:pointer-pos]))]
 
               ["Adjusted mouse position"
-               (str (mapv units/->fixed  @(rf/subscribe [:adjusted-mouse-pos])))]
+               (str (mapv units/->fixed  @(rf/subscribe [:adjusted-pointer-pos])))]
 
               ["Mouse offset"
-               (str @(rf/subscribe [:mouse-offset]))]
+               (str @(rf/subscribe [:pointer-offset]))]
 
               ["Adjusted mouse offset"
-               (str (mapv units/->fixed  @(rf/subscribe [:adjusted-mouse-offset])))]
+               (str (mapv units/->fixed  @(rf/subscribe [:adjusted-pointer-offset])))]
 
               ["Mouse drag?"
                (str @(rf/subscribe [:drag?]))]

src/renderer/document/core.cljs

@@ -1,5 +1,4 @@
 (ns renderer.document.core
   (:require
-   [renderer.document.effects]
    [renderer.document.events]
    [renderer.document.subs]))