Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-21 04:01:24 -05:00
Code Issues Activity

🎉 Component swap

Browse source
This commit is contained in:
Pablo Alba 2023-09-28 12:47:01 +02:00 • committed by Andrés Moya
parent 917e6425d1
commit fac72a5874
26 changed files with 837 additions and 348 deletions

8
common/src/app/common/pages/changes.cljc
View file

@ -463,20 +463,22 @@
(d/update-in-when data [:components component-id :objects] reg-objects))))
(defmethod process-change :mov-objects
[data {:keys [parent-id shapes index page-id component-id ignore-touched after-shape]}]
[data {:keys [parent-id shapes index page-id component-id ignore-touched after-shape component-swap]}]
(letfn [(calculate-invalid-targets [objects shape-id]
(let [reduce-fn #(into %1 (calculate-invalid-targets objects %2))]
(->> (get-in objects [shape-id :shapes])
(reduce reduce-fn #{shape-id}))))
;; Avoid placing a shape as a direct or indirect child of itself,
;; or inside its main component if it's in a copy.
;; or inside its main component if it's in a copy,
;; or inside a copy
(is-valid-move? [objects shape-id]
(let [invalid-targets (calculate-invalid-targets objects shape-id)]
(and (contains? objects shape-id)
(not (invalid-targets parent-id))
(not (cph/components-nesting-loop? objects shape-id parent-id))
#_(cph/valid-frame-target? objects parent-id shape-id))))
(or component-swap
(not (ctk/in-component-copy? (get objects parent-id))))))) ;; We don't want to change the structure of component copies
(insert-items [prev-shapes index shapes]
(let [prev-shapes (or prev-shapes [])]

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

@ -308,9 +308,12 @@
(defn change-parent
([changes parent-id shapes]
(change-parent changes parent-id shapes nil))
(change-parent changes parent-id shapes nil {}))
([changes parent-id shapes index]
(change-parent changes parent-id shapes index {}))
([changes parent-id shapes index options]
(assert-page-id! changes)
(assert-objects! changes)
(let [objects (lookup-objects changes)
@ -323,7 +326,9 @@
:shapes (->> shapes reverse (mapv :id))}
(some? index)
(assoc :index index))
(assoc :index index)
(:component-swap options)
(assoc :component-swap true))
mk-undo-change
(fn [undo-changes shape]

8
common/src/app/common/pages/helpers.cljc
View file

@ -531,6 +531,14 @@
(merge-path other-path item))))
[other-path last-item false]))))
(defn prev-path
"Remove the last item of the path."
[path]
(let [split (split-path path)]
(if (= 1 (count split))
""
(join-path (butlast split)))))
(defn compact-name
"Append the first item of the path and the name."
[path name]

9
common/src/app/common/types/component.cljc
View file

@ -134,12 +134,19 @@
[shape]
(some? (:shape-ref shape)))
(defn in-component-copy-not-head?
"Check if the shape is inside a component non-main instance and
is not the head of a subinstance."
[shape]
(and (some? (:shape-ref shape))
(nil? (:component-id shape))))
(defn in-component-copy-not-root?
"Check if the shape is inside a component non-main instance and
is not the root shape."
[shape]
(and (some? (:shape-ref shape))
(nil? (:component-id shape))))
(nil? (:component-root shape))))
(defn main-instance-of?
"Check if this shape is the root of the main instance of the given component."

19
common/src/app/common/types/container.cljc
View file

@ -344,3 +344,22 @@
(if (= parent-id uuid/zero)
current-top
(get-top-instance objects parent current-top))))
(defn get-first-not-copy-parent
"Go trough the parents until we find a shape that is not a copy of a component."
[objects id]
(let [shape (get objects id)]
(if (ctk/in-component-copy? shape)
(get-first-not-copy-parent objects (:parent-id shape))
shape)))
(defn has-any-copy-parent?
"Check if the shape has any parent that is a copy of a component."
[objects shape]
(let [parent (get objects (:parent-id shape))]
(if (nil? parent)
false
(if (ctk/in-component-copy? parent)
true
(has-any-copy-parent? objects (:parent-id shape))))))

154
frontend/resources/styles/main/partials/sidebar-element-options.scss
View file

@ -73,6 +73,18 @@
width: 100%;
align-items: center;
justify-content: space-between;
svg {
height: 8px;
width: 8px;
fill: $color-gray-20;
margin-right: 1rem;
transform: rotate(180deg);
}
&.back {
cursor: pointer;
}
}
}
@ -585,6 +597,26 @@
}
}
}
&.copy {
flex-wrap: wrap;
border-radius: 8px;
border: 1px solid $color-gray-60;
padding: 0.5rem;
cursor: pointer;
.component-name {
width: 80%;
color: $color-white;
}
.component-parent-name {
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
padding-left: calc(0.5rem + 16px);
color: $color-gray-40;
}
}
}
.grid-option .custom-select {
@ -2554,3 +2586,125 @@
}
}
}
.component-swap {
.search-block {
margin: 0.7rem 0.5rem 0.2rem 0.2rem;
height: 2.1rem;
width: 100%;
}
svg {
fill: $color-gray-20;
height: 0.7rem;
width: 0.7rem;
cursor: pointer;
}
.search-block {
border: 1px solid $color-gray-30;
margin: 0.6rem 0.5rem 0.2rem 0.2rem;
padding: $size-1 $size-2;
display: flex;
align-items: center;
&:hover {
border-color: $color-gray-20;
}
&:focus-within {
border-color: $color-primary;
}
& .search-input {
background-color: $color-gray-50;
border: none;
color: $color-gray-10;
font-size: $fs12;
margin: 0;
padding: 0;
flex-grow: 1;
&:focus {
color: lighten($color-gray-10, 8%);
outline: none;
}
}
& .search-icon {
display: flex;
align-items: center;
svg {
fill: $color-gray-30;
height: 16px;
width: 16px;
}
&.close {
transform: rotate(45deg);
cursor: pointer;
}
}
}
.component-path {
display: flex;
margin: 0.4rem 0 0 0.4rem;
cursor: pointer;
svg {
height: 8px;
width: 8px;
margin-right: 0.5rem;
transform: rotate(180deg);
}
}
.component-list {
margin: 0.7rem 0.5rem 0.5rem 0.5rem;
}
.component-item {
display: flex;
align-items: center;
margin-bottom: 0.5rem;
cursor: pointer;
svg {
background-color: $color-canvas;
border-radius: $br4;
border: 2px solid transparent;
height: 24px;
width: 24px;
margin-right: $size-2;
}
.selected {
color: $color-primary;
}
&:hover {
color: $color-primary;
}
&.disabled {
cursor: auto;
color: $color-gray-30;
}
}
.component-group {
display: flex;
align-items: center;
margin-bottom: 0.5rem;
justify-content: space-between;
cursor: pointer;
height: 24px;
svg {
height: 8px;
width: 8px;
}
&:hover {
color: $color-primary;
}
}
}

9
frontend/src/app/main/data/workspace.cljs
View file

