penpot/frontend/src/app/main/ui/workspace/left_toolbar.cljs

;; 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/.
;;
;; Copyright (c) UXBOX Labs SL

(ns app.main.ui.workspace.left-toolbar
  (:require
   [app.common.geom.point :as gpt]
   [app.common.math :as mth]
   [app.common.media :as cm]
   [app.main.data.workspace :as dw]
   [app.main.data.workspace.shortcuts :as sc]
   [app.main.refs :as refs]
   [app.main.store :as st]
   [app.main.ui.components.file-uploader :refer [file-uploader]]
   [app.main.ui.icons :as i]
   [app.util.dom :as dom]
   [app.util.i18n :as i18n :refer [tr]]
   [app.util.object :as obj]
   [rumext.alpha :as mf]))

(mf/defc image-upload
  {::mf/wrap [mf/memo]}
  []
  (let [ref  (mf/use-ref nil)
        file (mf/deref refs/workspace-file)

        on-click
        (mf/use-callback #(dom/click (mf/ref-val ref)))

        on-files-selected
        (mf/use-callback
         (mf/deps file)
         (fn [blobs]
           ;; We don't want to add a ref because that redraws the component
           ;; for everychange. Better direct access on the callback
           ;; vbox (get-in @st/state [:workspace-local :vbox])
           (let [vbox   (:vbox @refs/workspace-local)
                 x      (mth/round (+ (:x vbox) (/ (:width vbox) 2)))
                 y      (mth/round (+ (:y vbox) (/ (:height vbox) 2)))
                 params {:file-id (:id file)
                         :blobs (seq blobs)
                         :position (gpt/point x y)}]
             (st/emit! (dw/upload-media-workspace params)))))]

       [:li.tooltip.tooltip-right
        {:alt (tr "workspace.toolbar.image")
         :on-click on-click}
        [:*
         i/image
         [:& file-uploader {:input-id "image-upload"
                            :accept cm/str-media-types
                            :multi true
                            :input-ref ref
                            :on-selected on-files-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 %))
        edition           (mf/deref refs/selected-edition)]
    [:aside.left-toolbar
     [:div.left-toolbar-inside
      [:ul.left-toolbar-options
       [:li.tooltip.tooltip-right
        {:alt (tr "workspace.toolbar.move")
         :class (when (and (nil? selected-drawtool)
                           (not edition)) "selected")
         :on-click (st/emitf :interrupt)}
        i/pointer-inner]
       [:li.tooltip.tooltip-right
        {:alt (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame))
         :class (when (= selected-drawtool :frame) "selected")
         :on-click (partial select-drawtool :frame)}
        i/artboard]
       [:li.tooltip.tooltip-right
        {:alt (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect))
         :class (when (= selected-drawtool :rect) "selected")
         :on-click (partial select-drawtool :rect)}
        i/box]
       [:li.tooltip.tooltip-right
        {:alt (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse))
         :class (when (= selected-drawtool :circle) "selected")
         :on-click (partial select-drawtool :circle)}
        i/circle]
       [:li.tooltip.tooltip-right
        {:alt (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text))
         :class (when (= selected-drawtool :text) "selected")
         :on-click (partial select-drawtool :text)}
        i/text]

       [:& image-upload]

       [:li.tooltip.tooltip-right
        {:alt (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve))
         :class (when (= selected-drawtool :curve) "selected")
         :on-click (partial select-drawtool :curve)}
        i/pencil]
       [:li.tooltip.tooltip-right
        {:alt (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path))
         :class (when (= selected-drawtool :path) "selected")
         :on-click (partial select-drawtool :path)}
        i/pen]

       [:li.tooltip.tooltip-right
        {:alt (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
         :class (when (= selected-drawtool :comments) "selected")
         :on-click (partial select-drawtool :comments)}
        i/chat]]

      [:ul.left-toolbar-options.panels
       [:li.tooltip.tooltip-right
        {:alt (tr "workspace.sidebar.layers" (sc/get-tooltip :toggle-layers))
         :class (when (contains? layout :layers) "selected")
         :on-click (st/emitf (dw/go-to-layout :layers))}
        i/layers]
       [:li.tooltip.tooltip-right
        {:alt (tr "workspace.toolbar.assets" (sc/get-tooltip :toggle-assets))
         :class (when (contains? layout :assets) "selected")
         :on-click (st/emitf (dw/go-to-layout :assets))}
        i/library]
       [:li.tooltip.tooltip-right
        {:alt (tr "workspace.sidebar.history" (sc/get-tooltip :toggle-history))
         :class (when (contains? layout :document-history) "selected")
         :on-click (st/emitf (dw/go-to-layout :document-history))}
        i/recent]
       [:li.tooltip.tooltip-right
        {:alt (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-palette))
         :class (when (contains? layout :colorpalette) "selected")
         :on-click (st/emitf (dw/toggle-layout-flags :colorpalette))}
        i/palette]]]]))