mirror of
https://github.com/penpot/penpot.git
synced 2025-07-26 00:37:17 +02:00
Merge remote-tracking branch 'origin/staging' into develop
This commit is contained in:
Alejandro Alonso
commit
47c983ed88
25 changed files with 343 additions and 148 deletions
|
|
@ -55,6 +55,7 @@
|
|||
- 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 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
|
||||
|
||||
|
|
|
|||
|
|
@ -378,14 +378,16 @@
|
|||
|
||||
add-undo-change-parent
|
||||
(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
|
||||
change-set
|
||||
{:type :mov-objects
|
||||
:page-id page-id
|
||||
:parent-id (:parent-id shape)
|
||||
:shapes [id]
|
||||
:index (cph/get-position-on-parent objects id)
|
||||
:after-shape prev-sibling
|
||||
:index 0
|
||||
:ignore-touched true})))]
|
||||
|
||||
(-> changes
|
||||
|
|
|
|||
3
frontend/resources/images/icons/bug.svg
Normal file
3
frontend/resources/images/icons/bug.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -360,12 +360,16 @@ button.collapse-sidebar {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.shortcuts {
|
||||
.shortcuts-header {
|
||||
.shortcuts,
|
||||
.debug-panel {
|
||||
.shortcuts-header,
|
||||
.debug-panel-header {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
background-color: $color-gray-60;
|
||||
.shortcuts-title {
|
||||
|
||||
.shortcuts-title,
|
||||
.debug-panel-title {
|
||||
color: $color-white;
|
||||
font-size: $fs12;
|
||||
display: flex;
|
||||
|
|
@ -379,7 +383,9 @@ button.collapse-sidebar {
|
|||
fill: $color-gray-20;
|
||||
}
|
||||
}
|
||||
.shortcuts-close-button {
|
||||
|
||||
.shortcuts-close-button,
|
||||
.debug-panel-close-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
|
|
@ -547,3 +553,35 @@ button.collapse-sidebar {
|
|||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
(init-ui)
|
||||
(st/emit! (initialize)))
|
||||
|
||||
(defn reinit
|
||||
(defn ^:export reinit
|
||||
[]
|
||||
(mf/unmount (dom/get-element "app"))
|
||||
(mf/unmount (dom/get-element "modal"))
|
||||
|
|
|
|||
|
|
@ -8,11 +8,13 @@
|
|||
(:require
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.geom.shapes :as gsh]
|
||||
[app.common.geom.shapes.flex-layout :as gsl]
|
||||
[app.common.math :as mth]
|
||||
[app.common.pages.helpers :as cph]
|
||||
[app.common.types.modifiers :as ctm]
|
||||
[app.common.types.shape :as cts]
|
||||
[app.common.types.shape-tree :as ctst]
|
||||
[app.common.types.shape.layout :as ctl]
|
||||
[app.common.uuid :as uuid]
|
||||
[app.main.data.workspace.drawing.common :as common]
|
||||
[app.main.data.workspace.state-helpers :as wsh]
|
||||
|
|
@ -76,7 +78,10 @@
|
|||
objects (wsh/lookup-page-objects state page-id)
|
||||
focus (:workspace-focus-selected state)
|
||||
zoom (get-in state [:workspace-local :zoom] 1)
|
||||
|
||||
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 (-> shape
|
||||
|
|
@ -89,6 +94,10 @@
|
|||
(assoc :fills [] :hide-in-viewer true))
|
||||
|
||||
(assoc :frame-id fid)
|
||||
|
||||
(cond-> (some? drop-index)
|
||||
(with-meta {:index drop-index}))
|
||||
|
||||
(assoc :initialized? true)
|
||||
(assoc :click-draw? true))]
|
||||
(rx/concat
|
||||
|
|
|
|||
|
|
@ -6,9 +6,12 @@
|
|||
|
||||
(ns app.main.data.workspace.drawing.curve
|
||||
(:require
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.geom.shapes :as gsh]
|
||||
[app.common.geom.shapes.flex-layout :as gsl]
|
||||
[app.common.geom.shapes.path :as gsp]
|
||||
[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.state-helpers :as wsh]
|
||||
[app.main.streams :as ms]
|
||||
|
|
@ -46,10 +49,14 @@
|
|||
|
||||
(let [objects (wsh/lookup-page-objects state)
|
||||
content (get-in state [:workspace-drawing :object :content] [])
|
||||
position (get-in content [0 :params] nil)
|
||||
frame-id (ctst/top-nested-frame objects position)]
|
||||
position (gpt/point (get-in content [0 :params] nil))
|
||||
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
|
||||
(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}]
|
||||
(let [content (gsp/segments->content segments)
|
||||
|
|
|
|||
|
|
@ -24,9 +24,8 @@
|
|||
[objects selected]
|
||||
(->> selected
|
||||
(cph/order-by-indexed-shapes objects)
|
||||
(map #(get objects %))
|
||||
(map #(assoc % ::index (cph/get-position-on-parent objects (:id %))))
|
||||
(sort-by ::index)))
|
||||
reverse
|
||||
(map #(get objects %))))
|
||||
|
||||
(defn- get-empty-groups-after-group-creation
|
||||
"An auxiliary function that finds and returns a set of ids that
|
||||
|
|
@ -78,7 +77,11 @@
|
|||
(ctst/generate-unique-name base-name)))
|
||||
|
||||
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)
|
||||
(cts/setup-shape selrect)
|
||||
(assoc :shapes (mapv :id shapes)
|
||||
|
|
@ -115,7 +118,8 @@
|
|||
(->> (:shapes parent)
|
||||
(map-indexed vector)
|
||||
(filter #(#{(:id group)} (second %)))
|
||||
(ffirst))
|
||||
(ffirst)
|
||||
inc)
|
||||
|
||||
;; Shapes that are in a component (including root) must be detached,
|
||||
;; because cannot be easyly synchronized back to the main component.
|
||||
|
|
@ -134,7 +138,9 @@
|
|||
(cph/order-by-indexed-shapes objects)
|
||||
(mapv #(get objects %)))
|
||||
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/with-objects objects)
|
||||
|
|
|
|||
|
|
@ -7,11 +7,13 @@
|
|||
(ns app.main.data.workspace.path.drawing
|
||||
(:require
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.geom.shapes.flex-layout :as gsl]
|
||||
[app.common.geom.shapes.path :as upg]
|
||||
[app.common.path.commands :as upc]
|
||||
[app.common.path.shapes-to-path :as upsp]
|
||||
[app.common.spec :as us]
|
||||
[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.drawing.common :as dwdc]
|
||||
[app.main.data.workspace.edition :as dwe]
|
||||
|
|
@ -257,10 +259,14 @@
|
|||
(update [_ state]
|
||||
(let [objects (wsh/lookup-page-objects state)
|
||||
content (get-in state [:workspace-drawing :object :content] [])
|
||||
position (get-in content [0 :params] nil)
|
||||
frame-id (ctst/top-nested-frame objects position)]
|
||||
position (gpt/point (get-in content [0 :params] nil))
|
||||
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
|
||||
(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]
|
||||
(ptk/reify ::handle-new-shape-result
|
||||
|
|
|
|||
|
|
@ -298,7 +298,10 @@
|
|||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(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))]
|
||||
(rx/concat
|
||||
(rx/of (undo/start-path-undo))
|
||||
|
|
|
|||
|
|
@ -82,11 +82,13 @@
|
|||
[ids]
|
||||
(ptk/reify ::update-layout-positions
|
||||
ptk/WatchEvent
|
||||
(watch [_ _ _]
|
||||
(watch [_ state _]
|
||||
(let [objects (wsh/lookup-page-objects state)
|
||||
ids (->> ids (filter #(contains? objects %)))]
|
||||
(if (d/not-empty? ids)
|
||||
(let [modif-tree (dwm/create-modif-tree ids (ctm/reflow-modifiers))]
|
||||
(rx/of (dwm/apply-modifiers {:modifiers modif-tree})))
|
||||
(rx/empty)))))
|
||||
(rx/empty))))))
|
||||
|
||||
(defn initialize
|
||||
[]
|
||||
|
|
|
|||
|
|
@ -96,11 +96,12 @@
|
|||
objects
|
||||
selected)
|
||||
|
||||
index (:index (meta attrs))
|
||||
changes (-> (pcb/empty-changes it page-id)
|
||||
(pcb/with-objects objects)
|
||||
(cond-> (some? (:index (meta attrs)))
|
||||
(pcb/add-object shape {:index (:index (meta attrs))}))
|
||||
(cond-> (nil? (:index (meta attrs)))
|
||||
(cond-> (some? index)
|
||||
(pcb/add-object shape {:index index}))
|
||||
(cond-> (nil? index)
|
||||
(pcb/add-object shape))
|
||||
(cond-> (some? (:parent-id attrs))
|
||||
(pcb/change-parent (:parent-id attrs) [shape])))
|
||||
|
|
|
|||
|
|
@ -23,22 +23,29 @@
|
|||
[type data]
|
||||
(ptk/data-event type data))
|
||||
|
||||
;;(def debug-exclude-events
|
||||
;; #{: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})
|
||||
;; (def ^:dynamic *debug-events* false)
|
||||
(def on-event identity)
|
||||
|
||||
(def ^:dynamic *debug-events* false)
|
||||
|
||||
;; Only created in development build
|
||||
(when *assert*
|
||||
(def debug-exclude-events
|
||||
#{: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
|
||||
(ptk/store {:resolve ptk/resolve
|
||||
;;: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)) )))
|
||||
:on-event on-event
|
||||
:on-error (fn [e] (@on-error e))}))
|
||||
|
||||
(defonce stream
|
||||
|
|
|
|||
|
|
@ -78,6 +78,7 @@
|
|||
(def bool-intersection (icon-xref :boolean-intersection))
|
||||
(def bool-union (icon-xref :boolean-union))
|
||||
(def box (icon-xref :box))
|
||||
(def bug (icon-xref :bug))
|
||||
(def chain (icon-xref :chain))
|
||||
(def chat (icon-xref :chat))
|
||||
(def checkbox-checked (icon-xref :checkbox-checked))
|
||||
|
|
|
|||
|
|
@ -146,6 +146,8 @@
|
|||
|
||||
(defn extract-svg-attrs
|
||||
[render-id svg-defs svg-attrs]
|
||||
(if (and (empty? svg-defs) (empty? svg-attrs))
|
||||
[nil nil]
|
||||
(let [replace-id (fn [id]
|
||||
(if (contains? svg-defs id)
|
||||
(str render-id "-" id)
|
||||
|
|
@ -157,7 +159,7 @@
|
|||
|
||||
attrs (-> svg-attrs (dissoc :style) (clj->js))
|
||||
styles (-> svg-attrs (:style {}) (clj->js))]
|
||||
[attrs styles]))
|
||||
[attrs styles])))
|
||||
|
||||
(defn add-style-attrs
|
||||
([props shape]
|
||||
|
|
@ -212,9 +214,12 @@
|
|||
(obj/set! "style" styles)))))
|
||||
|
||||
(defn extract-style-attrs
|
||||
[shape]
|
||||
([shape]
|
||||
(-> (obj/create)
|
||||
(add-style-attrs shape)))
|
||||
([shape render-id]
|
||||
(-> (obj/create)
|
||||
(add-style-attrs shape render-id))))
|
||||
|
||||
(defn extract-fill-attrs
|
||||
[fill-data render-id index type]
|
||||
|
|
|
|||
|
|
@ -53,7 +53,10 @@
|
|||
|
||||
{:keys [x y width height show-content]} 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!
|
||||
#js {:x x
|
||||
:y y
|
||||
|
|
@ -61,9 +64,7 @@
|
|||
:width width
|
||||
:height height
|
||||
:className "frame-background"}))
|
||||
path? (some? (.-d props))
|
||||
render-id (mf/use-ctx muc/render-id)]
|
||||
|
||||
path? (some? (.-d props))]
|
||||
[:*
|
||||
[:g {:clip-path (when (not show-content) (frame-clip-url shape render-id))}
|
||||
[:& frame-clip-def {:shape shape :render-id render-id}]
|
||||
|
|
|
|||
|
|
@ -177,6 +177,19 @@
|
|||
:on-click (fn []
|
||||
(let [is-sidebar-closed? (contains? layout :collapse-left-sidebar)]
|
||||
(ts/schedule 300 #(st/emit! (when is-sidebar-closed? (dw/toggle-layout-flag :collapse-left-sidebar))
|
||||
(dw/remove-layout-flag :debug-panel)
|
||||
(-> (dw/toggle-layout-flag :shortcuts)
|
||||
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))))}
|
||||
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])]]]))
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.comments :refer [comments-sidebar]]
|
||||
[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.layers :refer [layers-toolbox]]
|
||||
[app.main.ui.workspace.sidebar.options :refer [options-toolbox]]
|
||||
|
|
@ -34,6 +35,7 @@
|
|||
section (cond (or mode-inspect? (contains? layout :layers)) :layers
|
||||
(contains? layout :assets) :assets)
|
||||
shortcuts? (contains? layout :shortcuts)
|
||||
show-debug? (contains? layout :debug-panel)
|
||||
|
||||
{: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)
|
||||
|
|
@ -53,9 +55,14 @@
|
|||
:on-mouse-move on-mouse-move}]
|
||||
|
||||
[:div.settings-bar-inside
|
||||
|
||||
[:* (if shortcuts?
|
||||
(cond
|
||||
shortcuts?
|
||||
[:& shortcuts-container]
|
||||
|
||||
show-debug?
|
||||
[:& debug-panel]
|
||||
|
||||
:else
|
||||
[:*
|
||||
[:button.collapse-sidebar
|
||||
{:on-click handle-collapse
|
||||
|
|
@ -72,7 +79,7 @@
|
|||
|
||||
(when-not mode-inspect?
|
||||
[:& tab-element {:id :assets :title (tr "workspace.toolbar.assets")}
|
||||
[:& assets-toolbox]])]])]]]))
|
||||
[:& assets-toolbox]])]])]]))
|
||||
|
||||
;; --- Right Sidebar (Component)
|
||||
|
||||
|
|
|
|||
51
frontend/src/app/main/ui/workspace/sidebar/debug.cljs
Normal file
51
frontend/src/app/main/ui/workspace/sidebar/debug.cljs
Normal 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)]])]]]))
|
||||
|
|
@ -214,7 +214,7 @@
|
|||
(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-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-shortcuts node-editing? drawing-path?)
|
||||
(hooks/setup-active-frames base-objects hover-ids selected active-frames zoom transform vbox)
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@
|
|||
(not))))
|
||||
|
||||
(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
|
||||
zoom-ref (mf/use-ref zoom)
|
||||
mod-ref (mf/use-ref @mod?)
|
||||
|
|
@ -192,7 +192,7 @@
|
|||
|
||||
(hooks/use-stream
|
||||
over-shapes-stream
|
||||
(mf/deps page-id objects)
|
||||
(mf/deps page-id objects show-measures?)
|
||||
(fn [ids]
|
||||
(let [selected (mf/ref-val selected-ref)
|
||||
focus (mf/ref-val focus-ref)
|
||||
|
|
@ -212,15 +212,20 @@
|
|||
(and (cph/root-frame? obj) (d/not-empty? (:shapes obj))))
|
||||
|
||||
;; Set with the elements to remove from the hover list
|
||||
remove-id?
|
||||
(cond-> selected-with-parents
|
||||
(not mod?)
|
||||
(into (filter #(or (root-frame-with-data? %)
|
||||
(group-empty-space? % objects ids)))
|
||||
ids)
|
||||
|
||||
remove-id-xf
|
||||
(cond
|
||||
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
|
||||
(->> ids
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
(ns app.util.path.format
|
||||
(:require
|
||||
[app.common.math :as mth]
|
||||
[app.common.path.commands :as upc]
|
||||
[app.common.path.subpaths :refer [pt=]]
|
||||
[app.util.array :as arr]))
|
||||
|
|
@ -16,48 +15,48 @@
|
|||
(defn- join-params
|
||||
([a]
|
||||
(js* "\"\"+~{}"
|
||||
(mth/precision a path-precision)))
|
||||
(.toFixed a path-precision)))
|
||||
([a b]
|
||||
(js* "\"\"+~{}+\",\"+~{}"
|
||||
(mth/precision a path-precision)
|
||||
(mth/precision b path-precision)))
|
||||
(.toFixed a path-precision)
|
||||
(.toFixed b path-precision)))
|
||||
([a b c]
|
||||
(js* "\"\"+~{}+\",\"+~{}+\",\"+~{}"
|
||||
(mth/precision a path-precision)
|
||||
(mth/precision b path-precision)
|
||||
(mth/precision c path-precision)))
|
||||
(.toFixed a path-precision)
|
||||
(.toFixed b path-precision)
|
||||
(.toFixed c path-precision)))
|
||||
([a b c d]
|
||||
(js* "\"\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}"
|
||||
(mth/precision a path-precision)
|
||||
(mth/precision b path-precision)
|
||||
(mth/precision c path-precision)
|
||||
(mth/precision d path-precision)
|
||||
(.toFixed a path-precision)
|
||||
(.toFixed b path-precision)
|
||||
(.toFixed c path-precision)
|
||||
(.toFixed d path-precision)
|
||||
))
|
||||
([a b c d e]
|
||||
(js* "\"\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}"
|
||||
(mth/precision a path-precision)
|
||||
(mth/precision b path-precision)
|
||||
(mth/precision c path-precision)
|
||||
(mth/precision d path-precision)
|
||||
(mth/precision e path-precision)))
|
||||
(.toFixed a path-precision)
|
||||
(.toFixed b path-precision)
|
||||
(.toFixed c path-precision)
|
||||
(.toFixed d path-precision)
|
||||
(.toFixed e path-precision)))
|
||||
([a b c d e f]
|
||||
(js* "\"\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}"
|
||||
(mth/precision a path-precision)
|
||||
(mth/precision b path-precision)
|
||||
(mth/precision c path-precision)
|
||||
(mth/precision d path-precision)
|
||||
(mth/precision e path-precision)
|
||||
(mth/precision f path-precision)
|
||||
(.toFixed a path-precision)
|
||||
(.toFixed b path-precision)
|
||||
(.toFixed c path-precision)
|
||||
(.toFixed d path-precision)
|
||||
(.toFixed e path-precision)
|
||||
(.toFixed f path-precision)
|
||||
))
|
||||
([a b c d e f g]
|
||||
(js* "\"\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}"
|
||||
(mth/precision a path-precision)
|
||||
(mth/precision b path-precision)
|
||||
(mth/precision c path-precision)
|
||||
(mth/precision d path-precision)
|
||||
(mth/precision e path-precision)
|
||||
(mth/precision f path-precision)
|
||||
(mth/precision g path-precision))))
|
||||
(.toFixed a path-precision)
|
||||
(.toFixed b path-precision)
|
||||
(.toFixed c path-precision)
|
||||
(.toFixed d path-precision)
|
||||
(.toFixed e path-precision)
|
||||
(.toFixed f path-precision)
|
||||
(.toFixed g path-precision))))
|
||||
|
||||
(defn- translate-params
|
||||
[command {:keys [x y] :as params}]
|
||||
|
|
|
|||
|
|
@ -42,3 +42,8 @@
|
|||
(let [st (str/trim (str/lower search-term))
|
||||
nm (str/trim (str/lower name))]
|
||||
(str/includes? nm st))))
|
||||
|
||||
(defn camelize
|
||||
[str]
|
||||
;; str.replace(":", "-").replace(/-./g, x=>x[1].toUpperCase())
|
||||
(js* "~{}.replace(\":\", \"-\").replace(/-./g, x=>x[1].toUpperCase())", str))
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
[app.common.geom.shapes :as gsh]
|
||||
[app.common.math :as mth]
|
||||
[app.common.uuid :as uuid]
|
||||
[app.util.strings :as ustr]
|
||||
[cuerdas.core :as str]))
|
||||
|
||||
;; Regex for XML ids per Spec
|
||||
|
|
@ -566,19 +567,20 @@
|
|||
|
||||
(defn clean-attrs
|
||||
"Transforms attributes to their react equivalent"
|
||||
([attrs] (clean-attrs attrs true))
|
||||
([attrs]
|
||||
(clean-attrs attrs true))
|
||||
|
||||
([attrs whitelist?]
|
||||
(letfn [(known-property? [[key _]]
|
||||
(or (not whitelist?)
|
||||
(contains? svg-attr-list key )
|
||||
(contains? svg-present-list key )))
|
||||
(contains? svg-attr-list key)
|
||||
(contains? svg-present-list key)))
|
||||
|
||||
(transform-key [key]
|
||||
(transform-att [key]
|
||||
(if (contains? non-react-props key)
|
||||
key
|
||||
(-> (d/name key)
|
||||
(str/replace ":" "-")
|
||||
(str/camel)
|
||||
(ustr/camelize)
|
||||
(keyword))))
|
||||
|
||||
(format-styles [style-str]
|
||||
|
|
@ -588,25 +590,27 @@
|
|||
(group-by first)
|
||||
(map (fn [[key val]]
|
||||
(vector
|
||||
(transform-key key)
|
||||
(transform-att key)
|
||||
(second (first val)))))
|
||||
(into {})))
|
||||
|
||||
(map-fn [[key val]]
|
||||
(let [key (keyword key)]
|
||||
(clean-att [[att val]]
|
||||
(let [att (keyword att)]
|
||||
(cond
|
||||
(= key :class) [:className val]
|
||||
(and (= key :style) (string? val)) [key (format-styles val)]
|
||||
(and (= key :style) (map? val)) [key (clean-attrs val false)]
|
||||
:else (vector (transform-key key) val))))
|
||||
(= att :class) [:className val]
|
||||
(and (= att :style) (string? val)) [att (format-styles val)]
|
||||
(and (= att :style) (map? val)) [att (clean-attrs val false)]
|
||||
:else [(transform-att att) val])))]
|
||||
|
||||
]
|
||||
|
||||
(let [filtered-props (->> attrs (remove known-property?) (map first))]
|
||||
;; 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 ))))
|
||||
|
||||
(into {} (comp (filter known-property?) (map map-fn)) attrs))))
|
||||
(into {}
|
||||
(comp (filter known-property?)
|
||||
(map clean-att))
|
||||
attrs))))
|
||||
|
||||
(defn update-attr-ids
|
||||
"Replaces the ids inside a property"
|
||||
|
|
|
|||
|
|
@ -86,6 +86,9 @@
|
|||
|
||||
;; Show html text
|
||||
:html-text
|
||||
|
||||
;; Show history overlay
|
||||
:history-overlay
|
||||
})
|
||||
|
||||
;; These events are excluded when we activate the :events flag
|
||||
|
|
@ -99,10 +102,26 @@
|
|||
|
||||
(defonce ^:dynamic *debug* (atom #{#_:events}))
|
||||
|
||||
(defn debug-all! [] (reset! *debug* debug-options))
|
||||
(defn debug-none! [] (reset! *debug* #{}))
|
||||
(defn debug! [option] (swap! *debug* conj option))
|
||||
(defn -debug! [option] (swap! *debug* disj option))
|
||||
(defn debug-all! []
|
||||
(reset! *debug* debug-options)
|
||||
(js* "app.main.reinit()"))
|
||||
|
||||
(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?
|
||||
[option]
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue