mirror of
https://github.com/penpot/penpot.git
synced 2026-05-27 02:43:42 +00:00
537 lines
24 KiB
Clojure
537 lines
24 KiB
Clojure
;; 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.layers
|
|
(:require-macros [app.main.style :refer [css]])
|
|
(:require
|
|
[app.common.data :as d]
|
|
[app.common.data.macros :as dm]
|
|
[app.common.uuid :as uuid]
|
|
[app.main.data.workspace :as dw]
|
|
[app.main.refs :as refs]
|
|
[app.main.store :as st]
|
|
[app.main.ui.components.shape-icon-refactor :as sic]
|
|
[app.main.ui.context :as ctx]
|
|
[app.main.ui.hooks :as hooks]
|
|
[app.main.ui.icons :as i]
|
|
[app.main.ui.workspace.sidebar.layer-item :refer [layer-item]]
|
|
[app.util.dom :as dom]
|
|
[app.util.i18n :as i18n :refer [tr]]
|
|
[app.util.keyboard :as kbd]
|
|
[app.util.timers :as ts]
|
|
[cuerdas.core :as str]
|
|
[rumext.v2 :as mf]))
|
|
|
|
|
|
;; This components is a piece for sharding equality check between top
|
|
;; level frames and try to avoid rerender frames that are does not
|
|
;; affected by the selected set.
|
|
(mf/defc frame-wrapper
|
|
{::mf/wrap-props false
|
|
::mf/wrap [mf/memo
|
|
#(mf/deferred % ts/idle-then-raf)]}
|
|
[props]
|
|
[:> layer-item props])
|
|
|
|
(mf/defc layers-tree
|
|
{::mf/wrap [#(mf/memo % =)
|
|
#(mf/throttle % 200)]}
|
|
[{:keys [objects filtered? parent-size] :as props}]
|
|
(let [selected (mf/deref refs/selected-shapes)
|
|
selected (hooks/use-equal-memo selected)
|
|
root (get objects uuid/zero)
|
|
new-css-system (mf/use-ctx ctx/new-css-system)]
|
|
[:ul
|
|
{:class (if new-css-system
|
|
(dom/classnames (css :element-list) true)
|
|
(dom/classnames :element-list true))}
|
|
[:& hooks/sortable-container {}
|
|
(for [[index id] (reverse (d/enumerate (:shapes root)))]
|
|
(when-let [obj (get objects id)]
|
|
(if (= (:type obj) :frame)
|
|
[:& frame-wrapper
|
|
{:item obj
|
|
:selected selected
|
|
:index index
|
|
:objects objects
|
|
:key id
|
|
:sortable? true
|
|
:filtered? filtered?
|
|
:parent-size parent-size
|
|
:recieved-depth -1}]
|
|
[:& layer-item
|
|
{:item obj
|
|
:selected selected
|
|
:index index
|
|
:objects objects
|
|
:key id
|
|
:sortable? true
|
|
:filtered? filtered?
|
|
:recieved-depth -1
|
|
:parent-size parent-size}])))]]))
|
|
|
|
(mf/defc filters-tree
|
|
{::mf/wrap [#(mf/memo % =)
|
|
#(mf/throttle % 200)]}
|
|
[{:keys [objects parent-size] :as props}]
|
|
(let [selected (mf/deref refs/selected-shapes)
|
|
selected (hooks/use-equal-memo selected)
|
|
root (get objects uuid/zero)
|
|
new-css-system (mf/use-ctx ctx/new-css-system)]
|
|
[:ul {:class (if new-css-system
|
|
(dom/classnames (css :element-list) true)
|
|
(dom/classnames :element-list true))}
|
|
(for [[index id] (d/enumerate (:shapes root))]
|
|
(when-let [obj (get objects id)]
|
|
[:& layer-item
|
|
{:item obj
|
|
:selected selected
|
|
:index index
|
|
:objects objects
|
|
:key id
|
|
:sortable? false
|
|
:filtered? true
|
|
:recieved-depth -1
|
|
:parent-size parent-size}]))]))
|
|
|
|
(defn calc-reparented-objects
|
|
[objects]
|
|
|
|
(let [reparented-objects
|
|
(d/mapm (fn [_ val]
|
|
(assoc val :parent-id uuid/zero :shapes nil))
|
|
objects)
|
|
|
|
reparented-shapes
|
|
(->> reparented-objects
|
|
keys
|
|
(filter #(not= uuid/zero %))
|
|
vec)]
|
|
(update reparented-objects uuid/zero assoc :shapes reparented-shapes)))
|
|
|
|
;; --- Layers Toolbox
|
|
|
|
(defn use-search
|
|
[page objects]
|
|
(let [filter-state (mf/use-state {:show-search-box false
|
|
:show-filters-menu false
|
|
:search-text ""
|
|
:active-filters #{}
|
|
:num-items 100})
|
|
new-css-system (mf/use-ctx ctx/new-css-system)
|
|
clear-search-text
|
|
(mf/use-callback
|
|
(fn []
|
|
(swap! filter-state assoc :search-text "" :num-items 100)))
|
|
|
|
update-search-text
|
|
(mf/use-callback
|
|
(fn [event]
|
|
(let [value (-> event dom/get-target dom/get-value)]
|
|
(swap! filter-state assoc :search-text value :num-items 100))))
|
|
|
|
toggle-search
|
|
(mf/use-callback
|
|
(fn [event]
|
|
(let [node (dom/get-current-target event)]
|
|
(swap! filter-state assoc :search-text "")
|
|
(swap! filter-state assoc :active-filters #{})
|
|
(swap! filter-state assoc :show-filters-menu false)
|
|
(swap! filter-state assoc :num-items 100)
|
|
(swap! filter-state update :show-search-box not)
|
|
(dom/blur! node))))
|
|
|
|
toggle-filters
|
|
(mf/use-callback
|
|
(fn []
|
|
(swap! filter-state update :show-filters-menu not)))
|
|
|
|
remove-filter
|
|
(mf/use-callback
|
|
(mf/deps @filter-state)
|
|
(fn [key]
|
|
(fn [_]
|
|
(swap! filter-state update :active-filters disj key)
|
|
(swap! filter-state assoc :num-items 100))))
|
|
|
|
add-filter
|
|
(mf/use-callback
|
|
(mf/deps @filter-state (:show-filters-menu @filter-state))
|
|
(fn [key]
|
|
(fn [_]
|
|
(swap! filter-state update :active-filters conj key)
|
|
(swap! filter-state assoc :num-items 100)
|
|
(toggle-filters))))
|
|
|
|
active?
|
|
(and
|
|
(:show-search-box @filter-state)
|
|
(or (d/not-empty? (:search-text @filter-state))
|
|
(d/not-empty? (:active-filters @filter-state))))
|
|
|
|
search-and-filters
|
|
(fn [[id shape]]
|
|
(let [search (:search-text @filter-state)
|
|
filters (:active-filters @filter-state)
|
|
filters (cond-> filters
|
|
(some #{:shape} filters)
|
|
(conj :rect :circle :path :bool))]
|
|
(or
|
|
(= uuid/zero id)
|
|
(and
|
|
(or (str/includes? (str/lower (:name shape)) (str/lower search))
|
|
(str/includes? (dm/str (:id shape)) (str/lower search)))
|
|
(or
|
|
(empty? filters)
|
|
(and
|
|
(some #{:component} filters)
|
|
(contains? shape :component-id))
|
|
(let [direct_filters (filter #{:frame :rect :circle :path :bool :image :text} filters)]
|
|
(some #{(:type shape)} direct_filters))
|
|
(and
|
|
(some #{:group} filters)
|
|
(and (= :group (:type shape))
|
|
(not (contains? shape :component-id))
|
|
(or (not (contains? shape :masked-group?)) (false? (:masked-group? shape)))))
|
|
(and
|
|
(some #{:mask} filters)
|
|
(true? (:masked-group? shape))))))))
|
|
|
|
filtered-objects-total
|
|
(mf/use-memo
|
|
(mf/deps objects active? @filter-state)
|
|
#(when active?
|
|
;; filterv so count is constant time
|
|
(filterv search-and-filters objects)))
|
|
|
|
filtered-objects
|
|
(mf/use-memo
|
|
(mf/deps filtered-objects-total)
|
|
#(when active?
|
|
(calc-reparented-objects
|
|
(into {}
|
|
(take (:num-items @filter-state))
|
|
filtered-objects-total))))
|
|
|
|
handle-show-more
|
|
(fn []
|
|
(when (<= (:num-items @filter-state) (count filtered-objects-total))
|
|
(swap! filter-state update :num-items + 100)))
|
|
|
|
handle-key-down
|
|
(mf/use-callback
|
|
(fn [event]
|
|
(let [enter? (kbd/enter? event)
|
|
esc? (kbd/esc? event)
|
|
input-node (dom/event->target event)]
|
|
|
|
(when enter?
|
|
(dom/blur! input-node))
|
|
(when esc?
|
|
(dom/blur! input-node)))))]
|
|
|
|
[filtered-objects
|
|
handle-show-more
|
|
(mf/html
|
|
(if (:show-search-box @filter-state)
|
|
[:*
|
|
[:div {:class (if new-css-system
|
|
(dom/classnames (css :tool-window-bar) true
|
|
(css :search) true)
|
|
(dom/classnames :tool-window-bar true
|
|
:search true))}
|
|
[:span {:class (if new-css-system
|
|
(dom/classnames (css :search-box) true)
|
|
(dom/classnames :search-box true))}
|
|
[:button
|
|
{:on-click toggle-filters
|
|
:class (if new-css-system
|
|
(dom/classnames :active active?
|
|
(css :filter-button) true)
|
|
(dom/classnames :active active?
|
|
:filter true))}
|
|
(if new-css-system
|
|
i/filter-refactor
|
|
i/icon-filter)]
|
|
[:div {:class (dom/classnames (css :search-input-wrapper) new-css-system)}
|
|
[:input {:on-change update-search-text
|
|
:value (:search-text @filter-state)
|
|
:auto-focus (:show-search-box @filter-state)
|
|
:placeholder (tr "workspace.sidebar.layers.search")
|
|
:on-key-down handle-key-down}]
|
|
(when (not (= "" (:search-text @filter-state)))
|
|
[:button {:class (if new-css-system
|
|
(dom/classnames (css :clear) true)
|
|
(dom/classnames :clear true))
|
|
:on-click clear-search-text}
|
|
(if new-css-system
|
|
i/delete-text-refactor
|
|
i/exclude)])]]
|
|
[:button {:class (dom/classnames (css :close-search) new-css-system)
|
|
:on-click toggle-search}
|
|
(if new-css-system
|
|
i/close-refactor
|
|
i/cross)]]
|
|
[:div {:class (if new-css-system
|
|
(dom/classnames (css :active-filters) true)
|
|
(dom/classnames :active-filters true))}
|
|
(for [f (:active-filters @filter-state)]
|
|
(let [name (case f
|
|
:frame (tr "workspace.sidebar.layers.frames")
|
|
:group (tr "workspace.sidebar.layers.groups")
|
|
:mask (tr "workspace.sidebar.layers.masks")
|
|
:component (tr "workspace.sidebar.layers.components")
|
|
:text (tr "workspace.sidebar.layers.texts")
|
|
:image (tr "workspace.sidebar.layers.images")
|
|
:shape (tr "workspace.sidebar.layers.shapes")
|
|
(tr f))]
|
|
(if new-css-system
|
|
[:button {:class (dom/classnames (css :layer-filter) true)
|
|
:on-click (remove-filter f)}
|
|
[:span {:class (dom/classnames (css :layer-filter-icon) true)}
|
|
[:& sic/element-icon-refactor-by-type {:type f
|
|
:main-instance? (= f :component)}]]
|
|
[:span {:class (dom/classnames (css :layer-filter-name) true)}
|
|
name]
|
|
[:span {:class (dom/classnames (css :layer-filter-close) true)}
|
|
i/close-small-refactor]]
|
|
[:span {:on-click (remove-filter f)}
|
|
name i/cross])))]
|
|
|
|
(when (:show-filters-menu @filter-state)
|
|
(if new-css-system
|
|
[:ul {:class (dom/classnames (css :filters-container) true)}
|
|
[:li {:key "frames-filter-item"
|
|
:class (dom/classnames (css :filter-menu-item) true
|
|
(css :selected) (contains? (:active-filters @filter-state) :frame))
|
|
:on-click (add-filter :frame)}
|
|
[:div {:class (dom/classnames (css :filter-menu-item-name-wrapper) true)}
|
|
[:span {:class (dom/classnames (css :filter-menu-item-icon) true)}
|
|
i/board-refactor]
|
|
[:span {:class (dom/classnames (css :filter-menu-item-name) true)}
|
|
(tr "workspace.sidebar.layers.frames")]]
|
|
(when (contains? (:active-filters @filter-state) :frame)
|
|
[:span {:class (dom/classnames (css :filter-menu-item-tick) true)}
|
|
i/tick-refactor])]
|
|
[:li {:key "groups-filter-item"
|
|
:class (dom/classnames (css :filter-menu-item) true
|
|
(css :selected) (contains? (:active-filters @filter-state) :group))
|
|
:on-click (add-filter :group)}
|
|
[:div {:class (dom/classnames (css :filter-menu-item-name-wrapper) true)}
|
|
[:span {:class (dom/classnames (css :filter-menu-item-icon) true)}
|
|
i/group-refactor]
|
|
[:span {:class (dom/classnames (css :filter-menu-item-name) true)}
|
|
(tr "workspace.sidebar.layers.groups")]]
|
|
(when (contains? (:active-filters @filter-state) :group)
|
|
[:span {:class (dom/classnames (css :filter-menu-item-tick) true)}
|
|
i/tick-refactor])]
|
|
[:li {:key "masks-filter-item"
|
|
:class (dom/classnames (css :filter-menu-item) true
|
|
(css :selected) (contains? (:active-filters @filter-state) :mask))
|
|
:on-click (add-filter :mask)}
|
|
[:div {:class (dom/classnames (css :filter-menu-item-name-wrapper) true)}
|
|
[:span {:class (dom/classnames (css :filter-menu-item-icon) true)}
|
|
i/mask-refactor]
|
|
[:span {:class (dom/classnames (css :filter-menu-item-name) true)}
|
|
(tr "workspace.sidebar.layers.masks")]]
|
|
(when (contains? (:active-filters @filter-state) :mask)
|
|
[:span {:class (dom/classnames (css :filter-menu-item-tick) true)}
|
|
i/tick-refactor])]
|
|
[:li {:key "components-filter-item"
|
|
:class (dom/classnames (css :filter-menu-item) true
|
|
(css :selected) (contains? (:active-filters @filter-state) :component))
|
|
:on-click (add-filter :component)}
|
|
[:div {:class (dom/classnames (css :filter-menu-item-name-wrapper) true)}
|
|
[:span {:class (dom/classnames (css :filter-menu-item-icon) true)}
|
|
i/component-refactor]
|
|
[:span {:class (dom/classnames (css :filter-menu-item-name) true)}
|
|
(tr "workspace.sidebar.layers.components")]]
|
|
(when (contains? (:active-filters @filter-state) :component)
|
|
[:span {:class (dom/classnames (css :filter-menu-item-tick) true)}
|
|
i/tick-refactor])]
|
|
[:li {:key "texts-filter-item"
|
|
:class (dom/classnames (css :filter-menu-item) true
|
|
(css :selected) (contains? (:active-filters @filter-state) :text))
|
|
:on-click (add-filter :text)}
|
|
[:div {:class (dom/classnames (css :filter-menu-item-name-wrapper) true)}
|
|
[:span {:class (dom/classnames (css :filter-menu-item-icon) true)}
|
|
i/text-refactor]
|
|
[:span {:class (dom/classnames (css :filter-menu-item-name) true)}
|
|
(tr "workspace.sidebar.layers.texts")]]
|
|
(when (contains? (:active-filters @filter-state) :text)
|
|
[:span {:class (dom/classnames (css :filter-menu-item-tick) true)}
|
|
i/tick-refactor])]
|
|
[:li {:key "images-filter-item"
|
|
:class (dom/classnames (css :filter-menu-item) true
|
|
(css :selected) (contains? (:active-filters @filter-state) :image))
|
|
:on-click (add-filter :image)}
|
|
[:div {:class (dom/classnames (css :filter-menu-item-name-wrapper) true)}
|
|
[:span {:class (dom/classnames (css :filter-menu-item-icon) true)}
|
|
i/img-refactor]
|
|
[:span {:class (dom/classnames (css :filter-menu-item-name) true)}
|
|
(tr "workspace.sidebar.layers.images")]]
|
|
(when (contains? (:active-filters @filter-state) :image)
|
|
[:span {:class (dom/classnames (css :filter-menu-item-tick) true)}
|
|
i/tick-refactor])]
|
|
[:li {:key "shapes-filter-item"
|
|
:class (dom/classnames (css :filter-menu-item) true
|
|
(css :selected) (contains? (:active-filters @filter-state) :shape))
|
|
:on-click (add-filter :shape)}
|
|
[:div {:class (dom/classnames (css :filter-menu-item-name-wrapper) true)}
|
|
[:span {:class (dom/classnames (css :filter-menu-item-icon) true)}
|
|
i/path-refactor]
|
|
[:span {:class (dom/classnames (css :filter-menu-item-name) true)}
|
|
(tr "workspace.sidebar.layers.shapes")]]
|
|
(when (contains? (:active-filters @filter-state) :shape)
|
|
[:span {:class (dom/classnames (css :filter-menu-item-tick) true)}
|
|
i/tick-refactor])]]
|
|
|
|
[:div.filters-container
|
|
[:span {:on-click (add-filter :frame)} i/artboard (tr "workspace.sidebar.layers.frames")]
|
|
[:span {:on-click (add-filter :group)} i/folder (tr "workspace.sidebar.layers.groups")]
|
|
[:span {:on-click (add-filter :mask)} i/mask (tr "workspace.sidebar.layers.masks")]
|
|
[:span {:on-click (add-filter :component)} i/component (tr "workspace.sidebar.layers.components")]
|
|
[:span {:on-click (add-filter :text)} i/text (tr "workspace.sidebar.layers.texts")]
|
|
[:span {:on-click (add-filter :image)} i/image (tr "workspace.sidebar.layers.images")]
|
|
[:span {:on-click (add-filter :shape)} i/curve (tr "workspace.sidebar.layers.shapes")]]))]
|
|
[:div {:class (if new-css-system
|
|
(dom/classnames (css :tool-window-bar) true)
|
|
(dom/classnames :tool-window-bar true))}
|
|
[:span {:class (if new-css-system
|
|
(dom/classnames (css :page-name) true)
|
|
(dom/classnames :page-name true))}
|
|
(:name page)]
|
|
[:button {:class (if new-css-system
|
|
(dom/classnames (css :icon-search) true)
|
|
(dom/classnames :icon-search true))
|
|
:on-click toggle-search}
|
|
(if new-css-system
|
|
i/search-refactor
|
|
i/search)]]))]))
|
|
|
|
(mf/defc layers-toolbox
|
|
{:wrap [mf/memo]}
|
|
[{:keys [size-parent] :as props}]
|
|
(let [page (mf/deref refs/workspace-page)
|
|
focus (mf/deref refs/workspace-focus-selected)
|
|
objects (hooks/with-focus-objects (:objects page) focus)
|
|
title (when (= 1 (count focus)) (get-in objects [(first focus) :name]))
|
|
new-css-system (mf/use-ctx ctx/new-css-system)
|
|
observer-var (mf/use-var nil)
|
|
lazy-load-ref (mf/use-ref nil)
|
|
|
|
[filtered-objects show-more filter-component] (use-search page objects)
|
|
|
|
intersection-callback
|
|
(fn [entries]
|
|
(when (and (.-isIntersecting (first entries)) (some? show-more))
|
|
(show-more)))
|
|
|
|
on-render-container
|
|
(fn [element]
|
|
(let [options #js {:root element}
|
|
lazy-el (mf/ref-val lazy-load-ref)]
|
|
(cond
|
|
(and (some? element) (not (some? @observer-var)))
|
|
(let [observer (js/IntersectionObserver. intersection-callback options)]
|
|
(.observe observer lazy-el)
|
|
(reset! observer-var observer))
|
|
|
|
(and (nil? element) (some? @observer-var))
|
|
(do (.disconnect @observer-var)
|
|
(reset! observer-var nil)))))
|
|
|
|
on-scroll
|
|
(fn [event]
|
|
(let [children (dom/get-elements-by-class "sticky-children")
|
|
length (.-length children)]
|
|
(when (< 0 length)
|
|
(let [target (dom/get-target event)
|
|
target-top (:top (dom/get-bounding-rect target))
|
|
frames (dom/get-elements-by-class "root-board")
|
|
|
|
last-hidden-frame (->> frames
|
|
(filter #(<= (- (:top (dom/get-bounding-rect %)) target-top) 0))
|
|
last)
|
|
frame-id (dom/get-attribute last-hidden-frame "id")
|
|
|
|
last-hidden-children (->> children
|
|
(filter #(< (- (:top (dom/get-bounding-rect %)) target-top) 0))
|
|
last)
|
|
|
|
is-children-shown? (and last-hidden-children
|
|
(> (- (:bottom (dom/get-bounding-rect last-hidden-children)) target-top) 0))
|
|
|
|
children-frame-id (dom/get-attribute last-hidden-children "data-id")
|
|
;; We want to check that root-board is out of view but its children are not.
|
|
;; only in that case we make root board sticky.
|
|
sticky? (and last-hidden-frame
|
|
is-children-shown?
|
|
(= frame-id children-frame-id))]
|
|
(doseq [frame frames]
|
|
(dom/remove-class! frame "sticky"))
|
|
|
|
(when sticky?
|
|
(dom/add-class! last-hidden-frame "sticky"))))))]
|
|
[:div#layers
|
|
{:class (if new-css-system
|
|
(dom/classnames (css :layers) true)
|
|
(dom/classnames :tool-window true))}
|
|
(if (d/not-empty? focus)
|
|
[:div
|
|
{:class (if new-css-system
|
|
(dom/classnames (css :tool-window-bar) true)
|
|
(dom/classnames :tool-window-bar true))}
|
|
[:button {:class (if new-css-system
|
|
(dom/classnames (css :focus-title) true)
|
|
(dom/classnames :focus-title true))
|
|
:on-click #(st/emit! (dw/toggle-focus-mode))}
|
|
[:span {:class (if new-css-system
|
|
(dom/classnames (css :back-button) true)
|
|
(dom/classnames :back-button true))}
|
|
(if new-css-system
|
|
i/arrow-refactor
|
|
i/arrow-slide)]
|
|
[:div {:class (if new-css-system
|
|
(dom/classnames (css :focus-name) true)
|
|
(dom/classnames :focus-name true))}
|
|
(or title (tr "workspace.sidebar.layers"))]
|
|
(if new-css-system
|
|
[:div {:class (dom/classnames (css :focus-mode-tag-wrapper) true)}
|
|
[:div {:class (dom/classnames (css :focus-mode-tag) true)} (tr "workspace.focus.focus-mode")]]
|
|
[:div.focus-mode (tr "workspace.focus.focus-mode")])]]
|
|
filter-component)
|
|
(if (some? filtered-objects)
|
|
[:*
|
|
[:div {:class (if new-css-system
|
|
(dom/classnames (css :tool-window-content) true)
|
|
(dom/classnames :tool-window-content true))
|
|
:ref on-render-container :key "filters"}
|
|
[:& filters-tree {:objects filtered-objects
|
|
:key (dm/str (:id page))
|
|
:parent-size size-parent}]
|
|
[:div.lazy {:ref lazy-load-ref
|
|
:key "lazy-load"
|
|
:style {:min-height 16}}]]
|
|
[:div {:on-scroll on-scroll
|
|
:class (if new-css-system
|
|
(dom/classnames (css :tool-window-content) true)
|
|
(dom/classnames :tool-window-content true))
|
|
:style {:display (when (some? filtered-objects) "none")}}
|
|
[:& layers-tree {:objects filtered-objects
|
|
:key (dm/str (:id page))
|
|
:filtered? true
|
|
:parent-size size-parent}]]]
|
|
[:div {:on-scroll on-scroll
|
|
:class (if new-css-system
|
|
(dom/classnames (css :tool-window-content) true)
|
|
(dom/classnames :tool-window-content true))
|
|
:style {:display (when (some? filtered-objects) "none")}}
|
|
[:& layers-tree {:objects objects
|
|
:key (dm/str (:id page))
|
|
:filtered? false
|
|
:parent-size size-parent}]])]))
|