Enhance scaling and refactor

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

package.json

@@ -60,7 +60,7 @@
   },
   "main": "resources/main.js",
   "devDependencies": {
-    "@mdn/browser-compat-data": "5.4.0",
+    "@mdn/browser-compat-data": "5.4.1",
     "@playwright/test": "^1.39.0",
     "@radix-ui/react-context-menu": "2.1.5",
     "@radix-ui/react-dropdown-menu": "2.0.6",
@@ -78,7 +78,7 @@
     "cmdk": "0.2.0",
     "codemirror": "5.65.15",
     "create-react-class": "15.7.0",
-    "electron": "27.0.3",
+    "electron": "27.1.2",
     "electron-builder": "24.9.1",
     "element-to-path": "1.2.1",
     "highlight.js": "11.7.0",

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]))
 
@@ -17,17 +17,20 @@
 (derive :cy ::length)
 (derive :dx ::length)
 (derive :dy ::length)
-(derive :width ::length)
-(derive :height ::length)
-(derive :stroke-width ::length)
-(derive :r ::length)
-(derive :rx ::length)
-(derive :ry ::length)
+
+(derive ::positive-length ::length)
+
+(derive :width ::positive-length)
+(derive :height ::positive-length)
+(derive :stroke-width ::positive-length)
+(derive :r ::positive-length)
+(derive :rx ::positive-length)
+(derive :ry ::positive-length)
 
 (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 +50,10 @@
      [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)))
+
+(defmethod hierarchy/update-attr ::positive-length
+  [element attribute f & more]
+  (update-in element [:attrs attribute]
+             #(units/transform % (fn [v] (max 0 (apply f v 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"}]}])