3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-26 00:37:17 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge remote-tracking branch 'origin/staging' into develop

Browse source
This commit is contained in:
Alejandro Alonso 2023-01-12 13:33:23 +01:00
commit 47c983ed88
25 changed files with 343 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

@ -55,6 +55,7 @@
- Fix ghost shapes after sync groups in components [Taiga #4649](https://tree.taiga.io/project/penpot/issue/4649) - Fix ghost shapes after sync groups in components [Taiga #4649](https://tree.taiga.io/project/penpot/issue/4649)
- Fix layer orders messed up on move, group, reparent and undo [Github #2672](https://github.com/penpot/penpot/issues/2672) - Fix layer orders messed up on move, group, reparent and undo [Github #2672](https://github.com/penpot/penpot/issues/2672)
- Fix max height in library dialog [Github #2335](https://github.com/penpot/penpot/issues/2335) - Fix max height in library dialog [Github #2335](https://github.com/penpot/penpot/issues/2335)
- Fix undo ungroup (shift+g) scrambles positions [Taiga #4674](https://tree.taiga.io/project/penpot/issue/4674)
## 1.16.2-beta ## 1.16.2-beta

6
common/src/app/common/pages/changes_builder.cljc
View file

@ -378,14 +378,16 @@
add-undo-change-parent add-undo-change-parent
(fn [change-set id] (fn [change-set id]
(let [shape (get objects id)] (let [shape (get objects id)
prev-sibling (cph/get-prev-sibling objects (:id shape))]
(d/preconj (d/preconj
change-set change-set
{:type :mov-objects {:type :mov-objects
:page-id page-id :page-id page-id
:parent-id (:parent-id shape) :parent-id (:parent-id shape)
:shapes [id] :shapes [id]
:index (cph/get-position-on-parent objects id) :after-shape prev-sibling
:index 0
:ignore-touched true})))] :ignore-touched true})))]
(-> changes (-> changes

3
frontend/resources/images/icons/bug.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="511.577" height="466.552" viewBox="0 0 135.355 123.442">
<path d="M64.506 123.318a45.44 45.44 0 0 1-33.31-18.079l-1.957-2.606-8.759 8.745c-4.817 4.81-9.094 8.87-9.504 9.023-1.13.42-3.116.33-4.13-.187-.5-.254-1.266-.91-1.704-1.459-1.012-1.267-1.274-3.567-.568-4.98.249-.497 4.856-5.32 10.239-10.717l9.787-9.814-.565-1.828c-.972-3.14-1.607-6.416-1.926-9.94L21.8 78.08l-8.876-.006c-8.064-.005-8.974-.05-9.935-.495-4.076-1.88-3.959-7.41.194-9.144.818-.342 2.442-.41 9.852-.41h8.872V50.163l-8.353-8.333c-4.683-4.672-8.59-8.789-8.892-9.37-.8-1.539-.59-3.771.48-5.11.437-.548 1.203-1.205 1.702-1.46 1.015-.517 3.001-.606 4.131-.185.41.152 3.037 2.562 5.838 5.355 4.75 4.736 5.094 5.023 5.094 4.269 0-1.329.937-4.49 1.735-5.85.98-1.675 3.03-3.646 4.637-4.46 2.148-1.088 4.034-1.444 7.665-1.444h3.342l.706-2.695C43.323 8.176 54.164 0 67.681 0c13.483 0 24.37 8.22 27.696 20.915l.697 2.66h3.343c3.63 0 5.516.356 7.664 1.444 1.606.814 3.656 2.785 4.638 4.46.797 1.36 1.735 4.521 1.735 5.85 0 .754.343.467 5.093-4.27 2.801-2.792 5.428-5.202 5.838-5.354 1.13-.421 3.116-.332 4.131.186.499.254 1.265.91 1.703 1.459 1.07 1.339 1.28 3.571.479 5.11-.303.581-4.21 4.698-8.892 9.37l-8.352 8.333v17.862h8.872c7.409 0 9.033.068 9.852.41 4.236 1.77 4.236 7.465 0 9.235-.818.342-2.438.41-9.799.41h-8.819l-.307 3.396c-.32 3.524-.955 6.8-1.927 9.94l-.565 1.828 9.787 9.814c5.383 5.398 9.99 10.22 10.239 10.716.707 1.414.444 3.714-.568 4.981-.438.548-1.204 1.204-1.703 1.459-1.015.517-3 .607-4.131.186-.41-.152-4.687-4.212-9.504-9.022l-8.76-8.745-1.919 2.554c-3.453 4.595-7.831 8.607-12.582 11.531-5.776 3.555-13.346 6.039-19.733 6.473-1.222.083-2.758.188-3.413.234-.654.045-2.44-.003-3.968-.107zm-1.852-50V33.63H33.187l-.613.575-.612.575v22.947c0 21.587.03 23.124.518 25.949 2.161 12.52 10.506 22.695 22.5 27.434 1.67.66 6.194 1.862 7.078 1.882l.596.013zm13.658 39.026c13.855-3.5 24.14-14.6 26.57-28.668.487-2.825.517-4.362.517-25.912v-22.91l-.575-.612-.575-.612H72.708v39.687c0 38.605.013 39.688.495 39.688.272 0 1.671-.298 3.109-.66zm9.24-89.496c-.097-.4-.66-1.735-1.253-2.967-1.517-3.152-4.681-6.313-7.887-7.877-3.23-1.577-5.119-2.012-8.731-2.012-3.613 0-5.502.435-8.732 2.012-3.205 1.564-6.37 4.725-7.886 7.877-.593 1.232-1.157 2.567-1.254 2.967l-.177.727H85.73z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

46
frontend/resources/styles/main/partials/sidebar.scss
View file

@ -360,12 +360,16 @@ button.collapse-sidebar {
overflow: hidden; overflow: hidden;
} }
.shortcuts { .shortcuts,
.shortcuts-header { .debug-panel {
.shortcuts-header,
.debug-panel-header {
display: flex; display: flex;
height: 40px; height: 40px;
background-color: $color-gray-60; background-color: $color-gray-60;
.shortcuts-title {
.shortcuts-title,
.debug-panel-title {
color: $color-white; color: $color-white;
font-size: $fs12; font-size: $fs12;
display: flex; display: flex;
@ -379,7 +383,9 @@ button.collapse-sidebar {
fill: $color-gray-20; fill: $color-gray-20;
} }
} }
.shortcuts-close-button {
.shortcuts-close-button,
.debug-panel-close-button {
display: flex; display: flex;
justify-content: center; justify-content: center;
background-color: transparent; background-color: transparent;
@ -547,3 +553,35 @@ button.collapse-sidebar {
font-size: $fs12; font-size: $fs12;
} }
} }
.debug-panel {
.debug-panel-inner {
padding: 8px;
}
.debug-option {
display: flex;
gap: 8px;
margin: 4px 0;
cursor: pointer;
label {
font-size: 80%;
cursor: pointer;
}
svg {
width: 15px;
height: 15px;
background: white;
}
&:hover {
svg {
stroke: var(--color-primary);
}
label {
color: var(--color-primary);
}
}
}
}

2
frontend/src/app/main.cljs
View file

@ -81,7 +81,7 @@
(init-ui) (init-ui)
(st/emit! (initialize))) (st/emit! (initialize)))
(defn reinit (defn ^:export reinit
[] []
(mf/unmount (dom/get-element "app")) (mf/unmount (dom/get-element "app"))
(mf/unmount (dom/get-element "modal")) (mf/unmount (dom/get-element "modal"))

25
frontend/src/app/main/data/workspace/drawing/box.cljs
View file

@ -8,11 +8,13 @@
(:require (:require
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.common.geom.shapes.flex-layout :as gsl]
[app.common.math :as mth] [app.common.math :as mth]
[app.common.pages.helpers :as cph] [app.common.pages.helpers :as cph]
[app.common.types.modifiers :as ctm] [app.common.types.modifiers :as ctm]
[app.common.types.shape :as cts] [app.common.types.shape :as cts]
[app.common.types.shape-tree :as ctst] [app.common.types.shape-tree :as ctst]
[app.common.types.shape.layout :as ctl]
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.main.data.workspace.drawing.common :as common] [app.main.data.workspace.drawing.common :as common]
[app.main.data.workspace.state-helpers :as wsh] [app.main.data.workspace.state-helpers :as wsh]
@ -72,23 +74,30 @@
initial (cond-> @ms/mouse-position snap-pixel? gpt/round) initial (cond-> @ms/mouse-position snap-pixel? gpt/round)
page-id (:current-page-id state) page-id (:current-page-id state)
objects (wsh/lookup-page-objects state page-id) objects (wsh/lookup-page-objects state page-id)
focus (:workspace-focus-selected state) focus (:workspace-focus-selected state)
zoom (get-in state [:workspace-local :zoom] 1) zoom (get-in state [:workspace-local :zoom] 1)
fid (ctst/top-nested-frame objects initial)
fid (ctst/top-nested-frame objects initial)
layout? (ctl/layout? objects fid)
drop-index (when layout? (gsl/get-drop-index fid objects initial))
shape (get-in state [:workspace-drawing :object]) shape (get-in state [:workspace-drawing :object])
shape (-> shape shape (-> shape
(cts/setup-shape {:x (:x initial) (cts/setup-shape {:x (:x initial)
:y (:y initial) :y (:y initial)
:width 0.01 :width 0.01
:height 0.01}) :height 0.01})
(cond-> (and (cph/frame-shape? shape) (cond-> (and (cph/frame-shape? shape)
(not= fid uuid/zero)) (not= fid uuid/zero))
(assoc :fills [] :hide-in-viewer true)) (assoc :fills [] :hide-in-viewer true))
(assoc :frame-id fid) (assoc :frame-id fid)
(cond-> (some? drop-index)
(with-meta {:index drop-index}))
(assoc :initialized? true) (assoc :initialized? true)
(assoc :click-draw? true))] (assoc :click-draw? true))]
(rx/concat (rx/concat

13
frontend/src/app/main/data/workspace/drawing/curve.cljs
View file

@ -6,9 +6,12 @@
(ns app.main.data.workspace.drawing.curve (ns app.main.data.workspace.drawing.curve
(:require (:require
[app.common.geom.point :as gpt]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.common.geom.shapes.flex-layout :as gsl]
[app.common.geom.shapes.path :as gsp] [app.common.geom.shapes.path :as gsp]
[app.common.types.shape-tree :as ctst] [app.common.types.shape-tree :as ctst]
[app.common.types.shape.layout :as ctl]
[app.main.data.workspace.drawing.common :as common] [app.main.data.workspace.drawing.common :as common]
[app.main.data.workspace.state-helpers :as wsh] [app.main.data.workspace.state-helpers :as wsh]
[app.main.streams :as ms] [app.main.streams :as ms]
@ -46,10 +49,14 @@
(let [objects (wsh/lookup-page-objects state) (let [objects (wsh/lookup-page-objects state)
content (get-in state [:workspace-drawing :object :content] []) content (get-in state [:workspace-drawing :object :content] [])
position (get-in content [0 :params] nil) position (gpt/point (get-in content [0 :params] nil))
frame-id (ctst/top-nested-frame objects position)] frame-id (ctst/top-nested-frame objects position)
layout? (ctl/layout? objects frame-id)
drop-index (when layout? (gsl/get-drop-index frame-id objects position))]
(-> state (-> state
(assoc-in [:workspace-drawing :object :frame-id] frame-id)))))) (assoc-in [:workspace-drawing :object :frame-id] frame-id)
(cond-> (some? drop-index)
(update-in [:workspace-drawing :object] with-meta {:index drop-index})))))))
(defn curve-to-path [{:keys [segments] :as shape}] (defn curve-to-path [{:keys [segments] :as shape}]
(let [content (gsp/segments->content segments) (let [content (gsp/segments->content segments)

18
frontend/src/app/main/data/workspace/groups.cljs
View file

@ -24,9 +24,8 @@
[objects selected] [objects selected]
(->> selected (->> selected
(cph/order-by-indexed-shapes objects) (cph/order-by-indexed-shapes objects)
(map #(get objects %)) reverse
(map #(assoc % ::index (cph/get-position-on-parent objects (:id %)))) (map #(get objects %))))
(sort-by ::index)))
(defn- get-empty-groups-after-group-creation (defn- get-empty-groups-after-group-creation
"An auxiliary function that finds and returns a set of ids that "An auxiliary function that finds and returns a set of ids that
@ -78,7 +77,11 @@
(ctst/generate-unique-name base-name))) (ctst/generate-unique-name base-name)))
selrect (gsh/selection-rect shapes) selrect (gsh/selection-rect shapes)
group-idx (inc (::index (last shapes))) group-idx (->> shapes
last
:id
(cph/get-position-on-parent objects)
inc)
group (-> (cts/make-minimal-group frame-id selrect gname) group (-> (cts/make-minimal-group frame-id selrect gname)
(cts/setup-shape selrect) (cts/setup-shape selrect)
(assoc :shapes (mapv :id shapes) (assoc :shapes (mapv :id shapes)
@ -115,7 +118,8 @@
(->> (:shapes parent) (->> (:shapes parent)
(map-indexed vector) (map-indexed vector)
(filter #(#{(:id group)} (second %))) (filter #(#{(:id group)} (second %)))
(ffirst)) (ffirst)
inc)
;; Shapes that are in a component (including root) must be detached, ;; Shapes that are in a component (including root) must be detached,
;; because cannot be easyly synchronized back to the main component. ;; because cannot be easyly synchronized back to the main component.
@ -134,7 +138,9 @@
(cph/order-by-indexed-shapes objects) (cph/order-by-indexed-shapes objects)
(mapv #(get objects %))) (mapv #(get objects %)))
parent-id (cph/get-parent-id objects (:id frame)) parent-id (cph/get-parent-id objects (:id frame))
idx-in-parent (cph/get-position-on-parent objects (:id frame))] idx-in-parent (->> (:id frame)
(cph/get-position-on-parent objects)
inc)]
(-> (pcb/empty-changes it page-id) (-> (pcb/empty-changes it page-id)
(pcb/with-objects objects) (pcb/with-objects objects)

12
frontend/src/app/main/data/workspace/path/drawing.cljs
View file

@ -7,11 +7,13 @@
(ns app.main.data.workspace.path.drawing (ns app.main.data.workspace.path.drawing
(:require (:require
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.geom.shapes.flex-layout :as gsl]
[app.common.geom.shapes.path :as upg] [app.common.geom.shapes.path :as upg]
[app.common.path.commands :as upc] [app.common.path.commands :as upc]
[app.common.path.shapes-to-path :as upsp] [app.common.path.shapes-to-path :as upsp]
[app.common.spec :as us] [app.common.spec :as us]
[app.common.types.shape-tree :as ctst] [app.common.types.shape-tree :as ctst]
[app.common.types.shape.layout :as ctl]
[app.main.data.workspace.changes :as dch] [app.main.data.workspace.changes :as dch]
[app.main.data.workspace.drawing.common :as dwdc] [app.main.data.workspace.drawing.common :as dwdc]
[app.main.data.workspace.edition :as dwe] [app.main.data.workspace.edition :as dwe]
@ -257,10 +259,14 @@
(update [_ state] (update [_ state]
(let [objects (wsh/lookup-page-objects state) (let [objects (wsh/lookup-page-objects state)
content (get-in state [:workspace-drawing :object :content] []) content (get-in state [:workspace-drawing :object :content] [])
position (get-in content [0 :params] nil) position (gpt/point (get-in content [0 :params] nil))
frame-id (ctst/top-nested-frame objects position)] frame-id (ctst/top-nested-frame objects position)
layout? (ctl/layout? objects frame-id)
drop-index (when layout? (gsl/get-drop-index frame-id objects position))]
(-> state (-> state
(assoc-in [:workspace-drawing :object :frame-id] frame-id)))))) (assoc-in [:workspace-drawing :object :frame-id] frame-id)
(cond-> (some? drop-index)
(update-in [:workspace-drawing :object] with-meta {:index drop-index})))))))
(defn handle-new-shape-result [shape-id] (defn handle-new-shape-result [shape-id]
(ptk/reify ::handle-new-shape-result (ptk/reify ::handle-new-shape-result

5
frontend/src/app/main/data/workspace/path/edition.cljs
View file

@ -298,7 +298,10 @@
ptk/WatchEvent ptk/WatchEvent
(watch [_ state stream] (watch [_ state stream]
(let [mode (get-in state [:workspace-local :edit-path id :edit-mode]) (let [mode (get-in state [:workspace-local :edit-path id :edit-mode])
stopper (->> stream (rx/filter (ptk/type? ::start-path-edit))) stopper (->> stream
(rx/filter #(or
(= (ptk/type %) ::dwe/clear-edition-mode)
(= (ptk/type %) ::start-path-edit))))
interrupt (->> stream (rx/filter #(= % :interrupt)) (rx/take 1))] interrupt (->> stream (rx/filter #(= % :interrupt)) (rx/take 1))]
(rx/concat (rx/concat
(rx/of (undo/start-path-undo)) (rx/of (undo/start-path-undo))

12
frontend/src/app/main/data/workspace/shape_layout.cljs
View file

@ -82,11 +82,13 @@
[ids] [ids]
(ptk/reify ::update-layout-positions (ptk/reify ::update-layout-positions
ptk/WatchEvent ptk/WatchEvent
(watch [_ _ _] (watch [_ state _]
(if (d/not-empty? ids) (let [objects (wsh/lookup-page-objects state)
(let [modif-tree (dwm/create-modif-tree ids (ctm/reflow-modifiers))] ids (->> ids (filter #(contains? objects %)))]
(rx/of (dwm/apply-modifiers {:modifiers modif-tree}))) (if (d/not-empty? ids)
(rx/empty))))) (let [modif-tree (dwm/create-modif-tree ids (ctm/reflow-modifiers))]
(rx/of (dwm/apply-modifiers {:modifiers modif-tree})))
(rx/empty))))))
(defn initialize (defn initialize
[] []

7
frontend/src/app/main/data/workspace/shapes.cljs
View file

@ -96,11 +96,12 @@
objects objects
selected) selected)
index (:index (meta attrs))
changes (-> (pcb/empty-changes it page-id) changes (-> (pcb/empty-changes it page-id)
(pcb/with-objects objects) (pcb/with-objects objects)
(cond-> (some? (:index (meta attrs))) (cond-> (some? index)
(pcb/add-object shape {:index (:index (meta attrs))})) (pcb/add-object shape {:index index}))
(cond-> (nil? (:index (meta attrs))) (cond-> (nil? index)
(pcb/add-object shape)) (pcb/add-object shape))
(cond-> (some? (:parent-id attrs)) (cond-> (some? (:parent-id attrs))
(pcb/change-parent (:parent-id attrs) [shape]))) (pcb/change-parent (:parent-id attrs) [shape])))

33
frontend/src/app/main/store.cljs
View file

@ -23,22 +23,29 @@
[type data] [type data]
(ptk/data-event type data)) (ptk/data-event type data))
;;(def debug-exclude-events (def on-event identity)
;; #{:app.main.data.workspace.notifications/handle-pointer-update
;; :app.main.data.workspace.notifications/handle-pointer-send (def ^:dynamic *debug-events* false)
;; :app.main.data.workspace.persistence/update-persistence-status
;; :app.main.data.workspace.changes/update-indices ;; Only created in development build
;; :app.main.data.websocket/send-message (when *assert*
;; :app.main.data.workspace.selection/change-hover-state}) (def debug-exclude-events
;; (def ^:dynamic *debug-events* false) #{:app.main.data.workspace.notifications/handle-pointer-update
:app.main.data.workspace.notifications/handle-pointer-send
:app.main.data.workspace.persistence/update-persistence-status
:app.main.data.workspace.changes/update-indices
:app.main.data.websocket/send-message
:app.main.data.workspace.selection/change-hover-state})
(set! on-event (fn [e]
(when (and *debug-events*
(ptk/event? e)
(not (debug-exclude-events (ptk/type e))))
(.log js/console (str "[stream]: " (ptk/repr-event e)) )))))
(defonce state (defonce state
(ptk/store {:resolve ptk/resolve (ptk/store {:resolve ptk/resolve
;;:on-event (fn [e] :on-event on-event
;; (when (and *debug-events*
;; (ptk/event? e)
;; (not (debug-exclude-events (ptk/type e))))
;; (.log js/console (str "[stream]: " (ptk/repr-event e)) )))
:on-error (fn [e] (@on-error e))})) :on-error (fn [e] (@on-error e))}))
(defonce stream (defonce stream

1
frontend/src/app/main/ui/icons.cljs
View file

@ -78,6 +78,7 @@
(def bool-intersection (icon-xref :boolean-intersection)) (def bool-intersection (icon-xref :boolean-intersection))
(def bool-union (icon-xref :boolean-union)) (def bool-union (icon-xref :boolean-union))
(def box (icon-xref :box)) (def box (icon-xref :box))
(def bug (icon-xref :bug))
(def chain (icon-xref :chain)) (def chain (icon-xref :chain))
(def chat (icon-xref :chat)) (def chat (icon-xref :chat))
(def checkbox-checked (icon-xref :checkbox-checked)) (def checkbox-checked (icon-xref :checkbox-checked))

33
frontend/src/app/main/ui/shapes/attrs.cljs
View file

@ -146,18 +146,20 @@
(defn extract-svg-attrs (defn extract-svg-attrs
[render-id svg-defs svg-attrs] [render-id svg-defs svg-attrs]
(let [replace-id (fn [id] (if (and (empty? svg-defs) (empty? svg-attrs))
(if (contains? svg-defs id) [nil nil]
(str render-id "-" id) (let [replace-id (fn [id]
id)) (if (contains? svg-defs id)
svg-attrs (-> svg-attrs (str render-id "-" id)
(usvg/clean-attrs) id))
(usvg/update-attr-ids replace-id) svg-attrs (-> svg-attrs
(dissoc :id)) (usvg/clean-attrs)
(usvg/update-attr-ids replace-id)
(dissoc :id))
attrs (-> svg-attrs (dissoc :style) (clj->js)) attrs (-> svg-attrs (dissoc :style) (clj->js))
styles (-> svg-attrs (:style {}) (clj->js))] styles (-> svg-attrs (:style {}) (clj->js))]
[attrs styles])) [attrs styles])))
(defn add-style-attrs (defn add-style-attrs
([props shape] ([props shape]
@ -212,9 +214,12 @@
(obj/set! "style" styles))))) (obj/set! "style" styles)))))
(defn extract-style-attrs (defn extract-style-attrs
[shape] ([shape]
(-> (obj/create) (-> (obj/create)
(add-style-attrs shape))) (add-style-attrs shape)))
([shape render-id]
(-> (obj/create)
(add-style-attrs shape render-id))))
(defn extract-fill-attrs (defn extract-fill-attrs
[fill-data render-id index type] [fill-data render-id index type]

9
frontend/src/app/main/ui/shapes/frame.cljs
View file

@ -53,7 +53,10 @@
{:keys [x y width height show-content]} shape {:keys [x y width height show-content]} shape
transform (gsh/transform-str shape) transform (gsh/transform-str shape)
props (-> (attrs/extract-style-attrs shape)
render-id (mf/use-ctx muc/render-id)
props (-> (attrs/extract-style-attrs shape render-id)
(obj/merge! (obj/merge!
#js {:x x #js {:x x
:y y :y y
@ -61,9 +64,7 @@
:width width :width width
:height height :height height
:className "frame-background"})) :className "frame-background"}))
path? (some? (.-d props)) path? (some? (.-d props))]
render-id (mf/use-ctx muc/render-id)]
[:* [:*
[:g {:clip-path (when (not show-content) (frame-clip-url shape render-id))} [:g {:clip-path (when (not show-content) (frame-clip-url shape render-id))}
[:& frame-clip-def {:shape shape :render-id render-id}] [:& frame-clip-def {:shape shape :render-id render-id}]

15
frontend/src/app/main/ui/workspace/left_toolbar.cljs
View file

@ -177,6 +177,19 @@
:on-click (fn [] :on-click (fn []
(let [is-sidebar-closed? (contains? layout :collapse-left-sidebar)] (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)) (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) (-> (dw/toggle-layout-flag :shortcuts)
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))))} (vary-meta assoc ::ev/origin "workspace-left-toolbar"))))))}
i/shortcut]]]])) i/shortcut]
(when *assert*
[:button.tooltip.tooltip-right
{:alt "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"))))))}
i/bug])]]]))

