diff --git a/frontend/deps.edn b/frontend/deps.edn index 55ea41dfbc..eb597d0ebb 100644 --- a/frontend/deps.edn +++ b/frontend/deps.edn @@ -33,6 +33,9 @@ thheller/shadow-cljs {:mvn/version "2.8.110"} + lambdaisland/uri {:mvn/version "1.3.45" + :exclusions [org.clojure/data.json]} + ;; i18n parsing carocad/parcera {:mvn/version "0.11.0"} org.antlr/antlr4-runtime {:mvn/version "4.7"}}} diff --git a/frontend/resources/images/cursors/create-artboard.svg b/frontend/resources/images/cursors/create-artboard.svg new file mode 100644 index 0000000000..636becc5ba --- /dev/null +++ b/frontend/resources/images/cursors/create-artboard.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/resources/images/cursors/create-ellipse.svg b/frontend/resources/images/cursors/create-ellipse.svg new file mode 100644 index 0000000000..8be94f60de --- /dev/null +++ b/frontend/resources/images/cursors/create-ellipse.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/resources/images/cursors/create-polygon.svg b/frontend/resources/images/cursors/create-polygon.svg new file mode 100644 index 0000000000..d3115e65fc --- /dev/null +++ b/frontend/resources/images/cursors/create-polygon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/resources/images/cursors/create-reclangle.svg b/frontend/resources/images/cursors/create-reclangle.svg new file mode 100644 index 0000000000..aa40add04d --- /dev/null +++ b/frontend/resources/images/cursors/create-reclangle.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/resources/images/cursors/create-shape.svg b/frontend/resources/images/cursors/create-shape.svg new file mode 100644 index 0000000000..9d0699e822 --- /dev/null +++ b/frontend/resources/images/cursors/create-shape.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/resources/images/cursors/duplicate.svg b/frontend/resources/images/cursors/duplicate.svg new file mode 100644 index 0000000000..4938b2bfa0 --- /dev/null +++ b/frontend/resources/images/cursors/duplicate.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/resources/images/cursors/hand.svg b/frontend/resources/images/cursors/hand.svg new file mode 100644 index 0000000000..2e935f3c57 --- /dev/null +++ b/frontend/resources/images/cursors/hand.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/resources/images/cursors/move-pointer.svg b/frontend/resources/images/cursors/move-pointer.svg new file mode 100644 index 0000000000..1c8fa8d04e --- /dev/null +++ b/frontend/resources/images/cursors/move-pointer.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/resources/images/cursors/pen.svg b/frontend/resources/images/cursors/pen.svg new file mode 100644 index 0000000000..a4ddc9a6f7 --- /dev/null +++ b/frontend/resources/images/cursors/pen.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/frontend/resources/images/cursors/pencil.svg b/frontend/resources/images/cursors/pencil.svg new file mode 100644 index 0000000000..5cc93a9c47 --- /dev/null +++ b/frontend/resources/images/cursors/pencil.svg @@ -0,0 +1 @@ + diff --git a/frontend/resources/images/cursors/pointer-inner.svg b/frontend/resources/images/cursors/pointer-inner.svg new file mode 100644 index 0000000000..f5239e09ac --- /dev/null +++ b/frontend/resources/images/cursors/pointer-inner.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/resources/images/cursors/resize-alt.svg b/frontend/resources/images/cursors/resize-alt.svg new file mode 100644 index 0000000000..9e712e8626 --- /dev/null +++ b/frontend/resources/images/cursors/resize-alt.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/resources/images/cursors/resize-diagonal.svg b/frontend/resources/images/cursors/resize-diagonal.svg new file mode 100644 index 0000000000..00ee0d0285 --- /dev/null +++ b/frontend/resources/images/cursors/resize-diagonal.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/resources/images/cursors/resize-h.svg b/frontend/resources/images/cursors/resize-h.svg new file mode 100644 index 0000000000..afda462b02 --- /dev/null +++ b/frontend/resources/images/cursors/resize-h.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/resources/images/cursors/rotate.svg b/frontend/resources/images/cursors/rotate.svg new file mode 100644 index 0000000000..e075f4c27f --- /dev/null +++ b/frontend/resources/images/cursors/rotate.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/resources/images/cursors/text.svg b/frontend/resources/images/cursors/text.svg new file mode 100644 index 0000000000..09860fd8b2 --- /dev/null +++ b/frontend/resources/images/cursors/text.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/resources/styles/main/partials/debug-icons-preview.scss b/frontend/resources/styles/main/partials/debug-icons-preview.scss index ed8e7054d6..5e56fc0a4e 100644 --- a/frontend/resources/styles/main/partials/debug-icons-preview.scss +++ b/frontend/resources/styles/main/partials/debug-icons-preview.scss @@ -1,9 +1,14 @@ +.debug-preview { + max-height: 100vh; + display: flex; + flex-direction: column; + overflow: scroll; +} .debug-icons-preview { display: flex; flex-wrap: wrap; - overflow: scroll; - .icon-item { + .icon-item, .cursor-item { padding: 10px; display: flex; flex-direction: column; @@ -17,4 +22,7 @@ height: 100%; } } + .cursor-item { + height: auto; + } } diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss index 56494be88f..39751a6be1 100644 --- a/frontend/resources/styles/main/partials/workspace.scss +++ b/frontend/resources/styles/main/partials/workspace.scss @@ -145,15 +145,6 @@ g.controls { rect.main { pointer-events: none; } - circle.rotate { cursor: ns-resize; } // TODO - .top-left { cursor: nwse-resize; } - .bottom-right { cursor: nwse-resize; } - .top-right { cursor: nesw-resize; } - .bottom-left { cursor: nesw-resize; } - .top { cursor: ns-resize; } - .bottom { cursor: ns-resize; } - .left { cursor: ew-resize; } - .right { cursor: ew-resize; } } } diff --git a/frontend/src/uxbox/main/data/workspace.cljs b/frontend/src/uxbox/main/data/workspace.cljs index 4bc6885a30..20f5556e56 100644 --- a/frontend/src/uxbox/main/data/workspace.cljs +++ b/frontend/src/uxbox/main/data/workspace.cljs @@ -315,6 +315,14 @@ (reduce reduce-fn state groups-to-adjust))))) +(defn start-pan [state] + (-> state + (assoc-in [:workspace-local :panning] true))) + +(defn finish-pan [state] + (-> state + (update :workspace-local dissoc :panning))) + ;; --- Toggle layout flag diff --git a/frontend/src/uxbox/main/data/workspace/transforms.cljs b/frontend/src/uxbox/main/data/workspace/transforms.cljs index 4141c90268..42d0936026 100644 --- a/frontend/src/uxbox/main/data/workspace/transforms.cljs +++ b/frontend/src/uxbox/main/data/workspace/transforms.cljs @@ -204,7 +204,7 @@ (rx/take-until stopper) (rx/map #(gpt/to-vec initial %)) (rx/map #(gpt/length %)) - (rx/filter #(> % 0.5)) + (rx/filter #(> % 1)) (rx/take 1) (rx/map #(start-move initial selected))))))) diff --git a/frontend/src/uxbox/main/ui.cljs b/frontend/src/uxbox/main/ui.cljs index 84f30e87e7..3c9b9b5531 100644 --- a/frontend/src/uxbox/main/ui.cljs +++ b/frontend/src/uxbox/main/ui.cljs @@ -23,6 +23,7 @@ [uxbox.main.ui.auth :refer [auth verify-token]] [uxbox.main.ui.dashboard :refer [dashboard]] [uxbox.main.ui.icons :as i] + [uxbox.main.ui.cursors :as c] [uxbox.main.ui.messages :as msgs] [uxbox.main.ui.settings :as settings] [uxbox.main.ui.static :refer [not-found-page not-authorized-page]] @@ -106,7 +107,12 @@ :debug-icons-preview (when *assert* - [:& i/debug-icons-preview]) + [:div.debug-preview + [:h1 "Cursors"] + [:& c/debug-preview] + [:h1 "Icons"] + [:& i/debug-icons-preview] + ]) (:dashboard-search :dashboard-team diff --git a/frontend/src/uxbox/main/ui/cursors.clj b/frontend/src/uxbox/main/ui/cursors.clj new file mode 100644 index 0000000000..46270d37f8 --- /dev/null +++ b/frontend/src/uxbox/main/ui/cursors.clj @@ -0,0 +1,77 @@ +;; This Source Code Form is subject to the terms of the Mozilla Public +;; License, v. 2.0. If a copy of the MPL was not distributed with this +;; file, You can obtain one at http://mozilla.org/MPL/2.0/. +;; +;; This Source Code Form is "Incompatible With Secondary Licenses", as +;; defined by the Mozilla Public License, v. 2.0. +;; +;; Copyright (c) 2020 UXBOX Labs SL + +(ns uxbox.main.ui.cursors + (:import java.net.URLEncoder) + (:require [rumext.alpha] + [clojure.java.io :as io] + [lambdaisland.uri.normalize :as uri] + [cuerdas.core :as str])) + +(def cursor-folder "images/cursors") + +(def default-hotspot-x 12) +(def default-hotspot-y 12) +(def default-rotation 0) + +(defn parse-svg [svg-data] + (-> svg-data + ;; Remove the header + (str/replace #"(?i)<\?xml[^\?]*\?>", "") + + ;; Remove comments + (str/replace #"<\!\-\-(.*?(?=\-\->))\-\->" "") + + ;; Remofe end of line + (str/replace #"\r?\n|\r" " ") + + ;; Replace double quotes for single + (str/replace #"\"" "'") + + ;; Remove the svg root tag + (str/replace #"(?i)" "") + + ;; And the closing tag + (str/replace #"(?i)<\/svg>" "") + + ;; Remove some defs that can be redundant + (str/replace #"" "") + + ;; Unifies the spaces into single space + (str/replace #"\s+" " ") + + ;; Remove spaces at the beginning of the svg + (str/replace #"^\s+" "") + + ;; Remove spaces at the end + (str/replace #"\s+$" ""))) + +(defn encode-svg-cursor + [id rotation x y] + (let [svg-path (str cursor-folder "/" (name id) ".svg") + data (-> svg-path io/resource slurp parse-svg uri/percent-encode) + transform (if rotation (str " transform='rotate(" rotation ")'") "") + data (clojure.pprint/cl-format + nil + "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='24px' height='24px'~A%3E~A%3C/svg%3E\") ~A ~A, auto" + transform data x y)] + data)) + +(defmacro cursor-ref + "Creates a static cursor given its name, rotation and x/y hotspot" + ([id] (encode-svg-cursor id default-rotation default-hotspot-x default-hotspot-y)) + ([id rotation] (encode-svg-cursor id rotation default-hotspot-x default-hotspot-y)) + ([id rotation x y] (encode-svg-cursor id rotation x y))) + +(defmacro cursor-fn + "Creates a dynamic cursor that can be rotated in runtime" + [id initial] + (let [cursor (encode-svg-cursor id "{{rotation}}" default-hotspot-x default-hotspot-y)] + `(fn [rot#] + (str/replace ~cursor "{{rotation}}" (+ ~initial rot#))))) diff --git a/frontend/src/uxbox/main/ui/cursors.cljs b/frontend/src/uxbox/main/ui/cursors.cljs new file mode 100644 index 0000000000..f02d319517 --- /dev/null +++ b/frontend/src/uxbox/main/ui/cursors.cljs @@ -0,0 +1,56 @@ +;; This Source Code Form is subject to the terms of the Mozilla Public +;; License, v. 2.0. If a copy of the MPL was not distributed with this +;; file, You can obtain one at http://mozilla.org/MPL/2.0/. +;; +;; This Source Code Form is "Incompatible With Secondary Licenses", as +;; defined by the Mozilla Public License, v. 2.0. +;; +;; Copyright (c) 2020 UXBOX Labs SL + +(ns uxbox.main.ui.cursors + (:require-macros [uxbox.main.ui.cursors :refer [cursor-ref + cursor-fn]]) + (:require [rumext.alpha :as mf] + [cuerdas.core :as str] + [uxbox.util.timers :as ts])) + +(def create-artboard (cursor-ref :create-artboard)) +(def create-ellipse (cursor-ref :create-ellipse)) +(def create-polygon (cursor-ref :create-polygon)) +(def create-rectangle (cursor-ref :create-reclangle)) +(def create-shape (cursor-ref :create-shape)) +(def duplicate (cursor-ref :duplicate 0 0 0)) +(def hand (cursor-ref :hand)) +(def move-pointer (cursor-ref :move-pointer)) +(def pencil (cursor-ref :pencil 0 0 24)) +(def pen (cursor-ref :pen 0 0 0)) +(def pointer-inner (cursor-ref :pointer-inner 0 0 0)) +(def resize-alt (cursor-ref :resize-alt)) +(def resize-nesw (cursor-fn :resize-h 45)) +(def resize-nwse (cursor-fn :resize-h 135)) +(def resize-ew (cursor-fn :resize-h 0)) +(def resize-ns (cursor-fn :resize-h 90)) +(def rotate (cursor-fn :rotate 90)) +(def text (cursor-ref :text)) + +(mf/defc debug-preview + {::mf/wrap-props false} + [props] + (let [rotation (mf/use-state 0)] + (mf/use-effect (fn [] (ts/interval 100 #(reset! rotation inc)))) + + [:section.debug-icons-preview + (for [[key val] (sort-by first (ns-publics 'uxbox.main.ui.cursors))] + (when (not= key 'debug-icons-preview) + (let [value (deref val) + value (if (fn? value) (value @rotation) value)] + [:div.cursor-item {:key key} + [:div {:style {:width "100px" + :height "100px" + :background-image (-> value (str/replace #"(url\(.*\)).*" "$1")) + :background-size "cover" + :cursor value}}] + + [:span {:style {:white-space "nowrap" + :margin-right "1rem"}} (pr-str key)]])))])) + diff --git a/frontend/src/uxbox/main/ui/workspace/selection.cljs b/frontend/src/uxbox/main/ui/workspace/selection.cljs index b0a41512cd..6452034876 100644 --- a/frontend/src/uxbox/main/ui/workspace/selection.cljs +++ b/frontend/src/uxbox/main/ui/workspace/selection.cljs @@ -19,6 +19,7 @@ [uxbox.main.refs :as refs] [uxbox.main.store :as st] [uxbox.main.streams :as ms] + [uxbox.main.ui.cursors :as cur] [uxbox.util.dom :as dom] [uxbox.util.object :as obj] [uxbox.common.geom.shapes :as geom] @@ -26,8 +27,6 @@ [uxbox.common.geom.matrix :as gmt] [uxbox.util.debug :refer [debug?]])) -(defn rotation-cursor [angle] - (str "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20px' height='20px' transform='rotate(" angle ")' viewBox='0 0 132.292 132.006'%3E%3Cpath d='M85.225 3.48c.034 4.989-.093 9.852-.533 14.78-29.218 5.971-54.975 27.9-63.682 56.683-1.51 2.923-1.431 7.632-3.617 9.546-5.825.472-11.544.5-17.393.45 11.047 15.332 20.241 32.328 32.296 46.725 5.632 1.855 7.155-5.529 10.066-8.533 8.12-12.425 17.252-24.318 24.269-37.482-6.25-.86-12.564-.88-18.857-1.057 5.068-17.605 19.763-31.81 37.091-37.122.181 6.402.206 12.825 1.065 19.184 15.838-9.05 30.899-19.617 45.601-30.257 2.985-4.77-3.574-7.681-6.592-9.791C111.753 17.676 98.475 8.889 85.23.046l-.005 3.435z'/%3E%3Cpath fill='%23fff' d='M92.478 23.995s-1.143.906-6.714 1.923c-29.356 5.924-54.352 30.23-59.717 59.973-.605 3.728-1.09 5.49-1.09 5.49l-11.483-.002s7.84 10.845 10.438 15.486c3.333 4.988 6.674 9.971 10.076 14.912a2266.92 2266.92 0 0019.723-29.326c-5.175-.16-10.35-.343-15.522-.572 3.584-27.315 26.742-50.186 53.91-54.096.306 5.297.472 10.628.631 15.91a2206.462 2206.462 0 0029.333-19.726c-9.75-6.7-19.63-13.524-29.483-20.12z'/%3E%3C/svg%3E\") 10 10, auto")) (def rotation-handler-size 25) (def resize-point-radius 4) @@ -115,7 +114,7 @@ :top-right 90 :bottom-right 180 :bottom-left 270)] - [:rect {:style {:cursor (rotation-cursor (+ rotation angle))} + [:rect {:style {:cursor (cur/rotate (+ rotation angle))} :x x :y y :width size @@ -124,7 +123,7 @@ :transform transform :on-mouse-down on-rotate}])) -(mf/defc resize-point-handler [{:keys [cx cy zoom position on-resize transform]}] +(mf/defc resize-point-handler [{:keys [cx cy zoom position on-resize transform rotation]}] (let [{cx' :x cy' :y} (gpt/transform (gpt/point cx cy) transform) rot-square (case position :top-left 0 @@ -132,34 +131,36 @@ :bottom-right 180 :bottom-left 270)] [:g.resize-handler - [:circle {:class (name position) - :r (/ resize-point-radius zoom) + [:circle {:r (/ resize-point-radius zoom) :style {:fillOpacity "1" :strokeWidth "1px" - :vectorEffect "non-scaling-stroke"} + :vectorEffect "non-scaling-stroke" + } :fill "#FFFFFF" :stroke "#1FDEA7" :cx cx' :cy cy'}] - [:rect {:class (name position) - :x cx + [:rect {:x cx :y cy :width (/ resize-point-rect-size zoom) :height (/ resize-point-rect-size zoom) :fill (if (debug? :resize-handler) "red" "transparent") :on-mouse-down on-resize + :style {:cursor (if (#{:top-left :bottom-right} position) + (cur/resize-nesw rotation) (cur/resize-nwse rotation))} :transform (gmt/multiply transform (gmt/rotate-matrix rot-square (gpt/point cx cy)))}] - [:circle {:class (name position) - :on-mouse-down on-resize + [:circle {:on-mouse-down on-resize :r (/ resize-point-circle-radius zoom) :fill (if (debug? :resize-handler) "red" "transparent") :cx cx' - :cy cy'}] + :cy cy' + :style {:cursor (if (#{:top-left :bottom-right} position) + (cur/resize-nesw rotation) (cur/resize-nwse rotation))}}] ])) -(mf/defc resize-side-handler [{:keys [x y length angle zoom position transform on-resize]}] +(mf/defc resize-side-handler [{:keys [x y length angle zoom position rotation transform on-resize]}] [:rect {:x (+ x (/ resize-point-rect-size zoom)) :y (- y (/ resize-side-height 2 zoom)) :width (max 0 (- length (/ (* resize-point-rect-size 2) zoom))) @@ -169,8 +170,8 @@ :on-mouse-down on-resize :style {:fill (if (debug? :resize-handler) "yellow" "transparent") :cursor (if (#{:left :right} position) - "ew-resize" - "ns-resize") }}]) + (cur/resize-ew rotation) + (cur/resize-ns rotation)) }}]) (mf/defc controls {::mf/wrap-props false} @@ -244,7 +245,7 @@ :on-mouse-down #(on-mouse-down % index) :fill "#ffffff" :stroke "#1FDEA7" - :style {:cursor "pointer"}}]))]))) + :style {:cursor cur/move-pointer}}]))]))) ;; TODO: add specs for clarity diff --git a/frontend/src/uxbox/main/ui/workspace/shapes/common.cljs b/frontend/src/uxbox/main/ui/workspace/shapes/common.cljs index 1385967e1b..60b630f8e7 100644 --- a/frontend/src/uxbox/main/ui/workspace/shapes/common.cljs +++ b/frontend/src/uxbox/main/ui/workspace/shapes/common.cljs @@ -48,6 +48,7 @@ (when-not (or (empty? selected) (kbd/shift? event)) (st/emit! dw/deselect-all)) (st/emit! (dw/select-shape id)))) + (st/emit! (dw/start-move-selected))))))) (defn on-context-menu diff --git a/frontend/src/uxbox/main/ui/workspace/shapes/text.cljs b/frontend/src/uxbox/main/ui/workspace/shapes/text.cljs index 77b9890e83..0e2478d330 100644 --- a/frontend/src/uxbox/main/ui/workspace/shapes/text.cljs +++ b/frontend/src/uxbox/main/ui/workspace/shapes/text.cljs @@ -18,6 +18,7 @@ [uxbox.main.data.workspace.texts :as dwt] [uxbox.main.refs :as refs] [uxbox.main.store :as st] + [uxbox.main.ui.cursors :as cur] [uxbox.main.ui.workspace.shapes.common :as common] [uxbox.main.ui.shapes.text :as text] [uxbox.main.ui.keyboard :as kbd] @@ -301,6 +302,7 @@ :spell-check "false" :on-focus on-focus :class "rich-text" + :style {:cursor cur/text} :render-element render-element :render-leaf render-text :on-mouse-up on-mouse-up diff --git a/frontend/src/uxbox/main/ui/workspace/viewport.cljs b/frontend/src/uxbox/main/ui/workspace/viewport.cljs index 370f31219f..ae5b8f1624 100644 --- a/frontend/src/uxbox/main/ui/workspace/viewport.cljs +++ b/frontend/src/uxbox/main/ui/workspace/viewport.cljs @@ -15,6 +15,7 @@ [potok.core :as ptk] [rumext.alpha :as mf] [uxbox.main.ui.icons :as i] + [uxbox.main.ui.cursors :as cur] [uxbox.common.data :as d] [uxbox.main.constants :as c] [uxbox.main.data.workspace :as dw] @@ -96,6 +97,7 @@ stream (->> ms/mouse-position-delta (rx/take-until stoper))] + (st/emit! dw/start-pan) (rx/subscribe stream (fn [delta] (let [vbox (.. ^js node -viewBox -baseVal) @@ -136,7 +138,8 @@ vbox edition tooltip - selected]} local + selected + panning]} local viewport-ref (mf/use-ref nil) last-position (mf/use-var nil) @@ -185,7 +188,8 @@ (st/emit! (ms/->MouseEvent :up ctrl? shift?)) (when (= 2 (.-which event)) - (st/emit! ::finish-positioning))))) + (st/emit! dw/finish-pan + ::finish-positioning))))) on-pointer-down (mf/use-callback @@ -251,7 +255,8 @@ :shift? shift? :ctrl? ctrl?}] (when (kbd/space? event) - (st/emit! ::finish-positioning)) + (st/emit! dw/finish-pan + ::finish-positioning)) (st/emit! (ms/->KeyboardEvent :up key ctrl? shift?))))) translate-point-to-viewport @@ -365,6 +370,15 @@ (:height vbox 0)]) :ref viewport-ref :class (when drawing-tool "drawing") + :style {:cursor (cond + panning cur/hand + (= drawing-tool :frame) cur/create-artboard + (= drawing-tool :rect) cur/create-rectangle + (= drawing-tool :circle) cur/create-ellipse + (= drawing-tool :path) cur/pen + (= drawing-tool :curve)cur/pencil + drawing-tool cur/create-shape + :else cur/pointer-inner)} :on-context-menu on-context-menu :on-click on-click :on-double-click on-double-click diff --git a/frontend/src/uxbox/worker/selection.cljs b/frontend/src/uxbox/worker/selection.cljs index 603d17b2d2..9a285bf5a1 100644 --- a/frontend/src/uxbox/worker/selection.cljs +++ b/frontend/src/uxbox/worker/selection.cljs @@ -71,3 +71,4 @@ [index {:keys [id x y width height] :as obj}] (let [rect #js {:x x :y y :width width :height height}] (qdt/insert index rect obj))) +