@ -921,7 +921,7 @@
component-shape (ctn/get-component-shape objects shape)
component-shape-parent (ctn/get-component-shape objects parent)
detach? (and (ctk/in-component-copy-not-root? shape)
detach? (and (ctk/in-component-copy-not-head? shape)
(not= (:id component-shape)
(:id component-shape-parent)))
deroot? (and (ctk/instance-root? shape)
@ -1834,6 +1834,11 @@
;; Calculate position for the pasted elements
[frame-id parent-id delta index] (calculate-paste-position state mouse-pos in-viewport?)
;; We don't want to change the structure of component copies
;; If the parent-id or the frame-id are component-copies, we need to get the first not copy parent
parent-id (:id (ctn/get-first-not-copy-parent page-objects parent-id))
frame-id (:id (ctn/get-first-not-copy-parent page-objects frame-id))
process-shape
(fn [_ shape]
(let [parent (get page-objects parent-id)
@ -1841,7 +1846,7 @@
component-shape-parent (ctn/get-component-shape page-objects parent)
;; if foreign instance, or a shape belonging to another component, detach the shape
detach? (or (foreign-instance? shape paste-objects state)
(and (ctk/in-component-copy-not-root? shape)
(and (ctk/in-component-copy-not-head? shape)
(not= (:id component-shape)
(:id component-shape-parent))))
assign-shapes? (and (or (cph/group-shape? shape)

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

@ -101,7 +101,7 @@
;; Shapes that are in a component, but are not root, must be detached,
;; because they will be now children of a non instance group.
shapes-to-detach (filter ctk/in-component-copy-not-root? shapes)
shapes-to-detach (filter ctk/in-component-copy-not-head? shapes)
;; Look at the `get-empty-groups-after-group-creation`
;; docstring to understand the real purpose of this code

52
frontend/src/app/main/data/workspace/libraries.cljs
View file

@ -32,6 +32,7 @@
[app.main.data.workspace.notifications :as-alias dwn]
[app.main.data.workspace.selection :as dws]
[app.main.data.workspace.shapes :as dwsh]
[app.main.data.workspace.specialized-panel :as dwsp]
[app.main.data.workspace.state-helpers :as wsh]
[app.main.data.workspace.thumbnails :as dwt]
[app.main.data.workspace.undo :as dwu]
@ -744,6 +745,57 @@
(rx/map #(update-component-sync (:id %) file-id (uuid/next)) (rx/from shapes))
(rx/of (dwu/commit-undo-transaction undo-id)))))))
(defn- find-shape-index
[objects id shape-id]
(let [object (get objects id)]
(when object
(let [shapes (:shapes object)]
(or (->> shapes
(map-indexed (fn [index shape] [shape index]))
(filter #(= shape-id (first %)))
first
second)
0)))))
(defn component-swap
"Swaps a component with another one"
[shape file-id id-new-component]
(dm/assert! (uuid? id-new-component))
(dm/assert! (uuid? file-id))
(ptk/reify ::component-swap
ptk/WatchEvent
(watch [it state _]
(let [page (wsh/lookup-page state)
libraries (wsh/get-libraries state)
objects (:objects page)
index (find-shape-index objects (:parent-id shape) (:id shape))
position (gpt/point (:x shape) (:y shape))
changes (-> (pcb/empty-changes it (:id page))
(pcb/with-objects objects))
[new-shape changes]
(dwlh/generate-instantiate-component changes
objects
file-id
id-new-component
position
page
libraries)
changes (pcb/change-parent changes (:parent-id shape) [new-shape] index {:component-swap true})
undo-id (js/Symbol)]
(rx/of (dwu/start-undo-transaction undo-id)
(dch/commit-changes changes)
(ptk/data-event :layout/update [(:id new-shape)])
(dws/select-shapes (d/ordered-set (:id new-shape)))
(dwsh/delete-shapes nil (d/ordered-set (:id shape)) {:component-swap true})
(dwu/commit-undo-transaction undo-id)
(dwsp/open-specialized-panel :component-swap [(assoc new-shape :parent-id (:parent-id shape))]))))))
(def valid-asset-types
#{:colors :components :typographies})

23
frontend/src/app/main/data/workspace/selection.cljs
View file

@ -123,7 +123,8 @@
(update [_ state]
(-> state
(update-in [:workspace-local :selected] d/toggle-selection id toggle?)
(assoc-in [:workspace-local :last-selected] id)))
(assoc-in [:workspace-local :last-selected] id)
(dissoc :specialized-panel)))
ptk/WatchEvent
(watch [_ state _]
@ -188,7 +189,8 @@
(update [_ state]
(-> state
(update-in [:workspace-local :selected] disj id)
(update :workspace-local dissoc :last-selected)))))
(update :workspace-local dissoc :last-selected)
(dissoc :specialized-panel)))))
(defn shift-select-shapes
([id]
@ -206,7 +208,8 @@
(-> state
(assoc-in [:workspace-local :selected]
(set/union selection append-to-selection))
(update :workspace-local assoc :last-selected id)))))))
(update :workspace-local assoc :last-selected id)
(dissoc :specialized-panel)))))))
(defn select-shapes
[ids]
@ -223,7 +226,9 @@
ids (if (d/not-empty? focus)
(cpf/filter-not-focus objects focus ids)
ids)]
(assoc-in state [:workspace-local :selected] ids)))
(-> state
(assoc-in [:workspace-local :selected] ids)
(dissoc :specialized-panel))))
ptk/WatchEvent
(watch [_ state _]
@ -277,7 +282,9 @@
(update :workspace-local
#(-> %
(assoc :selected (d/ordered-set))
(dissoc :selected-frame))))))))
(dissoc :selected-frame)))
:allways
(dissoc :specialized-panel))))))
;; --- Select Shapes (By selrect)
@ -631,7 +638,11 @@
(when (or (not move-delta?) (nil? (get-in state [:workspace-local :transform])))
(let [page (wsh/lookup-page state)
objects (:objects page)
selected (wsh/lookup-selected state)]
selected (->> (wsh/lookup-selected state)
(map #(get objects %))
(remove #(ctk/in-component-copy-not-root? %)) ;; We don't want to change the structure of component copies
(map :id)
set)]
(when (seq selected)
(let [obj (get objects (first selected))
delta (if move-delta?

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

@ -12,7 +12,6 @@
[app.common.pages.changes-builder :as pcb]
[app.common.pages.helpers :as cph]
[app.common.schema :as sm]
[app.common.types.component :as ctk]
[app.common.types.container :as ctn]
[app.common.types.page :as ctp]
[app.common.types.shape :as cts]
@ -133,8 +132,9 @@
(declare update-shape-flags)
(defn delete-shapes
([ids] (delete-shapes nil ids))
([page-id ids]
([ids] (delete-shapes nil ids {}))
([page-id ids] (delete-shapes page-id ids {}))
([page-id ids options]
(dm/assert! (sm/set-of-uuid? ids))
(ptk/reify ::delete-shapes
ptk/WatchEvent
@ -154,11 +154,11 @@
;; Look for shapes that are inside a component copy, but are
;; not the root. In this case, they must not be deleted,
;; but hidden (to be able to recover them more easily).
(let [shape (get objects shape-id)
component-shape (ctn/get-component-shape objects shape)]
(and (ctk/in-component-copy? shape)
(not= shape component-shape)
(not (ctk/main-instance? component-shape)))))
;; Unless we are doing a component swap, in which case we want
;; to delete the old shape
(let [shape (get objects shape-id)]
(and (ctn/has-any-copy-parent? objects shape)
(not (:component-swap options)))))
[ids-to-delete ids-to-hide]
(if components-v2
@ -347,6 +347,11 @@
frame-id
(:parent-id base))
;; If the parent-id or the frame-id are component-copies, we need to get the first not copy parent
parent-id (:id (ctn/get-first-not-copy-parent objects parent-id)) ;; We don't want to change the structure of component copies
frame-id (:id (ctn/get-first-not-copy-parent objects frame-id))
shape (cts/setup-shape
(-> attrs
(assoc :type type)

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

@ -68,8 +68,9 @@
:cut {:tooltip (ds/meta "X")
:command (ds/c-mod "x")
:subsections [:edit]
:fn #(emit-when-no-readonly (dw/copy-selected)
(dw/delete-selected))}
:fn #(emit-when-no-readonly
(dw/copy-selected)
(dw/delete-selected))}
:paste {:tooltip (ds/meta "V")
:disabled true

31
frontend/src/app/main/data/workspace/specialized_panel.cljs Normal file
View file

@ -0,0 +1,31 @@
;; 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.data.workspace.specialized-panel
(:require
[beicon.core :as rx]
[potok.core :as ptk]))
(defn interrupt? [e] (= e :interrupt))
(def clear-specialized-panel
(ptk/reify ::clear-specialized-panel
ptk/UpdateEvent
(update [_ state]
(dissoc state :specialized-panel))))
(defn open-specialized-panel
[type shapes]
(ptk/reify ::open-specialized-panel
ptk/UpdateEvent
(update [_ state]
(assoc state :specialized-panel {:type type :shapes shapes}))
ptk/WatchEvent
(watch [_ _ stream]
(->> stream
(rx/filter interrupt?)
(rx/take 1)
(rx/map (constantly clear-specialized-panel))))))

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

@ -513,10 +513,11 @@
:else
[move-vector nil])
nesting-loop? (some #(cph/components-nesting-loop? objects (:id %) target-frame) shapes)]
nesting-loop? (some #(cph/components-nesting-loop? objects (:id %) target-frame) shapes)
is-component-copy? (ctk/in-component-copy? (get objects target-frame))]
(cond-> (dwm/create-modif-tree ids (ctm/move-modifiers move-vector))
(not nesting-loop?)
(and (not nesting-loop?) (not is-component-copy?))
(dwm/build-change-frame-modifiers objects selected target-frame drop-index cell-data)
:always
(dwm/set-modifiers false false {:snap-ignore-axis snap-ignore-axis}))))))
@ -820,7 +821,7 @@
shape-ids-to-detach
(reduce (fn [result shape]
(if (and (some? shape) (ctk/in-component-copy-not-root? shape))
(if (and (some? shape) (ctk/in-component-copy-not-head? shape))
(let [shape-component (ctn/get-component-shape objects shape)]
(if (= (:id frame-component) (:id shape-component))
result

3
frontend/src/app/main/refs.cljs
View file

@ -573,3 +573,6 @@
(defn workspace-preview-blend-by-id [id]
(l/derived (l/key id) workspace-preview-blend =))
(def specialized-panel
(l/derived :specialized-panel st/state))

7
frontend/src/app/main/ui/hooks.cljs
View file

@ -118,7 +118,9 @@
on-drag-start
(fn [event]
(if (or disabled (not draggable?))
(dom/prevent-default event)
(do
(dom/stop-propagation event)
(dom/prevent-default event))
(do
(dom/stop-propagation event)
(dnd/set-data! event data-type data)
@ -178,7 +180,8 @@
on-mount
(fn []
(let [dom (mf/ref-val ref)]
(.setAttribute dom "draggable" draggable?)
(.setAttribute dom "draggable" true) ;; In firefox it needs to be draggable for problems with event handling.
;; It will stop the drag operation in on-drag-start
;; Register all events in the (default) bubble mode, so that they
;; are captured by the most leaf item. The handler will stop

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

@ -444,7 +444,7 @@
has-component? (some true? (map #(ctk/instance-head? %) shapes))
is-component? (and single? (-> shapes first :component-id some?))
in-copy-not-root? (some true? (map #(ctk/in-component-copy-not-root? %) shapes))
in-copy-not-root? (some true? (map #(ctk/in-component-copy-not-head? %) shapes))
objects (deref refs/workspace-page-objects)
touched? (and single? (cph/component-touched? objects (:id (first shapes))))

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

@ -10,6 +10,8 @@
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.pages.helpers :as cph]
[app.common.types.component :as ctk]
[app.common.types.container :as ctn]
[app.common.types.shape.layout :as ctl]
[app.common.uuid :as uuid]
[app.main.data.workspace :as dw]
@ -145,10 +147,15 @@
(mf/use-fn
(mf/deps id index objects)
(fn [side _data]
(if (= side :center)
(st/emit! (dw/relocate-selected-shapes id 0))
(let [to-index (if (= side :top) (inc index) index)
parent-id (cph/get-parent-id objects id)]
(let [to-index (cond
(= side :center) 0
(= side :top) (inc index)
:else index)
parent-id (if (= side :center)
id
(cph/get-parent-id objects id))
parent (get objects parent-id)]
(when-not (ctk/in-component-copy? parent) ;; We don't want to change the structure of component copies
(st/emit! (dw/relocate-selected-shapes parent-id to-index))))))
on-hold
@ -176,7 +183,10 @@
:data {:id (:id item)
:index index
:name (:name item)}
:draggable? (and sortable? (not read-only?)))
:draggable? (and
sortable?
(not read-only?)
(not (ctn/has-any-copy-parent? objects item)))) ;; We don't want to change the structure of component copies
ref (mf/use-ref)
depth (+ depth 1)
@ -372,7 +382,7 @@
[:div.toggle-element {:class (when ^boolean hidden? "selected")
:title (if (:hidden item)
(tr "workspace.shape.menu.show")
(tr "workspace.shape.menu.hide"))
(tr "workspace.shape.menu.hide"))
:on-click toggle-visibility}
(if ^boolean hidden? i/eye-closed i/eye)]
[:div.block-element {:class (when ^boolean blocked? "selected")

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

@ -21,6 +21,7 @@
[app.main.ui.viewer.inspect.right-sidebar :as hrs]
[app.main.ui.workspace.sidebar.options.menus.align :refer [align-options]]
[app.main.ui.workspace.sidebar.options.menus.bool :refer [bool-options]]
[app.main.ui.workspace.sidebar.options.menus.component :refer [component-menu]]
[app.main.ui.workspace.sidebar.options.menus.exports :refer [exports-menu]]
[app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell]
[app.main.ui.workspace.sidebar.options.menus.interactions :refer [interactions-menu]]
@ -67,6 +68,13 @@
:page-id page-id
:file-id file-id}]]))
(mf/defc specialized-panel
{::mf/wrap [mf/memo]}
[{:keys [panel]}]
(when (= (:type panel) :component-swap)
[:& component-menu {:shape (first (:shapes panel)) :swap-opened? true}]))
(mf/defc options-content
{::mf/wrap [mf/memo]}
[{:keys [selected section shapes shapes-with-children page-id file-id on-change-section on-expand]}]
@ -76,6 +84,7 @@
shared-libs (mf/deref refs/workspace-libraries)
edition (mf/deref refs/selected-edition)
grid-edition (mf/deref refs/workspace-grid-edition)
sp-panel (mf/deref refs/specialized-panel)
selected-shapes (into [] (keep (d/getf objects)) selected)
first-selected-shape (first selected-shapes)
@ -116,6 +125,9 @@
{:ids [edition]
:values (get objects edition)}]
(not (nil? sp-panel))
[:& specialized-panel {:panel sp-panel}]
(d/not-empty? drawing)
[:& shape-options
{:shape (:object drawing)
@ -177,6 +189,10 @@
{:ids [edition]
:values (get objects edition)}]
sp-panel
[:& specialized-panel {:panel sp-panel}]
(d/not-empty? drawing)
[:& shape-options
{:shape (:object drawing)

175
frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
View file

@ -11,10 +11,13 @@
[app.common.types.component :as ctk]
[app.common.types.components-list :as ctkl]
[app.common.types.file :as ctf]
[app.common.uuid :as uuid]
[app.main.data.modal :as modal]
[app.main.data.workspace :as dw]
[app.main.data.workspace.libraries :as dwl]
[app.main.data.workspace.specialized-panel :as dwsp]
[app.main.refs :as refs]
[app.main.render :refer [component-svg]]
[app.main.store :as st]
[app.main.ui.components.context-menu :refer [context-menu]]
[app.main.ui.components.dropdown :refer [dropdown]]
@ -23,6 +26,7 @@
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd]
[cuerdas.core :as str]
[rumext.v2 :as mf]))
@ -144,9 +148,153 @@
(when (or @editing? creating?)
[:div.counter (str @size "/300")])]])))
(mf/defc component-swap
[{:keys [shapes] :as props}]
(let [shape (first shapes)
new-css-system (mf/use-ctx ctx/new-css-system)
current-file-id (mf/use-ctx ctx/current-file-id)
workspace-file (deref refs/workspace-file)
workspace-data (deref refs/workspace-data)
workspace-libraries (deref refs/workspace-libraries)
objects (deref refs/workspace-page-objects)
libraries (assoc workspace-libraries current-file-id (assoc workspace-file :data workspace-data))
filters* (mf/use-state
{:term ""
:file-id (:component-file shape)
:path (cph/prev-path (:name shape))})
filters (deref filters*)
components (-> (get-in libraries [(:file-id filters) :data :components])
vals)
components (if (str/empty? (:term filters))
components
(filter #(str/includes? (str/lower (:name %)) (str/lower (:term filters))) components))
groups (->> (map :path components)
(filter #(= (cph/prev-path (:path %)) (:path filters)))
(remove str/empty?)
distinct
(map #(hash-map :name %)))
components (filter #(= (:path %) (:path filters)) components)
items (->> (concat groups components)
(sort-by :name))
;; Get the ids of the components and its root-shapes that are parents of the current shape, to avoid loops
get-comps-ids (fn get-comps-ids [shape ids]
(if (uuid/zero? (:id shape))
ids
(let [ids (if (ctk/instance-head? shape)
(conj ids (:id shape) (:component-id shape))
ids)]
(get-comps-ids (get objects (:parent-id shape)) ids))))
parent-components (set (get-comps-ids (get objects (:parent-id shape)) []))
on-library-change
(mf/use-fn
(fn [event]
(let [value (or (-> (dom/get-target event)
(dom/get-value))
(as-> (dom/get-current-target event) $
(dom/get-attribute $ "data-test")))
value (uuid/uuid value)]
(swap! filters* assoc :file-id value :term "" :path ""))))
on-search-term-change
(mf/use-fn
(mf/deps new-css-system)
(fn [event]
;; NOTE: When old-css-system is removed this function will recibe value and event
;; Let won't be necessary any more
(let [value (if ^boolean new-css-system
event
(dom/get-target-val event))]
(swap! filters* assoc :term value))))
on-search-clear-click
(mf/use-fn #(swap! filters* assoc :term ""))
on-go-back
(mf/use-fn
(mf/deps (:path filters))
#(swap! filters* assoc :path (cph/prev-path (:path filters))))
on-enter-group
(mf/use-fn #(swap! filters* assoc :path %))
handle-key-down
(mf/use-fn
(fn [event]
(let [enter? (kbd/enter? event)
esc? (kbd/esc? event)
node (dom/event->target event)]
(when ^boolean enter? (dom/blur! node))
(when ^boolean esc? (dom/blur! node)))))]
[:div.component-swap
[:div.element-set-title
[:span (tr "workspace.options.component.swap")]]
[:div.component-swap-content
[:div.search-block
[:input.search-input
{:placeholder (str (tr "labels.search") " " (get-in libraries [(:file-id filters) :name]))
:type "text"
:value (:term filters)
:on-change on-search-term-change
:on-key-down handle-key-down}]
(if ^boolean (str/empty? (:term filters))
[:div.search-icon
i/search]
[:div.search-icon.close
{:on-click on-search-clear-click}
i/close])]
[:select.input-select {:value (:file-id filters)
:data-mousetrap-dont-stop true
:on-change on-library-change}
(for [library (vals libraries)]
[:option {:key (:id library) :value (:id library)} (:name library)])]
(when-not (str/empty? (:path filters))
[:div.component-path {:on-click on-go-back}
[:span i/arrow-slide]
[:span (-> (cph/split-path (:path filters))
last)]])
[:div.component-list
(for [item items]
(if (:id item)
(let [data (get-in libraries [(:file-id filters) :data])
container (ctf/get-component-page data item)
root-shape (ctf/get-component-root data item)
loop? (or (contains? parent-components (:main-instance-id item))
(contains? parent-components (:id item)))]
[:div.component-item
{:class (stl/css-case :disabled loop?)
:key (:id item)
:on-click #(when-not loop?
(st/emit!
(dwl/component-swap shape (:file-id filters) (:id item))))}
[:& component-svg {:root-shape root-shape
:objects (:objects container)}]
[:span.component-name
{:class (stl/css-case :selected (= (:id item) (:component-id shape)))}
(:name item)]])
[:div.component-group {:key (uuid/next) :on-click #(on-enter-group (:name item))}
[:span (:name item)]
[:span i/arrow-slide]]))]]]))
(mf/defc component-menu
[{:keys [ids values shape] :as props}]
(let [new-css-system (mf/use-ctx ctx/new-css-system)
[{:keys [shape swap-opened?] :as props}]
(let [[ids values] [[(:id shape)] (select-keys shape component-attrs)]
new-css-system (mf/use-ctx ctx/new-css-system)
current-file-id (mf/use-ctx ctx/current-file-id)
components-v2 (mf/use-ctx ctx/components-v2)
@ -171,6 +319,7 @@
main-instance? (if components-v2
(ctk/main-instance? values)
true)
can-swap? (and components-v2 (not main-instance?))
main-component? (:main-instance values)
lacks-annotation? (nil? (:annotation values))
@ -342,13 +491,20 @@
[:& component-annotation {:id id :values values :shape shape :component component}])])]
[:div.element-set
[:div.element-set-title
[:span (tr "workspace.options.component")]
[:div.element-set-title {:class (stl/css-case :back swap-opened?)
:on-click #(when swap-opened? (st/emit! :interrupt))}
[:div
(when swap-opened?
[:span
i/arrow-slide])
[:span (tr "workspace.options.component")]]
[:span (if main-instance?
(tr "workspace.options.component.main")
(tr "workspace.options.component.copy"))]]
[:div.element-set-content
[:div.row-flex.component-row
{:class (stl/css-case :copy can-swap?)
:on-click #(when can-swap? (st/emit! (dwsp/open-specialized-panel :component-swap [shape])))}
(if main-instance?
i/component
i/component-copy)
@ -391,7 +547,14 @@
[(tr "workspace.shape.menu.reset-overrides") do-reset-component])
(when can-update-main?
[(tr "workspace.shape.menu.update-main") do-update-remote-component])
[(tr "workspace.shape.menu.go-main") do-navigate-component-file]])))}]]]
[(tr "workspace.shape.menu.go-main") do-navigate-component-file]])))}]]
(when components-v2
(when can-swap?
[:div.component-parent-name
(cph/merge-path-item (:path component) (:name component))])]
(when swap-opened?
[:& component-swap {:shapes [shape]}])
(when (and (not swap-opened?) components-v2)
[:& component-annotation {:id id :values values :shape shape :component component}])]]))))

7
frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs
View file

@ -12,7 +12,7 @@
[app.main.ui.hooks :as hooks]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu]]
[app.main.ui.workspace.sidebar.options.menus.component :refer [component-attrs component-menu]]
[app.main.ui.workspace.sidebar.options.menus.component :refer [component-menu]]
[app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs-shape fill-menu]]
[app.main.ui.workspace.sidebar.options.menus.frame-grid :refer [frame-grid]]
@ -36,7 +36,6 @@
constraint-values (select-keys shape constraint-attrs)
layout-container-values (select-keys shape layout-container-flex-attrs)
layout-item-values (select-keys shape layout-item-attrs)
[comp-ids comp-values] [[(:id shape)] (select-keys shape component-attrs)]
ids (hooks/use-equal-memo ids)
@ -63,9 +62,7 @@
:values measure-values
:type type
:shape shape}]
[:& component-menu {:ids comp-ids
:values comp-values
:shape shape}]
[:& component-menu {:shape shape}]
(when (or (not is-layout-child?) is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])

5
frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs
View file

@ -14,7 +14,7 @@
[app.main.ui.hooks :as hooks]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu]]
[app.main.ui.workspace.sidebar.options.menus.component :refer [component-attrs component-menu]]
[app.main.ui.workspace.sidebar.options.menus.component :refer [component-menu]]
[app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraints-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-menu]]
[app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell]
@ -66,7 +66,6 @@
[stroke-ids stroke-values] (get-attrs [shape] objects :stroke)
[text-ids text-values] (get-attrs [shape] objects :text)
[svg-ids svg-values] [[(:id shape)] (select-keys shape [:svg-attrs])]
[comp-ids comp-values] [[(:id shape)] (select-keys shape component-attrs)]
[layout-item-ids layout-item-values] (get-attrs [shape] objects :layout-item)]
@ -74,7 +73,7 @@
:options true)}
[:& layer-menu {:type type :ids layer-ids :values layer-values}]
[:& measures-menu {:type type :ids measure-ids :values measure-values :shape shape}]
[:& component-menu {:ids comp-ids :values comp-values :shape shape}] ;;remove this in components-v2
[:& component-menu {:shape shape}] ;;remove this in components-v2
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
(when (and (= (count ids) 1) is-layout-child? is-grid-parent?)

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

@ -18,6 +18,7 @@
[app.main.data.workspace.libraries :as dwl]
[app.main.data.workspace.media :as dwm]
[app.main.data.workspace.path :as dwdp]
[app.main.data.workspace.specialized-panel :as dwsp]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.streams :as ms]
@ -84,7 +85,8 @@
left-click?
(do
(st/emit! (ms/->MouseEvent :down ctrl? shift? alt? meta?))
(st/emit! (ms/->MouseEvent :down ctrl? shift? alt? meta?)
dwsp/clear-specialized-panel)
(when (and (not= edition id) (or text-editing? grid-editing?))
(st/emit! dw/clear-edition-mode))

575
frontend/test/frontend_tests/state_components_sync_test.cljs
View file

@ -90,63 +90,58 @@
(t/deftest test-touched-children-add
(t/async done
(let [state (-> thp/initial-state
(thp/sample-page)
(thp/sample-shape :shape1 :rect
{:name "Rect 1"
:fill-color clr/white
:fill-opacity 1})
(thp/make-component :main1 :component1
[(thp/id :shape1)])
(thp/instantiate-component :instance1
(thp/id :component1))
(thp/sample-shape :shape2 :circle
{:name "Circle 1"}))
(let [state (-> thp/initial-state
(thp/sample-page)
(thp/sample-shape :shape1 :rect
{:name "Rect 1"
:fill-color clr/white
:fill-opacity 1})
(thp/make-component :main1 :component1
[(thp/id :shape1)])
(thp/instantiate-component :instance1
(thp/id :component1))
(thp/sample-shape :shape2 :circle
{:name "Circle 1"}))
instance1 (thp/get-shape state :instance1)
shape2 (thp/get-shape state :shape2)
instance1 (thp/get-shape state :instance1)
shape2 (thp/get-shape state :shape2)
store (the/prepare-store state done
(fn [new-state]
store (the/prepare-store state done
(fn [new-state]
;; Expected shape tree:
;;
;; [Page]
;; Root Frame
;; Rect 1
;; Rect 1
;; Rect 1* #--> Rect 1
;; #{:shapes-group}
;; [Page: Page 1]
;; Root Frame
;; {Rect 1}
;; Rect1
;; Rect 1 #--> Rect 1
;; Rect 1 ---> Rect 1
;; Circle 1
;; Rect 1 ---> Rect 1
;;
;; [Rect 1]
;; page1 / Rect 1
;;
(let [[[group shape1 shape2] [c-group c-shape1] _component]
(thl/resolve-instance-and-main-allow-dangling
new-state
(thp/id :instance1))]
;; [Component: Rect 1] core.cljs:200:23
;; --> [Page 1] Rect 1
(t/is (= (:name group) "Rect 1"))
(t/is (= (:touched group) #{:shapes-group}))
(t/is (= (:name shape1) "Circle 1"))
(t/is (= (:touched shape1) nil))
(t/is (= (:shape-ref shape1) nil))
(t/is (= (:name shape2) "Rect 1"))
(t/is (= (:touched shape2) nil))
(t/is (not= (:shape-ref shape2) nil))
(let [[[group shape1] [c-group c-shape1] _component]
(thl/resolve-instance-and-main-allow-dangling
new-state
(thp/id :instance1))]
(t/is (= (:name c-group) "Rect 1"))
(t/is (= (:touched c-group) nil))
(t/is (= (:shape-ref c-group) nil))
(t/is (= (:name c-shape1) "Rect 1"))
(t/is (= (:touched c-shape1) nil))
(t/is (= (:shape-ref c-shape1) nil)))))]
(t/is (= (:name group) "Rect 1"))
(t/is (nil? (:touched group)))
(t/is (= (:name shape1) "Rect 1"))
(t/is (= (:touched shape1) nil))
(t/is (not= (:shape-ref shape1) nil))
(ptk/emit!
store
(dw/relocate-shapes #{(:id shape2)} (:id instance1) 0)
:the/end))))
(t/is (= (:name c-group) "Rect 1"))
(t/is (= (:touched c-group) nil))
(t/is (= (:shape-ref c-group) nil))
(t/is (= (:name c-shape1) "Rect 1"))
(t/is (= (:touched c-shape1) nil))
(t/is (= (:shape-ref c-shape1) nil)))))]
(ptk/emit!
store
(dw/relocate-shapes #{(:id shape2)} (:id instance1) 0) ;; We cant't change the structure of component copies, so this operation will do nothing
:the/end))))
(t/deftest test-touched-children-delete
(t/async done
@ -215,78 +210,78 @@
(t/deftest test-touched-children-move
(t/async done
(let [state (-> thp/initial-state
(thp/sample-page)
(thp/sample-shape :shape1 :rect
{:name "Rect 1"})
(thp/sample-shape :shape2 :rect
{:name "Rect 2"})
(thp/sample-shape :shape3 :rect
{:name "Rect 3"})
(thp/make-component :main1 :component1
[(thp/id :shape1)
(thp/id :shape2)
(thp/id :shape3)])
(thp/instantiate-component :instance1
(thp/id :component1)))
(let [state (-> thp/initial-state
(thp/sample-page)
(thp/sample-shape :shape1 :rect
{:name "Rect 1"})
(thp/sample-shape :shape2 :rect
{:name "Rect 2"})
(thp/sample-shape :shape3 :rect
{:name "Rect 3"})
(thp/make-component :main1 :component1
[(thp/id :shape1)
(thp/id :shape2)
(thp/id :shape3)])
(thp/instantiate-component :instance1
(thp/id :component1)))
[group1' shape1']
(thl/resolve-instance state (thp/id :instance1))
[group1' shape1']
(thl/resolve-instance state (thp/id :instance1))
store (the/prepare-store state done
(fn [new-state]
store (the/prepare-store state done
(fn [new-state]
;; Expected shape tree:
;;
;; [Page]
;; Root Frame
;; Component 1
;; Rect 1
;; Rect 2
;; Rect 3
;; Component 1* #--> Component 1
;; #{:shapes-group}
;; Rect 2 ---> Rect 2
;; Rect 1 ---> Rect 1
;; Rect 3 ---> Rect 3
;;
;; [Component 1]
;; page1 / Component 1
;;
(let [[[group shape1 shape2 shape3]
[c-group c-shape1 c-shape2 c-shape3] _component]
(thl/resolve-instance-and-main-allow-dangling
new-state
(thp/id :instance1))]
;; [Page: Page 1]
;; Root Frame
;; {Component 1} #
;; Rect 1
;; Rect 2
;; Rect 3
;; Component 1 #--> Component 1
;; Rect 1 ---> Rect 1
;; Rect 2 ---> Rect 2
;; Rect 3 ---> Rect 3
;;
;; ========= Local library
;;
;; [Component: Component 1]
;; --> [Page 1] Component 1
(t/is (= (:name group) "Component 1"))
(t/is (= (:touched group) #{:shapes-group}))
(t/is (= (:name shape1) "Rect 2"))
(t/is (= (:touched shape1) nil))
(t/is (not= (:shape-ref shape1) nil))
(t/is (= (:name shape2) "Rect 1"))
(t/is (= (:touched shape2) nil))
(t/is (not= (:shape-ref shape2) nil))
(t/is (= (:name shape3) "Rect 3"))
(t/is (= (:touched shape3) nil))
(t/is (not= (:shape-ref shape3) nil))
(let [[[group shape1 shape2 shape3]
[c-group c-shape1 c-shape2 c-shape3] _component]
(thl/resolve-instance-and-main-allow-dangling
new-state
(thp/id :instance1))]
(t/is (= (:name c-group) "Component 1"))
(t/is (= (:touched c-group) nil))
(t/is (= (:shape-ref c-group) nil))
(t/is (= (:name c-shape1) "Rect 1"))
(t/is (= (:touched c-shape1) nil))
(t/is (= (:shape-ref c-shape1) nil))
(t/is (= (:name c-shape2) "Rect 2"))
(t/is (= (:touched c-shape2) nil))
(t/is (= (:shape-ref c-shape2) nil))
(t/is (= (:name c-shape3) "Rect 3"))
(t/is (= (:touched c-shape3) nil))
(t/is (= (:shape-ref c-shape3) nil)))))]
(t/is (= (:name group) "Component 1"))
(t/is (nil? (:touched group)))
(t/is (= (:name shape1) "Rect 1"))
(t/is (= (:touched shape1) nil))
(t/is (not= (:shape-ref shape1) nil))
(t/is (= (:name shape2) "Rect 2"))
(t/is (= (:touched shape2) nil))
(t/is (not= (:shape-ref shape2) nil))
(t/is (= (:name shape3) "Rect 3"))
(t/is (= (:touched shape3) nil))
(t/is (not= (:shape-ref shape3) nil))
(ptk/emit!
store
(dw/relocate-shapes #{(:id shape1')} (:id group1') 2)
:the/end))))
(t/is (= (:name c-group) "Component 1"))
(t/is (= (:touched c-group) nil))
(t/is (= (:shape-ref c-group) nil))
(t/is (= (:name c-shape1) "Rect 1"))
(t/is (= (:touched c-shape1) nil))
(t/is (= (:shape-ref c-shape1) nil))
(t/is (= (:name c-shape2) "Rect 2"))
(t/is (= (:touched c-shape2) nil))
(t/is (= (:shape-ref c-shape2) nil))
(t/is (= (:name c-shape3) "Rect 3"))
(t/is (= (:touched c-shape3) nil))
(t/is (= (:shape-ref c-shape3) nil)))))]
(ptk/emit!
store
(dw/relocate-shapes #{(:id shape1')} (:id group1') 2) ;; We cant't change the structure of component copies, so this operation will do nothing
:the/end))))
(t/deftest test-touched-from-lib
(t/async
@ -1507,109 +1502,97 @@
(t/deftest test-update-children-add
(t/async done
(let [state (-> thp/initial-state
(thp/sample-page)
(thp/sample-shape :shape1 :rect
{:name "Rect 1"
:fill-color clr/white
:fill-opacity 1})
(thp/make-component :main1 :component1
[(thp/id :shape1)])
(thp/instantiate-component :instance1
(thp/id :component1))
(thp/instantiate-component :instance2
(thp/id :component1))
(thp/sample-shape :shape2 :circle
{:name "Circle 1"}))
(let [state (-> thp/initial-state
(thp/sample-page)
(thp/sample-shape :shape1 :rect
{:name "Rect 1"
:fill-color clr/white
:fill-opacity 1})
(thp/make-component :main1 :component1
[(thp/id :shape1)])
(thp/instantiate-component :instance1
(thp/id :component1))
(thp/instantiate-component :instance2
(thp/id :component1))
(thp/sample-shape :shape2 :circle
{:name "Circle 1"}))
file (wsh/get-local-file state)
file (wsh/get-local-file state)
instance1 (thp/get-shape state :instance1)
shape2 (thp/get-shape state :shape2)
instance1 (thp/get-shape state :instance1)
shape2 (thp/get-shape state :shape2)
store (the/prepare-store state done
(fn [new-state]
store (the/prepare-store state done
(fn [new-state]
;; Expected shape tree:
;;
;; [Page]
;; Root Frame
;; Rect 1
;; [Page: Page 1]
;; Root Frame
;; {Rect 1} #
;; Rect 1
;; Rect 1 #--> Rect 1
;; Rect 1 ---> Rect 1
;; Rect 1 #--> Rect 1
;; Rect 1 ---> Rect 1
;; Circle 1
;; Rect 1
;; Rect 1 #--> Rect 1
;; Circle 1 ---> Circle 1
;; Rect 1 ---> Rect 1
;; Rect 1 #--> Rect 1
;; Circle 1 ---> Circle 1
;; Rect 1 ---> Rect 1
;;
;; [Rect 1]
;; page1 / Rect 1
;; ========= Local library
;;
(let [[[main1 shape1 shape2]
[c-main1 c-shape1 c-shape2] component1]
(thl/resolve-instance-and-main
new-state
(thp/id :main1))
;; [Component: Rect 1]
;; --> [Page 1] Rect 1
;;
(let [[[main1 shape1]
[c-main1 c-shape1] component1]
(thl/resolve-instance-and-main
new-state
(thp/id :main1))
[[instance1 shape3 shape4]
[c-instance1 c-shape3 c-shape4] component2]
(thl/resolve-instance-and-main
new-state
(thp/id :instance1))
[[instance1 shape2]
[c-instance1 c-shape2] component2]
(thl/resolve-instance-and-main
new-state
(thp/id :instance1))
[[instance2 shape5 shape6]
[c-instance2 c-shape5 c-shape6] component3]
(thl/resolve-instance-and-main
new-state
(thp/id :instance2))]
[[instance2 shape3]
[c-instance2 c-shape3] component3]
(thl/resolve-instance-and-main
new-state
(thp/id :instance2))]
(t/is (= (:name main1) "Rect 1"))
(t/is (= (:touched main1) nil))
(t/is (= (:shape-ref main1) nil))
(t/is (= (:name shape1) "Circle 1"))
(t/is (= (:touched shape1) nil))
(t/is (= (:shape-ref shape1) nil))
(t/is (= (:name shape2) "Rect 1"))
(t/is (= (:touched shape2) nil))
(t/is (= (:shape-ref shape2) nil))
(t/is (= (:name main1) "Rect 1"))
(t/is (= (:touched main1) nil))
(t/is (= (:shape-ref main1) nil))
(t/is (= (:name shape1) "Rect 1"))
(t/is (= (:touched shape1) nil))
(t/is (= (:shape-ref shape1) nil))
(t/is (= (:name instance1) "Rect 1"))
(t/is (= (:touched instance1) nil))
(t/is (= (:shape-ref instance1) (:id c-main1)))
(t/is (= (:name shape3) "Circle 1"))
(t/is (= (:touched shape3) nil))
(t/is (= (:shape-ref shape3) (:id c-shape1)))
(t/is (= (:name shape4) "Rect 1"))
(t/is (= (:touched shape4) nil))
(t/is (= (:shape-ref shape4) (:id c-shape2)))
(t/is (= (:name instance1) "Rect 1"))
(t/is (= (:touched instance1) nil))
(t/is (= (:shape-ref instance1) (:id c-main1)))
(t/is (= (:name shape2) "Rect 1"))
(t/is (= (:touched shape2) nil))
(t/is (= (:shape-ref shape2) (:id c-shape1)))
(t/is (= (:name instance2) "Rect 1"))
(t/is (= (:touched instance2) nil))
(t/is (= (:shape-ref instance2) (:id c-main1)))
(t/is (= (:name shape5) "Circle 1"))
(t/is (= (:touched shape5) nil))
(t/is (= (:shape-ref shape5) (:id c-shape1)))
(t/is (= (:name shape6) "Rect 1"))
(t/is (= (:touched shape6) nil))
(t/is (= (:shape-ref shape4) (:id c-shape2)))
(t/is (= (:name instance2) "Rect 1"))
(t/is (= (:touched instance2) nil))
(t/is (= (:shape-ref instance2) (:id c-main1)))
(t/is (= (:name shape3) "Rect 1"))
(t/is (= (:touched shape3) nil))
(t/is (= (:shape-ref shape2) (:id c-shape1)))
(t/is (= component1 component2 component3))
(t/is (= c-main1 main1))
(t/is (= c-shape1 shape1))
(t/is (= c-shape2 shape2))
(t/is (= c-instance1 c-main1))
(t/is (= c-shape3 c-shape1))
(t/is (= c-shape4 c-shape2))
(t/is (= c-instance2 c-main1))
(t/is (= c-shape5 c-shape1))
(t/is (= c-shape6 c-shape2)))))]
(t/is (= component1 component2 component3))
(t/is (= c-main1 main1))
(t/is (= c-shape1 shape1))
(t/is (= c-instance1 c-main1))
(t/is (= c-shape2 c-shape1))
(t/is (= c-instance2 c-main1))
(t/is (= c-shape3 c-shape1)))))]
(ptk/emit!
store
(dw/relocate-shapes #{(:id shape2)} (:id instance1) 0)
(dwl/update-component-sync (:id instance1) (:id file))
:the/end))))
(ptk/emit!
store
(dw/relocate-shapes #{(:id shape2)} (:id instance1) 0) ;; We cant't change the structure of component copies, so this operation will do nothing
(dwl/update-component-sync (:id instance1) (:id file))
:the/end))))
(t/deftest test-update-children-delete
(t/async done
@ -1724,126 +1707,126 @@
(t/deftest test-update-children-move
(t/async done
(let [state (-> thp/initial-state
(thp/sample-page)
(thp/sample-shape :shape1 :rect
{:name "Rect 1"})
(thp/sample-shape :shape2 :rect
{:name "Rect 2"})
(thp/sample-shape :shape3 :rect
{:name "Rect 3"})
(thp/make-component :main1 :component1
[(thp/id :shape1)
(thp/id :shape2)
(thp/id :shape3)])
(thp/instantiate-component :instance1
(thp/id :component1))
(thp/instantiate-component :instance2
(thp/id :component1)))
(let [state (-> thp/initial-state
(thp/sample-page)
(thp/sample-shape :shape1 :rect
{:name "Rect 1"})
(thp/sample-shape :shape2 :rect
{:name "Rect 2"})
(thp/sample-shape :shape3 :rect
{:name "Rect 3"})
(thp/make-component :main1 :component1
[(thp/id :shape1)
(thp/id :shape2)
(thp/id :shape3)])
(thp/instantiate-component :instance1
(thp/id :component1))
(thp/instantiate-component :instance2
(thp/id :component1)))
file (wsh/get-local-file state)
file (wsh/get-local-file state)
[instance1 shape1' _shape2' _shape3']
(thl/resolve-instance state (thp/id :instance1))
[instance1 shape1' _shape2' _shape3']
(thl/resolve-instance state (thp/id :instance1))
store (the/prepare-store state done
(fn [new-state]
store (the/prepare-store state done
(fn [new-state]
;; Expected shape tree:
;;
;; [Page]
;; Root Frame
;; Component 1
;; Rect 2
;; Rect 1
;; Rect 2
;; Rect 3
;; Component 1 #--> Component 1
;; Rect 2 ---> Rect 2
;; Rect 1 ---> Rect 1
;; Rect 2 ---> Rect 2
;; Rect 3 ---> Rect 3
;; Component 1 #--> Component 1
;; Rect 2 ---> Rect 2
;; Rect 1 ---> Rect 1
;; Rect 2 ---> Rect 2
;; Rect 3 ---> Rect 3
;;
;; [Component 1]
;; page1 / Component 1
;;
(let [[[main1 shape1 shape2 shape3]
[c-main1 c-shape1 c-shape2 c-shape3] component1]
(thl/resolve-instance-and-main
new-state
(thp/id :main1))
(let [[[main1 shape1 shape2 shape3]
[c-main1 c-shape1 c-shape2 c-shape3] component1]
(thl/resolve-instance-and-main
new-state
(thp/id :main1))
[[instance1 shape4 shape5 shape6]
[c-instance1 c-shape4 c-shape5 c-shape6] component2]
(thl/resolve-instance-and-main
new-state
(thp/id :instance1))
[[instance1 shape4 shape5 shape6]
[c-instance1 c-shape4 c-shape5 c-shape6] component2]
(thl/resolve-instance-and-main
new-state
(thp/id :instance1))
[[instance2 shape7 shape8 shape9]
[c-instance2 c-shape7 c-shape8 c-shape9] component3]
(thl/resolve-instance-and-main
new-state
(thp/id :instance2))]
[[instance2 shape7 shape8 shape9]
[c-instance2 c-shape7 c-shape8 c-shape9] component3]
(thl/resolve-instance-and-main
new-state
(thp/id :instance2))]
(t/is (= (:name main1) "Component 1"))
(t/is (= (:touched main1) nil))
(t/is (= (:shape-ref main1) nil))
(t/is (= (:name shape1) "Rect 2"))
(t/is (= (:touched shape1) nil))
(t/is (= (:shape-ref shape1) nil))
(t/is (= (:name shape2) "Rect 1"))
(t/is (= (:touched shape2) nil))
(t/is (= (:shape-ref shape2) nil))
(t/is (= (:name shape3) "Rect 3"))
(t/is (= (:touched shape3) nil))
(t/is (= (:shape-ref shape3) nil))
(t/is (= (:name main1) "Component 1"))
(t/is (= (:touched main1) nil))
(t/is (= (:shape-ref main1) nil))
(t/is (= (:name shape1) "Rect 1"))
(t/is (= (:touched shape1) nil))
(t/is (= (:shape-ref shape1) nil))
(t/is (= (:name shape2) "Rect 2"))
(t/is (= (:touched shape2) nil))
(t/is (= (:shape-ref shape2) nil))
(t/is (= (:name shape3) "Rect 3"))
(t/is (= (:touched shape3) nil))
(t/is (= (:shape-ref shape3) nil))
(t/is (= (:name instance1) "Component 1"))
(t/is (= (:touched instance1) nil))
(t/is (= (:shape-ref instance1) (:id c-main1)))
(t/is (= (:name shape4) "Rect 2"))
(t/is (= (:touched shape4) nil))
(t/is (= (:shape-ref shape4) (:id c-shape1)))
(t/is (= (:name shape5) "Rect 1"))
(t/is (= (:touched shape5) nil))
(t/is (= (:shape-ref shape5) (:id c-shape2)))
(t/is (= (:name shape6) "Rect 3"))
(t/is (= (:touched shape6) nil))
(t/is (= (:shape-ref shape6) (:id c-shape3)))
(t/is (= (:name instance1) "Component 1"))
(t/is (= (:touched instance1) nil))
(t/is (= (:shape-ref instance1) (:id c-main1)))
(t/is (= (:name shape4) "Rect 1"))
(t/is (= (:touched shape4) nil))
(t/is (= (:shape-ref shape4) (:id c-shape1)))
(t/is (= (:name shape5) "Rect 2"))
(t/is (= (:touched shape5) nil))
(t/is (= (:shape-ref shape5) (:id c-shape2)))
(t/is (= (:name shape6) "Rect 3"))
(t/is (= (:touched shape6) nil))
(t/is (= (:shape-ref shape6) (:id c-shape3)))
(t/is (= (:name instance2) "Component 1"))
(t/is (= (:touched instance2) nil))
(t/is (= (:shape-ref instance2) (:id c-main1)))
(t/is (= (:name shape7) "Rect 2"))
(t/is (= (:touched shape7) nil))
(t/is (= (:shape-ref shape7) (:id c-shape1)))
(t/is (= (:name shape8) "Rect 1"))
(t/is (= (:touched shape8) nil))
(t/is (= (:shape-ref shape8) (:id c-shape2)))
(t/is (= (:name shape9) "Rect 3"))
(t/is (= (:touched shape9) nil))
(t/is (= (:shape-ref shape9) (:id c-shape3)))
(t/is (= (:name instance2) "Component 1"))
(t/is (= (:touched instance2) nil))
(t/is (= (:shape-ref instance2) (:id c-main1)))
(t/is (= (:name shape7) "Rect 1"))
(t/is (= (:touched shape7) nil))
(t/is (= (:shape-ref shape7) (:id c-shape1)))
(t/is (= (:name shape8) "Rect 2"))
(t/is (= (:touched shape8) nil))
(t/is (= (:shape-ref shape8) (:id c-shape2)))
(t/is (= (:name shape9) "Rect 3"))
(t/is (= (:touched shape9) nil))
(t/is (= (:shape-ref shape9) (:id c-shape3)))
(t/is (= component1 component2 component3))
(t/is (= c-main1 main1))
(t/is (= c-shape1 shape1))
(t/is (= c-shape2 shape2))
(t/is (= c-shape3 shape3))
(t/is (= c-instance1 c-main1))
(t/is (= c-shape4 c-shape4))
(t/is (= c-shape5 c-shape5))
(t/is (= c-shape6 c-shape6))
(t/is (= c-instance2 c-main1))
(t/is (= c-shape7 c-shape7))
(t/is (= c-shape8 c-shape8))
(t/is (= c-shape9 c-shape9)))))]
(t/is (= component1 component2 component3))
(t/is (= c-main1 main1))
(t/is (= c-shape1 shape1))
(t/is (= c-shape2 shape2))
(t/is (= c-shape3 shape3))
(t/is (= c-instance1 c-main1))
(t/is (= c-shape4 c-shape4))
(t/is (= c-shape5 c-shape5))
(t/is (= c-shape6 c-shape6))
(t/is (= c-instance2 c-main1))
(t/is (= c-shape7 c-shape7))
(t/is (= c-shape8 c-shape8))
(t/is (= c-shape9 c-shape9)))))]
(ptk/emit!
store
(dw/relocate-shapes #{(:id shape1')} (:id instance1) 2)
(dwl/update-component-sync (:id instance1) (:id file))
:the/end))))
(ptk/emit!
store
(dw/relocate-shapes #{(:id shape1')} (:id instance1) 2)
(dwl/update-component-sync (:id instance1) (:id file))
:the/end))))
(t/deftest test-update-from-lib
(t/async done

6
frontend/translations/en.po
View file

@ -1673,6 +1673,9 @@ msgstr "(you)"
msgid "labels.your-account"
msgstr "Your account"
msgid "labels.search"
msgstr "Search"
#: src/app/main/data/workspace/persistence.cljs, src/app/main/data/workspace/persistence.cljs, src/app/main/data/media.cljs
msgid "media.loading"
msgstr "Loading image…"
@ -3590,6 +3593,9 @@ msgstr "Edit an annotation"
msgid "workspace.options.component.main"
msgstr "Main"
msgid "workspace.options.component.swap"
msgstr "Swap component"
#: src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
msgid "workspace.options.constraints"
msgstr "Constraints"

6
frontend/translations/es.po
View file

@ -1725,6 +1725,9 @@ msgstr "(tú)"
msgid "labels.your-account"
msgstr "Tu cuenta"
msgid "labels.search"
msgstr "Buscar"
#: src/app/main/data/workspace/persistence.cljs, src/app/main/data/media.cljs
msgid "media.loading"
msgstr "Cargando imagen…"
@ -3666,6 +3669,9 @@ msgstr "Editar una nota"
msgid "workspace.options.component.main"
msgstr "Principal"
msgid "workspace.options.component.swap"
msgstr "Intercambiar componente"
#: src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
msgid "workspace.options.constraints"
msgstr "Restricciones"