41
frontend/src/app/main/ui/workspace/sidebar.cljs
View file

@ -14,6 +14,7 @@
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.comments :refer [comments-sidebar]] [app.main.ui.workspace.comments :refer [comments-sidebar]]
[app.main.ui.workspace.sidebar.assets :refer [assets-toolbox]] [app.main.ui.workspace.sidebar.assets :refer [assets-toolbox]]
[app.main.ui.workspace.sidebar.debug :refer [debug-panel]]
[app.main.ui.workspace.sidebar.history :refer [history-toolbox]] [app.main.ui.workspace.sidebar.history :refer [history-toolbox]]
[app.main.ui.workspace.sidebar.layers :refer [layers-toolbox]] [app.main.ui.workspace.sidebar.layers :refer [layers-toolbox]]
[app.main.ui.workspace.sidebar.options :refer [options-toolbox]] [app.main.ui.workspace.sidebar.options :refer [options-toolbox]]
@ -34,6 +35,7 @@
section (cond (or mode-inspect? (contains? layout :layers)) :layers section (cond (or mode-inspect? (contains? layout :layers)) :layers
(contains? layout :assets) :assets) (contains? layout :assets) :assets)
shortcuts? (contains? layout :shortcuts) shortcuts? (contains? layout :shortcuts)
show-debug? (contains? layout :debug-panel)
{:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]} {:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
(use-resize-hook :left-sidebar 255 255 500 :x false :left) (use-resize-hook :left-sidebar 255 255 500 :x false :left)
@ -53,26 +55,31 @@
:on-mouse-move on-mouse-move}] :on-mouse-move on-mouse-move}]
[:div.settings-bar-inside [:div.settings-bar-inside
(cond
shortcuts?
[:& shortcuts-container]
[:* (if shortcuts? show-debug?
[:& shortcuts-container] [:& debug-panel]
[:*
[:button.collapse-sidebar
{:on-click handle-collapse
:aria-label (tr "workspace.sidebar.collapse")}
i/arrow-slide]
[:& tab-container {:on-change-tab #(st/emit! (dw/go-to-layout %))
:selected section
:shortcuts? shortcuts?}
[:& tab-element {:id :layers :title (tr "workspace.sidebar.layers")} :else
[:div.layers-tab [:*
[:& sitemap {:layout layout}] [:button.collapse-sidebar
[:& layers-toolbox]]] {:on-click handle-collapse
:aria-label (tr "workspace.sidebar.collapse")}
i/arrow-slide]
[:& tab-container {:on-change-tab #(st/emit! (dw/go-to-layout %))
:selected section
:shortcuts? shortcuts?}
(when-not mode-inspect? [:& tab-element {:id :layers :title (tr "workspace.sidebar.layers")}
[:& tab-element {:id :assets :title (tr "workspace.toolbar.assets")} [:div.layers-tab
[:& assets-toolbox]])]])]]])) [:& sitemap {:layout layout}]
[:& layers-toolbox]]]
(when-not mode-inspect?
[:& tab-element {:id :assets :title (tr "workspace.toolbar.assets")}
[:& assets-toolbox]])]])]]))
;; --- Right Sidebar (Component) ;; --- Right Sidebar (Component)

