From 5aee01a27c31190414d1466789847f1d87a9c8ee Mon Sep 17 00:00:00 2001 From: Konstantinos Kaloutas Date: Sat, 25 Nov 2023 22:21:30 +0200 Subject: [PATCH] wip: enhance scale and refactor handlers --- CONTRIBUTING.md | 10 +- src/renderer/attribute/angle.cljs | 10 +- src/renderer/attribute/color.cljs | 10 +- src/renderer/attribute/hierarchy.cljs | 4 +- src/renderer/attribute/length.cljs | 8 +- src/renderer/attribute/overflow.cljs | 4 +- src/renderer/attribute/points.cljs | 14 +- src/renderer/attribute/range.cljs | 10 +- src/renderer/attribute/stroke_linecap.cljs | 36 +- src/renderer/attribute/stroke_linejoin.cljs | 30 +- src/renderer/attribute/utils.cljs | 13 +- src/renderer/attribute/views.cljs | 10 +- src/renderer/cmdk/views.cljs | 5 +- src/renderer/components.cljs | 2 +- src/renderer/db.cljs | 4 +- src/renderer/debug.cljs | 8 +- src/renderer/document/core.cljs | 1 - src/renderer/document/db.cljs | 4 +- src/renderer/document/effects.cljs | 26 -- src/renderer/document/events.cljs | 39 +- src/renderer/document/views.cljs | 6 +- src/renderer/effects.cljs | 10 + src/renderer/element/core.cljs | 1 - src/renderer/element/effects.cljs | 40 -- src/renderer/element/events.cljs | 223 ++++++----- src/renderer/element/handlers.cljs | 359 +++++++++--------- src/renderer/element/subs.cljs | 42 +- src/renderer/events.cljs | 48 +-- src/renderer/frame/events.cljs | 2 +- src/renderer/frame/handlers.cljs | 28 +- src/renderer/frame/subs.cljs | 10 +- src/renderer/handlers.cljs | 16 +- src/renderer/history/core.cljs | 1 - src/renderer/history/events.cljs | 26 +- src/renderer/history/handlers.cljs | 25 +- src/renderer/history/subs.cljs | 12 +- src/renderer/history/views.cljs | 5 +- src/renderer/menubar/core.cljs | 2 +- .../menubar/{effects.cljs => events.cljs} | 2 +- src/renderer/overlay.cljs | 13 +- src/renderer/panel/events.cljs | 14 +- src/renderer/rulers/views.cljs | 2 +- src/renderer/statusbar.cljs | 8 +- src/renderer/subs.cljs | 20 +- src/renderer/theme/core.cljs | 2 +- .../theme/{effects.cljs => events.cljs} | 4 +- src/renderer/tools/arc.cljs | 6 +- src/renderer/tools/base.cljs | 24 +- src/renderer/tools/blob.cljs | 20 +- src/renderer/tools/box.cljs | 72 ++-- src/renderer/tools/brush.cljs | 6 +- src/renderer/tools/button.cljs | 6 +- src/renderer/tools/canvas.cljs | 11 +- src/renderer/tools/circle.cljs | 37 +- src/renderer/tools/core.cljs | 2 +- src/renderer/tools/edit.cljs | 14 +- src/renderer/tools/ellipse.cljs | 36 +- src/renderer/tools/group.cljs | 3 +- src/renderer/tools/image.cljs | 6 +- src/renderer/tools/line.cljs | 12 +- src/renderer/tools/map.cljs | 6 +- src/renderer/tools/measure.cljs | 10 +- src/renderer/tools/page.cljs | 6 +- src/renderer/tools/pan.cljs | 2 +- src/renderer/tools/pen.cljs | 6 +- src/renderer/tools/polyshape.cljs | 45 +-- src/renderer/tools/rect.cljs | 6 +- src/renderer/tools/select.cljs | 61 ++- src/renderer/tools/svg.cljs | 6 +- src/renderer/tools/text.cljs | 6 +- src/renderer/tools/zoom.cljs | 16 +- src/renderer/utils/bounds.cljs | 9 +- src/renderer/utils/mouse.cljs | 7 +- src/renderer/utils/spec.cljs | 25 ++ src/renderer/utils/units.cljs | 31 +- src/renderer/utils/vec.cljs | 14 +- src/renderer/window/core.cljs | 1 - src/renderer/window/effects.cljs | 51 --- src/renderer/window/events.cljs | 48 +++ src/user.cljs | 7 + 80 files changed, 899 insertions(+), 888 deletions(-) delete mode 100644 src/renderer/document/effects.cljs delete mode 100644 src/renderer/element/effects.cljs rename src/renderer/menubar/{effects.cljs => events.cljs} (88%) rename src/renderer/theme/{effects.cljs => events.cljs} (91%) create mode 100644 src/renderer/utils/spec.cljs delete mode 100644 src/renderer/window/effects.cljs diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 3477000c..0f5dd5fb 100644 --- a/CONTRIBUTING.md +++ b/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 diff --git a/src/renderer/attribute/angle.cljs b/src/renderer/attribute/angle.cljs index 165f6142..8dbacdc4 100644 --- a/src/renderer/attribute/angle.cljs +++ b/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 diff --git a/src/renderer/attribute/color.cljs b/src/renderer/attribute/color.cljs index 7f99a98b..4b4772ae 100644 --- a/src/renderer/attribute/color.cljs +++ b/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 diff --git a/src/renderer/attribute/hierarchy.cljs b/src/renderer/attribute/hierarchy.cljs index cae33752..75ffd3bb 100644 --- a/src/renderer/attribute/hierarchy.cljs +++ b/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 [] diff --git a/src/renderer/attribute/length.cljs b/src/renderer/attribute/length.cljs index 82192ab2..05da90b2 100644 --- a/src/renderer/attribute/length.cljs +++ b/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))) diff --git a/src/renderer/attribute/overflow.cljs b/src/renderer/attribute/overflow.cljs index ca0fbaaa..afedb09c 100644 --- a/src/renderer/attribute/overflow.cljs +++ b/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? diff --git a/src/renderer/attribute/points.cljs b/src/renderer/attribute/points.cljs index 9cfddc0d..598c08a4 100644 --- a/src/renderer/attribute/points.cljs +++ b/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]] diff --git a/src/renderer/attribute/range.cljs b/src/renderer/attribute/range.cljs index 0f9afdf9..181debd2 100644 --- a/src/renderer/attribute/range.cljs +++ b/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]) diff --git a/src/renderer/attribute/stroke_linecap.cljs b/src/renderer/attribute/stroke_linecap.cljs index 9d896b41..a3db8aab 100644 --- a/src/renderer/attribute/stroke_linecap.cljs +++ b/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"}]}]) diff --git a/src/renderer/attribute/stroke_linejoin.cljs b/src/renderer/attribute/stroke_linejoin.cljs index 74baaa73..40ef7318 100644 --- a/src/renderer/attribute/stroke_linejoin.cljs +++ b/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"}]}]) diff --git a/src/renderer/attribute/utils.cljs b/src/renderer/attribute/utils.cljs index f705c9a7..7edbc0af 100644 --- a/src/renderer/attribute/utils.cljs +++ b/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)))) diff --git a/src/renderer/attribute/views.cljs b/src/renderer/attribute/views.cljs index 3e38fa59..afb40eb5 100644 --- a/src/renderer/attribute/views.cljs +++ b/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))) diff --git a/src/renderer/cmdk/views.cljs b/src/renderer/cmdk/views.cljs index ef71d1cc..1ad6747c 100644 --- a/src/renderer/cmdk/views.cljs +++ b/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]]])) diff --git a/src/renderer/components.cljs b/src/renderer/components.cljs index 0e885074..36c228c1 100644 --- a/src/renderer/components.cljs +++ b/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" diff --git a/src/renderer/db.cljs b/src/renderer/db.cljs index e8c9438d..23dcdf5a 100644 --- a/src/renderer/db.cljs +++ b/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 {} diff --git a/src/renderer/debug.cljs b/src/renderer/debug.cljs index 64dd0fc9..16be7709 100644 --- a/src/renderer/debug.cljs +++ b/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?]))] diff --git a/src/renderer/document/core.cljs b/src/renderer/document/core.cljs index d3993c0a..632e14eb 100644 --- a/src/renderer/document/core.cljs +++ b/src/renderer/document/core.cljs @@ -1,5 +1,4 @@ (ns renderer.document.core (:require - [renderer.document.effects] [renderer.document.events] [renderer.document.subs])) diff --git a/src/renderer/document/db.cljs b/src/renderer/document/db.cljs index 009d6bf2..686dee9d 100644 --- a/src/renderer/document/db.cljs +++ b/src/renderer/document/db.cljs @@ -1,6 +1,6 @@ (ns renderer.document.db (:require - [renderer.element.db :as element-db])) + [renderer.element.db :as element.db])) (def document [:map @@ -13,7 +13,7 @@ [:rotate double?] [:filter string?] [:pan [:tuple double? double?]] - [:elements [:map-of :uuid element-db/element]]]) + [:elements [:map-of :uuid element.db/element]]]) (def default-document {:hovered-keys #{} diff --git a/src/renderer/document/effects.cljs b/src/renderer/document/effects.cljs deleted file mode 100644 index 8e6fdf04..00000000 --- a/src/renderer/document/effects.cljs +++ /dev/null @@ -1,26 +0,0 @@ -(ns renderer.document.effects - (:require - [de-dupe.core :as dd] - [re-frame.core :as rf])) - -(rf/reg-event-fx - :document/open - (fn [_ [_]] - {:send-to-main {:action "openDocument"}})) - -(rf/reg-event-fx - :document/save - (fn [{:keys [db]} [_]] - (let [document (get-in db [:documents (:active-document db)]) - duped (assoc document :history (dd/de-dupe (:history document)))] - {:send-to-main {:action "saveDocument" :data (pr-str duped)}}))) - -(rf/reg-event-fx - :document/save-as - (fn [{:keys [db]} [_]] - db)) - -(rf/reg-event-fx - :document/save-all - (fn [{:keys [db]} [_]] - db)) diff --git a/src/renderer/document/events.cljs b/src/renderer/document/events.cljs index 5af49866..f94c2e1e 100644 --- a/src/renderer/document/events.cljs +++ b/src/renderer/document/events.cljs @@ -1,12 +1,13 @@ (ns renderer.document.events (:require + [de-dupe.core :as dd] [re-frame.core :as rf] [re-frame.interceptor :refer [->interceptor get-effect get-coeffect assoc-coeffect assoc-effect]] [renderer.document.db :as db] - [renderer.document.handlers :as handlers] - [renderer.element.handlers :as element-handlers] + [renderer.document.handlers :as h] + [renderer.element.handlers :as element.h] [renderer.frame.handlers :as frame] - [renderer.history.handlers :as history] + [renderer.history.handlers :as history.h] [renderer.utils.uuid :as uuid] [renderer.utils.vec :as vec])) @@ -63,14 +64,14 @@ (fn [{active-document :active-document :as db} [_ fill]] (-> db (assoc-in [:documents active-document :fill] fill) - (element-handlers/set-attribute :fill fill)))) + (element.h/set-attribute :fill fill)))) (rf/reg-event-db :document/set-stroke (fn [{active-document :active-document :as db} [_ stroke]] (-> db (assoc-in [:documents active-document :stroke] stroke) - (element-handlers/set-attribute :stroke stroke)))) + (element.h/set-attribute :stroke stroke)))) (rf/reg-event-db :document/new @@ -86,17 +87,17 @@ (update :document-tabs #(vec/add % (inc active-index) key)) (assoc :active-document key) (frame/pan-to-element (:active-page db/default-document)) - (history/init "Create document"))))) + (history.h/init "Create document"))))) (rf/reg-event-db :document/close (fn [db [_ key]] - (handlers/close db key))) + (h/close db key))) (rf/reg-event-db :document/close-active (fn [db [_]] - (handlers/close db))) + (h/close db))) (rf/reg-event-db :document/close-others @@ -131,3 +132,25 @@ dragged-index (.indexOf document-tabs dragged-key) swapped-index (.indexOf document-tabs swapped-key)] (assoc db :document-tabs (vec/swap document-tabs dragged-index swapped-index))))) + +(rf/reg-event-fx + :document/open + (fn [_ [_]] + {:send-to-main {:action "openDocument"}})) + +(rf/reg-event-fx + :document/save + (fn [{:keys [db]} [_]] + (let [document (get-in db [:documents (:active-document db)]) + duped (assoc document :history (dd/de-dupe (:history document)))] + {:send-to-main {:action "saveDocument" :data (pr-str duped)}}))) + +(rf/reg-event-fx + :document/save-as + (fn [{:keys [db]} [_]] + db)) + +(rf/reg-event-fx + :document/save-all + (fn [{:keys [db]} [_]] + db)) diff --git a/src/renderer/document/views.cljs b/src/renderer/document/views.cljs index 48169f44..293a0322 100644 --- a/src/renderer/document/views.cljs +++ b/src/renderer/document/views.cljs @@ -4,7 +4,7 @@ [re-frame.core :as rf] [reagent.core :as ra] [renderer.components :as comp] - [renderer.history.views :as history])) + [renderer.history.views :as history.h])) (defn actions [] [:div.flex.toolbar @@ -54,7 +54,7 @@ :max-width "14px" :background "var(--level-0)" :font-size "1em"}} - (history/select-options @(rf/subscribe [:history/undos]))] + (history.h/select-options @(rf/subscribe [:history/undos]))] [comp/icon-button "redo" {:title "Undo" :on-click #(rf/dispatch [:history/redo]) @@ -67,7 +67,7 @@ :max-width "14px" :background "var(--level-0)" :font-size "1em"}} - (history/select-options @(rf/subscribe [:history/redos]))]]) + (history.h/select-options @(rf/subscribe [:history/redos]))]]) (defn close-button [key] diff --git a/src/renderer/effects.cljs b/src/renderer/effects.cljs index cdb53412..dbc92033 100644 --- a/src/renderer/effects.cljs +++ b/src/renderer/effects.cljs @@ -8,3 +8,13 @@ (fn [data] (when platform/electron? (js/window.api.send "toMain" (clj->js data))))) + +(rf/reg-fx + :clipboard-write + (fn [text-html] + (js/navigator.clipboard.write + (clj->js [(js/ClipboardItem. + #js {"text/html" (when text-html + (js/Blob. + [text-html] + #js {:type ["text/html"]}))})])))) diff --git a/src/renderer/element/core.cljs b/src/renderer/element/core.cljs index 9a8e437c..acb1200e 100644 --- a/src/renderer/element/core.cljs +++ b/src/renderer/element/core.cljs @@ -1,5 +1,4 @@ (ns renderer.element.core (:require - [renderer.element.effects] [renderer.element.events] [renderer.element.subs])) diff --git a/src/renderer/element/effects.cljs b/src/renderer/element/effects.cljs deleted file mode 100644 index a4e407c0..00000000 --- a/src/renderer/element/effects.cljs +++ /dev/null @@ -1,40 +0,0 @@ -(ns renderer.element.effects - (:require - [re-frame.core :as rf] - [renderer.element.handlers :as element-handlers] - [renderer.history.handlers :as history] - [renderer.tools.base :as tools])) - - -(defn elements->string - [elements] - (reduce #(str % (tools/render-to-string %2)) "" elements)) - -(rf/reg-fx - :clipboard-write - (fn [text-html] - (js/navigator.clipboard.write - (clj->js [(js/ClipboardItem. - #js {"text/html" (when text-html - (js/Blob. - [text-html] - #js {:type ["text/html"]}))})])))) - -(rf/reg-event-fx - :element/copy - (fn [{:keys [db]} [_]] - (let [selected-elements (element-handlers/selected db) - text-html (elements->string selected-elements)] - {:db (element-handlers/copy db) - :clipboard-write [text-html]}))) - -(rf/reg-event-fx - :element/cut - (fn [{:keys [db]} [_]] - (let [selected-elements (element-handlers/selected db) - text-html (elements->string selected-elements)] - {:db (-> db - element-handlers/copy - element-handlers/delete - (history/finalize "Cut selection")) - :clipboard-write [text-html]}))) diff --git a/src/renderer/element/events.cljs b/src/renderer/element/events.cljs index 10b7db37..056c2551 100644 --- a/src/renderer/element/events.cljs +++ b/src/renderer/element/events.cljs @@ -2,289 +2,293 @@ (:require [clojure.string :as str] [re-frame.core :as rf] - [renderer.element.handlers :as handlers] - [renderer.frame.handlers :as frame-handlers] - [renderer.history.handlers :as history-handlers] - [renderer.tools.base :as tools])) + [renderer.element.handlers :as h] + [renderer.frame.handlers :as frame.h] + [renderer.history.handlers :as history.h] + [renderer.tools.base :as tools] + [renderer.utils.bounds :as bounds])) (rf/reg-event-db :element/select (fn [db [_ el-k multi?]] (-> db - (handlers/select el-k multi?) - (history-handlers/finalize "Select element")))) + (h/select el-k multi?) + (history.h/finalize "Select element")))) (rf/reg-event-db :element/toggle-property (fn [db [_ key property]] (-> db - (handlers/toggle-property key property) - (history-handlers/finalize (str "Toggle " (name property)))))) + (h/toggle-property key property) + (history.h/finalize "Toggle " (name property))))) (rf/reg-event-db :element/preview-property (fn [db [_ el-k k v]] - (handlers/set-property db el-k k v))) + (h/set-property db el-k k v))) (rf/reg-event-db :element/set-property (fn [db [_ el-k k v]] (-> db - (handlers/set-property el-k k v) - (history-handlers/finalize (str "Set " (name k) " to " v))))) + (h/set-property el-k k v) + (history.h/finalize "Set " (name k) " to " v)))) (rf/reg-event-db :element/lock - (fn [db [_]] + (fn [db _] (-> db - (handlers/lock) - (history-handlers/finalize "Lock selection")))) + h/lock + (history.h/finalize "Lock selection")))) (rf/reg-event-db :element/unlock - (fn [db [_]] + (fn [db _] (-> db - (handlers/unlock) - (history-handlers/finalize "Unlock selection")))) + h/unlock + (history.h/finalize "Unlock selection")))) (rf/reg-event-db :element/set-attribute (fn [db [_ k v]] (-> db - (handlers/set-attribute k v) - (history-handlers/finalize (str "Set " (name k) " to " v))))) + (h/set-attribute k v) + (history.h/finalize "Set " (name k) " to " v)))) (rf/reg-event-db :element/inc-attribute (fn [db [_ k]] (-> db - (handlers/update-attribute k inc) - (history-handlers/finalize (str "Increase " (name k)))))) + (h/update-attribute k inc) + (history.h/finalize "Increase " (name k))))) (rf/reg-event-db :element/dec-attribute (fn [db [_ k]] (-> db - (handlers/update-attribute k dec) - (history-handlers/finalize (str "Decrease " (name k)))))) + (h/update-attribute k dec) + (history.h/finalize "Decrease " (name k))))) (rf/reg-event-db :element/preview-attribute (fn [db [_ k v]] - (handlers/set-attribute db k v))) + (h/set-attribute db k v))) (rf/reg-event-db :element/fill (fn [db [_ color]] (-> db - (handlers/set-attribute :fill color) - (history-handlers/finalize (str "Fill " color))))) + (h/set-attribute :fill color) + (history.h/finalize "Fill " color)))) (rf/reg-event-db :element/delete (fn [db _] (-> db - (handlers/delete) - (handlers/deselect-all) - (history-handlers/finalize "Delete selection")))) + h/delete + (history.h/finalize "Delete selection")))) (rf/reg-event-db :element/deselect-all (fn [db _] - (-> db - (handlers/deselect-all) - (history-handlers/finalize "Deselect all")))) + (-> db h/deselect (history.h/finalize "Deselect all")))) (rf/reg-event-db :element/select-all (fn [db _] - (-> db - (handlers/select-all) - (history-handlers/finalize "Select all")))) + (-> db h/select-all (history.h/finalize "Select all")))) (rf/reg-event-db :element/select-same-tags (fn [db _] (-> db - (handlers/select-same-tags) - (history-handlers/finalize "Select same tags")))) + h/select-same-tags + (history.h/finalize "Select same tags")))) (rf/reg-event-db :element/invert-selection (fn [db _] (-> db - (handlers/invert-selection) - (history-handlers/finalize "Invert selection")))) + h/invert-selection + (history.h/finalize "Invert selection")))) (rf/reg-event-db :element/raise (fn [db _] - (-> db - (handlers/update-selected-by handlers/raise) - (history-handlers/finalize "Raise selection")))) + (-> db + h/raise + (history.h/finalize "Raise selection")))) (rf/reg-event-db :element/lower (fn [db _] - (-> db - (handlers/update-selected-by handlers/lower) - (history-handlers/finalize "Lower selection")))) + (-> db + h/lower + (history.h/finalize "Lower selection")))) (rf/reg-event-db :element/raise-to-top (fn [db _] (-> db - (handlers/update-selected-by handlers/raise-to-top) - (history-handlers/finalize "Raise selection to top")))) + h/raise-to-top + (history.h/finalize "Raise selection to top")))) (rf/reg-event-db :element/lower-to-bottom (fn [db _] (-> db - (handlers/update-selected-by handlers/lower-to-bottom) - (history-handlers/finalize "Lower selection to bottom")))) + h/lower-to-bottom + (history.h/finalize "Lower selection to bottom")))) (rf/reg-event-db :element/align (fn [db [_ direction]] (-> db - (handlers/align direction) - (history-handlers/finalize (str "Align " (name direction)))))) + (h/align direction) + (history.h/finalize "Align " (name direction))))) (rf/reg-event-db :element/export (fn [db _] - (let [xml (tools/render-to-string (handlers/active-page db))] + (let [xml (tools/render-to-string (h/active-page db))] (js/window.api.send "toMain" #js {:action "export" :data xml})))) (rf/reg-event-db :element/paste (fn [db _] (-> db - (handlers/paste) - (history-handlers/finalize "Paste selection")))) + h/paste + (history.h/finalize "Paste selection")))) (rf/reg-event-db :element/paste-in-place (fn [db _] (-> db - (handlers/paste-in-place) - (history-handlers/finalize "Paste selection in place")))) + h/paste-in-place + (history.h/finalize "Paste selection in place")))) (rf/reg-event-db :element/paste-styles (fn [db _] (-> db - (handlers/paste-styles) - (history-handlers/finalize "Paste styles to selection")))) + h/paste-styles + (history.h/finalize "Paste styles to selection")))) (rf/reg-event-db :element/duplicate-in-place (fn [db [_]] (-> db - (handlers/duplicate-in-place) - (history-handlers/finalize "Duplicate selection")))) + h/duplicate-in-place + (history.h/finalize "Duplicate selection")))) (rf/reg-event-db :element/translate (fn [db [_ offset]] (-> db - (handlers/translate offset) - (history-handlers/finalize (str "Move selection " offset))))) + (h/translate offset) + (history.h/finalize "Move selection by " offset)))) + +(rf/reg-event-db + :element/scale + (fn [db [_ ratio]] + (let [bounds (h/selected-bounds db) + pivot-point (bounds/center bounds)] + (-> db + (h/scale ratio pivot-point) + (history.h/finalize "Scale selection by " ratio))))) (rf/reg-event-db :element/move-up (fn [db [_]] (-> db - (handlers/translate [0 -1]) - (history-handlers/finalize (str "Move selection up"))))) + (h/translate [0 -1]) + (history.h/finalize "Move selection up")))) (rf/reg-event-db :element/move-down (fn [db [_]] (-> db - (handlers/translate [0 1]) - (history-handlers/finalize (str "Move selection down"))))) + (h/translate [0 1]) + (history.h/finalize "Move selection down")))) (rf/reg-event-db :element/move-left (fn [db [_]] (-> db - (handlers/translate [-1 0]) - (history-handlers/finalize (str "Move selection left"))))) + (h/translate [-1 0]) + (history.h/finalize "Move selection left")))) (rf/reg-event-db :element/move-right (fn [db [_]] (-> db - (handlers/translate [1 0]) - (history-handlers/finalize (str "Move selection right"))))) + (h/translate [1 0]) + (history.h/finalize "Move selection right")))) (rf/reg-event-db :element/->path (fn [db _] (-> db - (handlers/->path) - (history-handlers/finalize "Convert selection to path")))) + h/->path + (history.h/finalize "Convert selection to path")))) (rf/reg-event-db :element/stroke->path (fn [db _] (-> db - (handlers/stroke->path) - (history-handlers/finalize "Convert selection's stroke to path")))) + h/stroke->path + (history.h/finalize "Convert selection's stroke to path")))) (rf/reg-event-db :element/bool-operation (fn [db [_ operation]] - (if (> (count (handlers/selected db)) 1) + (if (> (count (h/selected db)) 1) (-> db - (handlers/bool-operation operation) - (history-handlers/finalize (-> operation name str/capitalize))) db))) + (h/bool-operation operation) + (history.h/finalize (-> operation name str/capitalize))) db))) (rf/reg-event-db :element/create (fn [db [_ element]] (-> db - (handlers/create element) - (history-handlers/finalize (str "Create " (name (:tag element))))))) + (h/create element) + (history.h/finalize "Create " (name (:tag element)))))) (rf/reg-event-db :element/animate (fn [db [_ tag attrs]] (-> db - (handlers/animate tag attrs) - (history-handlers/finalize (name tag))))) + (h/animate tag attrs) + (history.h/finalize (name tag))))) (rf/reg-event-db :element/set-parent (fn [db [_ element-key parent-key]] (-> db - (handlers/set-parent element-key parent-key) - (history-handlers/finalize "Set parent of selection")))) + (h/set-parent element-key parent-key) + (history.h/finalize "Set parent of selection")))) (rf/reg-event-db :element/group (fn [db _] - (-> db - (handlers/group) - (history-handlers/finalize "Group selection")))) + (-> db + h/group + (history.h/finalize "Group selection")))) (rf/reg-event-db :element/ungroup (fn [db _] - (-> db - (handlers/ungroup) - (history-handlers/finalize "Ungroup selection")))) + (-> db + h/ungroup + (history.h/finalize "Ungroup selection")))) (rf/reg-event-db :element/add-page (fn [db _] - (let [[_ y1 x2 _] (tools/elements-bounds - (handlers/elements db) - (handlers/pages db)) - {:keys [width height fill]} (:attrs (handlers/active-page db)) - db (handlers/create db {:tag :page + (let [[_ y1 x2 _] (tools/elements-bounds (h/elements db) + (h/pages db)) + {:keys [width height fill]} (:attrs (h/active-page db)) + db (h/create db {:tag :page :name "Page" :attrs {:x (+ x2 100) :y y1 @@ -292,13 +296,36 @@ :height height :fill fill}})] (-> db - (frame-handlers/pan-to-element (:key (handlers/active-page db))) - (history-handlers/finalize "Add page"))))) + (frame.h/pan-to-element (:key (h/active-page db))) + (history.h/finalize "Add page"))))) #_:clj-kondo/ignore (rf/reg-event-db :element/manipulate-path (fn [db [_ action]] (-> db - (handlers/manipulate-path action) - (history-handlers/finalize (str/capitalize (str (name action) "path")))))) + (h/manipulate-path action) + (history.h/finalize (str/capitalize (name action)) "path")))) + +(defn elements->string + [elements] + (reduce #(str % (tools/render-to-string %2)) "" elements)) + +(rf/reg-event-fx + :element/copy + (fn [{:keys [db]} [_]] + (let [selected-elements (h/selected db) + text-html (elements->string selected-elements)] + {:db (h/copy db) + :clipboard-write [text-html]}))) + +(rf/reg-event-fx + :element/cut + (fn [{:keys [db]} [_]] + (let [selected-elements (h/selected db) + text-html (elements->string selected-elements)] + {:db (-> db + h/copy + h/delete + (history.h/finalize "Cut selection")) + :clipboard-write [text-html]}))) diff --git a/src/renderer/element/handlers.cljs b/src/renderer/element/handlers.cljs index a0748fec..8f006a3c 100644 --- a/src/renderer/element/handlers.cljs +++ b/src/renderer/element/handlers.cljs @@ -8,23 +8,31 @@ [renderer.utils.bounds :as bounds] [renderer.utils.map :as map] [renderer.utils.uuid :as uuid] - [renderer.utils.vec :as vec])) + [renderer.utils.vec :as vec] + [renderer.utils.spec :as spec])) -(defn path [db] - [:documents (:active-document db) :elements]) +(defn path + ([db] + [:documents (:active-document db) :elements]) + ([db el-k] + (conj (path db) el-k))) + +(defn update-el + [db key f & more] + (apply update-in db (conj (path db) key) f more)) (defn elements [db] (get-in db (path db))) -(defn get-element +(defn element [db k] - (get (elements db) k)) + (get-in db (path db k))) (defn active-page [db] (->> (get-in db [:documents (:active-document db) :active-page]) - (get-element db))) + (element db))) (defn selected [db] @@ -45,7 +53,7 @@ (and (first parents) (empty? (rest parents)) (= (count selected) - (count (:children (get-element db (first parents))))))) + (count (:children (element db (first parents))))))) (or (parent db (parent db (first selected))) (active-page db)) @@ -57,7 +65,7 @@ (active-page db)))) ([db el] (when-let [parent (:parent el)] - (get-element db parent)))) + (element db parent)))) (defn siblings ([db] @@ -79,7 +87,7 @@ parent-keys #{}] (if parent-key (recur - (:parent (get-element db parent-key)) + (:parent (element db parent-key)) (conj parent-keys parent-key)) parent-keys))) @@ -88,8 +96,8 @@ (update-in db [:documents (:active-document db)] dissoc :temp-element)) (defn set-temp - [db element] - (assoc-in db [:documents (:active-document db) :temp-element] element)) + [db el] + (assoc-in db [:documents (:active-document db) :temp-element] el)) (defn get-temp [db] @@ -116,8 +124,8 @@ (assoc-in db (path db) (reduce f (elements db) (selected db)))) (defn update-property - [db el-k k f] - (update-in db (conj (path db) el-k k) f)) + [db el-k k f & more] + (apply update-in db (conj (path db) el-k k) f more)) (defn toggle-property [db el-k k] @@ -135,62 +143,59 @@ ([db el-k k v] (let [attr-path (conj (path db) el-k :attrs k)] (cond-> db - (and (not (:locked? (get-element db el-k))) - (get-in db attr-path)) (assoc-in attr-path v))))) + (and (not (:locked? (element db el-k))) + (-> (element db el-k) tools/attributes k)) + (assoc-in attr-path v))))) (defn update-attribute - [db k f] - (update-selected-by db (fn [elements el] - (if (and (not (:locked? el)) - (-> el tools/attributes k)) - (update elements - (:key el) - #(hierarchy/update-attr % k f)) - elements)))) + ([db k f] + (reduce #(update-attribute %1 %2 k f) db (selected db))) + ([db el k f] + (cond-> db + (and (not (:locked? el)) (-> el tools/attributes k)) + (update-el (:key el) hierarchy/update-attr k f)))) (defn deselect - [db key] - (set-property db key :selected? false)) - -(defn deselect-all - [db] - (reduce deselect db (keys (elements db)))) + ([db] + (reduce deselect db (keys (elements db)))) + ([db key] + (set-property db key :selected? false))) (defn select ([db key] (set-property db key :selected? true)) ([db key multi?] - (if-let [el (get-element db key)] + (if-let [el (element db key)] (if-not multi? (-> db - deselect-all + deselect (select key) (set-active-page (:key (page db el)))) (toggle-property db key :selected?)) - (deselect-all db)))) + (deselect db)))) (defn select-all [db] - (reduce select (deselect-all db) (siblings db))) + (reduce select (deselect db) (siblings db))) (defn selected-tags [db] - (reduce (fn [tags element] (conj tags (:tag element))) #{} (selected db))) + (reduce #(conj %1 (:tag %2)) #{} (selected db))) (defn select-same-tags [db] (let [selected-tags (selected-tags db)] - (reduce (fn [db element] - (if (contains? selected-tags (:tag element)) - (select db (:key element)) - db)) (deselect-all db) (vals (elements db))))) + (reduce (fn [db {:keys [key tag]}] + (cond-> db + (contains? selected-tags tag) + (select key))) (deselect db) (vals (elements db))))) (defn invert-selection [db] (reduce (fn [db {:keys [key tag]}] - (if (contains? #{:page :canvas} tag) - db - (update-in db (conj (path db) key :selected?) not))) + (cond-> db + (not (contains? #{:page :canvas} tag)) + (update-attribute key :selected? not))) db (vals (elements db)))) @@ -207,8 +212,8 @@ (assoc-in db [:documents (:active-document db) :hovered-keys] #{})) (defn clear-ignored - [{active-document :active-document :as db}] - (assoc-in db [:documents active-document :ignored-keys] #{})) + [db] + (assoc-in db [:documents (:active-document db) :ignored-keys] #{})) (defmulti intersects-with-bounds? (fn [element _] (:tag element))) @@ -217,14 +222,14 @@ (defn lock ([db] (reduce lock db (selected-keys db))) - ([db k] - (set-property db k :locked? true))) + ([db el-k] + (set-property db el-k :locked? true))) (defn unlock ([db] (reduce unlock db (selected-keys db))) - ([db k] - (set-property db k :locked? false))) + ([db el-k] + (set-property db el-k :locked? false))) (defn copy [db] @@ -234,7 +239,8 @@ ([db] (reduce delete db (selected-keys db))) ([db k] - (let [el (get-element db k) + (let [el (element db k) + ;; OPTIMIZE: No need to recur to delete all children db (reduce delete db (:children el))] (cond-> db :always @@ -249,119 +255,105 @@ (update-in (path db) dissoc k))))) (defn update-index - [elements el f] - (let [siblings (siblings el) - index (.indexOf siblings (:key el))] - (assoc-in elements - [(:parent el) :children] - (vec/swap siblings index (f index))))) + [db el f] + (let [siblings (siblings db el) + index (.indexOf siblings (:key el)) + new-index (f index)] + (cond-> db + (<= 0 new-index (-> siblings count dec)) + (update-property (:parent el) :children vec/move index (f index))))) (defn raise - [elements el] - (update-index elements el inc)) + ([db] + (reduce raise db (selected db))) + ([db el] + (update-index db el inc))) (defn lower - [elements el] - (update-index elements el dec)) + ([db] + (reduce lower db (selected db))) + ([db el] + (update-index db el dec))) (defn lower-to-bottom - [elements el] - (update-index elements el (fn [_] 0))) + ([db] + (reduce lower-to-bottom db (selected db))) + ([db el] + (update-index db el (fn [_] 0)))) (defn raise-to-top - [elements el] - (update-index elements el #(-> el - siblings - count - dec))) + ([db] + (reduce raise-to-top db (selected db))) + ([db el] + (update-index db el #(-> (siblings db el) count dec)))) (defn translate ([db offset] (reduce #(translate %1 %2 offset) db (selected db))) ([db el offset] - (assoc-in db (conj (path db) (:key el)) (tools/translate el offset)))) + (cond-> db + (not (:locked? el)) + (update-el (:key el) tools/translate offset)))) (defn selected-bounds [db] (tools/elements-bounds (elements db) (selected db))) (defn scale - [db offset _lock-ratio? _in-place?] - (let [[x1 y1 x2 y2] (selected-bounds db) - outer-dimensions (bounds/->dimensions [x1 y1 x2 y2]) - handler (-> db :clicked-element :key)] - (update-selected-by - db - (fn [elements element] - (let [[inner-x1 inner-y1 inner-x2 inner-y2] (tools/bounds element (elements db)) - inner-dimensions (bounds/->dimensions [inner-x1 inner-y1 inner-x2 inner-y2]) - scale-multiplier (mat/div inner-dimensions outer-dimensions) - translate-multiplier (mat/div (case handler - :middle-right [(- inner-x1 x1) 0] - :middle-left [(- x2 inner-x2) 0] - :top-middle [0 (- y2 inner-y2)] - :bottom-middle [0 (- inner-y1 y1)] - :top-right [(- inner-x1 x1) (- y2 inner-y2)] - :top-left [(- x2 inner-x2) (- y2 inner-y2)] - :bottom-right [(- inner-x1 x1) (- inner-y1 y1)] - :bottom-left [(- x2 inner-x2) (- inner-y1 y1)]) outer-dimensions)] - (assoc elements (:key element) (-> element - (tools/scale (mat/mul offset scale-multiplier) handler) - (tools/translate (mat/mul offset translate-multiplier))))))))) + ([db ratio pivot-point] + (reduce #(scale %1 %2 ratio pivot-point) db (selected db))) + ([db el ratio pivot-point] + (cond-> db + (not (:locked? el)) + (update-el (:key el) tools/scale ratio pivot-point)))) (defn align ([db direction] - (update-selected-by - db - (fn [elements el] - (let [[x1 y1 x2 y2] (tools/bounds el (elements db)) - [width height] (bounds/->dimensions [x1 y1 x2 y2]) - parent ((:parent el) elements) - [parent-x1 parent-y1 parent-x2 parent-y2] (tools/bounds parent (elements db)) - [parent-width parent-height] (mat/sub [parent-x2 parent-y2] [parent-x1 parent-y1])] - (assoc elements - (:key el) - (tools/translate el - (case direction - :top [0 (- y1)] - :center-vertical [0 (- (/ parent-height 2) - (+ y1 (/ height 2)))] - :bottom [0 (- parent-height y2)] - :left [(- x1) 0] - :center-horizontal [(- (/ parent-width 2) - (+ x1 (/ width 2))) 0] - :right [(- parent-width x2) 0])))))))) + (reduce #(align %1 %2 direction) db (selected db))) + ([db el direction] + (let [bounds (tools/bounds el (elements db)) + center (bounds/center bounds) + parent-bounds (tools/bounds (parent db el) (elements db)) + parent-center (bounds/center parent-bounds) + [cx cy] (mat/sub parent-center center) + [x1 y1 x2 y2] (mat/sub parent-bounds bounds)] + (translate db el (case direction + :top [0 y1] + :center-vertical [0 cy] + :bottom [0 y2] + :left [x1 0] + :center-horizontal [cx 0] + :right [x2 0]))))) (defn ->path ([db] (reduce ->path db (selected db))) ([db el] - (if (not (:locked? el)) - (assoc-in db (conj (path db) (:key el)) (tools/->path el)) - db))) + (cond-> db + (not (:locked? el)) (update-el (:key el) tools/->path)))) (defn stroke->path ([db] (reduce stroke->path db (selected db))) ([db el] - (if (not (:locked? el)) - (assoc-in db (conj (path db) (:key el)) (tools/stroke->path el)) - db))) + (cond-> db + (not (:locked? el)) (update-el (:key el) tools/stroke->path)))) + +(def default-props + {:type :element + :visible? true + :selected? true + :children []}) (defn create-element - [db parent-key el] + [db el] (let [key (uuid/generate) - el (map/deep-merge el {:key key - :type :element - :visible? true - :selected? true - :parent parent-key - :children []})] + parent (if (page? el) :canvas (-> db active-page :key)) + el (map/deep-merge el default-props {:key key :parent parent})] (cond-> db :always (-> (assoc-in (conj (path db) key) el) - (update-in (conj (path db) parent-key :children) - #(vec (conj % key)))) + (update-property (:parent el) :children #(vec (conj % key)))) (not= (:tool db) :select) (tools/set-tool :select) @@ -369,38 +361,40 @@ (page? el) (set-active-page key)))) -;; TODO: Handle child elements (defn create ([db] (-> db (create (get-temp db)) clear-temp)) ([db elements] + ;; TODO: Handle child elements (let [active-page (active-page db) - page? (page? elements) - parent-key (if page? :canvas (:key active-page))] - (if elements - (cond-> (reduce (fn [db el] (create-element db parent-key el)) - (deselect-all db) - (if (seq? elements) elements [elements])) - (not page?) - (translate [(- (get-in active-page [:attrs :x])) (- (get-in active-page [:attrs :y]))])) - db)))) + elements (if (seq? elements) elements [elements])] + (cond-> (reduce create-element (deselect db) elements) + (not page?) + (translate [(- (get-in active-page [:attrs :x])) + (- (get-in active-page [:attrs :y]))]))))) + +(defn bool + [path-a path-b operation] + (case operation + :unite (.unite path-a path-b) + :intersect (.intersect path-a path-b) + :subtract (.subtract path-a path-b) + :exclude (.exclude path-a path-b) + :divide (.divide path-a path-b))) (defn bool-operation [db operation] - (let [selected-elements (selected db) ; TODO: sort elements by visibily index + ;; TODO: Sort elements by visibily index + (let [selected-elements (selected db) attrs (-> selected-elements first tools/->path :attrs) new-path (reduce (fn [path element] (let [path-a (Path. path) - path-b (-> element tools/->path :attrs :d Path.) - result-path (case operation - :unite (.unite path-a path-b) - :intersect (.intersect path-a path-b) - :subtract (.subtract path-a path-b) - :exclude (.exclude path-a path-b) - :divide (.divide path-a path-b))] - (.getAttribute (.exportSVG result-path) "d"))) + path-b (-> element tools/->path :attrs :d Path.)] + (-> (bool path-a path-b operation) + (.exportSVG) + (.getAttribute "d")))) (:d attrs) (rest selected-elements))] (-> db @@ -411,11 +405,9 @@ (defn paste-in-place ([db] - (reduce paste-in-place (deselect-all db) (:copied-elements db))) + (reduce paste-in-place (deselect db) (:copied-elements db))) ([db el] - (create-element db (if (page? (get-element db (:parent el))) - (-> db active-page :key) - (:parent el)) el))) + (create-element db (assoc el :parent (-> db active-page :key))))) (defn paste [db] @@ -423,15 +415,15 @@ bounds (selected-bounds db) [x1 y1] bounds [width height] (bounds/->dimensions bounds) - [x y] (:adjusted-mouse-pos db)] + [x y] (:adjusted-pointer-pos db)] (translate db [(- x (+ x1 (/ width 2))) (- y (+ y1 (/ height 2)))]))) (defn duplicate-in-place ([db] - (reduce duplicate-in-place (deselect-all db) (selected db))) + (reduce duplicate-in-place (deselect db) (selected db))) ([db el] - (create-element db (:parent el) el))) + (create-element db el))) (defn duplicate [db offset] @@ -441,9 +433,9 @@ (defn animate ([db tag attrs] - (reduce #(animate %1 %2 tag attrs) (deselect-all db) (selected db))) + (reduce #(animate %1 %2 tag attrs) (deselect db) (selected db))) ([db el tag attrs] - (create-element db (:key el) {:tag tag :attrs attrs}))) + (create-element db {:tag tag :attrs attrs :parent (:key el)}))) (defn paste-styles [{copied-elements :copied-elements :as db}] @@ -455,12 +447,7 @@ (fn [elements element] (let [key (:key element) ;; Copy all presentation attributes except transform. - ;; https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation - style-attrs (-> tools/svg-spec - :attributes - :presentation - (dissoc :transform) - keys)] + style-attrs (disj spec/presentation-attrs :transform)] (assoc-in elements [key] @@ -477,42 +464,38 @@ ([db parent-key] (reduce #(set-parent %1 %2 parent-key) db (selected-keys db))) ([db element-key parent-key] - (if (= element-key parent-key) - db - (-> db - (update-in (conj (path db) (:parent (get-element db element-key)) :children) - #(vec (remove #{element-key} %))) - (update-in (conj (path db) parent-key :children) conj element-key) - (assoc-in (conj (path db) element-key :parent) parent-key))))) + (cond-> db + (not= element-key parent-key) + (-> (update-property (:parent (element db element-key)) + :children + #(vec (remove #{element-key} %))) + (update-property parent-key :children conj element-key) + (set-property element-key :parent parent-key))))) (defn group [db] - (reduce (fn [db key] - (set-parent db key (first (selected-keys db)))) - (-> db - deselect-all - (create-element (:key (active-page db)) {:tag :g})) + (reduce (fn [db key] (set-parent db key (first (selected-keys db)))) + (-> (deselect db) + (create-element {:tag :g :parent (:key (active-page db))})) (selected-keys db))) (defn ungroup - [db] - (reduce (fn [db key] - (let [element (get-element db key)] - (if (= (:tag element) :g) - (delete (reduce (fn [db child-key] - (set-parent db child-key (:parent element))) - db - (:children element)) - key) - db))) - db - (selected-keys db))) + ([db] + (reduce ungroup db (selected db))) + ([db el] + (cond-> db + (and (not (:locked? el)) + (= (:tag el) :g)) + (as-> db db + ;; TODO: Apply group attrs to children. + (reduce #(set-parent %1 %2 (:parent el)) db (:children el)) + (delete db (:key el)))))) (defn manipulate-path - [db action] - (update-selected-by db (fn [elements element] - (if (= (:tag element) :path) - (assoc elements - (:key element) - (path/manipulate element action)) - elements)))) + ([db action] + (reduce #(manipulate-path %1 %2 action) db (selected db))) + ([db el action] + (cond-> db + (and (not (:locked? el)) + (= (:tag el) :path)) + (update-in (path db (:key el)) path/manipulate action)))) diff --git a/src/renderer/element/subs.cljs b/src/renderer/element/subs.cljs index ab40d942..d0e9387d 100644 --- a/src/renderer/element/subs.cljs +++ b/src/renderer/element/subs.cljs @@ -1,13 +1,13 @@ (ns renderer.element.subs (:require ["js-beautify" :as js-beautify] - #_[clojure.core.matrix :as mat] [clojure.set :as set] [goog.color :as color] [re-frame.core :as rf] - [renderer.attribute.utils :as attr-utils] + [renderer.attribute.utils :as attr.utils] [renderer.tools.base :as tools] - [renderer.utils.map :as map])) + [renderer.utils.map :as map] + [renderer.utils.bounds :as bounds])) #_(rf/reg-sub :element/element @@ -115,7 +115,7 @@ :attrs (.indexOf k))) attrs))] - (sort-by (fn [[k _]] (.indexOf attr-utils/attrs-order k)) attrs)))) + (sort-by (fn [[k _]] (.indexOf attr.utils/attrs-order k)) attrs)))) (rf/reg-sub :element/bounds @@ -158,20 +158,20 @@ #{} visible-elements))) -#_(rf/reg-sub - :snaping-points - :<- [:document/elements] - :<- [:element/visible] - (fn [elements visible-elements _] - (reduce (fn [points element] - (let [[x1 y1 x2 y2] (tools/adjusted-bounds element elements) - [width height] (mat/sub [x2 y2] [x1 y1])] - (concat points [[x1 y1] - [x1 y2] - [x1 (+ y1 (/ height 2))] - [x2 y1] - [(+ x1 (/ width 2)) y1] - [x2 y2] - [(+ x1 (/ width 2)) (+ y1 (/ height 2))]]))) - [] - visible-elements))) +(rf/reg-sub + :snapping-points + :<- [:document/elements] + :<- [:element/visible] + (fn [[elements visible-elements] _] + (reduce (fn [points element] + (let [[x1 y1 x2 y2] (tools/adjusted-bounds element elements) + [cx cy] (bounds/center [x1 y1 x2 y2])] + (conj points [x1 y1] + [x1 y2] + [x1 cy] + [x2 y1] + [x2 y2] + [x2 cy] + [cx y1] + [cx y2] + [cx cy]))) [] visible-elements))) diff --git a/src/renderer/events.cljs b/src/renderer/events.cljs index 7c4c0d60..2e570700 100644 --- a/src/renderer/events.cljs +++ b/src/renderer/events.cljs @@ -4,8 +4,8 @@ [malli.core :as ma] [re-frame.core :as rf] [renderer.db :as db] - [renderer.frame.handlers :as frame-handlers] - [renderer.handlers :as handlers] + [renderer.frame.handlers :as frame-h] + [renderer.handlers :as h] [renderer.tools.base :as tools] [renderer.utils.local-storage :as local-storage])) @@ -99,27 +99,27 @@ (update db :snap? not))) (defn significant-movement? - [mouse-pos mouse-offset] + [pointer-pos pointer-offset] (let [threshold 1] - (when (and (vector? mouse-pos) (vector? mouse-offset)) - (> (apply max (map abs (mat/sub mouse-pos mouse-offset))) + (when (and (vector? pointer-pos) (vector? pointer-offset)) + (> (apply max (map abs (mat/sub pointer-pos pointer-offset))) threshold)))) (rf/reg-event-db :pointer-event - (fn [{:keys [mouse-offset tool content-rect] :as db} [_ e]] - (let [{:keys [mouse-pos delta element]} e - mouse-pos (mapv js/parseInt mouse-pos) - adjusted-mouse-pos (frame-handlers/adjusted-mouse-pos db mouse-pos)] + (fn [{:keys [pointer-offset tool content-rect] :as db} [_ e]] + (let [{:keys [pointer-pos delta element]} e + pointer-pos (mapv js/parseInt pointer-pos) + adjusted-pointer-pos (frame-h/adjusted-pointer-pos db pointer-pos)] (case (:type e) :pointermove - (-> (if (and (significant-movement? mouse-pos mouse-offset) + (-> (if (and (significant-movement? pointer-pos pointer-offset) (not= (:buttons e) 2)) (cond-> db (not= tool :pan) - (frame-handlers/pan-out-of-canvas content-rect - mouse-pos - mouse-offset) + (frame-h/pan-out-of-canvas content-rect + pointer-pos + pointer-offset) (not (:drag? db)) (-> (tools/drag-start e element) @@ -128,8 +128,8 @@ :always (tools/drag e element)) (tools/mouse-move db e element)) - (assoc :mouse-pos mouse-pos - :adjusted-mouse-pos adjusted-mouse-pos)) + (assoc :pointer-pos pointer-pos + :adjusted-pointer-pos adjusted-pointer-pos)) :pointerdown (cond-> db @@ -139,8 +139,8 @@ :always (-> (tools/mouse-down e element) - (assoc :mouse-offset mouse-pos - :adjusted-mouse-offset adjusted-mouse-pos))) + (assoc :pointer-offset pointer-pos + :adjusted-pointer-offset adjusted-pointer-pos))) :pointerup (cond-> (if (:drag? db) @@ -151,7 +151,7 @@ (dissoc :primary-tool)) :always - (dissoc :mouse-offset :drag?)) + (dissoc :pointer-offset :drag?)) :dblclick (tools/double-click db e element) @@ -161,19 +161,19 @@ (let [delta-y (second delta) factor (Math/pow (+ 1 (/ (:zoom-sensitivity db) 100)) (- delta-y))] - (frame-handlers/zoom-in-mouse-position db factor)) - (frame-handlers/pan db delta)) + (frame-h/zoom-in-pointer-position db factor)) + (frame-h/pan db delta)) :drop (let [data-transfer (:data-transfer e) items (.-items data-transfer) files (.-files data-transfer)] (-> db - (assoc :mouse-pos mouse-pos - :adjusted-mouse-pos adjusted-mouse-pos) + (assoc :pointer-pos pointer-pos + :adjusted-pointer-pos adjusted-pointer-pos) (cond-> - items (handlers/drop-items items) - files (handlers/drop-files files)))) + items (h/drop-items items) + files (h/drop-files files)))) db)))) diff --git a/src/renderer/frame/events.cljs b/src/renderer/frame/events.cljs index 0a236448..c1d75d48 100644 --- a/src/renderer/frame/events.cljs +++ b/src/renderer/frame/events.cljs @@ -30,7 +30,7 @@ :pan-to-active-page (fn [{:keys [active-document content-rect] :as db} [_ zoom]] (let [active-page (get-in db [:documents active-document :active-page]) - {:keys [width height]} (:attrs (el/get-element db active-page)) + {:keys [width height]} (:attrs (el/element db active-page)) [width height] (map units/unit->px [width height]) width-ratio (/ (:width content-rect) width) height-ratio (/ (:height content-rect) height)] diff --git a/src/renderer/frame/handlers.cljs b/src/renderer/frame/handlers.cljs index a75eb1ff..e1ffcc1b 100644 --- a/src/renderer/frame/handlers.cljs +++ b/src/renderer/frame/handlers.cljs @@ -3,7 +3,7 @@ [clojure.core.matrix :as mat] [goog.math] [renderer.element.handlers :as el] - [renderer.element.utils :as el-utils] + [renderer.element.utils :as el.utils] [renderer.tools.base :as tools] [renderer.utils.bounds :as bounds])) @@ -28,23 +28,23 @@ (assoc-in [:documents active-document :zoom] updated-zoom) (assoc-in [:documents active-document :pan] updated-pan)))) -(defn adjust-mouse-pos - [zoom pan mouse-pos] - (-> mouse-pos +(defn adjust-pointer-pos + [zoom pan pointer-pos] + (-> pointer-pos (mat/div zoom) (mat/add pan))) -(defn adjusted-mouse-pos - [{:keys [active-document] :as db} mouse-pos] +(defn adjusted-pointer-pos + [{:keys [active-document] :as db} pointer-pos] (let [{:keys [zoom pan snap?]} (get-in db [:documents active-document]) - adjusted-mouse-pos (adjust-mouse-pos zoom pan mouse-pos)] + adjusted-pointer-pos (adjust-pointer-pos zoom pan pointer-pos)] (if snap? - (mapv Math/round (adjust-mouse-pos zoom pan mouse-pos)) - adjusted-mouse-pos))) + (mapv Math/round (adjust-pointer-pos zoom pan pointer-pos)) + adjusted-pointer-pos))) -(defn zoom-in-mouse-position - [{:keys [mouse-pos] :as db} factor] - (zoom-in-position db factor (adjusted-mouse-pos db mouse-pos))) +(defn zoom-in-pointer-position + [{:keys [pointer-pos] :as db} factor] + (zoom-in-position db factor (adjusted-pointer-pos db pointer-pos))) (defn zoom [{:keys [active-document content-rect] :as db} factor] @@ -69,9 +69,9 @@ (defn pan-to-element [db key] - (let [element (el/get-element db key) + (let [element (el/element db key) elements (el/elements db) - parrent-page-attrs (:attrs (el-utils/parent-page elements element)) + parrent-page-attrs (:attrs (el.utils/parent-page elements element)) db (pan-to-bounds db (tools/bounds element elements))] (if-not (el/page? element) (pan db [(:x parrent-page-attrs) diff --git a/src/renderer/frame/subs.cljs b/src/renderer/frame/subs.cljs index 5f9bb2f2..f8781562 100644 --- a/src/renderer/frame/subs.cljs +++ b/src/renderer/frame/subs.cljs @@ -2,7 +2,7 @@ (:require [clojure.core.matrix :as mat] [re-frame.core :as rf] - [renderer.frame.handlers :as handlers])) + [renderer.frame.handlers :as h])) (rf/reg-sub :frame/viewbox @@ -15,9 +15,9 @@ [x y width height]))) (rf/reg-sub - :frame/adjusted-mouse-pos + :frame/adjusted-pointer-pos :<- [:document/zoom] :<- [:document/pan] - :<- [:mouse-pos] - (fn [[zoom pan mouse-pos] _] - (handlers/adjust-mouse-pos zoom pan mouse-pos))) + :<- [:pointer-pos] + (fn [[zoom pan pointer-pos] _] + (h/adjust-pointer-pos zoom pan pointer-pos))) diff --git a/src/renderer/handlers.cljs b/src/renderer/handlers.cljs index 96c345ae..68c02f8e 100644 --- a/src/renderer/handlers.cljs +++ b/src/renderer/handlers.cljs @@ -1,7 +1,7 @@ (ns renderer.handlers (:require [re-frame.core :as rf] - [renderer.element.handlers :as element-handlers])) + [renderer.element.handlers :as element-h])) (defn set-state [db state] @@ -15,15 +15,15 @@ (defn drop-files "https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/files" - [{:keys [adjusted-mouse-pos] :as db} files] + [{:keys [adjusted-pointer-pos] :as db} files] (reduce (fn [db file] (case (.-type file) "image/png" - (element-handlers/create db {:type :element + (element-h/create db {:type :element :tag :image - :attrs {:x (first adjusted-mouse-pos) - :y (second adjusted-mouse-pos) + :attrs {:x (first adjusted-pointer-pos) + :y (second adjusted-pointer-pos) :href (.-path file)}}) db)) @@ -32,7 +32,7 @@ (defn drop-items "https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem" - [{:keys [adjusted-mouse-pos active-document] :as db} items] + [{:keys [adjusted-pointer-pos active-document] :as db} items] (let [fill (get-in db [:documents active-document :fill])] (doall (for [item items] @@ -43,8 +43,8 @@ {:type :element :tag :text :content % - :attrs {:x (first adjusted-mouse-pos) - :y (second adjusted-mouse-pos) + :attrs {:x (first adjusted-pointer-pos) + :y (second adjusted-pointer-pos) :fill fill}}])) nil)))) db) diff --git a/src/renderer/history/core.cljs b/src/renderer/history/core.cljs index 7fa40879..0ebf8290 100644 --- a/src/renderer/history/core.cljs +++ b/src/renderer/history/core.cljs @@ -1,5 +1,4 @@ (ns renderer.history.core (:require [renderer.history.events] - [renderer.history.handlers] [renderer.history.subs])) diff --git a/src/renderer/history/events.cljs b/src/renderer/history/events.cljs index 1593949f..9945b04d 100644 --- a/src/renderer/history/events.cljs +++ b/src/renderer/history/events.cljs @@ -1,43 +1,43 @@ (ns renderer.history.events (:require [re-frame.core :as rf] - [renderer.element.handlers :as elements] - [renderer.history.handlers :as handlers] + [renderer.element.handlers :as element.h] + [renderer.history.handlers :as h] [renderer.tools.base :as tools])) (rf/reg-event-db :history/undo (fn [db _] - (handlers/undo db 1))) + (h/undo db 1))) (rf/reg-event-db :history/redo (fn [db _] - (handlers/redo db 1))) + (h/redo db 1))) (rf/reg-event-db :history/undo-by (fn [db [_ n]] - (handlers/undo db n))) + (h/undo db n))) (rf/reg-event-db :history/redo-by (fn [db [_ n]] - (handlers/redo db n))) + (h/redo db n))) (rf/reg-event-db :history/cancel (fn [db _] (cond-> db - (and (= (:tool db) :select) (not (:mouse-offset db))) - (-> elements/deselect-all - (handlers/finalize "Deselect all")) + (and (= (:tool db) :select) (not (:pointer-offset db))) + (-> element.h/deselect + (h/finalize "Deselect all")) - (not (:mouse-offset db)) + (not (:pointer-offset db)) (-> (tools/set-tool :select) (assoc :state :default)) - (:mouse-offset db) (dissoc :mouse-offset) + (:pointer-offset db) (dissoc :pointer-offset) - :always (-> elements/clear-temp - handlers/swap)))) + :always (-> element.h/clear-temp + h/swap)))) diff --git a/src/renderer/history/handlers.cljs b/src/renderer/history/handlers.cljs index cd13ee83..09084d74 100644 --- a/src/renderer/history/handlers.cljs +++ b/src/renderer/history/handlers.cljs @@ -1,7 +1,7 @@ (ns renderer.history.handlers (:require [clojure.zip :as zip] - [renderer.element.handlers :as elements])) + [renderer.element.handlers :as element.h])) (defn history-path [db] [:documents (:active-document db) :history]) @@ -18,7 +18,7 @@ (defn state [db explanation] - (with-meta (elements/elements db) {:explanation explanation + (with-meta (element.h/elements db) {:explanation explanation :date (.now js/Date) :index (step-count db)})) @@ -41,7 +41,7 @@ (defn swap [db] - (assoc-in db (elements/path db) (zip/node (history db)))) + (assoc-in db (element.h/path db) (zip/node (history db)))) (defn move [db f] @@ -83,15 +83,20 @@ [history] (accumulate history zip/next)) +(print ) + (defn finalize "Pushes changes to the zip-tree. Explicitly adding states, allows canceling actions before adding the result to the history. We also avoid the need of throttling in consecutive actions (move, color pick etc)" - [db explanation] - (let [state (state db explanation) + [db explanation & more] + (let [explanation (apply str explanation more) + state (state db explanation) history (history db)] - (assoc-in db (history-path db) (cond-> history - (redos? history) (zip/replace (conj (conj (zip/rights history) (zip/node history)) state)) - (zip/branch? history) zip/down - (not (redos? history)) (zip/insert-right state) - :always zip/rightmost)))) + (assoc-in db + (history-path db) + (cond-> history + (redos? history) (zip/replace (conj (conj (zip/rights history) (zip/node history)) state)) + (zip/branch? history) zip/down + (not (redos? history)) (zip/insert-right state) + :always zip/rightmost)))) diff --git a/src/renderer/history/subs.cljs b/src/renderer/history/subs.cljs index 733418cf..b9573567 100644 --- a/src/renderer/history/subs.cljs +++ b/src/renderer/history/subs.cljs @@ -1,28 +1,28 @@ (ns renderer.history.subs (:require [re-frame.core :as rf] - [renderer.history.handlers :as handlers])) + [renderer.history.handlers :as h])) (rf/reg-sub :history/undos? :<- [:document/history] - (fn [history _] (handlers/undos? history))) + (fn [history _] (h/undos? history))) (rf/reg-sub :history/redos? :<- [:document/history] - (fn [history _] (handlers/redos? history))) + (fn [history _] (h/redos? history))) (rf/reg-sub :history/undos :<- [:document/history] - (fn [history _] (drop-last (handlers/undos history)))) + (fn [history _] (drop-last (h/undos history)))) (rf/reg-sub :history/redos :<- [:document/history] - (fn [history _] (rest (handlers/redos history)))) + (fn [history _] (rest (h/redos history)))) #_(rf/reg-sub :history/step-count - (fn [db _] (handlers/step-count db))) + (fn [db _] (h/step-count db))) diff --git a/src/renderer/history/views.cljs b/src/renderer/history/views.cljs index 6700c9a8..561b34a2 100644 --- a/src/renderer/history/views.cljs +++ b/src/renderer/history/views.cljs @@ -14,8 +14,9 @@ (defn tree [] - #_[:div {:style {:flex "0 0 300px" - :overflow "auto"}} + #_[:div + {:style {:flex "0 0 300px" + :overflow "auto"}} (loop [step-count @(rf/subscribe [:history/step-count])] [:div.p-1 step-count diff --git a/src/renderer/menubar/core.cljs b/src/renderer/menubar/core.cljs index 7dcafccf..e2fa3e53 100644 --- a/src/renderer/menubar/core.cljs +++ b/src/renderer/menubar/core.cljs @@ -1,3 +1,3 @@ (ns renderer.menubar.core (:require - [renderer.menubar.effects])) + [renderer.menubar.events])) diff --git a/src/renderer/menubar/effects.cljs b/src/renderer/menubar/events.cljs similarity index 88% rename from src/renderer/menubar/effects.cljs rename to src/renderer/menubar/events.cljs index 171442e6..7db18bae 100644 --- a/src/renderer/menubar/effects.cljs +++ b/src/renderer/menubar/events.cljs @@ -1,4 +1,4 @@ -(ns renderer.menubar.effects +(ns renderer.menubar.events (:require [re-frame.core :as rf])) diff --git a/src/renderer/overlay.cljs b/src/renderer/overlay.cljs index 65fa4a0d..700ad04a 100644 --- a/src/renderer/overlay.cljs +++ b/src/renderer/overlay.cljs @@ -1,5 +1,5 @@ (ns renderer.overlay - "Render functions for canvas overlay objects" + "Render functions for canvas overlay objects (select helpers etc)." (:require [clojure.core.matrix :as mat] [goog.math :as math] @@ -22,9 +22,8 @@ (let [zoom @(rf/subscribe [:document/zoom])] [:circle {:cx x :cy y - :stroke stroke - :stroke-width (/ 1 zoom) - :fill "transparent" + :stroke-width 0 + :fill accent :r (/ 3 zoom)} children])) (defn circle-handler @@ -219,9 +218,9 @@ :stroke-dasharray stroke-dasharray})]])) (defn select-box - [adjusted-mouse-pos adjusted-mouse-offset zoom] - (let [[offset-x offset-y] adjusted-mouse-offset - [pos-x pos-y] adjusted-mouse-pos] + [adjusted-pointer-pos adjusted-pointer-offset zoom] + (let [[offset-x offset-y] adjusted-pointer-offset + [pos-x pos-y] adjusted-pointer-pos] {:tag :rect :attrs {:x (min pos-x offset-x) :y (min pos-y offset-y) :width (abs (- pos-x offset-x)) diff --git a/src/renderer/panel/events.cljs b/src/renderer/panel/events.cljs index 151c5397..7fa95036 100644 --- a/src/renderer/panel/events.cljs +++ b/src/renderer/panel/events.cljs @@ -21,32 +21,32 @@ (rf/reg-event-db :panel/clear-drag (fn [db [_]] - (update db :panel-state dissoc :drag :mouse-pos))) + (update db :panel-state dissoc :drag :pointer-pos))) (rf/reg-event-db :panel/on-drag local-storage/persist (fn [db [_ evt]] (when-let [key (-> db :panel-state :drag)] - (let [mouse-pos [(.-clientX evt) (.-clientY evt)] + (let [pointer-pos [(.-clientX evt) (.-clientY evt)] min-width 300 max-width 600 - previous-mouse-pos (-> db :panel-state :mouse-pos) + previous-pointer-pos (-> db :panel-state :pointer-pos) current-size (-> db :panel key :size) - offset (when previous-mouse-pos (mat/sub previous-mouse-pos mouse-pos)) + offset (when previous-pointer-pos (mat/sub previous-pointer-pos pointer-pos)) direction (-> db :panel-state :drag-direction) updated-size ((if (contains? #{:right :bottom} direction) + -) current-size ((if (contains? #{:left :right} direction) first second) offset))] (cond-> db (or (< min-width updated-size max-width) - (not (-> db :panel-state :mouse-pos))) - (assoc-in [:panel-state :mouse-pos] mouse-pos) + (not (-> db :panel-state :pointer-pos))) + (assoc-in [:panel-state :pointer-pos] pointer-pos) (and (not (-> db :panel key :visible?)) (> updated-size current-size)) (assoc-in [:panel key :visible?] true) - (and key previous-mouse-pos) + (and key previous-pointer-pos) (assoc-in [:panel key :size] (cond (< updated-size min-width) min-width (> updated-size max-width) max-width :else updated-size))))))) diff --git a/src/renderer/rulers/views.cljs b/src/renderer/rulers/views.cljs index 84382b65..2418d910 100644 --- a/src/renderer/rulers/views.cljs +++ b/src/renderer/rulers/views.cljs @@ -74,7 +74,7 @@ (defn mouse-pointer [orientation size] - (let [[x y] @(rf/subscribe [:mouse-pos]) + (let [[x y] @(rf/subscribe [:pointer-pos]) pointer-size (/ size 5) size-diff (- size pointer-size)] [:polygon {:points (str/join " " (if (= orientation :vertical) diff --git a/src/renderer/statusbar.cljs b/src/renderer/statusbar.cljs index 756df4e8..4a96eff0 100644 --- a/src/renderer/statusbar.cljs +++ b/src/renderer/statusbar.cljs @@ -5,12 +5,12 @@ [goog.string :as gstring] [re-frame.core :as rf] [re-frame.registrar] - [renderer.color.views :as color] + [renderer.color.views :as color-v] [renderer.components :as comp] [renderer.filters :as filters])) (defn coordinates [] - (let [[x y] @(rf/subscribe [:frame/adjusted-mouse-pos])] + (let [[x y] @(rf/subscribe [:frame/adjusted-pointer-pos])] [:div.flex.flex-col.ml-2.font-mono {:style {:min-width "80px"}} [:div.flex.justify-between @@ -67,8 +67,8 @@ _element-colors @(rf/subscribe [:element/colors]) filter @(rf/subscribe [:document/filter])] [:div.toolbar.footer - [color/picker] - [:div.grow [color/palette]] + [color-v/picker] + [:div.grow [color-v/palette]] #_(when element-colors (map (fn [color] [color-drip (color/hexToRgb color)]) element-colors)) [:> Select/Root {:value (name filter) :onValueChange #(rf/dispatch [:document/set-filter %])} diff --git a/src/renderer/subs.cljs b/src/renderer/subs.cljs index 41126b51..bed1a783 100644 --- a/src/renderer/subs.cljs +++ b/src/renderer/subs.cljs @@ -11,20 +11,24 @@ :-> :primary-tool) (rf/reg-sub - :mouse-pos - :-> :mouse-pos) + :pointer-pos + :-> :pointer-pos) (rf/reg-sub - :adjusted-mouse-pos - :-> :adjusted-mouse-pos) + :adjusted-pointer-pos + :-> :adjusted-pointer-pos) (rf/reg-sub - :adjusted-mouse-offset - :-> :adjusted-mouse-offset) + :pointer-offset + :-> :pointer-offset) (rf/reg-sub - :mouse-offset - :-> :mouse-offset) + :adjusted-pointer-offset + :-> :adjusted-pointer-offset) + +(rf/reg-sub + :pivot-point + :-> :pivot-point) (rf/reg-sub :drag? diff --git a/src/renderer/theme/core.cljs b/src/renderer/theme/core.cljs index 88b66c1e..7d110ddb 100644 --- a/src/renderer/theme/core.cljs +++ b/src/renderer/theme/core.cljs @@ -1,4 +1,4 @@ (ns renderer.theme.core (:require - [renderer.theme.effects] + [renderer.theme.events] [renderer.theme.subs])) diff --git a/src/renderer/theme/effects.cljs b/src/renderer/theme/events.cljs similarity index 91% rename from src/renderer/theme/effects.cljs rename to src/renderer/theme/events.cljs index ed279819..797bcc3f 100644 --- a/src/renderer/theme/effects.cljs +++ b/src/renderer/theme/events.cljs @@ -1,4 +1,4 @@ -(ns renderer.theme.effects +(ns renderer.theme.events (:require [platform] [re-frame.core :as rf] @@ -27,7 +27,7 @@ :theme/cycle-mode (fn [{:keys [db]} [_]] (let [mode (case (-> db :theme :mode) - ;; TODO: system mode + ;; TODO: Support system mode. :dark :light :light :dark)] {:dispatch [:theme/set-mode mode]}))) diff --git a/src/renderer/tools/arc.cljs b/src/renderer/tools/arc.cljs index 7bbae748..07aae88e 100644 --- a/src/renderer/tools/arc.cljs +++ b/src/renderer/tools/arc.cljs @@ -34,10 +34,10 @@ :stroke-dasharray]}) (defmethod tools/drag :arc - [{:keys [adjusted-mouse-offset active-document adjusted-mouse-pos] :as db}] + [{:keys [adjusted-pointer-offset active-document adjusted-pointer-pos] :as db}] (let [{:keys [stroke fill]} (get-in db [:documents active-document]) - [offset-x offset-y] adjusted-mouse-offset - [pos-x pos-y] adjusted-mouse-pos + [offset-x offset-y] adjusted-pointer-offset + [pos-x pos-y] adjusted-pointer-pos attrs {:cx offset-x :cy offset-y ::start-deg 90 diff --git a/src/renderer/tools/base.cljs b/src/renderer/tools/base.cljs index f683b6b2..a0f1ff6e 100644 --- a/src/renderer/tools/base.cljs +++ b/src/renderer/tools/base.cljs @@ -1,13 +1,13 @@ (ns renderer.tools.base (:require - ["@mdn/browser-compat-data" :as bcd] ["paper" :refer [Path]] ["paperjs-offset" :refer [PaperOffset]] [goog.string :as gstring] [reagent.dom.server :as server] [renderer.element.utils :as el-utils] [renderer.utils.bounds :as bounds] - [renderer.utils.map :as map])) + [renderer.utils.map :as map] + [renderer.utils.spec :as spec])) (derive ::transform ::tool) (derive ::draw ::tool) @@ -46,8 +46,8 @@ (defmulti render-edit #(:tag %)) (defmulti bounds #(:tag %)) -(defmulti translate #(when-not (:locked? %) (:tag %))) -(defmulti scale #(when-not (:locked? %) (:tag %))) +(defmulti translate #(:tag %)) +(defmulti scale #(:tag %)) (defmulti edit #(when-not (:locked? %) (:tag %))) (defmulti mouse-down #(:tool %)) @@ -114,12 +114,8 @@ (defn elements-bounds [elements bound-elements] - (reduce - #(bounds/union % (adjusted-bounds %2 elements)) - (adjusted-bounds (first bound-elements) elements) (rest bound-elements))) - -(def svg-spec - (js->clj (.-svg bcd) :keywordize-keys true)) + (when (seq bound-elements) + (apply bounds/union (map #(adjusted-bounds % elements) bound-elements)))) (defn attrs-map [attrs] @@ -138,11 +134,11 @@ (when tag (merge (when (or (isa? tag ::shape) (= tag :svg)) (merge - (attrs-map (tag (:elements svg-spec))) - (attrs-map (-> svg-spec :attributes :core)) - (attrs-map (-> svg-spec :attributes :style)))) + (attrs-map (tag (:elements spec/svg))) + (attrs-map (-> spec/svg :attributes :core)) + (attrs-map (-> spec/svg :attributes :style)))) (when (contains? #{:animateMotion :animateTransform} tag) - (attrs-map (:animate (:elements svg-spec)))) + (attrs-map (:animate (:elements spec/svg)))) (zipmap (:attrs (properties tag)) (repeat "")))) attrs)) diff --git a/src/renderer/tools/blob.cljs b/src/renderer/tools/blob.cljs index 95cfc098..0f059043 100644 --- a/src/renderer/tools/blob.cljs +++ b/src/renderer/tools/blob.cljs @@ -91,15 +91,12 @@ :opacity]}) (defmethod tools/drag-start ::blob - [{:keys [adjusted-mouse-offset + [{:keys [adjusted-pointer-offset active-document - adjusted-mouse-pos] :as db}] + adjusted-pointer-pos] :as db}] (let [{:keys [stroke fill]} (get-in db [:documents active-document]) - [offset-x offset-y] adjusted-mouse-offset - radius (Math/sqrt (apply + (mat/pow - (mat/sub adjusted-mouse-pos - adjusted-mouse-offset) - 2))) + [offset-x offset-y] adjusted-pointer-offset + radius (mat/distance adjusted-pointer-pos adjusted-pointer-offset) attrs {::x (- offset-x radius) ::y (- offset-y radius) ::seed (goog.math/randomInt 1000000) @@ -111,12 +108,9 @@ (elements/set-temp db {:type :element :tag ::blob :attrs attrs}))) (defmethod tools/drag ::blob - [{:keys [adjusted-mouse-offset adjusted-mouse-pos] :as db}] - (let [[offset-x offset-y] adjusted-mouse-offset - radius (Math/sqrt (apply + (mat/pow - (mat/sub adjusted-mouse-pos - adjusted-mouse-offset) - 2))) + [{:keys [adjusted-pointer-offset adjusted-pointer-pos] :as db}] + (let [[offset-x offset-y] adjusted-pointer-offset + radius (mat/distance adjusted-pointer-pos adjusted-pointer-offset) temp (-> (elements/get-temp db) (assoc-in [:attrs ::x] (- offset-x radius)) (assoc-in [:attrs ::y] (- offset-y radius)) diff --git a/src/renderer/tools/box.cljs b/src/renderer/tools/box.cljs index 6ad06c58..c8d0ac55 100644 --- a/src/renderer/tools/box.cljs +++ b/src/renderer/tools/box.cljs @@ -1,6 +1,6 @@ (ns renderer.tools.box "This serves as an abstraction for box elements that share the - :x :y :whidth :height attributes." + :x :y :width :height attributes." (:require [clojure.core.matrix :as mat] [clojure.string :as str] @@ -18,63 +18,42 @@ (hierarchy/update-attr :y + y))) (defmethod tools/scale ::tools/box - [element [x y] handler] - (cond-> element - (contains? #{:bottom-right - :top-right - :middle-right} handler) - (hierarchy/update-attr :width + x) - - (contains? #{:bottom-left - :top-left - :middle-left} handler) - (-> (hierarchy/update-attr :x + x) - (hierarchy/update-attr :width - x)) - - (contains? #{:bottom-middle - :bottom-right - :bottom-left} handler) - (hierarchy/update-attr :height + y) - - (contains? #{:top-middle - :top-left - :top-right} handler) - (-> (hierarchy/update-attr :y + y) - (hierarchy/update-attr :height - y)))) + [el ratio pivot-point] + (let [[x y] ratio + bounds (tools/bounds el) + [x1 y1 _ _] bounds + pivot-diff (mat/sub pivot-point [x1 y1]) + translate-diff (mat/sub pivot-diff (mat/mul pivot-diff ratio))] + (-> el + (hierarchy/update-attr :width * x) + (hierarchy/update-attr :height * y) + (hierarchy/update-attr :stroke-width * y) + (tools/translate translate-diff)))) (defmethod tools/edit ::tools/element [el [x y] handler] (case handler - :position - (-> el - (hierarchy/update-attr :width #(max 0 (- % x))) - (hierarchy/update-attr :height #(max 0 (- % y))) - (tools/translate [x y])) - - :size - (-> el - (hierarchy/update-attr :width #(max 0 (+ % x))) - (hierarchy/update-attr :height #(max 0 (+ % y)))) - - el)) + :position (-> el + (hierarchy/update-attr :width #(max 0 (- % x))) + (hierarchy/update-attr :height #(max 0 (- % y))) + (tools/translate [x y])) + :size (-> el + (hierarchy/update-attr :width #(max 0 (+ % x))) + (hierarchy/update-attr :height #(max 0 (+ % y)))))) (defmethod tools/render-edit ::tools/box [{:keys [attrs key] :as el}] (let [{:keys [x y width height]} attrs [x y width height] (mapv units/unit->px [x y width height]) active-page @(rf/subscribe [:element/active-page]) - page-pos (mapv units/unit->px - [(-> active-page :attrs :x) - (-> active-page :attrs :y)]) - [x y] (if-not (= (:tag el) :page) - (mat/add page-pos [x y]) - [x y])] + page-pos (mapv units/unit->px [(-> active-page :attrs :x) + (-> active-page :attrs :y)]) + [x y] (cond-> [x y] (not= (:tag el) :page) (mat/add page-pos))] [:g {:key :edit-handlers} (map (fn [handler] - [overlay/square-handler (merge handler - {:type :handler - :tag :edit - :element key})]) + [overlay/square-handler (merge handler {:type :handler + :tag :edit + :element key})]) [{:x x :y y :key :position} {:x (+ x width) :y (+ y height) :key :size}])])) @@ -89,7 +68,6 @@ (if (str/blank? stroke) 0 stroke-width-px))] (mapv units/unit->px [x y (+ x width) (+ y height)]))) - (defmethod tools/area ::tools/box [{{:keys [width height]} :attrs}] (apply * (map units/unit->px [width height]))) diff --git a/src/renderer/tools/brush.cljs b/src/renderer/tools/brush.cljs index 638f2dec..90863632 100644 --- a/src/renderer/tools/brush.cljs +++ b/src/renderer/tools/brush.cljs @@ -80,16 +80,16 @@ (defmethod tools/drag :brush [{:keys [active-document - adjusted-mouse-pos] :as db} {:keys [pressure]}] + adjusted-pointer-pos] :as db} {:keys [pressure]}] (let [stroke (get-in db [:documents active-document :stroke])] (if (get-in db [:documents active-document :temp-element :attrs ::points]) (update-in db [:documents active-document :temp-element :attrs ::points] conj - (conj adjusted-mouse-pos pressure)) + (conj adjusted-pointer-pos pressure)) (elements/set-temp db {:type :element :tag :brush - :attrs {::points [(conj adjusted-mouse-pos pressure)] + :attrs {::points [(conj adjusted-pointer-pos pressure)] ::stroke stroke ::size 16 ::thinning 0.5 diff --git a/src/renderer/tools/button.cljs b/src/renderer/tools/button.cljs index 799ccf82..f5afae1e 100644 --- a/src/renderer/tools/button.cljs +++ b/src/renderer/tools/button.cljs @@ -30,9 +30,9 @@ :class]}) (defmethod tools/drag :button - [{:keys [adjusted-mouse-pos tool adjusted-mouse-offset fill stroke]}] - (let [[offset-x offset-y] adjusted-mouse-offset - [pos-x pos-y] adjusted-mouse-pos + [{:keys [adjusted-pointer-pos tool adjusted-pointer-offset fill stroke]}] + (let [[offset-x offset-y] adjusted-pointer-offset + [pos-x pos-y] adjusted-pointer-pos attrs {:x (min pos-x offset-x) :y (min pos-y offset-y) :width (abs (- pos-x offset-x)) diff --git a/src/renderer/tools/canvas.cljs b/src/renderer/tools/canvas.cljs index 9600d2bf..b56b319d 100644 --- a/src/renderer/tools/canvas.cljs +++ b/src/renderer/tools/canvas.cljs @@ -32,8 +32,11 @@ tool @(rf/subscribe [:tool]) primary-tool @(rf/subscribe [:primary-tool]) rotate @(rf/subscribe [:document/rotate]) + snapping-points @(rf/subscribe [:snapping-points]) + debug-info? @(rf/subscribe [:debug-info?]) grid? @(rf/subscribe [:grid?]) mouse-handler #(mouse/event-handler % element) + pivot-point @(rf/subscribe [:pivot-point]) select? (or (= tool :select) (= primary-tool :select))] [:svg {:on-pointer-up mouse-handler @@ -62,6 +65,11 @@ [:filter {:id id :key id} [tag attrs]]) filters/accessibility)] + (when debug-info? + (into [:g] (map (fn [snapping-point] + [overlay/point-of-interest snapping-point]) + snapping-points))) + (when select? (map (fn [el] ^{:key (str (:key el) "-bounds")} @@ -75,7 +83,8 @@ (when (not-empty (filter (comp not zero?) bounds)) [:<> [overlay/size bounds] - [overlay/bounding-handlers bounds]])]) + [overlay/bounding-handlers bounds] + (when pivot-point [overlay/point-of-interest pivot-point])])]) (when (or (= tool :edit) (= primary-tool :edit)) diff --git a/src/renderer/tools/circle.cljs b/src/renderer/tools/circle.cljs index 84189d80..14f44890 100644 --- a/src/renderer/tools/circle.cljs +++ b/src/renderer/tools/circle.cljs @@ -8,7 +8,9 @@ [renderer.element.handlers :as elements] [renderer.overlay :as overlay] [renderer.tools.base :as tools] - [renderer.utils.units :as units])) + [renderer.utils.units :as units] + [renderer.utils.bounds :as bounds] + [renderer.utils.mouse :as mouse])) (derive :circle ::tools/shape) @@ -24,13 +26,10 @@ :stroke-dasharray]}) (defmethod tools/drag :circle - [{:keys [adjusted-mouse-offset active-document adjusted-mouse-pos] :as db}] + [{:keys [adjusted-pointer-offset active-document adjusted-pointer-pos] :as db}] (let [{:keys [stroke fill]} (get-in db [:documents active-document]) - [offset-x offset-y] adjusted-mouse-offset - radius (Math/sqrt (apply + (mat/pow - (mat/sub adjusted-mouse-pos - adjusted-mouse-offset) - 2))) + [offset-x offset-y] adjusted-pointer-offset + radius (mat/distance adjusted-pointer-pos adjusted-pointer-offset) attrs {:cx offset-x :cy offset-y :fill fill @@ -44,23 +43,13 @@ (hierarchy/update-attr :cy + y))) (defmethod tools/scale :circle - [el [x y] handler] - (cond-> el - (contains? #{:middle-right} handler) - (-> (hierarchy/update-attr :cx + (/ x 2)) - (hierarchy/update-attr :r + (/ x 2))) - - (contains? #{:middle-left} handler) - (-> (hierarchy/update-attr :cx + (/ x 2)) - (hierarchy/update-attr :r - (/ x 2))) - - (contains? #{:bottom-middle} handler) - (-> (hierarchy/update-attr :cy + (/ y 2)) - (hierarchy/update-attr :r + (/ y 2))) - - (contains? #{:top-middle} handler) - (-> (hierarchy/update-attr :cy + (/ y 2)) - (hierarchy/update-attr :r - (/ y 2))))) + [element ratio pivot-point] + (let [center (bounds/center (tools/bounds element)) + pivot-diff (mat/sub pivot-point center) + translate-diff (mat/sub pivot-diff (mat/mul pivot-diff ratio))] + (-> element + (hierarchy/update-attr :r * ratio) + (tools/translate translate-diff)))) (defmethod tools/bounds :circle [{{:keys [cx cy r stroke-width stroke]} :attrs}] diff --git a/src/renderer/tools/core.cljs b/src/renderer/tools/core.cljs index 7ba30838..5624d2e9 100644 --- a/src/renderer/tools/core.cljs +++ b/src/renderer/tools/core.cljs @@ -1,5 +1,6 @@ (ns renderer.tools.core (:require + [renderer.tools.select] [renderer.tools.animate-motion] [renderer.tools.animate-transform] [renderer.tools.animate] @@ -27,7 +28,6 @@ [renderer.tools.polyline] [renderer.tools.polyshape] [renderer.tools.rect] - [renderer.tools.select] [renderer.tools.shape] [renderer.tools.svg] [renderer.tools.text] diff --git a/src/renderer/tools/edit.cljs b/src/renderer/tools/edit.cljs index e04ed4e7..6d8e7390 100644 --- a/src/renderer/tools/edit.cljs +++ b/src/renderer/tools/edit.cljs @@ -38,18 +38,18 @@ (handlers/set-state db :edit)) (defmethod tools/drag :edit - [{:keys [adjusted-mouse-offset adjusted-mouse-pos clicked-element] :as db} e] - (let [mouse-offset (mat/sub adjusted-mouse-pos adjusted-mouse-offset) + [{:keys [adjusted-pointer-offset adjusted-pointer-pos clicked-element] :as db} e] + (let [pointer-offset (mat/sub adjusted-pointer-pos adjusted-pointer-offset) db (history/swap db) element-key (:element clicked-element) - mouse-offset (if (contains? (:modifiers e) :ctrl) - (mouse/lock-direction mouse-offset) - mouse-offset)] + pointer-offset (if (contains? (:modifiers e) :ctrl) + (mouse/lock-direction pointer-offset) + pointer-offset)] (if element-key (assoc-in db (conj (elements/path db) element-key) - (tools/edit (elements/get-element db element-key) - mouse-offset + (tools/edit (elements/element db element-key) + pointer-offset (:key clicked-element))) db))) diff --git a/src/renderer/tools/ellipse.cljs b/src/renderer/tools/ellipse.cljs index 907c8177..ec7c6251 100644 --- a/src/renderer/tools/ellipse.cljs +++ b/src/renderer/tools/ellipse.cljs @@ -8,7 +8,8 @@ [renderer.element.handlers :as elements] [renderer.overlay :as overlay] [renderer.tools.base :as tools] - [renderer.utils.units :as units])) + [renderer.utils.units :as units] + [renderer.utils.bounds :as bounds])) (derive :ellipse ::tools/shape) @@ -25,10 +26,10 @@ :stroke-dasharray]}) (defmethod tools/drag :ellipse - [{:keys [adjusted-mouse-offset active-document adjusted-mouse-pos] :as db} e] + [{:keys [adjusted-pointer-offset active-document adjusted-pointer-pos] :as db} e] (let [{:keys [stroke fill]} (get-in db [:documents active-document]) - [offset-x offset-y] adjusted-mouse-offset - [pos-x pos-y] adjusted-mouse-pos + [offset-x offset-y] adjusted-pointer-offset + [pos-x pos-y] adjusted-pointer-pos lock-ratio? (contains? (:modifiers e) :ctrl) rx (abs (- pos-x offset-x)) ry (abs (- pos-y offset-y)) @@ -48,24 +49,15 @@ (hierarchy/update-attr :cy + y))) (defmethod tools/scale :ellipse - [el [x y] handler] - (let [[x y] (mat/div [x y] 2)] - (cond-> el - (contains? #{:bottom-right :top-right :middle-right} handler) - (-> (hierarchy/update-attr :rx + x) - (hierarchy/update-attr :cx + x)) - - (contains? #{:bottom-left :top-left :middle-left} handler) - (-> (hierarchy/update-attr :rx - x) - (hierarchy/update-attr :cx + x)) - - (contains? #{:bottom-middle :bottom-right :bottom-left} handler) - (-> (hierarchy/update-attr :cy + y) - (hierarchy/update-attr :ry + y)) - - (contains? #{:top-middle :top-left :top-right} handler) - (-> (hierarchy/update-attr :ry - y) - (hierarchy/update-attr :cy + y))))) + [element ratio pivot-point] + (let [[x y] ratio + center (bounds/center (tools/bounds element)) + pivot-diff (mat/sub pivot-point center) + translate-diff (mat/sub pivot-diff (mat/mul pivot-diff ratio))] + (-> element + (hierarchy/update-attr :rx * x) + (hierarchy/update-attr :ry * y) + (tools/translate translate-diff)))) (defmethod tools/bounds :ellipse [{{:keys [cx cy rx ry stroke-width stroke]} :attrs}] diff --git a/src/renderer/tools/group.cljs b/src/renderer/tools/group.cljs index 3189a1d5..834d8a89 100644 --- a/src/renderer/tools/group.cljs +++ b/src/renderer/tools/group.cljs @@ -11,7 +11,8 @@ (defmethod tools/properties :g [] {:description "The SVG element is a container used to group other - SVG elements."}) + SVG elements." + :attrs []}) (defmethod tools/translate :g [el [_x _y]] diff --git a/src/renderer/tools/image.cljs b/src/renderer/tools/image.cljs index 49871bb7..51841878 100644 --- a/src/renderer/tools/image.cljs +++ b/src/renderer/tools/image.cljs @@ -15,9 +15,9 @@ :attrs [:href]}) (defmethod tools/drag :image - [{:keys [adjusted-mouse-offset adjusted-mouse-pos] :as db}] - (let [[offset-x offset-y] adjusted-mouse-offset - [pos-x pos-y] adjusted-mouse-pos + [{:keys [adjusted-pointer-offset adjusted-pointer-pos] :as db}] + (let [[offset-x offset-y] adjusted-pointer-offset + [pos-x pos-y] adjusted-pointer-pos attrs {:x (min pos-x offset-x) :y (min pos-y offset-y) :width (abs (- pos-x offset-x)) diff --git a/src/renderer/tools/line.cljs b/src/renderer/tools/line.cljs index 16aa91ef..023a3835 100644 --- a/src/renderer/tools/line.cljs +++ b/src/renderer/tools/line.cljs @@ -24,10 +24,10 @@ :opacity]}) (defn create-line - [{:keys [adjusted-mouse-offset adjusted-mouse-pos active-document] :as db}] + [{:keys [adjusted-pointer-offset adjusted-pointer-pos active-document] :as db}] (let [stroke (get-in db [:documents active-document :stroke]) - [offset-x offset-y] adjusted-mouse-offset - [pos-x pos-y] adjusted-mouse-pos + [offset-x offset-y] adjusted-pointer-offset + [pos-x pos-y] adjusted-pointer-pos attrs {:x1 offset-x :y1 offset-y :x2 pos-x @@ -36,10 +36,10 @@ (elements/set-temp db {:type :element :tag :line :attrs attrs}))) (defn update-line-end - [{:keys [adjusted-mouse-pos] :as db}] + [{:keys [adjusted-pointer-pos] :as db}] (let [temp (-> (elements/get-temp db) - (assoc-in [:attrs :x2] (first adjusted-mouse-pos)) - (assoc-in [:attrs :y2] (second adjusted-mouse-pos)))] + (assoc-in [:attrs :x2] (first adjusted-pointer-pos)) + (assoc-in [:attrs :y2] (second adjusted-pointer-pos)))] (elements/set-temp db temp))) (defmethod tools/mouse-move :line diff --git a/src/renderer/tools/map.cljs b/src/renderer/tools/map.cljs index 2523db65..fd51b813 100644 --- a/src/renderer/tools/map.cljs +++ b/src/renderer/tools/map.cljs @@ -20,9 +20,9 @@ :height]}) (defmethod tools/drag :map - [{:keys [adjusted-mouse-pos tool adjusted-mouse-offset]}] - (let [[offset-x offset-y] adjusted-mouse-offset - [pos-x pos-y] adjusted-mouse-pos + [{:keys [adjusted-pointer-pos tool adjusted-pointer-offset]}] + (let [[offset-x offset-y] adjusted-pointer-offset + [pos-x pos-y] adjusted-pointer-pos attrs {:x (min pos-x offset-x) :y (min pos-y offset-y) :width (abs (- pos-x offset-x)) diff --git a/src/renderer/tools/measure.cljs b/src/renderer/tools/measure.cljs index fa3348f6..286222a7 100644 --- a/src/renderer/tools/measure.cljs +++ b/src/renderer/tools/measure.cljs @@ -32,11 +32,11 @@ (defmethod tools/drag-end :measure [db] db) (defmethod tools/drag :measure - [{:keys [adjusted-mouse-offset adjusted-mouse-pos] :as db}] - (let [[offset-x offset-y] adjusted-mouse-offset - [pos-x pos-y] adjusted-mouse-pos - [adjacent opposite] (mat/sub adjusted-mouse-offset - adjusted-mouse-pos) + [{:keys [adjusted-pointer-offset adjusted-pointer-pos] :as db}] + (let [[offset-x offset-y] adjusted-pointer-offset + [pos-x pos-y] adjusted-pointer-pos + [adjacent opposite] (mat/sub adjusted-pointer-offset + adjusted-pointer-pos) hypotenuse (Math/hypot adjacent opposite) attrs {:x1 offset-x :y1 offset-y diff --git a/src/renderer/tools/page.cljs b/src/renderer/tools/page.cljs index 10328348..4047faca 100644 --- a/src/renderer/tools/page.cljs +++ b/src/renderer/tools/page.cljs @@ -20,9 +20,9 @@ :attrs [:overflow]}) (defmethod tools/drag :page - [{:keys [adjusted-mouse-pos adjusted-mouse-offset] :as db} e] - (let [[offset-x offset-y] adjusted-mouse-offset - [pos-x pos-y] adjusted-mouse-pos + [{:keys [adjusted-pointer-pos adjusted-pointer-offset] :as db} e] + (let [[offset-x offset-y] adjusted-pointer-offset + [pos-x pos-y] adjusted-pointer-pos lock-ratio? (contains? (:modifiers e) :ctrl) width (abs (- pos-x offset-x)) height (abs (- pos-y offset-y)) diff --git a/src/renderer/tools/pan.cljs b/src/renderer/tools/pan.cljs index 02679806..eaee84b9 100644 --- a/src/renderer/tools/pan.cljs +++ b/src/renderer/tools/pan.cljs @@ -24,7 +24,7 @@ (defmethod tools/drag :pan [db e _] - (frame/pan db (mat/sub (:mouse-pos db) (:mouse-pos e)))) + (frame/pan db (mat/sub (:pointer-pos db) (:pointer-pos e)))) (defmethod tools/drag-end :pan [db] diff --git a/src/renderer/tools/pen.cljs b/src/renderer/tools/pen.cljs index 8fcfa5ae..2634a272 100644 --- a/src/renderer/tools/pen.cljs +++ b/src/renderer/tools/pen.cljs @@ -24,15 +24,15 @@ (handlers/set-state db :create)) (defmethod tools/drag :pen - [{:keys [active-document adjusted-mouse-pos] :as db}] + [{:keys [active-document adjusted-pointer-pos] :as db}] (let [stroke (get-in db [:documents active-document :stroke])] (if (get-in db [:documents active-document :temp-element :attrs :points]) (update-in db [:documents active-document :temp-element :attrs :points] - #(str % " " (str/join " " adjusted-mouse-pos))) + #(str % " " (str/join " " adjusted-pointer-pos))) (elements/set-temp db {:type :element :tag :polyline - :attrs {:points (str/join " " adjusted-mouse-pos) + :attrs {:points (str/join " " adjusted-pointer-pos) :stroke stroke :fill "transparent"}})))) diff --git a/src/renderer/tools/polyshape.cljs b/src/renderer/tools/polyshape.cljs index 5a72d4d3..c31ef3a3 100644 --- a/src/renderer/tools/polyshape.cljs +++ b/src/renderer/tools/polyshape.cljs @@ -40,37 +40,37 @@ #(str % " " (str/join " " point)))) (defmethod tools/mouse-up ::tools/polyshape - [{:keys [adjusted-mouse-pos] :as db}] + [{:keys [adjusted-pointer-pos] :as db}] (if (elements/get-temp db) - (add-point db adjusted-mouse-pos) + (add-point db adjusted-pointer-pos) (-> db (handlers/set-state :create) - (create-polyline adjusted-mouse-pos)))) + (create-polyline adjusted-pointer-pos)))) (defmethod tools/drag-end ::tools/polyshape - [{:keys [adjusted-mouse-pos] :as db}] + [{:keys [adjusted-pointer-pos] :as db}] (if (elements/get-temp db) - (add-point db adjusted-mouse-pos) + (add-point db adjusted-pointer-pos) (-> db (handlers/set-state :create) - (create-polyline adjusted-mouse-pos)))) + (create-polyline adjusted-pointer-pos)))) (defmethod tools/mouse-move ::tools/polyshape - [{:keys [active-document adjusted-mouse-pos] :as db}] + [{:keys [active-document adjusted-pointer-pos] :as db}] (if-let [points (get-in db [:documents active-document :temp-element :attrs :points])] - (let [point-vector (attr-utils/points-to-vec points)] + (let [point-vector (attr-utils/points->vec points)] (assoc-in db [:documents active-document :temp-element :attrs :points] (str/join " " (concat (apply concat (if (second point-vector) (drop-last point-vector) point-vector)) - adjusted-mouse-pos)))) db)) + adjusted-pointer-pos)))) db)) (defmethod tools/double-click ::tools/polyshape [{:keys [active-document] :as db}] (-> db (update-in [:documents active-document :temp-element :attrs :points] - #(str/join " " (apply concat (drop-last 2 (attr-utils/points-to-vec %))))) + #(str/join " " (apply concat (drop-last 2 (attr-utils/points->vec %))))) (elements/create) (history/finalize (str "Create " (:tool db))))) @@ -79,11 +79,11 @@ (update-in element [:attrs :points] #(->> % - attr-utils/points-to-vec + attr-utils/points->vec (reduce (fn [points point] (conj points - (units/transform + x (first point)) - (units/transform + y (second point)))) []) + (units/transform (first point) + x) + (units/transform (second point) + y))) []) (str/join " ")))) @@ -107,7 +107,7 @@ :type :handler :tag :edit :element key}])) - (attr-utils/points-to-vec points))])) + (attr-utils/points->vec points))])) (defmethod tools/edit ::tools/polyshape [element [x y] handler] @@ -115,18 +115,18 @@ (update-in element [:attrs :points] #(str/join " " - (-> (attr-utils/points-to-vec %1) + (-> (attr-utils/points->vec %1) (update (int handler) (fn [point] (list - (units/transform + x (first point)) - (units/transform + y (second point))))) + (units/transform (first point) + x) + (units/transform (second point) + y)))) flatten))) element)) (defmethod tools/bounds ::tools/polyshape [{{:keys [points]} :attrs}] - (let [points-v (attr-utils/points-to-vec points) + (let [points-v (attr-utils/points->vec points) x1 (apply min (map #(units/unit->px (first %)) points-v)) y1 (apply min (map #(units/unit->px (second %)) points-v)) x2 (apply max (map #(units/unit->px (first %)) points-v)) @@ -148,19 +148,16 @@ (defmethod tools/area ::tools/polyshape [{{:keys [points]} :attrs}] - (let [points-v (attr-utils/points-to-vec points) - points-v (mapv (fn [point] (mapv units/unit->px point)) points-v)] + (let [points-v (attr-utils/points->px points)] (calc-polygon-area points-v))) (defmethod tools/centroid ::tools/polyshape [{{:keys [points]} :attrs}] - (let [points-v (attr-utils/points-to-vec points) - points-v (mapv (fn [point] (mapv units/unit->px point)) points-v)] + (let [points-v (attr-utils/points->px points)] (-> (reduce mat/add [0 0] points-v) (mat/div (count points-v))))) (defmethod tools/poi ::tools/polyshape [{{:keys [points]} :attrs}] - (let [points-v (attr-utils/points-to-vec points) - points-v (mapv (fn [point] (mapv units/unit->px point)) points-v)] + (let [points-v (attr-utils/points->px points)] (take 2 (polylabel (clj->js [points-v]))))) diff --git a/src/renderer/tools/rect.cljs b/src/renderer/tools/rect.cljs index d1ff3c3e..f4c970e3 100644 --- a/src/renderer/tools/rect.cljs +++ b/src/renderer/tools/rect.cljs @@ -21,10 +21,10 @@ :stroke-linejoin]}) (defmethod tools/drag :rect - [{:keys [adjusted-mouse-offset active-document adjusted-mouse-pos] :as db} e] + [{:keys [adjusted-pointer-offset active-document adjusted-pointer-pos] :as db} e] (let [{:keys [stroke fill]} (get-in db [:documents active-document]) - [offset-x offset-y] adjusted-mouse-offset - [pos-x pos-y] adjusted-mouse-pos + [offset-x offset-y] adjusted-pointer-offset + [pos-x pos-y] adjusted-pointer-pos lock-ratio? (contains? (:modifiers e) :ctrl) width (abs (- pos-x offset-x)) height (abs (- pos-y offset-y)) diff --git a/src/renderer/tools/select.cljs b/src/renderer/tools/select.cljs index c6795c6f..ee551d10 100644 --- a/src/renderer/tools/select.cljs +++ b/src/renderer/tools/select.cljs @@ -60,8 +60,8 @@ "Hold " [:strong "Ctrl"] " to lock proportions, and " - [:strong "Alt"] - " to center the pivot point."]]) + [:strong "Shift"] + " to scale in position."]]) (defn reduce-by-area [{:keys [active-document] :as db} intersecting? f] @@ -112,11 +112,11 @@ (elements/clear-ignored))) (defn select-rect - [{:keys [adjusted-mouse-offset - adjusted-mouse-pos + [{:keys [adjusted-pointer-offset + adjusted-pointer-pos active-document] :as db} intersecting?] (let [zoom (get-in db [:documents active-document :zoom])] - (cond-> (overlay/select-box adjusted-mouse-pos adjusted-mouse-offset zoom) + (cond-> (overlay/select-box adjusted-pointer-pos adjusted-pointer-offset zoom) (not intersecting?) (assoc-in [:attrs :fill] "transparent")))) (defmethod tools/drag-start :select @@ -135,11 +135,36 @@ (history/finalize "Select element")) db) :move))) +(defn offset-scale + [db [x y] lock-ratio? in-place?] + (let [handler (-> db :clicked-element :key) + bounds (elements/selected-bounds db) + dimensions (bounds/->dimensions bounds) + [x1 y1 x2 y2] bounds + [cx cy] (bounds/center bounds) + [offset pivot-point] (case handler + :middle-right [[x 0] [x1 cy]] + :middle-left [[(- x) 0] [x2 cy]] + :top-middle [[0 (- y)] [cx y2]] + :bottom-middle [[0 y] [cx y1]] + :top-right [[x (- y)] [x1 y2]] + :top-left [[(- x) (- y)] [x2 y2]] + :bottom-right [[x y] [x1 y1]] + :bottom-left [[(- x) y] [x2 y1]]) + offset (cond-> offset in-place? (mat/mul 2)) + pivot-point (if in-place? [cx cy] pivot-point) + scale-ratio (mat/div (mat/add dimensions offset) dimensions) + scale-ratio (cond-> scale-ratio lock-ratio? mouse/lock-ratio) + scale-ratio (mapv #(max 0 %) scale-ratio)] + (-> db + (assoc :pivot-point pivot-point) + (elements/scale scale-ratio pivot-point)))) + (defmethod tools/drag :select [{:keys [state - adjusted-mouse-offset - adjusted-mouse-pos] :as db} e] - (let [offset (mat/sub adjusted-mouse-pos adjusted-mouse-offset) + adjusted-pointer-offset + adjusted-pointer-pos] :as db} e] + (let [offset (mat/sub adjusted-pointer-pos adjusted-pointer-offset) offset (if (and (contains? (:modifiers e) :ctrl) (not= state :scale)) (mouse/lock-direction offset) @@ -164,28 +189,26 @@ (handlers/set-state db :move)) :scale - (elements/scale (history/swap db) - offset - (contains? (:modifiers e) :ctrl) - (contains? (:modifiers e) :shift)) + (offset-scale (history/swap db) + offset + (contains? (:modifiers e) :ctrl) + (contains? (:modifiers e) :shift)) :default db) (handlers/set-message (message offset state))))) (defmethod tools/drag-end :select - [{:keys [state adjusted-mouse-offset] :as db} e] + [{:keys [state adjusted-pointer-offset] :as db} e] (-> (case state - :select (-> (if-not (mouse/multiselect? e) - (elements/deselect-all db) - db) + :select (-> (cond-> db (not (mouse/multiselect? e)) elements/deselect) (reduce-by-area (contains? (:modifiers e) :alt) - #(elements/select %1 (:key %2) )) + #(elements/select %1 (:key %2))) (elements/clear-temp) (history/finalize "Modify selection")) - :move (history/finalize db (str "Move selection by " adjusted-mouse-offset)) + :move (history/finalize db (str "Move selection by " adjusted-pointer-offset)) :scale (history/finalize db "Scale selection") :clone (history/finalize db "Clone selection") :default db) (handlers/set-state :default) - (dissoc :clicked-element) + (dissoc :clicked-element :pivot-point) (handlers/set-message (message nil :default)))) diff --git a/src/renderer/tools/svg.cljs b/src/renderer/tools/svg.cljs index fa7c38dd..c051b937 100644 --- a/src/renderer/tools/svg.cljs +++ b/src/renderer/tools/svg.cljs @@ -20,9 +20,9 @@ :overflow]}) (defmethod tools/drag :svg - [{:keys [adjusted-mouse-offset adjusted-mouse-pos] :as db}] - (let [[offset-x offset-y] adjusted-mouse-offset - [pos-x pos-y] adjusted-mouse-pos + [{:keys [adjusted-pointer-offset adjusted-pointer-pos] :as db}] + (let [[offset-x offset-y] adjusted-pointer-offset + [pos-x pos-y] adjusted-pointer-pos attrs {:x (min pos-x offset-x) :y (min pos-y offset-y) :width (abs (- pos-x offset-x)) diff --git a/src/renderer/tools/text.cljs b/src/renderer/tools/text.cljs index 94b844f5..0d812eee 100644 --- a/src/renderer/tools/text.cljs +++ b/src/renderer/tools/text.cljs @@ -36,9 +36,9 @@ [:div "Click to enter your text."]]))) (defmethod tools/mouse-up :text - [{:keys [adjusted-mouse-offset active-document] :as db}] + [{:keys [adjusted-pointer-offset active-document] :as db}] (let [fill (get-in db [:documents active-document :fill]) - [offset-x offset-y] adjusted-mouse-offset + [offset-x offset-y] adjusted-pointer-offset attrs {:x offset-x :y offset-y :fill fill}] @@ -119,7 +119,7 @@ (.textToPath js/window.api (.-path (first (.findFonts js/window.api - ;; TODO: Getting the computed styles might safer + ;; TODO: Getting the computed styles might safer. #js {:family (:font-family attrs) :weight (js/parseInt (:font-weight attrs)) :italic (= (:font-style attrs) diff --git a/src/renderer/tools/zoom.cljs b/src/renderer/tools/zoom.cljs index acadb67c..b8b9914c 100644 --- a/src/renderer/tools/zoom.cljs +++ b/src/renderer/tools/zoom.cljs @@ -38,20 +38,20 @@ (assoc db :cursor "default")) (defmethod tools/drag :zoom - [{:keys [adjusted-mouse-offset adjusted-mouse-pos active-document] :as db}] + [{:keys [adjusted-pointer-offset adjusted-pointer-pos active-document] :as db}] (elements/set-temp db (overlay/select-box - adjusted-mouse-pos - adjusted-mouse-offset + adjusted-pointer-pos + adjusted-pointer-offset (get-in db [:documents active-document :zoom])))) (defmethod tools/drag-end :zoom [{:keys [active-document content-rect - adjusted-mouse-offset - adjusted-mouse-pos + adjusted-pointer-offset + adjusted-pointer-pos zoom-factor] :as db} e] - (let [[offset-x offset-y] adjusted-mouse-offset - [pos-x pos-y] adjusted-mouse-pos + (let [[offset-x offset-y] adjusted-pointer-offset + [pos-x pos-y] adjusted-pointer-pos width (abs (- pos-x offset-x)) height (abs (- pos-y offset-y)) width-ratio (/ (:width content-rect) width) @@ -71,4 +71,4 @@ (let [factor (if (contains? (:modifiers e) :shift) (:zoom-factor db) (/ 1 (:zoom-factor db)))] - (frame/zoom-in-mouse-position db factor))) + (frame/zoom-in-pointer-position db factor))) diff --git a/src/renderer/utils/bounds.cljs b/src/renderer/utils/bounds.cljs index e13efd55..9a072487 100644 --- a/src/renderer/utils/bounds.cljs +++ b/src/renderer/utils/bounds.cljs @@ -3,9 +3,12 @@ [clojure.core.matrix :as mat])) (defn union - "Calculates the wrapping bounds of bounds." - [[ax1 ay1 ax2 ay2] [bx1 by1 bx2 by2]] - [(min ax1 bx1) (min ay1 by1) (max ax2 bx2) (max ay2 by2)]) + "Calculates the union of bounds." + [& bounds] + (concat (apply map min (map #(take 2 %) bounds)) + (apply map max (map #(drop 2 %) bounds)))) + +(apply union [[-100 -100 100 100]] ) (defn ->dimensions "Converts bounds to a [width heigh] vector." diff --git a/src/renderer/utils/mouse.cljs b/src/renderer/utils/mouse.cljs index 84231b1c..f12063c3 100644 --- a/src/renderer/utils/mouse.cljs +++ b/src/renderer/utils/mouse.cljs @@ -13,6 +13,11 @@ [x 0] [0 y])) +(defn lock-ratio + [[x y]] + (let [ratio (if (< (abs x) (abs y)) x y)] + [ratio ratio])) + (defn event-handler "Gathers pointer event props. https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent @@ -32,7 +37,7 @@ (rf/dispatch-sync [:pointer-event {:element el :target (.-target e) :type (keyword (.-type e)) - :mouse-pos [(.-pageX e) (.-pageY e)] + :pointer-pos [(.-pageX e) (.-pageY e)] :pressure (.-pressure e) :pointer-type (.-pointerType e) :primary? (.-isPrimary e) diff --git a/src/renderer/utils/spec.cljs b/src/renderer/utils/spec.cljs new file mode 100644 index 00000000..8eb17edc --- /dev/null +++ b/src/renderer/utils/spec.cljs @@ -0,0 +1,25 @@ +(ns renderer.utils.spec + "Use BCD to get compatibility data for properties and more. + https://github.com/mdn/browser-compat-data" + (:require ["@mdn/browser-compat-data" :as bcd])) + +(def svg + (js->clj (.-svg bcd) :keywordize-keys true)) + +(def presentation-attrs + "https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation" + (-> svg + :attributes + :presentation + keys + set)) + +(defn compat-data + "Returns conmpatibility data for tags or attributes." + ([tag] + (-> svg :elements tag :__compat)) + ([tag attr] + (or (-> svg :elements tag attr :__compat) + (-> svg :attributes :presentation attr :__compat) + (-> svg :attributes :core attr :__compat) + (-> svg :attributes :style attr :__compat)))) diff --git a/src/renderer/utils/units.cljs b/src/renderer/utils/units.cljs index eacc2255..06144c7f 100644 --- a/src/renderer/utils/units.cljs +++ b/src/renderer/utils/units.cljs @@ -4,18 +4,19 @@ (def ppi 96) -(def units {:px 1 - :ch 8 - :ex 7.15625 - :em 16 - :rem 16 - :in ppi - :cm (/ ppi 2.54) - :mm (/ ppi 25.4) - :pt (/ ppi 72) - :pc (/ ppi 6) - ;; TODO: Find an agnostix way to handle percentages - :% 1}) +(def units + ;; TODO: Find an agnostix way to handle percentages. + {:px 1 + :ch 8 + :ex 7.15625 + :em 16 + :rem 16 + :in ppi + :cm (/ ppi 2.54) + :mm (/ ppi 25.4) + :pt (/ ppi 72) + :pc (/ ppi 6) + :% 1}) (defn unit->key "Converts the string unit to a lower-cased keyword." @@ -64,11 +65,9 @@ (defn transform "Converts a value to pixels, applies a transformation and converts the result back to the original unit." - [transformation-f transformation-v value] + [value f & more] (let [[number unit] (parse-unit value)] - (-> number - (->px unit) - (transformation-f transformation-v) + (-> (apply f (->px number unit) more) (js/parseFloat) (.toFixed 2) (->unit unit) diff --git a/src/renderer/utils/vec.cljs b/src/renderer/utils/vec.cljs index 134d8951..d4dd2ba8 100644 --- a/src/renderer/utils/vec.cljs +++ b/src/renderer/utils/vec.cljs @@ -15,13 +15,13 @@ [el] (subvec coll index)))) -#_(defn move - "Moves element by index." - [coll index-1 index-2] - (let [el (nth coll index-1)] - (if (= index-1 index-2) - coll - (into [] (add (remove-by-index coll index-1) index-2 el))))) +(defn move + "Moves element by index." + [coll index-1 index-2] + (let [el (nth coll index-1)] + (if (= index-1 index-2) + coll + (into [] (add (remove-by-index coll index-1) index-2 el))))) (defn swap "Swaps the position of two elements by index." diff --git a/src/renderer/window/core.cljs b/src/renderer/window/core.cljs index 3f276594..24575963 100644 --- a/src/renderer/window/core.cljs +++ b/src/renderer/window/core.cljs @@ -1,5 +1,4 @@ (ns renderer.window.core (:require - [renderer.window.effects] [renderer.window.events] [renderer.window.subs])) diff --git a/src/renderer/window/effects.cljs b/src/renderer/window/effects.cljs deleted file mode 100644 index 3c874d4a..00000000 --- a/src/renderer/window/effects.cljs +++ /dev/null @@ -1,51 +0,0 @@ -(ns renderer.window.effects - (:require - [platform] - [re-frame.core :as rf])) - -(rf/reg-fx - ::close - (fn [_] - (.close js/window))) - -(rf/reg-fx - ::toggle-fullscreen - (fn [_] - (let [element js/document.documentElement] - (if (.-fullscreenElement element) - (.exitFullscreen element) - (.requestFullscreen element))))) - -(rf/reg-fx - ::open-remote-url - (fn [url] - (.open js/window url))) - -(rf/reg-event-fx - :window/close - (fn [_ _] - {::close nil})) - -(rf/reg-event-fx - :window/toggle-maximized - (fn [_ _] - {:send-to-main {:action "windowToggleMaximized"}})) - -(rf/reg-event-fx - :window/toggle-fullscreen - (fn [_ _] - (if platform/electron? - {:send-to-main {:action "windowToggleFullscreen"}} - {::toggle-fullscreen nil}))) - -(rf/reg-event-fx - :window/minimize - (fn [_ _] - {:send-to-main {:action "windowMinimize"}})) - -(rf/reg-event-fx - :window/open-remote-url - (fn [_ [_ url]] - (if platform/electron? - {:send-to-main {:action "openRemoteUrl" :data url}} - {::open-remote-url url}))) diff --git a/src/renderer/window/events.cljs b/src/renderer/window/events.cljs index f8e4276b..87c75d57 100644 --- a/src/renderer/window/events.cljs +++ b/src/renderer/window/events.cljs @@ -1,5 +1,6 @@ (ns renderer.window.events (:require + [platform] [re-frame.core :as rf])) (rf/reg-event-db @@ -25,3 +26,50 @@ (rf/path :window) (fn [db [_]] (update db :header? not))) + +(rf/reg-fx + ::close + (fn [_] + (.close js/window))) + +(rf/reg-fx + ::toggle-fullscreen + (fn [_] + (let [element js/document.documentElement] + (if (.-fullscreenElement element) + (.exitFullscreen element) + (.requestFullscreen element))))) + +(rf/reg-fx + ::open-remote-url + (fn [url] + (.open js/window url))) + +(rf/reg-event-fx + :window/close + (fn [_ _] + {::close nil})) + +(rf/reg-event-fx + :window/toggle-maximized + (fn [_ _] + {:send-to-main {:action "windowToggleMaximized"}})) + +(rf/reg-event-fx + :window/toggle-fullscreen + (fn [_ _] + (if platform/electron? + {:send-to-main {:action "windowToggleFullscreen"}} + {::toggle-fullscreen nil}))) + +(rf/reg-event-fx + :window/minimize + (fn [_ _] + {:send-to-main {:action "windowMinimize"}})) + +(rf/reg-event-fx + :window/open-remote-url + (fn [_ [_ url]] + (if platform/electron? + {:send-to-main {:action "openRemoteUrl" :data url}} + {::open-remote-url url}))) diff --git a/src/user.cljs b/src/user.cljs index ef5a09a3..70d62c2b 100644 --- a/src/user.cljs +++ b/src/user.cljs @@ -14,6 +14,13 @@ ([x y] (move [x y]))) +(defn ^:export scale + "Scales the selected elements." + ([ratio] + (rf/dispatch [:element/scale (if (number? ratio) [ratio ratio] ratio)])) + ([x y] + (rf/dispatch [:element/scale [x y]]))) + (defn ^:export fill "Fills the selected elements." [color]