mirror of
https://github.com/penpot/penpot.git
synced 2025-02-10 00:58:26 -05:00
💄 Adds new path tools structure
This commit is contained in:
elhombretecla
Eva
parent
84727fb1d9
commit
7f869ce087
14 changed files with 266 additions and 82 deletions
3
frontend/resources/images/icons/join-nodes-refactor.svg
Normal file
3
frontend/resources/images/icons/join-nodes-refactor.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M6 11.33a2 2 0 11-3.999.001 2 2 0 013.999 0zm0 0h4m0 0a2 2 0 114 0 2 2 0 01-4 0zm-4.666-6.5l2.5 2.5m0 0l2.5-2.5m-2.5 2.5V.664"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 256 B |
3
frontend/resources/images/icons/merge-nodes-refactor.svg
Normal file
3
frontend/resources/images/icons/merge-nodes-refactor.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M5.335 4.83l2.5 2.5m0 0l2.5-2.5m-2.5 2.5V.664m2.166 10.666a2 2 0 11-4 0m4 0a2 2 0 00-4 0m4 0h5.333m-9.333 0H.668"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 243 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M2.668 11.33a2 2 0 114 0 2 2 0 01-4 0zm0 0h-2m12.667 0a2 2 0 11-4 0 2 2 0 014 0zm0 0h2m-10-6.5l2.5 2.5m0 0l2.5-2.5m-2.5 2.5V.664"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 259 B |
3
frontend/resources/images/icons/snap-nodes-refactor.svg
Normal file
3
frontend/resources/images/icons/snap-nodes-refactor.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M2 11.174h3m-3 0v2.656h3v-2.656m-3 0V8.141c0-3.3 2.686-5.977 6-5.977s6 2.676 6 5.977v3.033m-9 0V8.141a2.995 2.995 0 013-2.989c1.657 0 3 1.34 3 2.99v3.032m3 0v2.656h-3v-2.656m3 0h-3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 311 B |
3
frontend/resources/images/icons/to-corner-refactor.svg
Normal file
3
frontend/resources/images/icons/to-corner-refactor.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3.335 9.333l3-4m6.333 4l-3-4m-7 8a2 2 0 100-4 2 2 0 000 4zm10.667 0a2 2 0 100-4 2 2 0 000 4zM8.001 6a2 2 0 10.001-3.999A2 2 0 008.001 6z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 268 B |
3
frontend/resources/images/icons/to-curve-refactor.svg
Normal file
3
frontend/resources/images/icons/to-curve-refactor.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M2.668 9.333a2 2 0 11-.001 4.001 2 2 0 01.001-4.001zm0 0a5.333 5.333 0 013.333-4.945m7.333 4.945a5.335 5.335 0 00-3.333-4.945m3.333 4.945a2 2 0 11.002 4 2 2 0 01-.002-4zM10.001 4a2 2 0 11-4 0m4 0a2 2 0 10-4 0m4 0h4.667M6.001 4H1.335"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 363 B |
|
|
@ -97,7 +97,6 @@
|
|||
|
||||
;; --- Initialize Workspace
|
||||
|
||||
|
||||
(defn initialize-layout
|
||||
[lname]
|
||||
;; (dm/assert!
|
||||
|
|
@ -640,7 +639,6 @@
|
|||
(watch [_ _ _]
|
||||
(rx/of (dch/update-shapes [id] #(merge % attrs))))))
|
||||
|
||||
|
||||
(defn start-rename-shape
|
||||
"Start shape renaming process"
|
||||
[id]
|
||||
|
|
@ -673,10 +671,8 @@
|
|||
(when-let [component-id (:component-id shape)]
|
||||
(rx/of (dwl/rename-component component-id name)))))))))))
|
||||
|
||||
|
||||
;; --- Update Selected Shapes attrs
|
||||
|
||||
|
||||
(defn update-selected-shapes
|
||||
[attrs]
|
||||
(dm/assert! (cts/valid-shape-attrs? attrs))
|
||||
|
|
@ -749,7 +745,6 @@
|
|||
(ptk/data-event :layout/update selected-ids)
|
||||
(dwu/commit-undo-transaction undo-id))))))
|
||||
|
||||
|
||||
;; --- Change Shape Order (D&D Ordering)
|
||||
|
||||
(defn relocate-shapes-changes [it objects parents parent-id page-id to-index ids
|
||||
|
|
@ -966,7 +961,6 @@
|
|||
(let [selected (wsh/lookup-selected state)]
|
||||
(rx/of (relocate-shapes selected parent-id to-index))))))
|
||||
|
||||
|
||||
(defn start-editing-selected
|
||||
[]
|
||||
(ptk/reify ::start-editing-selected
|
||||
|
|
@ -1329,7 +1323,6 @@
|
|||
(some->> (:main-instance-page component)
|
||||
(redirect-to-file file-id))))))))
|
||||
|
||||
|
||||
(defn go-to-component
|
||||
[component-id]
|
||||
(ptk/reify ::go-to-component
|
||||
|
|
@ -1426,6 +1419,31 @@
|
|||
(rx/of ::dwp/force-persist
|
||||
(rt/nav :dashboard-fonts {:team-id team-id}))))))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Toolbar
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn toggle-toolbar-visibility
|
||||
[]
|
||||
(ptk/reify ::toggle-toolbar-visibility
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(update-in state [:workspace-local :hide-toolbar] not))))
|
||||
|
||||
(defn hide-toolbar
|
||||
[]
|
||||
(ptk/reify ::hide-toolbar
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(assoc-in state [:workspace-local :hide-toolbar] true))))
|
||||
|
||||
(defn show-toolbar
|
||||
[]
|
||||
(ptk/reify ::show-toolbar
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(assoc-in state [:workspace-local :hide-toolbar] false))))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Context Menu
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
@ -1687,7 +1705,6 @@
|
|||
(= (:width (:selrect (first (vals paste-obj))))
|
||||
(:width (:selrect frame-obj)))))
|
||||
|
||||
|
||||
(defn- paste-shape
|
||||
[{selected :selected
|
||||
paste-objects :objects ;; rename this because here comes only the clipboard shapes,
|
||||
|
|
@ -1924,7 +1941,6 @@
|
|||
(rx/reduce conj [])
|
||||
(rx/mapcat (partial do-paste it state mouse-pos)))))))))
|
||||
|
||||
|
||||
(defn as-content [text]
|
||||
(let [paragraphs (->> (str/lines text)
|
||||
(map str/trim)
|
||||
|
|
@ -2169,7 +2185,6 @@
|
|||
;; Read only
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
|
||||
(defn set-workspace-read-only
|
||||
[read-only?]
|
||||
(ptk/reify ::set-workspace-read-only
|
||||
|
|
@ -2186,7 +2201,6 @@
|
|||
(remove-layout-flag :textpalette))
|
||||
(rx/empty)))))
|
||||
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Measurements
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
@ -2212,12 +2226,10 @@
|
|||
(update [_ state]
|
||||
(assoc-in state [:workspace-global :margins-selected] margins-selected))))
|
||||
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Orphan Shapes
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
|
||||
(defn fix-orphan-shapes
|
||||
[]
|
||||
(ptk/reify ::fix-orphan-shapes
|
||||
|
|
@ -2277,8 +2289,6 @@
|
|||
|
||||
(rx/of (dch/commit-changes changes))))))
|
||||
|
||||
|
||||
|
||||
(defn set-annotations-expanded
|
||||
[expanded?]
|
||||
(ptk/reify ::set-annotations-expanded
|
||||
|
|
@ -2296,7 +2306,6 @@
|
|||
(assoc-in [:workspace-annotations :expanded?] true))
|
||||
(d/dissoc-in state [:workspace-annotations :id-for-create])))))
|
||||
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Preview blend modes
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
@ -2315,7 +2324,6 @@
|
|||
(update [_ state]
|
||||
(reduce #(update %1 :workspace-preview-blend dissoc %2) state ids))))
|
||||
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Components
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
@ -2352,8 +2360,6 @@
|
|||
(watch [_ _ _]
|
||||
(rx/of (update-shape (uuid/uuid id) {:shape-ref (uuid/uuid shape-ref)})))))
|
||||
|
||||
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Exports
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
objects (wsh/lookup-page-objects state page-id)
|
||||
shapes (cph/get-immediate-children objects)
|
||||
srect (gsh/shapes->rect shapes)
|
||||
local (assoc local :vport size :zoom 1 :zoom-inverse 1)]
|
||||
local (assoc local :vport size :zoom 1 :zoom-inverse 1 :hide-toolbar false)]
|
||||
|
||||
(cond
|
||||
(or (not (d/num? (:width srect)))
|
||||
|
|
|
|||
|
|
@ -183,6 +183,9 @@
|
|||
(def context-menu
|
||||
(l/derived :context-menu workspace-local))
|
||||
|
||||
(def toolbar-visibility
|
||||
(l/derived :hide-toolbar workspace-local))
|
||||
|
||||
;; page item that it is being edited
|
||||
(def editing-page-item
|
||||
(l/derived :page-item workspace-local))
|
||||
|
|
|
|||
|
|
@ -348,6 +348,7 @@
|
|||
(def hug-content-refactor (icon-xref :hug-content-refactor))
|
||||
(def img-refactor (icon-xref :img-refactor))
|
||||
(def icon-refactor (icon-xref :icon-refactor))
|
||||
(def join-nodes-refactor (icon-xref :join-nodes-refactor))
|
||||
(def justify-content-column-around-refactor (icon-xref :justify-content-column-around-refactor))
|
||||
(def justify-content-column-between-refactor (icon-xref :justify-content-column-between-refactor))
|
||||
(def justify-content-column-center-refactor (icon-xref :justify-content-column-center-refactor))
|
||||
|
|
@ -372,6 +373,7 @@
|
|||
(def mask-refactor (icon-xref :mask-refactor))
|
||||
(def masked-refactor (icon-xref :masked-refactor))
|
||||
(def menu-refactor (icon-xref :menu-refactor))
|
||||
(def merge-nodes-refactor (icon-xref :merge-nodes-refactor))
|
||||
(def move-refactor (icon-xref :move-refactor))
|
||||
(def open-link-refactor (icon-xref :open-link-refactor))
|
||||
(def open-refactor (icon-xref :open-refactor))
|
||||
|
|
@ -393,9 +395,11 @@
|
|||
(def rotation-refactor (icon-xref :rotation-refactor))
|
||||
(def row-reverse-refactor (icon-xref :row-reverse-refactor))
|
||||
(def search-refactor (icon-xref :search-refactor))
|
||||
(def separate-nodes-refactor (icon-xref :separate-nodes-refactor))
|
||||
(def size-horizontal-refactor (icon-xref :size-horizontal-refactor))
|
||||
(def size-vertical-refactor (icon-xref :size-vertical-refactor))
|
||||
(def shown-refactor (icon-xref :shown-refactor))
|
||||
(def snap-nodes-refactor (icon-xref :snap-nodes-refactor))
|
||||
(def status-alert-refactor (icon-xref :status-alert-refactor))
|
||||
(def status-update-refactor (icon-xref :status-update-refactor))
|
||||
(def status-tick-refactor (icon-xref :status-tick-refactor))
|
||||
|
|
@ -427,6 +431,8 @@
|
|||
(def text-underlined-refactor (icon-xref :text-underlined-refactor))
|
||||
(def text-uppercase-refactor (icon-xref :text-uppercase-refactor))
|
||||
(def tick-refactor (icon-xref :tick-refactor))
|
||||
(def to-corner-refactor (icon-xref :to-corner-refactor))
|
||||
(def to-curve-refactor (icon-xref :to-curve-refactor))
|
||||
(def unlock-refactor (icon-xref :unlock-refactor))
|
||||
(def vertical-align-items-center-refactor (icon-xref :vertical-align-items-center-refactor))
|
||||
(def vertical-align-items-end-refactor (icon-xref :vertical-align-items-end-refactor))
|
||||
|
|
|
|||
|
|
@ -74,8 +74,8 @@
|
|||
read-only? (mf/use-ctx ctx/workspace-read-only?)
|
||||
|
||||
show-palette-btn? (and (not ^boolean read-only?) (not ^boolean new-css-system))
|
||||
hide-toolbar* (mf/use-state false)
|
||||
hide-toolbar? (deref hide-toolbar*)
|
||||
|
||||
hide-toolbar? (mf/deref refs/toolbar-visibility)
|
||||
|
||||
interrupt
|
||||
(mf/use-fn #(st/emit! :interrupt))
|
||||
|
|
@ -138,8 +138,7 @@
|
|||
|
||||
toggle-toolbar
|
||||
(mf/use-fn
|
||||
(fn []
|
||||
(swap! hide-toolbar* not)))]
|
||||
#(st/emit! (dw/toggle-toolbar-visibility)))]
|
||||
|
||||
(if new-css-system
|
||||
(when-not ^boolean read-only?
|
||||
|
|
@ -231,8 +230,6 @@
|
|||
:on-click toggle-debug-panel}
|
||||
i/bug])]]])
|
||||
|
||||
|
||||
|
||||
[:aside.left-toolbar
|
||||
[:ul.left-toolbar-options
|
||||
[:li
|
||||
|
|
|
|||
|
|
@ -5,10 +5,12 @@
|
|||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.workspace.viewport.path-actions
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.main.data.workspace.path :as drp]
|
||||
[app.main.data.workspace.path.shortcuts :as sc]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.shapes.path.common :as pc]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
|
|
@ -38,6 +40,7 @@
|
|||
(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)
|
||||
new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
|
||||
enabled-buttons
|
||||
(mf/use-memo
|
||||
|
|
@ -107,79 +110,162 @@
|
|||
(mf/use-callback
|
||||
(fn [_]
|
||||
(st/emit! (drp/toggle-snap))))]
|
||||
[:div.path-actions
|
||||
[:div.viewport-actions-group
|
||||
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :sub-actions)}
|
||||
[:div {:class (stl/css :sub-actions-group)}
|
||||
|
||||
;; Draw Mode
|
||||
[:div.viewport-actions-entry.tooltip.tooltip-bottom
|
||||
{:class (when (= edit-mode :draw) "is-toggled")
|
||||
:alt (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes))
|
||||
:on-click on-select-draw-mode}
|
||||
i/pen]
|
||||
[:button
|
||||
{:class (stl/css-case :is-toggled (= edit-mode :draw))
|
||||
:alt (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes))
|
||||
:on-click on-select-draw-mode}
|
||||
i/pentool-refactor]
|
||||
|
||||
;; Edit mode
|
||||
[:div.viewport-actions-entry.tooltip.tooltip-bottom
|
||||
{:class (when (= edit-mode :move) "is-toggled")
|
||||
:alt (tr "workspace.path.actions.move-nodes" (sc/get-tooltip :move-nodes))
|
||||
:on-click on-select-edit-mode}
|
||||
i/pointer-inner]]
|
||||
[:button
|
||||
{:class (stl/css-case :is-toggled (= edit-mode :move))
|
||||
:alt (tr "workspace.path.actions.move-nodes" (sc/get-tooltip :move-nodes))
|
||||
:on-click on-select-edit-mode}
|
||||
i/move-refactor]]
|
||||
|
||||
[:div {:class (stl/css :sub-actions-group)}
|
||||
|
||||
[:div.viewport-actions-group
|
||||
;; Add Node
|
||||
[:div.viewport-actions-entry.tooltip.tooltip-bottom
|
||||
{:class (when-not (:add-node enabled-buttons) "is-disabled")
|
||||
:alt (tr "workspace.path.actions.add-node" (sc/get-tooltip :add-node))
|
||||
:on-click on-add-node}
|
||||
i/nodes-add]
|
||||
[:button
|
||||
{:class (stl/css-case :is-disabled (:add-node enabled-buttons))
|
||||
:alt (tr "workspace.path.actions.add-node" (sc/get-tooltip :add-node))
|
||||
:on-click on-add-node}
|
||||
i/add-refactor]
|
||||
|
||||
;; Remove node
|
||||
[:div.viewport-actions-entry.tooltip.tooltip-bottom
|
||||
{:class (when-not (:remove-node enabled-buttons) "is-disabled")
|
||||
:alt (tr "workspace.path.actions.delete-node" (sc/get-tooltip :delete-node))
|
||||
:on-click on-remove-node}
|
||||
i/nodes-remove]]
|
||||
[:button
|
||||
{:class (stl/css-case :is-disabled (:remove-node enabled-buttons))
|
||||
:alt (tr "workspace.path.actions.delete-node" (sc/get-tooltip :delete-node))
|
||||
:on-click on-remove-node}
|
||||
i/remove-refactor]]
|
||||
|
||||
[:div.viewport-actions-group
|
||||
[:div {:class (stl/css :sub-actions-group)}
|
||||
;; Merge Nodes
|
||||
[:div.viewport-actions-entry.tooltip.tooltip-bottom
|
||||
{:class (when-not (:merge-nodes enabled-buttons) "is-disabled")
|
||||
:alt (tr "workspace.path.actions.merge-nodes" (sc/get-tooltip :merge-nodes))
|
||||
:on-click on-merge-nodes}
|
||||
i/nodes-merge]
|
||||
[:button
|
||||
{:class (stl/css-case :is-disabled (:merge-nodes enabled-buttons))
|
||||
:alt (tr "workspace.path.actions.merge-nodes" (sc/get-tooltip :merge-nodes))
|
||||
:on-click on-merge-nodes}
|
||||
i/merge-nodes-refactor]
|
||||
|
||||
;; Join Nodes
|
||||
[:div.viewport-actions-entry.tooltip.tooltip-bottom
|
||||
{:class (when-not (:join-nodes enabled-buttons) "is-disabled")
|
||||
:alt (tr "workspace.path.actions.join-nodes" (sc/get-tooltip :join-nodes))
|
||||
:on-click on-join-nodes}
|
||||
i/nodes-join]
|
||||
[:button
|
||||
{:class (stl/css-case :is-disabled (:join-nodes enabled-buttons))
|
||||
:alt (tr "workspace.path.actions.join-nodes" (sc/get-tooltip :join-nodes))
|
||||
:on-click on-join-nodes}
|
||||
i/join-nodes-refactor]
|
||||
|
||||
;; Separate Nodes
|
||||
[:div.viewport-actions-entry.tooltip.tooltip-bottom
|
||||
{:class (when-not (:separate-nodes enabled-buttons) "is-disabled")
|
||||
:alt (tr "workspace.path.actions.separate-nodes" (sc/get-tooltip :separate-nodes))
|
||||
:on-click on-separate-nodes}
|
||||
i/nodes-separate]]
|
||||
[:button
|
||||
{:class (stl/css-case :is-disabled (:separate-nodes enabled-buttons))
|
||||
:alt (tr "workspace.path.actions.separate-nodes" (sc/get-tooltip :separate-nodes))
|
||||
:on-click on-separate-nodes}
|
||||
i/separate-nodes-refactor]]
|
||||
|
||||
;; Make Corner
|
||||
[:div.viewport-actions-group
|
||||
[:div.viewport-actions-entry.tooltip.tooltip-bottom
|
||||
{:class (when-not (:make-corner enabled-buttons) "is-disabled")
|
||||
:alt (tr "workspace.path.actions.make-corner" (sc/get-tooltip :make-corner))
|
||||
:on-click on-make-corner}
|
||||
i/nodes-corner]
|
||||
[:div {:class (stl/css :sub-actions-group)}
|
||||
[:button
|
||||
{:class (stl/css-case :is-disabled (:make-corner enabled-buttons))
|
||||
:alt (tr "workspace.path.actions.make-corner" (sc/get-tooltip :make-corner))
|
||||
:on-click on-make-corner}
|
||||
i/to-corner-refactor]
|
||||
|
||||
;; Make Curve
|
||||
[:div.viewport-actions-entry.tooltip.tooltip-bottom
|
||||
{:class (when-not (:make-curve enabled-buttons) "is-disabled")
|
||||
:alt (tr "workspace.path.actions.make-curve" (sc/get-tooltip :make-curve))
|
||||
:on-click on-make-curve}
|
||||
i/nodes-curve]]
|
||||
[:button
|
||||
{:class (stl/css-case :is-disabled (:make-curve enabled-buttons))
|
||||
:alt (tr "workspace.path.actions.make-curve" (sc/get-tooltip :make-curve))
|
||||
:on-click on-make-curve}
|
||||
i/to-curve-refactor]]
|
||||
|
||||
;; Toggle snap
|
||||
[:div.viewport-actions-group
|
||||
[:div.viewport-actions-entry.tooltip.tooltip-bottom
|
||||
{:class (when snap-toggled "is-toggled")
|
||||
:alt (tr "workspace.path.actions.snap-nodes" (sc/get-tooltip :snap-nodes))
|
||||
:on-click on-toggle-snap}
|
||||
i/nodes-snap]]]))
|
||||
[:div {:class (stl/css :sub-actions-group)}
|
||||
[:button
|
||||
{:class (stl/css-case :is-toggled snap-toggled)
|
||||
:alt (tr "workspace.path.actions.snap-nodes" (sc/get-tooltip :snap-nodes))
|
||||
:on-click on-toggle-snap}
|
||||
i/snap-nodes-refactor]]]
|
||||
|
||||
|
||||
|
||||
[:div.path-actions
|
||||
[:div.viewport-actions-group
|
||||
|
||||
;; Draw Mode
|
||||
[:div.viewport-actions-entry.tooltip.tooltip-bottom
|
||||
{:class (when (= edit-mode :draw) "is-toggled")
|
||||
:alt (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes))
|
||||
:on-click on-select-draw-mode}
|
||||
i/pen]
|
||||
|
||||
;; Edit mode
|
||||
[:div.viewport-actions-entry.tooltip.tooltip-bottom
|
||||
{:class (when (= edit-mode :move) "is-toggled")
|
||||
:alt (tr "workspace.path.actions.move-nodes" (sc/get-tooltip :move-nodes))
|
||||
:on-click on-select-edit-mode}
|
||||
i/pointer-inner]]
|
||||
|
||||
[:div.viewport-actions-group
|
||||
;; Add Node
|
||||
[:div.viewport-actions-entry.tooltip.tooltip-bottom
|
||||
{:class (when-not (:add-node enabled-buttons) "is-disabled")
|
||||
:alt (tr "workspace.path.actions.add-node" (sc/get-tooltip :add-node))
|
||||
:on-click on-add-node}
|
||||
i/nodes-add]
|
||||
|
||||
;; Remove node
|
||||
[:div.viewport-actions-entry.tooltip.tooltip-bottom
|
||||
{:class (when-not (:remove-node enabled-buttons) "is-disabled")
|
||||
:alt (tr "workspace.path.actions.delete-node" (sc/get-tooltip :delete-node))
|
||||
:on-click on-remove-node}
|
||||
i/nodes-remove]]
|
||||
|
||||
[:div.viewport-actions-group
|
||||
;; Merge Nodes
|
||||
[:div.viewport-actions-entry.tooltip.tooltip-bottom
|
||||
{:class (when-not (:merge-nodes enabled-buttons) "is-disabled")
|
||||
:alt (tr "workspace.path.actions.merge-nodes" (sc/get-tooltip :merge-nodes))
|
||||
:on-click on-merge-nodes}
|
||||
i/nodes-merge]
|
||||
|
||||
;; Join Nodes
|
||||
[:div.viewport-actions-entry.tooltip.tooltip-bottom
|
||||
{:class (when-not (:join-nodes enabled-buttons) "is-disabled")
|
||||
:alt (tr "workspace.path.actions.join-nodes" (sc/get-tooltip :join-nodes))
|
||||
:on-click on-join-nodes}
|
||||
i/nodes-join]
|
||||
|
||||
;; Separate Nodes
|
||||
[:div.viewport-actions-entry.tooltip.tooltip-bottom
|
||||
{:class (when-not (:separate-nodes enabled-buttons) "is-disabled")
|
||||
:alt (tr "workspace.path.actions.separate-nodes" (sc/get-tooltip :separate-nodes))
|
||||
:on-click on-separate-nodes}
|
||||
i/nodes-separate]]
|
||||
|
||||
;; Make Corner
|
||||
[:div.viewport-actions-group
|
||||
[:div.viewport-actions-entry.tooltip.tooltip-bottom
|
||||
{:class (when-not (:make-corner enabled-buttons) "is-disabled")
|
||||
:alt (tr "workspace.path.actions.make-corner" (sc/get-tooltip :make-corner))
|
||||
:on-click on-make-corner}
|
||||
i/nodes-corner]
|
||||
|
||||
;; Make Curve
|
||||
[:div.viewport-actions-entry.tooltip.tooltip-bottom
|
||||
{:class (when-not (:make-curve enabled-buttons) "is-disabled")
|
||||
:alt (tr "workspace.path.actions.make-curve" (sc/get-tooltip :make-curve))
|
||||
:on-click on-make-curve}
|
||||
i/nodes-curve]]
|
||||
|
||||
;; Toggle snap
|
||||
[:div.viewport-actions-group
|
||||
[:div.viewport-actions-entry.tooltip.tooltip-bottom
|
||||
{:class (when snap-toggled "is-toggled")
|
||||
:alt (tr "workspace.path.actions.snap-nodes" (sc/get-tooltip :snap-nodes))
|
||||
:on-click on-toggle-snap}
|
||||
i/nodes-snap]]])))
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
// 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
|
||||
|
||||
@import "refactor/common-refactor.scss";
|
||||
|
||||
.sub-actions {
|
||||
pointer-events: initial;
|
||||
position: absolute;
|
||||
top: $s-12;
|
||||
left: calc(50% - 240px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $s-56;
|
||||
padding: $s-8 $s-16;
|
||||
border-radius: $s-8;
|
||||
gap: $s-16;
|
||||
z-index: $z-index-10;
|
||||
background-color: var(--color-background-primary);
|
||||
transition:
|
||||
top 0.3s,
|
||||
height 0.3s,
|
||||
opacity 0.3s;
|
||||
|
||||
.sub-actions-group {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
opacity: $op-10;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
button {
|
||||
@extend .button-tertiary;
|
||||
height: $s-36;
|
||||
width: $s-36;
|
||||
flex-shrink: 0;
|
||||
background-color: transparent;
|
||||
border-radius: $s-8;
|
||||
border: none;
|
||||
margin: 0 $s-2;
|
||||
&.is-disabled {
|
||||
pointer-events: none;
|
||||
opacity: 40%;
|
||||
}
|
||||
&.is-toggled {
|
||||
background-color: var(--button-radio-background-color-active);
|
||||
svg {
|
||||
stroke: var(--button-radio-foreground-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--color-foreground-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -75,6 +75,13 @@
|
|||
|
||||
grid-edition? (and single? editing? (ctl/grid-layout? shape))]
|
||||
|
||||
(mf/use-effect
|
||||
(mf/deps editing?)
|
||||
(fn []
|
||||
(if editing?
|
||||
(st/emit! (dw/hide-toolbar))
|
||||
(st/emit! (dw/show-toolbar)))))
|
||||
|
||||
(cond
|
||||
path-edition?
|
||||
[:div.viewport-actions
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue