mirror of
https://github.com/penpot/penpot.git
synced 2025-05-28 21:36:10 +02:00
✨ Add minor performance enhacements to viewport top-bar
This commit is contained in:
parent
202337b135
commit
f1a557c372
10 changed files with 131 additions and 138 deletions
|
@ -6,7 +6,6 @@
|
||||||
|
|
||||||
(ns app.main.data.workspace.edition
|
(ns app.main.data.workspace.edition
|
||||||
(:require
|
(:require
|
||||||
[app.common.data.macros :as dm]
|
|
||||||
[app.main.data.helpers :as dsh]
|
[app.main.data.helpers :as dsh]
|
||||||
[app.main.data.workspace.path.common :as dwpc]
|
[app.main.data.workspace.path.common :as dwpc]
|
||||||
[beicon.v2.core :as rx]
|
[beicon.v2.core :as rx]
|
||||||
|
@ -17,8 +16,10 @@
|
||||||
(declare clear-edition-mode)
|
(declare clear-edition-mode)
|
||||||
|
|
||||||
(defn start-edition-mode
|
(defn start-edition-mode
|
||||||
|
"Mark a shape in edition mode"
|
||||||
[id]
|
[id]
|
||||||
(dm/assert! (uuid? id))
|
(assert (uuid? id) "expected valid uuid for `id`")
|
||||||
|
|
||||||
(ptk/reify ::start-edition-mode
|
(ptk/reify ::start-edition-mode
|
||||||
ptk/UpdateEvent
|
ptk/UpdateEvent
|
||||||
(update [_ state]
|
(update [_ state]
|
||||||
|
@ -26,8 +27,7 @@
|
||||||
;; Can only edit objects that exist
|
;; Can only edit objects that exist
|
||||||
(if (contains? objects id)
|
(if (contains? objects id)
|
||||||
(-> state
|
(-> state
|
||||||
(assoc-in [:workspace-local :selected] #{id})
|
(update :workspace-local assoc :edition id)
|
||||||
(assoc-in [:workspace-local :edition] id)
|
|
||||||
(dissoc :workspace-grid-edition))
|
(dissoc :workspace-grid-edition))
|
||||||
state)))
|
state)))
|
||||||
|
|
||||||
|
|
|
@ -17,7 +17,6 @@
|
||||||
[app.main.data.helpers :as dsh]
|
[app.main.data.helpers :as dsh]
|
||||||
[app.main.data.workspace.edition :as dwe]
|
[app.main.data.workspace.edition :as dwe]
|
||||||
[app.main.data.workspace.path.changes :as changes]
|
[app.main.data.workspace.path.changes :as changes]
|
||||||
[app.main.data.workspace.path.drawing :as drawing]
|
|
||||||
[app.main.data.workspace.path.helpers :as helpers]
|
[app.main.data.workspace.path.helpers :as helpers]
|
||||||
[app.main.data.workspace.path.selection :as selection]
|
[app.main.data.workspace.path.selection :as selection]
|
||||||
[app.main.data.workspace.path.state :as st]
|
[app.main.data.workspace.path.state :as st]
|
||||||
|
@ -309,23 +308,21 @@
|
||||||
(assoc-in [:workspace-local :edit-path id] {:edit-mode :move
|
(assoc-in [:workspace-local :edit-path id] {:edit-mode :move
|
||||||
:selected #{}
|
:selected #{}
|
||||||
:snap-toggled false})
|
:snap-toggled false})
|
||||||
|
|
||||||
(and (some? edit-path)
|
(and (some? edit-path)
|
||||||
(= :move (:edit-mode edit-path)))
|
(= :move (:edit-mode edit-path)))
|
||||||
(assoc-in [:workspace-local :edit-path id :edit-mode] :draw))))
|
(assoc-in [:workspace-local :edit-path id :edit-mode] :draw))))
|
||||||
|
|
||||||
ptk/WatchEvent
|
ptk/WatchEvent
|
||||||
(watch [_ state stream]
|
(watch [_ _ stream]
|
||||||
(let [mode (dm/get-in state [:workspace-local :edit-path id :edit-mode])
|
(let [stopper (->> stream
|
||||||
stopper (->> stream
|
(rx/filter #(let [type (ptk/type %)]
|
||||||
(rx/filter #(or
|
(= type ::dwe/clear-edition-mode)
|
||||||
(= (ptk/type %) ::dwe/clear-edition-mode)
|
(= type ::start-path-edit))))]
|
||||||
(= (ptk/type %) ::start-path-edit))))
|
|
||||||
interrupt (->> stream (rx/filter #(= % :interrupt)) (rx/take 1))]
|
|
||||||
(rx/concat
|
(rx/concat
|
||||||
(rx/of (undo/start-path-undo)
|
(rx/of (undo/start-path-undo))
|
||||||
(drawing/change-edit-mode mode))
|
(->> stream
|
||||||
(->> interrupt
|
(rx/filter #(= % :interrupt))
|
||||||
|
(rx/take 1)
|
||||||
(rx/map #(stop-path-edit id))
|
(rx/map #(stop-path-edit id))
|
||||||
(rx/take-until stopper)))))))
|
(rx/take-until stopper)))))))
|
||||||
|
|
||||||
|
|
|
@ -12,9 +12,15 @@
|
||||||
[app.main.ui.shapes.path :as path]
|
[app.main.ui.shapes.path :as path]
|
||||||
[app.main.ui.shapes.shape :refer [shape-container]]
|
[app.main.ui.shapes.shape :refer [shape-container]]
|
||||||
[app.main.ui.workspace.shapes.debug :as wsd]
|
[app.main.ui.workspace.shapes.debug :as wsd]
|
||||||
[app.main.ui.workspace.shapes.path.common :as pc]
|
[okulary.core :as l]
|
||||||
[rumext.v2 :as mf]))
|
[rumext.v2 :as mf]))
|
||||||
|
|
||||||
|
(defn- make-content-modifiers-ref
|
||||||
|
[id]
|
||||||
|
(l/derived (fn [local]
|
||||||
|
(dm/get-in local [:edit-path id :content-modifiers]))
|
||||||
|
refs/workspace-local))
|
||||||
|
|
||||||
(defn- apply-content-modifiers
|
(defn- apply-content-modifiers
|
||||||
[shape content-modifiers]
|
[shape content-modifiers]
|
||||||
(let [shape (update shape :content types.path/apply-content-modifiers content-modifiers)]
|
(let [shape (update shape :content types.path/apply-content-modifiers content-modifiers)]
|
||||||
|
@ -26,11 +32,13 @@
|
||||||
(let [shape-id (dm/get-prop shape :id)
|
(let [shape-id (dm/get-prop shape :id)
|
||||||
|
|
||||||
content-modifiers-ref
|
content-modifiers-ref
|
||||||
(pc/make-content-modifiers-ref shape-id)
|
(mf/with-memo [shape-id]
|
||||||
|
(make-content-modifiers-ref shape-id))
|
||||||
|
|
||||||
content-modifiers
|
content-modifiers
|
||||||
(mf/deref content-modifiers-ref)
|
(mf/deref content-modifiers-ref)
|
||||||
|
|
||||||
|
;; FIXME: this should be provided by react context instead of using refs
|
||||||
editing-id
|
editing-id
|
||||||
(mf/deref refs/selected-edition)
|
(mf/deref refs/selected-edition)
|
||||||
|
|
||||||
|
|
|
@ -1,43 +0,0 @@
|
||||||
;; 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) KALEIDOS INC
|
|
||||||
|
|
||||||
(ns app.main.ui.workspace.shapes.path.common
|
|
||||||
(:require
|
|
||||||
[app.common.data.macros :as dm]
|
|
||||||
[app.main.data.workspace.path.state :as pst]
|
|
||||||
[app.main.refs :as refs]
|
|
||||||
[app.main.store :as st]
|
|
||||||
[okulary.core :as l]
|
|
||||||
[rumext.v2 :as mf]))
|
|
||||||
|
|
||||||
(def accent-color "var(--color-accent-tertiary)")
|
|
||||||
(def secondary-color "var(--color-accent-quaternary)")
|
|
||||||
(def black-color "var(--app-black)")
|
|
||||||
(def white-color "var(--app-white)")
|
|
||||||
(def gray-color "var(--df-secondary)")
|
|
||||||
|
|
||||||
(def current-edit-path-ref
|
|
||||||
(l/derived
|
|
||||||
(fn [state]
|
|
||||||
(let [id (pst/get-path-id state)]
|
|
||||||
(dm/get-in state [:workspace-local :edit-path id])))
|
|
||||||
st/state))
|
|
||||||
|
|
||||||
(defn make-edit-path-ref [id]
|
|
||||||
(mf/use-memo
|
|
||||||
(mf/deps id)
|
|
||||||
(let [selfn #(get-in % [:edit-path id])]
|
|
||||||
#(l/derived selfn refs/workspace-local))))
|
|
||||||
|
|
||||||
(defn content-modifiers-ref
|
|
||||||
[id]
|
|
||||||
(l/derived #(get-in % [:edit-path id :content-modifiers]) refs/workspace-local))
|
|
||||||
|
|
||||||
(defn make-content-modifiers-ref [id]
|
|
||||||
(mf/use-memo
|
|
||||||
(mf/deps id)
|
|
||||||
#(content-modifiers-ref id)))
|
|
||||||
|
|
|
@ -13,16 +13,17 @@
|
||||||
[app.common.types.path.helpers :as path.helpers]
|
[app.common.types.path.helpers :as path.helpers]
|
||||||
[app.common.types.path.segment :as path.segment]
|
[app.common.types.path.segment :as path.segment]
|
||||||
[app.main.data.workspace.path :as drp]
|
[app.main.data.workspace.path :as drp]
|
||||||
|
[app.main.refs :as refs]
|
||||||
[app.main.snap :as snap]
|
[app.main.snap :as snap]
|
||||||
[app.main.store :as st]
|
[app.main.store :as st]
|
||||||
[app.main.streams :as ms]
|
[app.main.streams :as ms]
|
||||||
[app.main.ui.css-cursors :as cur]
|
[app.main.ui.css-cursors :as cur]
|
||||||
[app.main.ui.hooks :as hooks]
|
[app.main.ui.hooks :as hooks]
|
||||||
[app.main.ui.workspace.shapes.path.common :as pc]
|
|
||||||
[app.util.dom :as dom]
|
[app.util.dom :as dom]
|
||||||
[app.util.keyboard :as kbd]
|
[app.util.keyboard :as kbd]
|
||||||
[clojure.set :refer [map-invert]]
|
[clojure.set :refer [map-invert]]
|
||||||
[goog.events :as events]
|
[goog.events :as events]
|
||||||
|
[okulary.core :as l]
|
||||||
[rumext.v2 :as mf]))
|
[rumext.v2 :as mf]))
|
||||||
|
|
||||||
(def point-radius 5)
|
(def point-radius 5)
|
||||||
|
@ -36,6 +37,12 @@
|
||||||
(def path-preview-dasharray 4)
|
(def path-preview-dasharray 4)
|
||||||
(def path-snap-stroke-width 1)
|
(def path-snap-stroke-width 1)
|
||||||
|
|
||||||
|
(def accent-color "var(--color-accent-tertiary)")
|
||||||
|
(def secondary-color "var(--color-accent-quaternary)")
|
||||||
|
(def black-color "var(--app-black)")
|
||||||
|
(def white-color "var(--app-white)")
|
||||||
|
(def gray-color "var(--df-secondary)")
|
||||||
|
|
||||||
(mf/defc path-point*
|
(mf/defc path-point*
|
||||||
{::mf/private true}
|
{::mf/private true}
|
||||||
[{:keys [position zoom edit-mode is-hover is-selected is-preview is-start-path is-last is-new is-curve]}]
|
[{:keys [position zoom edit-mode is-hover is-selected is-preview is-start-path is-last is-new is-curve]}]
|
||||||
|
@ -97,11 +104,11 @@
|
||||||
(/ point-radius zoom)
|
(/ point-radius zoom)
|
||||||
(/ point-radius-selected zoom))
|
(/ point-radius-selected zoom))
|
||||||
:style {:stroke-width (/ point-radius-stroke-width zoom)
|
:style {:stroke-width (/ point-radius-stroke-width zoom)
|
||||||
:stroke (cond ^boolean is-active pc/black-color
|
:stroke (cond ^boolean is-active black-color
|
||||||
^boolean is-preview pc/secondary-color
|
^boolean is-preview secondary-color
|
||||||
:else pc/accent-color)
|
:else accent-color)
|
||||||
:fill (cond is-selected pc/accent-color
|
:fill (cond is-selected accent-color
|
||||||
:else pc/white-color)}}]
|
:else white-color)}}]
|
||||||
[:circle {:cx x
|
[:circle {:cx x
|
||||||
:cy y
|
:cy y
|
||||||
:r (/ point-radius-active-area zoom)
|
:r (/ point-radius-active-area zoom)
|
||||||
|
@ -155,8 +162,8 @@
|
||||||
:x2 x
|
:x2 x
|
||||||
:y2 y
|
:y2 y
|
||||||
:style {:stroke (if ^boolean is-hover
|
:style {:stroke (if ^boolean is-hover
|
||||||
pc/black-color
|
black-color
|
||||||
pc/gray-color)
|
gray-color)
|
||||||
:stroke-width (/ point-radius-stroke-width zoom)}}]
|
:stroke-width (/ point-radius-stroke-width zoom)}}]
|
||||||
|
|
||||||
(when ^boolean snap-angle
|
(when ^boolean snap-angle
|
||||||
|
@ -165,7 +172,7 @@
|
||||||
:y1 (:y point)
|
:y1 (:y point)
|
||||||
:x2 x
|
:x2 x
|
||||||
:y2 y
|
:y2 y
|
||||||
:style {:stroke pc/secondary-color
|
:style {:stroke secondary-color
|
||||||
:stroke-width (/ point-radius-stroke-width zoom)}}])
|
:stroke-width (/ point-radius-stroke-width zoom)}}])
|
||||||
|
|
||||||
[:rect
|
[:rect
|
||||||
|
@ -175,10 +182,10 @@
|
||||||
:height (/ handler-side zoom)
|
:height (/ handler-side zoom)
|
||||||
|
|
||||||
:style {:stroke-width (/ handler-stroke-width zoom)
|
:style {:stroke-width (/ handler-stroke-width zoom)
|
||||||
:stroke (cond ^boolean is-active pc/black-color
|
:stroke (cond ^boolean is-active black-color
|
||||||
:else pc/accent-color)
|
:else accent-color)
|
||||||
:fill (cond ^boolean is-selected pc/accent-color
|
:fill (cond ^boolean is-selected accent-color
|
||||||
:else pc/white-color)}}]
|
:else white-color)}}]
|
||||||
[:circle {:cx x
|
[:circle {:cx x
|
||||||
:cy y
|
:cy y
|
||||||
:r (/ point-radius-active-area zoom)
|
:r (/ point-radius-active-area zoom)
|
||||||
|
@ -209,7 +216,7 @@
|
||||||
[:g.preview {:style {:pointer-events "none"}}
|
[:g.preview {:style {:pointer-events "none"}}
|
||||||
(when (some? path)
|
(when (some? path)
|
||||||
[:path {:style {:fill "none"
|
[:path {:style {:fill "none"
|
||||||
:stroke pc/black-color
|
:stroke black-color
|
||||||
:stroke-width (/ handler-stroke-width zoom)
|
:stroke-width (/ handler-stroke-width zoom)
|
||||||
:stroke-dasharray (/ path-preview-dasharray zoom)}
|
:stroke-dasharray (/ path-preview-dasharray zoom)}
|
||||||
:d (str path)}])
|
:d (str path)}])
|
||||||
|
@ -238,7 +245,7 @@
|
||||||
:y1 (:y from)
|
:y1 (:y from)
|
||||||
:x2 (:x to)
|
:x2 (:x to)
|
||||||
:y2 (:y to)
|
:y2 (:y to)
|
||||||
:style {:stroke pc/secondary-color
|
:style {:stroke secondary-color
|
||||||
:stroke-width (/ path-snap-stroke-width zoom)}}])]))
|
:stroke-width (/ path-snap-stroke-width zoom)}}])]))
|
||||||
|
|
||||||
(defn- matching-handler? [content node handlers]
|
(defn- matching-handler? [content node handlers]
|
||||||
|
@ -253,12 +260,19 @@
|
||||||
angle (gpt/angle-with-other v1 v2)]
|
angle (gpt/angle-with-other v1 v2)]
|
||||||
(<= (- 180 angle) 0.1))))
|
(<= (- 180 angle) 0.1))))
|
||||||
|
|
||||||
|
(defn- make-edit-path-ref [id]
|
||||||
|
(let [get-fn #(dm/get-in % [:edit-path id])]
|
||||||
|
(l/derived get-fn refs/workspace-local)))
|
||||||
|
|
||||||
(mf/defc path-editor*
|
(mf/defc path-editor*
|
||||||
[{:keys [shape zoom]}]
|
[{:keys [shape zoom]}]
|
||||||
|
|
||||||
(let [editor-ref (mf/use-ref nil)
|
(let [shape-id (dm/get-prop shape :id)
|
||||||
edit-path-ref (pc/make-edit-path-ref (:id shape))
|
edit-path-ref (mf/with-memo [shape-id]
|
||||||
|
(make-edit-path-ref shape-id))
|
||||||
|
|
||||||
hover-point (mf/use-state nil)
|
hover-point (mf/use-state nil)
|
||||||
|
editor-ref (mf/use-ref nil)
|
||||||
|
|
||||||
{:keys [edit-mode
|
{:keys [edit-mode
|
||||||
drag-handler
|
drag-handler
|
||||||
|
@ -333,7 +347,7 @@
|
||||||
[:g.path-editor {:ref editor-ref}
|
[:g.path-editor {:ref editor-ref}
|
||||||
[:path {:d (.toString content)
|
[:path {:d (.toString content)
|
||||||
:style {:fill "none"
|
:style {:fill "none"
|
||||||
:stroke pc/accent-color
|
:stroke accent-color
|
||||||
:strokeWidth (/ 1 zoom)}}]
|
:strokeWidth (/ 1 zoom)}}]
|
||||||
(when (and preview (not drag-handler))
|
(when (and preview (not drag-handler))
|
||||||
[:> path-preview* {:segment preview
|
[:> path-preview* {:segment preview
|
||||||
|
|
|
@ -164,15 +164,18 @@
|
||||||
|
|
||||||
editing-shape (when edition (get base-objects edition))
|
editing-shape (when edition (get base-objects edition))
|
||||||
|
|
||||||
create-comment? (= :comments drawing-tool)
|
edit-path (get edit-path edition)
|
||||||
drawing-path? (or (and edition (= :draw (get-in edit-path [edition :edit-mode])))
|
edit-path-mode (get edit-path :edit-mode)
|
||||||
(and (some? drawing-obj) (= :path (:type drawing-obj))))
|
|
||||||
node-editing? (and edition (= :path (get-in base-objects [edition :type])))
|
|
||||||
text-editing? (and edition (= :text (get-in base-objects [edition :type])))
|
|
||||||
|
|
||||||
|
create-comment? (= :comments drawing-tool)
|
||||||
|
drawing-path? (or (= edit-path-mode :draw)
|
||||||
|
(= :path (get drawing-obj :type)))
|
||||||
|
|
||||||
|
node-editing? (cfh/path-shape? editing-shape)
|
||||||
|
text-editing? (cfh/text-shape? editing-shape)
|
||||||
grid-editing? (and edition (ctl/grid-layout? base-objects edition))
|
grid-editing? (and edition (ctl/grid-layout? base-objects edition))
|
||||||
|
|
||||||
mode-inspect? (= options-mode :inspect)
|
mode-inspect? (= options-mode :inspect)
|
||||||
|
|
||||||
on-click (actions/on-click hover selected edition drawing-path? drawing-tool space? selrect z?)
|
on-click (actions/on-click hover selected edition drawing-path? drawing-tool space? selrect z?)
|
||||||
on-context-menu (actions/on-context-menu hover hover-ids read-only?)
|
on-context-menu (actions/on-context-menu hover hover-ids read-only?)
|
||||||
|
@ -282,7 +285,12 @@
|
||||||
|
|
||||||
[:div {:class (stl/css :viewport) :style #js {"--zoom" zoom} :data-testid "viewport"}
|
[:div {:class (stl/css :viewport) :style #js {"--zoom" zoom} :data-testid "viewport"}
|
||||||
(when (:can-edit permissions)
|
(when (:can-edit permissions)
|
||||||
[:& top-bar/top-bar {:layout layout}])
|
[:> top-bar/top-bar* {:layout layout
|
||||||
|
:selected selected-shapes
|
||||||
|
:edit-path edit-path
|
||||||
|
:drawing drawing
|
||||||
|
:edition edition
|
||||||
|
:is-read-only read-only?}])
|
||||||
[:div {:class (stl/css :viewport-overlays)}
|
[:div {:class (stl/css :viewport-overlays)}
|
||||||
;; The behaviour inside a foreign object is a bit different that in plain HTML so we wrap
|
;; The behaviour inside a foreign object is a bit different that in plain HTML so we wrap
|
||||||
;; inside a foreign object "dummy" so this awkward behaviour is take into account
|
;; inside a foreign object "dummy" so this awkward behaviour is take into account
|
||||||
|
|
|
@ -227,8 +227,9 @@
|
||||||
(dw/start-editing-selected))
|
(dw/start-editing-selected))
|
||||||
|
|
||||||
(some? selected-shape)
|
(some? selected-shape)
|
||||||
(do (reset! hover selected-shape)
|
(do
|
||||||
(st/emit! (dw/select-shape (:id selected-shape))))
|
(reset! hover selected-shape)
|
||||||
|
(st/emit! (dw/select-shape (:id selected-shape))))
|
||||||
|
|
||||||
(and (not selected-shape) (some? grid-layout-id) (not read-only?))
|
(and (not selected-shape) (some? grid-layout-id) (not read-only?))
|
||||||
(st/emit! (dw/start-edition-mode grid-layout-id)))))))))))
|
(st/emit! (dw/start-edition-mode grid-layout-id)))))))))))
|
||||||
|
|
|
@ -12,7 +12,6 @@
|
||||||
[app.main.data.workspace.path.shortcuts :as sc]
|
[app.main.data.workspace.path.shortcuts :as sc]
|
||||||
[app.main.store :as st]
|
[app.main.store :as st]
|
||||||
[app.main.ui.icons :as i]
|
[app.main.ui.icons :as i]
|
||||||
[app.main.ui.workspace.shapes.path.common :as pc]
|
|
||||||
[app.util.i18n :as i18n :refer [tr]]
|
[app.util.i18n :as i18n :refer [tr]]
|
||||||
[rumext.v2 :as mf]))
|
[rumext.v2 :as mf]))
|
||||||
|
|
||||||
|
@ -46,7 +45,6 @@
|
||||||
(def ^:private snap-nodes-icon
|
(def ^:private snap-nodes-icon
|
||||||
(i/icon-xref :snap-nodes (stl/css :snap-nodes-icon :pathbar-icon)))
|
(i/icon-xref :snap-nodes (stl/css :snap-nodes-icon :pathbar-icon)))
|
||||||
|
|
||||||
|
|
||||||
(defn check-enabled [content selected-points]
|
(defn check-enabled [content selected-points]
|
||||||
(let [segments (path.segm/get-segments-with-points content selected-points)
|
(let [segments (path.segm/get-segments-with-points content selected-points)
|
||||||
num-segments (count segments)
|
num-segments (count segments)
|
||||||
|
@ -67,9 +65,10 @@
|
||||||
:join-nodes (and points-selected? (>= num-points 2) (< num-segments max-segments))
|
:join-nodes (and points-selected? (>= num-points 2) (< num-segments max-segments))
|
||||||
:separate-nodes segments-selected?}))
|
:separate-nodes segments-selected?}))
|
||||||
|
|
||||||
|
(mf/defc path-actions*
|
||||||
|
[{:keys [shape edit-path]}]
|
||||||
|
(let [{:keys [edit-mode selected-points snap-toggled]} edit-path
|
||||||
|
|
||||||
(mf/defc path-actions [{:keys [shape]}]
|
|
||||||
(let [{:keys [edit-mode selected-points snap-toggled] :as all} (mf/deref pc/current-edit-path-ref)
|
|
||||||
content (:content shape)
|
content (:content shape)
|
||||||
|
|
||||||
enabled-buttons
|
enabled-buttons
|
||||||
|
@ -78,66 +77,66 @@
|
||||||
#(check-enabled content selected-points))
|
#(check-enabled content selected-points))
|
||||||
|
|
||||||
on-select-draw-mode
|
on-select-draw-mode
|
||||||
(mf/use-callback
|
(mf/use-fn
|
||||||
(fn [_]
|
(fn [_]
|
||||||
(st/emit! (drp/change-edit-mode :draw))))
|
(st/emit! (drp/change-edit-mode :draw))))
|
||||||
|
|
||||||
on-select-edit-mode
|
on-select-edit-mode
|
||||||
(mf/use-callback
|
(mf/use-fn
|
||||||
(fn [_]
|
(fn [_]
|
||||||
(st/emit! (drp/change-edit-mode :move))))
|
(st/emit! (drp/change-edit-mode :move))))
|
||||||
|
|
||||||
on-add-node
|
on-add-node
|
||||||
(mf/use-callback
|
(mf/use-fn
|
||||||
(mf/deps (:add-node enabled-buttons))
|
(mf/deps (:add-node enabled-buttons))
|
||||||
(fn [_]
|
(fn [_]
|
||||||
(when (:add-node enabled-buttons)
|
(when (:add-node enabled-buttons)
|
||||||
(st/emit! (drp/add-node)))))
|
(st/emit! (drp/add-node)))))
|
||||||
|
|
||||||
on-remove-node
|
on-remove-node
|
||||||
(mf/use-callback
|
(mf/use-fn
|
||||||
(mf/deps (:remove-node enabled-buttons))
|
(mf/deps (:remove-node enabled-buttons))
|
||||||
(fn [_]
|
(fn [_]
|
||||||
(when (:remove-node enabled-buttons)
|
(when (:remove-node enabled-buttons)
|
||||||
(st/emit! (drp/remove-node)))))
|
(st/emit! (drp/remove-node)))))
|
||||||
|
|
||||||
on-merge-nodes
|
on-merge-nodes
|
||||||
(mf/use-callback
|
(mf/use-fn
|
||||||
(mf/deps (:merge-nodes enabled-buttons))
|
(mf/deps (:merge-nodes enabled-buttons))
|
||||||
(fn [_]
|
(fn [_]
|
||||||
(when (:merge-nodes enabled-buttons)
|
(when (:merge-nodes enabled-buttons)
|
||||||
(st/emit! (drp/merge-nodes)))))
|
(st/emit! (drp/merge-nodes)))))
|
||||||
|
|
||||||
on-join-nodes
|
on-join-nodes
|
||||||
(mf/use-callback
|
(mf/use-fn
|
||||||
(mf/deps (:join-nodes enabled-buttons))
|
(mf/deps (:join-nodes enabled-buttons))
|
||||||
(fn [_]
|
(fn [_]
|
||||||
(when (:join-nodes enabled-buttons)
|
(when (:join-nodes enabled-buttons)
|
||||||
(st/emit! (drp/join-nodes)))))
|
(st/emit! (drp/join-nodes)))))
|
||||||
|
|
||||||
on-separate-nodes
|
on-separate-nodes
|
||||||
(mf/use-callback
|
(mf/use-fn
|
||||||
(mf/deps (:separate-nodes enabled-buttons))
|
(mf/deps (:separate-nodes enabled-buttons))
|
||||||
(fn [_]
|
(fn [_]
|
||||||
(when (:separate-nodes enabled-buttons)
|
(when (:separate-nodes enabled-buttons)
|
||||||
(st/emit! (drp/separate-nodes)))))
|
(st/emit! (drp/separate-nodes)))))
|
||||||
|
|
||||||
on-make-corner
|
on-make-corner
|
||||||
(mf/use-callback
|
(mf/use-fn
|
||||||
(mf/deps (:make-corner enabled-buttons))
|
(mf/deps (:make-corner enabled-buttons))
|
||||||
(fn [_]
|
(fn [_]
|
||||||
(when (:make-corner enabled-buttons)
|
(when (:make-corner enabled-buttons)
|
||||||
(st/emit! (drp/make-corner)))))
|
(st/emit! (drp/make-corner)))))
|
||||||
|
|
||||||
on-make-curve
|
on-make-curve
|
||||||
(mf/use-callback
|
(mf/use-fn
|
||||||
(mf/deps (:make-curve enabled-buttons))
|
(mf/deps (:make-curve enabled-buttons))
|
||||||
(fn [_]
|
(fn [_]
|
||||||
(when (:make-curve enabled-buttons)
|
(when (:make-curve enabled-buttons)
|
||||||
(st/emit! (drp/make-curve)))))
|
(st/emit! (drp/make-curve)))))
|
||||||
|
|
||||||
on-toggle-snap
|
on-toggle-snap
|
||||||
(mf/use-callback
|
(mf/use-fn
|
||||||
(fn [_]
|
(fn [_]
|
||||||
(st/emit! (drp/toggle-snap))))]
|
(st/emit! (drp/toggle-snap))))]
|
||||||
|
|
||||||
|
|
|
@ -7,23 +7,22 @@
|
||||||
(ns app.main.ui.workspace.viewport.top-bar
|
(ns app.main.ui.workspace.viewport.top-bar
|
||||||
(:require-macros [app.main.style :as stl])
|
(:require-macros [app.main.style :as stl])
|
||||||
(:require
|
(:require
|
||||||
|
[app.common.data.macros :as dm]
|
||||||
[app.common.files.helpers :as cfh]
|
[app.common.files.helpers :as cfh]
|
||||||
[app.common.types.shape.layout :as ctl]
|
[app.common.types.shape.layout :as ctl]
|
||||||
[app.main.data.workspace :as dw]
|
[app.main.data.workspace :as dw]
|
||||||
[app.main.data.workspace.common :as dwc]
|
[app.main.data.workspace.common :as dwc]
|
||||||
[app.main.refs :as refs]
|
|
||||||
[app.main.store :as st]
|
[app.main.store :as st]
|
||||||
[app.main.ui.context :as ctx]
|
|
||||||
[app.main.ui.workspace.top-toolbar :refer [top-toolbar]]
|
[app.main.ui.workspace.top-toolbar :refer [top-toolbar]]
|
||||||
[app.main.ui.workspace.viewport.grid-layout-editor :refer [grid-edition-actions]]
|
[app.main.ui.workspace.viewport.grid-layout-editor :refer [grid-edition-actions]]
|
||||||
[app.main.ui.workspace.viewport.path-actions :refer [path-actions]]
|
[app.main.ui.workspace.viewport.path-actions :refer [path-actions*]]
|
||||||
[app.util.i18n :as i18n :refer [tr]]
|
[app.util.i18n :as i18n :refer [tr]]
|
||||||
[rumext.v2 :as mf]))
|
[rumext.v2 :as mf]))
|
||||||
|
|
||||||
(mf/defc view-only-actions
|
(mf/defc view-only-actions*
|
||||||
[]
|
[]
|
||||||
(let [handle-close-view-mode
|
(let [handle-close-view-mode
|
||||||
(mf/use-callback
|
(mf/use-fn
|
||||||
(fn []
|
(fn []
|
||||||
(st/emit! :interrupt
|
(st/emit! :interrupt
|
||||||
(dw/set-options-mode :design)
|
(dw/set-options-mode :design)
|
||||||
|
@ -38,43 +37,44 @@
|
||||||
:on-click handle-close-view-mode}
|
:on-click handle-close-view-mode}
|
||||||
(tr "workspace.top-bar.read-only.done")]]]))
|
(tr "workspace.top-bar.read-only.done")]]]))
|
||||||
|
|
||||||
(mf/defc top-bar
|
(mf/defc top-bar*
|
||||||
{::mf/wrap [mf/memo]}
|
[{:keys [layout drawing is-read-only edition selected edit-path]}]
|
||||||
[{:keys [layout]}]
|
(let [rulers? (contains? layout :rulers)
|
||||||
(let [edition (mf/deref refs/selected-edition)
|
hide-ui? (contains? layout :hide-ui)
|
||||||
selected (mf/deref refs/selected-objects)
|
|
||||||
drawing (mf/deref refs/workspace-drawing)
|
drawing-obj (get drawing :object)
|
||||||
rulers? (mf/deref refs/rulers?)
|
|
||||||
drawing-obj (:object drawing)
|
|
||||||
shape (or drawing-obj (-> selected first))
|
shape (or drawing-obj (-> selected first))
|
||||||
|
shape-id (dm/get-prop shape :id)
|
||||||
|
|
||||||
single? (= (count selected) 1)
|
single? (= (count selected) 1)
|
||||||
editing? (= (:id shape) edition)
|
editing? (= shape-id edition)
|
||||||
draw-path? (and (some? drawing-obj)
|
|
||||||
(cfh/path-shape? drawing-obj)
|
|
||||||
(not= :curve (:tool drawing)))
|
|
||||||
|
|
||||||
workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
|
draw-path? (and (some? drawing-obj)
|
||||||
hide-ui? (:hide-ui layout)
|
(cfh/path-shape? drawing-obj)
|
||||||
|
(not= :curve (:tool drawing)))
|
||||||
|
|
||||||
path-edition? (or (and single? editing?
|
is-path-edition
|
||||||
(and (not (cfh/text-shape? shape))
|
(or (and single? editing?
|
||||||
(not (cfh/frame-shape? shape))))
|
(and (not (cfh/text-shape? shape))
|
||||||
draw-path?)
|
(not (cfh/frame-shape? shape))))
|
||||||
|
draw-path?)
|
||||||
|
|
||||||
grid-edition? (and single? editing? (ctl/grid-layout? shape))]
|
grid-edition?
|
||||||
|
(and single? editing? (ctl/grid-layout? shape))]
|
||||||
|
|
||||||
[:*
|
[:*
|
||||||
(when-not hide-ui?
|
(when-not ^boolean hide-ui?
|
||||||
[:& top-toolbar {:layout layout}])
|
[:& top-toolbar {:layout layout}])
|
||||||
|
|
||||||
(cond
|
(cond
|
||||||
workspace-read-only?
|
^boolean
|
||||||
[:& view-only-actions]
|
is-read-only
|
||||||
|
[:> view-only-actions*]
|
||||||
|
|
||||||
path-edition?
|
^boolean
|
||||||
|
is-path-edition
|
||||||
[:div {:class (stl/css-case :viewport-actions-path true :viewport-actions-no-rulers (not rulers?))}
|
[:div {:class (stl/css-case :viewport-actions-path true :viewport-actions-no-rulers (not rulers?))}
|
||||||
[:& path-actions {:shape shape}]]
|
[:> path-actions* {:shape shape :edit-path edit-path}]]
|
||||||
|
|
||||||
grid-edition?
|
grid-edition?
|
||||||
[:& grid-edition-actions {:shape shape}])]))
|
[:& grid-edition-actions {:shape shape}])]))
|
||||||
|
|
|
@ -173,14 +173,18 @@
|
||||||
|
|
||||||
editing-shape (when edition (get base-objects edition))
|
editing-shape (when edition (get base-objects edition))
|
||||||
|
|
||||||
|
edit-path (get edit-path edition)
|
||||||
|
edit-path-mode (get edit-path :edit-mode)
|
||||||
|
|
||||||
create-comment? (= :comments drawing-tool)
|
create-comment? (= :comments drawing-tool)
|
||||||
drawing-path? (or (and edition (= :draw (get-in edit-path [edition :edit-mode])))
|
drawing-path? (or (= edit-path-mode :draw)
|
||||||
(and (some? drawing-obj) (= :path (:type drawing-obj))))
|
(= :path (get drawing-obj :type)))
|
||||||
node-editing? (and edition (= :path (get-in base-objects [edition :type])))
|
|
||||||
text-editing? (and edition (= :text (get-in base-objects [edition :type])))
|
node-editing? (cfh/path-shape? editing-shape)
|
||||||
|
text-editing? (cfh/text-shape? editing-shape)
|
||||||
grid-editing? (and edition (ctl/grid-layout? base-objects edition))
|
grid-editing? (and edition (ctl/grid-layout? base-objects edition))
|
||||||
|
|
||||||
mode-inspect? (= options-mode :inspect)
|
mode-inspect? (= options-mode :inspect)
|
||||||
|
|
||||||
on-click (actions/on-click hover selected edition drawing-path? drawing-tool space? selrect z?)
|
on-click (actions/on-click hover selected edition drawing-path? drawing-tool space? selrect z?)
|
||||||
on-context-menu (actions/on-context-menu hover hover-ids read-only?)
|
on-context-menu (actions/on-context-menu hover hover-ids read-only?)
|
||||||
|
@ -338,7 +342,12 @@
|
||||||
|
|
||||||
[:div {:class (stl/css :viewport) :style #js {"--zoom" zoom} :data-testid "viewport"}
|
[:div {:class (stl/css :viewport) :style #js {"--zoom" zoom} :data-testid "viewport"}
|
||||||
(when (:can-edit permissions)
|
(when (:can-edit permissions)
|
||||||
[:& top-bar/top-bar {:layout layout}])
|
[:> top-bar/top-bar* {:layout layout
|
||||||
|
:selected selected-shapes
|
||||||
|
:edit-path edit-path
|
||||||
|
:drawing drawing
|
||||||
|
:edition edition
|
||||||
|
:is-read-only read-only?}])
|
||||||
[:div {:class (stl/css :viewport-overlays)}
|
[:div {:class (stl/css :viewport-overlays)}
|
||||||
(when show-comments?
|
(when show-comments?
|
||||||
[:> comments/comments-layer* {:vbox vbox
|
[:> comments/comments-layer* {:vbox vbox
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue