diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.cljs b/frontend/src/app/main/ui/workspace/left_toolbar.cljs index cb8c18a59c..6728f863ba 100644 --- a/frontend/src/app/main/ui/workspace/left_toolbar.cljs +++ b/frontend/src/app/main/ui/workspace/left_toolbar.cljs @@ -20,30 +20,28 @@ [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] - [app.util.object :as obj] [app.util.timers :as ts] [rumext.v2 :as mf])) - (mf/defc image-upload {::mf/wrap [mf/memo]} [] - (let [ref (mf/use-ref nil) - file (mf/deref refs/workspace-file) + (let [ref (mf/use-ref nil) + file-id (mf/use-ctx ctx/current-file-id) on-click - (mf/use-callback #(dom/click (mf/ref-val ref))) + (mf/use-fn #(dom/click (mf/ref-val ref))) - on-files-selected - (mf/use-callback - (mf/deps file) + on-selected + (mf/use-fn + (mf/deps file-id) (fn [blobs] ;; We don't want to add a ref because that redraws the component ;; for everychange. Better direct access on the callback. (let [vbox (deref refs/vbox) x (+ (:x vbox) (/ (:width vbox) 2)) y (+ (:y vbox) (/ (:height vbox) 2)) - params {:file-id (:id file) + params {:file-id file-id :blobs (seq blobs) :position (gpt/point x y)}] (st/emit! (dwm/upload-media-workspace params)))))] @@ -53,26 +51,84 @@ {:title (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image)) :aria-label (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image)) :on-click on-click} - [:* - i/image - [:& file-uploader {:input-id "image-upload" - :accept cm/str-image-types - :multi true - :ref ref - :on-selected on-files-selected}]]]])) + i/image + [:& file-uploader + {:input-id "image-upload" + :accept cm/str-image-types + :multi true + :ref ref + :on-selected on-selected}]]])) (mf/defc left-toolbar {::mf/wrap [mf/memo] ::mf/wrap-props false} - [props] - (let [layout (obj/get props "layout") - selected-drawtool (mf/deref refs/selected-drawing-tool) - select-drawtool #(st/emit! :interrupt (dw/select-for-drawing %)) + [{:keys [layout]}] + (let [selected-drawtool (mf/deref refs/selected-drawing-tool) edition (mf/deref refs/selected-edition) - workspace-read-only? (mf/use-ctx ctx/workspace-read-only?) - new-css-system (mf/use-ctx ctx/new-css-system) - show-palette-btn? (and (not workspace-read-only?) (not new-css-system)) + + new-css? (mf/use-ctx ctx/new-css-system) + read-only? (mf/use-ctx ctx/workspace-read-only?) + + show-palette-btn? (and (not ^boolean read-only?) (not ^boolean new-css?)) + + + interrupt + (mf/use-fn #(st/emit! :interrupt)) + + select-drawtool + (mf/use-fn + (fn [event] + (let [tool (-> (dom/get-current-target event) + (dom/get-data "tool") + (keyword))] + (st/emit! :interrupt (dw/select-for-drawing tool))))) + + toggle-text-palette + (mf/use-fn + (fn [] + (r/set-resize-type! :bottom) + (-> (dom/get-element-by-class "color-palette") + (dom/add-class! "fade-out-down")) + (ts/schedule 300 #(st/emit! (dw/remove-layout-flag :colorpalette) + (-> (dw/toggle-layout-flag :textpalette) + (vary-meta assoc ::ev/origin "workspace-left-toolbar")))))) + + toggle-color-palette + (mf/use-fn + (fn [] + (r/set-resize-type! :bottom) + (-> (dom/get-element-by-class "color-palette") + (dom/add-class! "fade-out-down")) + (ts/schedule 300 #(st/emit! (dw/remove-layout-flag :textpalette) + (-> (dw/toggle-layout-flag :colorpalette) + (vary-meta assoc ::ev/origin "workspace-left-toolbar")))))) + + toggle-shortcuts + (mf/use-fn + (mf/deps layout) + (fn [] + (let [is-sidebar-closed? (contains? layout :collapse-left-sidebar)] + (when is-sidebar-closed? + (st/emit! (dw/toggle-layout-flag :collapse-left-sidebar))) + (st/emit! + (dw/remove-layout-flag :debug-panel) + (-> (dw/toggle-layout-flag :shortcuts) + (vary-meta assoc ::ev/origin "workspace-left-toolbar")))))) + + toggle-debug-panel + (mf/use-fn + (mf/deps layout) + (fn [] + (let [is-sidebar-closed? (contains? layout :collapse-left-sidebar)] + (when is-sidebar-closed? + (st/emit! (dw/toggle-layout-flag :collapse-left-sidebar))) + (st/emit! + (dw/remove-layout-flag :shortcuts) + (-> (dw/toggle-layout-flag :debug-panel) + (vary-meta assoc ::ev/origin "workspace-left-toolbar")))))) + ] + [:aside.left-toolbar [:ul.left-toolbar-options [:li @@ -81,16 +137,17 @@ :aria-label (tr "workspace.toolbar.move" (sc/get-tooltip :move)) :class (when (and (nil? selected-drawtool) (not edition)) "selected") - :on-click #(st/emit! :interrupt)} + :on-click interrupt} i/pointer-inner]] - (when-not workspace-read-only? + (when-not ^boolean read-only? [:* [:li [:button {:title (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame)) :aria-label (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame)) :class (when (= selected-drawtool :frame) "selected") - :on-click (partial select-drawtool :frame) + :on-click select-drawtool + :data-tool "frame" :data-test "artboard-btn"} i/artboard]] [:li @@ -98,7 +155,8 @@ {:title (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect)) :aria-label (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect)) :class (when (= selected-drawtool :rect) "selected") - :on-click (partial select-drawtool :rect) + :on-click select-drawtool + :data-tool "rect" :data-test "rect-btn"} i/box]] [:li @@ -106,7 +164,8 @@ {:title (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse)) :aria-label (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse)) :class (when (= selected-drawtool :circle) "selected") - :on-click (partial select-drawtool :circle) + :on-click select-drawtool + :data-tool "circle" :data-test "ellipse-btn"} i/circle]] [:li @@ -114,7 +173,8 @@ {:title (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text)) :aria-label (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text)) :class (when (= selected-drawtool :text) "selected") - :on-click (partial select-drawtool :text)} + :on-click select-drawtool + :data-tool "text"} i/text]] [:& image-upload] @@ -124,7 +184,8 @@ {:title (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve)) :aria-label (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve)) :class (when (= selected-drawtool :curve) "selected") - :on-click (partial select-drawtool :curve) + :on-click select-drawtool + :data-tool "curve" :data-test "curve-btn"} i/pencil]] [:li @@ -132,7 +193,8 @@ {:title (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path)) :aria-label (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path)) :class (when (= selected-drawtool :path) "selected") - :on-click (partial select-drawtool :path) + :on-click select-drawtool + :data-tool "path" :data-test "path-btn"} i/pen]]]) @@ -141,23 +203,19 @@ {:title (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment)) :aria-label (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment)) :class (when (= selected-drawtool :comments) "selected") - :on-click (partial select-drawtool :comments)} + :on-click select-drawtool + :data-tool "comments"} i/chat]]] [:ul.left-toolbar-options.panels - (when show-palette-btn? + (when ^boolean show-palette-btn? [:* [:li [:button {:title (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette)) :aria-label (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette)) :class (when (contains? layout :textpalette) "selected") - :on-click (fn [] - (r/set-resize-type! :bottom) - (dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down") - (ts/schedule 300 #(st/emit! (dw/remove-layout-flag :colorpalette) - (-> (dw/toggle-layout-flag :textpalette) - (vary-meta assoc ::ev/origin "workspace-left-toolbar")))))} + :on-click toggle-text-palette} "Ag"]] [:li @@ -165,34 +223,19 @@ {:title (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette)) :aria-label (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette)) :class (when (contains? layout :colorpalette) "selected") - :on-click (fn [] - (r/set-resize-type! :bottom) - (dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down") - (ts/schedule 300 #(st/emit! (dw/remove-layout-flag :textpalette) - (-> (dw/toggle-layout-flag :colorpalette) - (vary-meta assoc ::ev/origin "workspace-left-toolbar")))))} + :on-click toggle-color-palette} i/palette]]]) [:li [:button {:title (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts)) :aria-label (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts)) :class (when (contains? layout :shortcuts) "selected") - :on-click (fn [] - (let [is-sidebar-closed? (contains? layout :collapse-left-sidebar)] - (ts/schedule 300 #(st/emit! (when is-sidebar-closed? (dw/toggle-layout-flag :collapse-left-sidebar)) - (dw/remove-layout-flag :debug-panel) - (-> (dw/toggle-layout-flag :shortcuts) - (vary-meta assoc ::ev/origin "workspace-left-toolbar"))))))} + :on-click toggle-shortcuts} i/shortcut] (when *assert* [:button {:title "Debugging tool" :class (when (contains? layout :debug-panel) "selected") - :on-click (fn [] - (let [is-sidebar-closed? (contains? layout :collapse-left-sidebar)] - (ts/schedule 300 #(st/emit! (when is-sidebar-closed? (dw/toggle-layout-flag :collapse-left-sidebar)) - (dw/remove-layout-flag :shortcuts) - (-> (dw/toggle-layout-flag :debug-panel) - (vary-meta assoc ::ev/origin "workspace-left-toolbar"))))))} + :on-click toggle-debug-panel} i/bug])]]]))