51
frontend/src/app/main/ui/workspace/sidebar/debug.cljs Normal file
View file

@ -0,0 +1,51 @@
;; 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.sidebar.debug
(:require
[app.common.data :as d]
[app.main.data.workspace :as dw]
[app.main.store :as st]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[debug :as dbg]
[rumext.v2 :as mf]))
(mf/defc debug-panel
[]
(let [on-toggle-enabled
(mf/use-callback
(fn [event option]
(dom/prevent-default event)
(dom/stop-propagation event)
(if (contains? @dbg/*debug* option)
(dbg/-debug! option)
(dbg/debug! option))))
close-fn
(mf/use-callback
(fn []
(st/emit! (dw/remove-layout-flag :debug-panel))))]
[:div.debug-panel
[:div.debug-panel-header
[:div.debug-panel-close-button
{:on-click close-fn} i/close]
[:div.debug-panel-title "Debugging tools"]]
[:div.debug-panel-inner
[:*
(for [option (sort-by d/name dbg/debug-options)]
[:div.debug-option {:key (d/name option)
:on-click #(on-toggle-enabled % option)}
[:input {:type "checkbox"
:id (d/name option)
:on-change #(on-toggle-enabled % option)
:checked (contains? @dbg/*debug* option)}]
[:div.field.check
(if (contains? @dbg/*debug* option)
[:span.checked i/checkbox-checked]
[:span.unchecked i/checkbox-unchecked])]
[:label {:for (d/name option)} (d/name option)]])]]]))

2
frontend/src/app/main/ui/workspace/viewport.cljs
View file

@ -214,7 +214,7 @@
(hooks/setup-viewport-size viewport-ref) (hooks/setup-viewport-size viewport-ref)
(hooks/setup-cursor cursor alt? mod? space? panning drawing-tool drawing-path? node-editing? workspace-read-only?) (hooks/setup-cursor cursor alt? mod? space? panning drawing-tool drawing-path? node-editing? workspace-read-only?)
(hooks/setup-keyboard alt? mod? space?) (hooks/setup-keyboard alt? mod? space?)
(hooks/setup-hover-shapes page-id move-stream base-objects transform selected mod? hover hover-ids hover-top-frame-id @hover-disabled? focus zoom) (hooks/setup-hover-shapes page-id move-stream base-objects transform selected mod? hover hover-ids hover-top-frame-id @hover-disabled? focus zoom show-measures?)
(hooks/setup-viewport-modifiers modifiers base-objects) (hooks/setup-viewport-modifiers modifiers base-objects)
(hooks/setup-shortcuts node-editing? drawing-path?) (hooks/setup-shortcuts node-editing? drawing-path?)
(hooks/setup-active-frames base-objects hover-ids selected active-frames zoom transform vbox) (hooks/setup-active-frames base-objects hover-ids selected active-frames zoom transform vbox)

25
frontend/src/app/main/ui/workspace/viewport/hooks.cljs
View file

@ -117,7 +117,7 @@
(not)))) (not))))
(defn setup-hover-shapes (defn setup-hover-shapes
[page-id move-stream objects transform selected mod? hover hover-ids hover-top-frame-id hover-disabled? focus zoom] [page-id move-stream objects transform selected mod? hover hover-ids hover-top-frame-id hover-disabled? focus zoom show-measures?]
(let [;; We use ref so we don't recreate the stream on a change (let [;; We use ref so we don't recreate the stream on a change
zoom-ref (mf/use-ref zoom) zoom-ref (mf/use-ref zoom)
mod-ref (mf/use-ref @mod?) mod-ref (mf/use-ref @mod?)
@ -192,7 +192,7 @@
(hooks/use-stream (hooks/use-stream
over-shapes-stream over-shapes-stream
(mf/deps page-id objects) (mf/deps page-id objects show-measures?)
(fn [ids] (fn [ids]
(let [selected (mf/ref-val selected-ref) (let [selected (mf/ref-val selected-ref)
focus (mf/ref-val focus-ref) focus (mf/ref-val focus-ref)
@ -212,15 +212,20 @@
(and (cph/root-frame? obj) (d/not-empty? (:shapes obj)))) (and (cph/root-frame? obj) (d/not-empty? (:shapes obj))))
;; Set with the elements to remove from the hover list ;; Set with the elements to remove from the hover list
remove-id? remove-id-xf
(cond-> selected-with-parents (cond
(not mod?)
(into (filter #(or (root-frame-with-data? %)
(group-empty-space? % objects ids)))
ids)
mod? mod?
(into (filter grouped?) ids)) (filter grouped?)
show-measures?
(filter #(group-empty-space? % objects ids))
(not mod?)
(filter #(or (root-frame-with-data? %)
(group-empty-space? % objects ids))))
remove-id?
(into selected-with-parents remove-id-xf ids)
hover-shape hover-shape
(->> ids (->> ids

57
frontend/src/app/util/path/format.cljs
View file

@ -6,7 +6,6 @@
(ns app.util.path.format (ns app.util.path.format
(:require (:require
[app.common.math :as mth]
[app.common.path.commands :as upc] [app.common.path.commands :as upc]
[app.common.path.subpaths :refer [pt=]] [app.common.path.subpaths :refer [pt=]]
[app.util.array :as arr])) [app.util.array :as arr]))
@ -16,48 +15,48 @@
(defn- join-params (defn- join-params
([a] ([a]
(js* "\"\"+~{}" (js* "\"\"+~{}"
(mth/precision a path-precision))) (.toFixed a path-precision)))
([a b] ([a b]
(js* "\"\"+~{}+\",\"+~{}" (js* "\"\"+~{}+\",\"+~{}"
(mth/precision a path-precision) (.toFixed a path-precision)
(mth/precision b path-precision))) (.toFixed b path-precision)))
([a b c] ([a b c]
(js* "\"\"+~{}+\",\"+~{}+\",\"+~{}" (js* "\"\"+~{}+\",\"+~{}+\",\"+~{}"
(mth/precision a path-precision) (.toFixed a path-precision)
(mth/precision b path-precision) (.toFixed b path-precision)
(mth/precision c path-precision))) (.toFixed c path-precision)))
([a b c d] ([a b c d]
(js* "\"\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}" (js* "\"\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}"
(mth/precision a path-precision) (.toFixed a path-precision)
(mth/precision b path-precision) (.toFixed b path-precision)
(mth/precision c path-precision) (.toFixed c path-precision)
(mth/precision d path-precision) (.toFixed d path-precision)
)) ))
([a b c d e] ([a b c d e]
(js* "\"\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}" (js* "\"\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}"
(mth/precision a path-precision) (.toFixed a path-precision)
(mth/precision b path-precision) (.toFixed b path-precision)
(mth/precision c path-precision) (.toFixed c path-precision)
(mth/precision d path-precision) (.toFixed d path-precision)
(mth/precision e path-precision))) (.toFixed e path-precision)))
([a b c d e f] ([a b c d e f]
(js* "\"\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}" (js* "\"\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}"
(mth/precision a path-precision) (.toFixed a path-precision)
(mth/precision b path-precision) (.toFixed b path-precision)
(mth/precision c path-precision) (.toFixed c path-precision)
(mth/precision d path-precision) (.toFixed d path-precision)
(mth/precision e path-precision) (.toFixed e path-precision)
(mth/precision f path-precision) (.toFixed f path-precision)
)) ))
([a b c d e f g] ([a b c d e f g]
(js* "\"\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}" (js* "\"\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}"
(mth/precision a path-precision) (.toFixed a path-precision)
(mth/precision b path-precision) (.toFixed b path-precision)
(mth/precision c path-precision) (.toFixed c path-precision)
(mth/precision d path-precision) (.toFixed d path-precision)
(mth/precision e path-precision) (.toFixed e path-precision)
(mth/precision f path-precision) (.toFixed f path-precision)
(mth/precision g path-precision)))) (.toFixed g path-precision))))
(defn- translate-params (defn- translate-params
[command {:keys [x y] :as params}] [command {:keys [x y] :as params}]

5
frontend/src/app/util/strings.cljs
View file

@ -42,3 +42,8 @@
(let [st (str/trim (str/lower search-term)) (let [st (str/trim (str/lower search-term))
nm (str/trim (str/lower name))] nm (str/trim (str/lower name))]
(str/includes? nm st)))) (str/includes? nm st))))
(defn camelize
[str]
;; str.replace(":", "-").replace(/-./g, x=>x[1].toUpperCase())
(js* "~{}.replace(\":\", \"-\").replace(/-./g, x=>x[1].toUpperCase())", str))

42
frontend/src/app/util/svg.cljs
View file

@ -12,6 +12,7 @@
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.common.math :as mth] [app.common.math :as mth]
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.util.strings :as ustr]
[cuerdas.core :as str])) [cuerdas.core :as str]))
;; Regex for XML ids per Spec ;; Regex for XML ids per Spec
@ -566,19 +567,20 @@
(defn clean-attrs (defn clean-attrs
"Transforms attributes to their react equivalent" "Transforms attributes to their react equivalent"
([attrs] (clean-attrs attrs true)) ([attrs]
(clean-attrs attrs true))
([attrs whitelist?] ([attrs whitelist?]
(letfn [(known-property? [[key _]] (letfn [(known-property? [[key _]]
(or (not whitelist?) (or (not whitelist?)
(contains? svg-attr-list key ) (contains? svg-attr-list key)
(contains? svg-present-list key ))) (contains? svg-present-list key)))
(transform-key [key] (transform-att [key]
(if (contains? non-react-props key) (if (contains? non-react-props key)
key key
(-> (d/name key) (-> (d/name key)
(str/replace ":" "-") (ustr/camelize)
(str/camel)
(keyword)))) (keyword))))
(format-styles [style-str] (format-styles [style-str]
@ -588,25 +590,27 @@
(group-by first) (group-by first)
(map (fn [[key val]] (map (fn [[key val]]
(vector (vector
(transform-key key) (transform-att key)
(second (first val))))) (second (first val)))))
(into {}))) (into {})))
(map-fn [[key val]] (clean-att [[att val]]
(let [key (keyword key)] (let [att (keyword att)]
(cond (cond
(= key :class) [:className val] (= att :class) [:className val]
(and (= key :style) (string? val)) [key (format-styles val)] (and (= att :style) (string? val)) [att (format-styles val)]
(and (= key :style) (map? val)) [key (clean-attrs val false)] (and (= att :style) (map? val)) [att (clean-attrs val false)]
:else (vector (transform-key key) val)))) :else [(transform-att att) val])))]
] ;; Removed this warning because slows a lot rendering with big svgs
#_(let [filtered-props (->> attrs (remove known-property?) (map first))]
(when (seq filtered-props)
(.warn js/console "Unknown properties: " (str/join ", " filtered-props ))))
(let [filtered-props (->> attrs (remove known-property?) (map first))] (into {}
(when (seq filtered-props) (comp (filter known-property?)
(.warn js/console "Unknown properties: " (str/join ", " filtered-props )))) (map clean-att))
attrs))))
(into {} (comp (filter known-property?) (map map-fn)) attrs))))
(defn update-attr-ids (defn update-attr-ids
"Replaces the ids inside a property" "Replaces the ids inside a property"

27
frontend/src/debug.cljs
View file

@ -86,6 +86,9 @@
;; Show html text ;; Show html text
:html-text :html-text
;; Show history overlay
:history-overlay
}) })
;; These events are excluded when we activate the :events flag ;; These events are excluded when we activate the :events flag
@ -99,10 +102,26 @@
(defonce ^:dynamic *debug* (atom #{#_:events})) (defonce ^:dynamic *debug* (atom #{#_:events}))
(defn debug-all! [] (reset! *debug* debug-options)) (defn debug-all! []
(defn debug-none! [] (reset! *debug* #{})) (reset! *debug* debug-options)
(defn debug! [option] (swap! *debug* conj option)) (js* "app.main.reinit()"))
(defn -debug! [option] (swap! *debug* disj option))
(defn debug-none! []
(reset! *debug* #{})
(js* "app.main.reinit()"))
(defn debug! [option]
(swap! *debug* conj option)
(when (= :events option)
(set! st/*debug-events* true))
(js* "app.main.reinit()"))
(defn -debug! [option]
(swap! *debug* disj option)
(when (= :events option)
(set! st/*debug-events* false))
(js* "app.main.reinit()"))
(defn ^:export ^boolean debug? (defn ^:export ^boolean debug?
[option] [option]