Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-20 19:51:23 -05:00
Code Issues Activity

🎉 Add the concept of 'main instance'

Browse source
This commit is contained in:
Andrés Moya 2022-06-06 15:32:11 +02:00
parent 758d0d8943
commit 5dc7bc213f
14 changed files with 122 additions and 45 deletions

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

@ -392,11 +392,13 @@
;; -- Components
(defmethod process-change :add-component
[data {:keys [id name path shapes]}]
[data {:keys [id name path main-instance-id main-instance-page shapes]}]
(assoc-in data [:components id]
{:id id
:name name
:path path
:main-instance-id main-instance-id
:main-instance-page main-instance-page
:objects (d/index-by :id shapes)}))
(defmethod process-change :mod-component

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

@ -532,7 +532,7 @@
(apply-changes-local))))
(defn add-component
[changes id path name new-shapes updated-shapes]
[changes id path name new-shapes updated-shapes main-instance-id main-instance-page]
(assert-page-id changes)
(assert-objects changes)
(let [page-id (::page-id (meta changes))
@ -566,6 +566,8 @@
:id id
:path path
:name name
:main-instance-id main-instance-id
:main-instance-page main-instance-page
:shapes new-shapes})
(into (map mk-change) updated-shapes))))
(update :undo-changes
@ -611,5 +613,7 @@
:id id
:name (:name prev-component)
:path (:path prev-component)
:main-instance-id (:main-instance-id prev-component)
:main-instance-page (:main-instance-page prev-component)
:shapes (vals (:objects prev-component))}))))

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

@ -362,6 +362,11 @@
(or (= (:shape-ref shape-inst) (:id shape-main))
(= (:shape-ref shape-inst) (:shape-ref shape-main)))))
(defn is-main-instance?
[shape-id page-id component]
(and (= shape-id (:main-instance-id component))
(= page-id (:main-instance-page component))))
(defn get-component-root
[component]
(get-in component [:objects (:id component)]))

3
frontend/resources/images/icons/component-copy.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="500" height="500" viewBox="2115 2827.9 500 500" xmlns="http://www.w3.org/2000/svg">
<path d="m2615 3077.69-140.71 250.21h-218.22L2115 3077.69l141.07-249.79h218.22zm-337.86 207.73h176.07l118.93-207.3-118.93-207.74h-176.07l-118.93 208.16z"/>
</svg>
Side by side

After

(image error) Size: 261 B

1
frontend/src/app/main/data/workspace/common.cljs
View file

@ -108,4 +108,3 @@
:undo-changes []
:origin it
:save-undo? false})))))))))))

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

@ -354,16 +354,20 @@
unames (into #{} (map :name) all-components)
new-name (un/generate-unique-name unames (:name component))
[new-shape new-shapes _updated-shapes]
[new-shape new-shapes _updated-shapes main-instance main-instance-page]
(dwlh/duplicate-component component)
_ (prn "OJOOOOOOOOOOOOOOO falta calcular main-instance")
changes (-> (pcb/empty-changes it nil) ;; no objects are changed
(pcb/with-objects nil) ;; in the current page
(pcb/add-component (:id new-shape)
(:path component)
new-name
new-shapes
[]))]
[]
(:id main-instance)
(:id main-instance-page)))]
(rx/of (dch/commit-changes changes))))))

4
frontend/src/app/main/data/workspace/libraries_helpers.cljs
View file

@ -121,7 +121,9 @@
path
name
new-shapes
updated-shapes))]
updated-shapes
(:id group)
page-id))]
[group new-shape changes])))
(defn duplicate-component

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

@ -138,13 +138,17 @@
(ptk/reify ::delete-shapes
ptk/WatchEvent
(watch [it state _]
(let [page-id (:current-page-id state)
objects (wsh/lookup-page-objects state page-id)
page (wsh/lookup-page state page-id)
(let [file-id (:current-file-id state)
page-id (:current-page-id state)
file (wsh/get-file state file-id)
page (wsh/lookup-page state page-id)
objects (wsh/lookup-page-objects state page-id)
ids (cph/clean-loops objects ids)
lookup (d/getf objects)
local-library {file-id {:data file}}
groups-to-unmask
(reduce (fn [group-ids id]
;; When the shape to delete is the mask of a masked group,
@ -164,7 +168,7 @@
;; If any of the deleted shapes is the destination of
;; some interaction, this must be deleted, too.
(let [interactions (:interactions shape)]
(some #(and (csi/has-destination %)
(some #(and (ctsi/has-destination %)
(contains? ids (:destination %)))
interactions)))
(vals objects))
@ -215,9 +219,29 @@
;; Any parent whose children are all deleted, must be deleted too.
(into (d/ordered-set) (find-all-empty-parents #{}))
components-to-delete
(reduce (fn [components id]
(let [shape (get objects id)
component
(when (and (:component-id shape) (:component-file shape))
;; Only local components may have main instances
(cph/get-component local-library (:component-file shape) (:component-id shape)))
main-instance?
(when component
(cph/is-main-instance? (:id shape) (:id page) component))]
(if main-instance?
(conj components (:component-id shape))
components)))
[]
(into ids all-children))
changes (-> (pcb/empty-changes it page-id)
(pcb/with-page page)
(pcb/with-objects objects)
(pcb/with-library-data file)
(pcb/set-page-option :guides guides)
(pcb/remove-objects all-children)
(pcb/remove-objects ids)
@ -231,13 +255,18 @@
(d/update-when shape :interactions
(fn [interactions]
(into []
(remove #(and (csi/has-destination %)
(remove #(and (ctsi/has-destination %)
(contains? ids (:destination %))))
interactions)))))
(cond-> (seq starting-flows)
(pcb/update-page-option :flows (fn [flows]
(->> (map :id starting-flows)
(reduce csp/remove-flow flows))))))]
(reduce ctp/remove-flow flows))))))
changes (reduce (fn [changes component-id]
(pcb/delete-component changes component-id))
changes
components-to-delete)]
(rx/of (dch/commit-changes changes)
(dwsl/update-layout-positions all-parents))))))

6
frontend/src/app/main/ui/components/shape_icon.cljs
View file

@ -11,7 +11,7 @@
(mf/defc element-icon
[{:keys [shape] :as props}]
[{:keys [shape main-instance?] :as props}]
(case (:type shape)
:frame i/artboard
:image i/image
@ -21,7 +21,9 @@
:rect i/box
:text i/text
:group (if (some? (:component-id shape))
i/component
(if main-instance?
i/component
i/component-copy)
(if (:masked-group? shape)
i/mask
i/folder))

3
frontend/src/app/main/ui/context.cljs
View file

@ -21,6 +21,7 @@
(def current-project-id (mf/create-context nil))
(def current-page-id (mf/create-context nil))
(def current-file-id (mf/create-context nil))
(def libraries (mf/create-context nil))
(def scroll-ctx (mf/create-context nil))
(def active-frames-ctx (mf/create-context nil))
(def render-thumbnails (mf/create-context nil))
(def render-thumbnails (mf/create-context nil))

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

@ -53,6 +53,7 @@
(def close (icon-xref :close))
(def code (icon-xref :code))
(def component (icon-xref :component))
(def component-copy (icon-xref :component-copy))
(def copy (icon-xref :copy))
(def curve (icon-xref :curve))
(def cross (icon-xref :cross))

44
frontend/src/app/main/ui/workspace.cljs
View file

@ -114,10 +114,13 @@
(mf/defc workspace
{::mf/wrap [mf/memo]}
[{:keys [project-id file-id page-id layout-name] :as props}]
(let [file (mf/deref refs/workspace-file)
project (mf/deref refs/workspace-project)
layout (mf/deref refs/workspace-layout)
wglobal (mf/deref refs/workspace-global)
(let [file (mf/deref refs/workspace-file)
project (mf/deref refs/workspace-project)
layout (mf/deref refs/workspace-layout)
wglobal (mf/deref refs/workspace-global)
wglobal (mf/deref refs/workspace-global)
libraries (mf/deref refs/workspace-libraries)
local-library (mf/deref refs/workspace-local-library)
background-color (:background-color wglobal)]
@ -145,23 +148,26 @@
[:& (mf/provider ctx/current-team-id) {:value (:team-id project)}
[:& (mf/provider ctx/current-project-id) {:value (:id project)}
[:& (mf/provider ctx/current-page-id) {:value page-id}
[:section#workspace {:style {:background-color background-color}}
(when (not (:hide-ui layout))
[:& header {:file file
:page-id page-id
:project project
:layout layout}])
[:& (mf/provider ctx/libraries) {:value (assoc libraries
(:id local-library)
{:data local-library})}
[:section#workspace {:style {:background-color background-color}}
(when (not (:hide-ui layout))
[:& header {:file file
:page-id page-id
:project project
:layout layout}])
[:& context-menu]
[:& context-menu]
(if (and (and file project)
(:initialized file))
[:& workspace-page {:key (dm/str "page-" page-id)
:page-id page-id
:file file
:wglobal wglobal
:layout layout}]
[:& workspace-loader])]]]]]))
(if (and (and file project)
(:initialized file))
[:& workspace-page {:key (dm/str "page-" page-id)
:page-id page-id
:file file
:wglobal wglobal
:layout layout}]
[:& workspace-loader])]]]]]]))

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

@ -15,6 +15,7 @@
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.shape-icon :as si]
[app.main.ui.context :as ctx]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
@ -85,7 +86,7 @@
(when (seq (:touched shape)) " *")])))
(mf/defc layer-item
[{:keys [index item selected objects] :as props}]
[{:keys [index page item selected objects] :as props}]
(let [id (:id item)
blocked? (:blocked item)
hidden? (:hidden item)
@ -101,6 +102,12 @@
container? (or (cph/frame-shape? item)
(cph/group-shape? item))
libraries (mf/use-ctx ctx/libraries)
component (when (and (:component-id item) (:component-file item))
(cph/get-component libraries (:component-file item) (:component-id item)))
main-instance? (when component
(cph/is-main-instance? (:id item) (:id page) component))
toggle-collapse
(mf/use-fn
(mf/deps expanded?)
@ -244,7 +251,8 @@
[:div {:on-double-click #(do (dom/stop-propagation %)
(dom/prevent-default %)
(st/emit! dw/zoom-to-selected-shape))}
[:& si/element-icon {:shape item}]]
[:& si/element-icon {:shape item
:main-instance? main-instance?}]]
[:& layer-name {:shape item
:name-ref ref
:on-start-edit #(reset! disable-drag true)
@ -268,7 +276,8 @@
(for [[index id] (reverse (d/enumerate (:shapes item)))]
(when-let [item (get objects id)]
[:& layer-item
{:item item
{:page page
:item item
:selected selected
:index index
:objects objects
@ -289,8 +298,9 @@
{::mf/wrap [#(mf/memo % =)
#(mf/throttle % 200)]}
[{:keys [objects] :as props}]
(let [selected (mf/deref refs/selected-shapes)
selected (hooks/use-equal-memo selected)
(let [page (mf/deref refs/workspace-page)
selected (mf/deref refs/selected-shapes)
selected (hooks/use-equal-memo selected)
root (get objects uuid/zero)]
[:ul.element-list
[:& hooks/sortable-container {}
@ -304,7 +314,8 @@
:objects objects
:key id}]
[:& layer-item
{:item obj
{:page page
:item obj
:selected selected
:index index
:objects objects
@ -314,14 +325,16 @@
{::mf/wrap [#(mf/memo % =)
#(mf/throttle % 200)]}
[{:keys [objects] :as props}]
(let [selected (mf/deref refs/selected-shapes)
(let [page (mf/deref refs/workspace-page)
selected (mf/deref refs/selected-shapes)
selected (hooks/use-equal-memo selected)
root (get objects uuid/zero)]
[:ul.element-list
(for [[index id] (d/enumerate (:shapes root))]
(when-let [obj (get objects id)]
[:& layer-item
{:item obj
{:page page
:item obj
:selected selected
:index index
:objects objects
@ -444,7 +457,6 @@
(take (:num-items @filter-state))
filtered-objects-total))))
handle-show-more
(fn []
(when (<= (:num-items @filter-state) (count filtered-objects-total))
@ -542,7 +554,6 @@
(when last-hidden-frame
(dom/add-class! last-hidden-frame "sticky"))))]
[:div#layers.tool-window
(if (d/not-empty? focus)
[:div.tool-window-bar

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

@ -22,6 +22,8 @@
(mf/defc component-menu
[{:keys [ids values shape-name] :as props}]
(let [current-file-id (mf/use-ctx ctx/current-file-id)
current-page-id (mf/use-ctx ctx/current-page-id)
libraries (mf/use-ctx ctx/libraries)
id (first ids)
local (mf/use-state {:menu-open false})
@ -30,6 +32,10 @@
library-id (:component-file values)
show? (some? component-id)
component (when (and component-id library-id)
(cph/get-component libraries library-id component-id))
main-instance? (cph/is-main-instance? id current-page-id component)
on-menu-click
(mf/use-callback
(fn [event]
@ -69,7 +75,9 @@
[:span (tr "workspace.options.component")]]
[:div.element-set-content
[:div.row-flex.component-row
i/component
(if main-instance?
i/component
i/component-copy)
shape-name
[:div.row-actions
{:on-click on-menu-click}