;; 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.dashboard.grid (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] [app.common.data.macros :as dm] [app.common.geom.point :as gpt] [app.common.logging :as log] [app.config :as cf] [app.main.data.common :as dcm] [app.main.data.dashboard :as dd] [app.main.data.notifications :as ntf] [app.main.data.project :as dpj] [app.main.data.team :as dtm] [app.main.features :as features] [app.main.fonts :as fonts] [app.main.rasterizer :as thr] [app.main.refs :as refs] [app.main.render :as render] [app.main.repo :as rp] [app.main.store :as st] [app.main.ui.components.color-bullet :as bc] [app.main.ui.dashboard.file-menu :refer [file-menu*]] [app.main.ui.dashboard.import :refer [use-import-file]] [app.main.ui.dashboard.inline-edition :refer [inline-edition]] [app.main.ui.dashboard.placeholder :refer [empty-placeholder loading-placeholder]] [app.main.ui.ds.product.loader :refer [loader*]] [app.main.ui.hooks :as h] [app.main.ui.icons :as i] [app.main.worker :as wrk] [app.util.color :as uc] [app.util.dom :as dom] [app.util.dom.dnd :as dnd] [app.util.i18n :as i18n :refer [tr]] [app.util.keyboard :as kbd] [app.util.time :as dt] [app.util.timers :as ts] [beicon.v2.core :as rx] [cuerdas.core :as str] [rumext.v2 :as mf])) (log/set-level! :debug) ;; --- Grid Item Thumbnail (defn- persist-thumbnail [file-id revn blob] (let [params {:file-id file-id :revn revn :media blob}] (->> (rp/cmd! :create-file-thumbnail params) (rx/map :id)))) (defn render-thumbnail [file-id revn] (->> (wrk/ask! {:cmd :thumbnails/generate-for-file :revn revn :file-id file-id :features (features/get-team-enabled-features @st/state)}) (rx/mapcat (fn [{:keys [fonts] :as result}] (->> (fonts/render-font-styles fonts) (rx/map (fn [styles] (assoc result :styles styles :width 252)))))))) (defn- ask-for-thumbnail "Creates some hooks to handle the files thumbnails cache" [file-id revn] (->> (render-thumbnail file-id revn) (rx/mapcat thr/render) (rx/mapcat (partial persist-thumbnail file-id revn)))) (mf/defc grid-item-thumbnail* {::mf/props :obj ::mf/private true} [{:keys [can-edit file]}] (let [file-id (get file :id) revn (get file :revn) thumbnail-id (get file :thumbnail-id) bg-color (dm/get-in file [:data :background]) container (mf/use-ref) visible? (h/use-visible container :once? true)] (mf/with-effect [file-id revn visible? thumbnail-id] (when (and visible? (not thumbnail-id)) (->> (ask-for-thumbnail file-id revn) (rx/subs! (fn [thumbnail-id] (st/emit! (dd/set-file-thumbnail file-id thumbnail-id))) (fn [cause] (log/error :hint "unable to render thumbnail" :file-if file-id :revn revn :message (ex-message cause))))))) [:div {:class (stl/css :grid-item-th) :style {:background-color bg-color} :ref container} (when visible? (if thumbnail-id [:img {:class (stl/css :grid-item-thumbnail-image) :draggable (dm/str can-edit) :src (cf/resolve-media thumbnail-id) :loading "lazy" :decoding "async"}] [:> loader* {:class (stl/css :grid-loader) :draggable (dm/str can-edit) :overlay true :title (tr "labels.loading")}]))])) ;; --- Grid Item Library (def ^:private menu-icon (i/icon-xref :menu (stl/css :menu-icon))) (mf/defc grid-item-library* {::mf/props :obj} [{:keys [file]}] (mf/with-effect [file] (when file (let [font-ids (map :font-id (get-in file [:library-summary :typographies :sample] []))] (run! fonts/ensure-loaded! font-ids)))) [:div {:class (stl/css :grid-item-th :library)} (if (nil? file) [:> loader* {:class (stl/css :grid-loader) :overlay true :title (tr "labels.loading")}] (let [summary (:library-summary file) components (:components summary) colors (:colors summary) typographies (:typographies summary)] [:* (when (and (zero? (:count components)) (zero? (:count colors)) (zero? (:count typographies))) [:* [:div {:class (stl/css :asset-section)} [:div {:class (stl/css :asset-title)} [:span (tr "workspace.assets.components")] [:span {:class (stl/css :num-assets)} (str "\u00A0(") 0 ")"]]] ;; Unicode 00A0 is non-breaking space [:div {:class (stl/css :asset-section)} [:div {:class (stl/css :asset-title)} [:span (tr "workspace.assets.colors")] [:span {:class (stl/css :num-assets)} (str "\u00A0(") 0 ")"]]] ;; Unicode 00A0 is non-breaking space [:div {:class (stl/css :asset-section)} [:div {:class (stl/css :asset-title)} [:span (tr "workspace.assets.typography")] [:span {:class (stl/css :num-assets)} (str "\u00A0(") 0 ")"]]]]) ;; Unicode 00A0 is non-breaking space (when (pos? (:count components)) [:div {:class (stl/css :asset-section)} [:div {:class (stl/css :asset-title)} [:span (tr "workspace.assets.components")] [:span {:class (stl/css :num-assets)} (str "\u00A0(") (:count components) ")"]] ;; Unicode 00A0 is non-breaking space [:div {:class (stl/css :asset-list)} (for [component (:sample components)] (let [root-id (or (:main-instance-id component) (:id component))] ;; Check for components-v2 in library [:div {:class (stl/css :asset-list-item) :key (str "assets-component-" (:id component))} [:& render/component-svg {:root-shape (get-in component [:objects root-id]) :objects (:objects component)}] ;; Components in the summary come loaded with objects, even in v2 [:div {:class (stl/css :name-block)} [:span {:class (stl/css :item-name) :title (:name component)} (:name component)]]])) (when (> (:count components) (count (:sample components))) [:div {:class (stl/css :asset-list-item)} [:div {:class (stl/css :name-block)} [:span {:class (stl/css :item-name)} "(...)"]]])]]) (when (pos? (:count colors)) [:div {:class (stl/css :asset-section)} [:div {:class (stl/css :asset-title)} [:span (tr "workspace.assets.colors")] [:span {:class (stl/css :num-assets)} (str "\u00A0(") (:count colors) ")"]] ;; Unicode 00A0 is non-breaking space [:div {:class (stl/css :asset-list)} (for [color (:sample colors)] (let [default-name (cond (:gradient color) (uc/gradient-type->string (get-in color [:gradient :type])) (:color color) (:color color) :else (:value color))] [:div {:class (stl/css :asset-list-item :color-item) :key (str "assets-color-" (:id color))} [:& bc/color-bullet {:color {:color (:color color) :id (:id color) :opacity (:opacity color)} :mini true}] [:div {:class (stl/css :name-block)} [:span {:class (stl/css :color-name)} (:name color)] (when-not (= (:name color) default-name) [:span {:class (stl/css :color-value)} (:color color)])]])) (when (> (:count colors) (count (:sample colors))) [:div {:class (stl/css :asset-list-item)} [:div {:class (stl/css :name-block)} [:span {:class (stl/css :item-name)} "(...)"]]])]]) (when (pos? (:count typographies)) [:div {:class (stl/css :asset-section)} [:div {:class (stl/css :asset-title)} [:span (tr "workspace.assets.typography")] [:span {:class (stl/css :num-assets)} (str "\u00A0(") (:count typographies) ")"]] ;; Unicode 00A0 is non-breaking space [:div {:class (stl/css :asset-list)} (for [typography (:sample typographies)] [:div {:class (stl/css :asset-list-item) :key (str "assets-typography-" (:id typography))} [:div {:class (stl/css :typography-sample) :style {:font-family (:font-family typography) :font-weight (:font-weight typography) :font-style (:font-style typography)}} (tr "workspace.assets.typography.sample")] [:div {:class (stl/css :name-block)} [:span {:class (stl/css :item-name) :title (:name typography)} (:name typography)]]]) (when (> (:count typographies) (count (:sample typographies))) [:div {:class (stl/css :asset-list-item)} [:div {:class (stl/css :name-block)} [:span {:class (stl/css :item-name)} "(...)"]]])]])]))]) ;; --- Grid Item (mf/defc grid-item-metadata [{:keys [modified-at]}] (let [locale (mf/deref i18n/locale) time (dt/timeago modified-at {:locale locale})] [:span {:class (stl/css :date)} time])) (defn create-counter-element [_element file-count] (let [counter-el (dom/create-element "div")] (dom/set-property! counter-el "class" (stl/css :drag-counter)) (dom/set-text! counter-el (str file-count)) counter-el)) (mf/defc grid-item* {::mf/props :obj} [{:keys [file origin can-edit selected-files]}] (let [file-id (:id file) is-library-view (= origin :libraries) dashboard-local (mf/deref refs/dashboard-local) file-menu-open? (:menu-open dashboard-local) selected? (contains? selected-files file-id) node-ref (mf/use-ref) menu-ref (mf/use-ref) on-menu-close (mf/use-fn (fn [_] (st/emit! (dd/hide-file-menu)))) on-select (mf/use-fn (fn [event] (when (or (not selected?) (> (count selected-files) 1)) (dom/stop-propagation event) (let [shift? (kbd/shift? event)] (when-not shift? (st/emit! (dd/clear-selected-files))) (st/emit! (dd/toggle-file-select file)))))) on-navigate (mf/use-fn (mf/deps file-id) (fn [event] (let [menu-icon (mf/ref-val menu-ref) target (dom/get-target event)] (when-not (dom/child? target menu-icon) (st/emit! (dcm/go-to-workspace :file-id file-id)))))) on-drag-start (mf/use-fn (mf/deps selected-files can-edit) (fn [event] (st/emit! (dd/hide-file-menu)) (when can-edit (let [offset (dom/get-offset-position (dom/event->native-event event)) select-current? (not (contains? selected-files (:id file))) item-el (mf/ref-val node-ref) counter-el (create-counter-element item-el (if select-current? 1 (count selected-files)))] (when select-current? (st/emit! (dd/clear-selected-files)) (st/emit! (dd/toggle-file-select file))) (dnd/set-data! event "penpot/files" "dummy") (dnd/set-allowed-effect! event "move") ;; set-drag-image requires that the element is rendered and ;; visible to the user at the moment of creating the ghost ;; image (to make a snapshot), but you may remove it right ;; afterwards, in the next render cycle. (dom/append-child! item-el counter-el) (dnd/set-drag-image! event item-el (:x offset) (:y offset)) (ts/raf #(.removeChild ^js item-el counter-el)))))) on-menu-click (mf/use-fn (mf/deps file selected?) (fn [event] (dom/stop-propagation event) (dom/prevent-default event) (when-not selected? (when-not (kbd/shift? event) (st/emit! (dd/clear-selected-files))) (st/emit! (dd/toggle-file-select file))) (let [client-position (dom/get-client-position event) position (if (and (nil? (:y client-position)) (nil? (:x client-position))) (let [target-element (dom/get-target event) points (dom/get-bounding-rect target-element) y (:top points) x (:left points)] (gpt/point x y)) client-position)] (st/emit! (dd/show-file-menu-with-position file-id position))))) on-context-menu (mf/use-fn (mf/deps is-library-view) (fn [event] (dom/stop-propagation event) (dom/prevent-default event) (when-not is-library-view (on-menu-click event)))) edit (mf/use-fn (mf/deps file) (fn [name] (let [name (str/trim name)] (when (not= name "") (st/emit! (dd/rename-file (assoc file :name name))))) (st/emit! (dd/stop-edit-file-name)))) on-edit (mf/use-fn (mf/deps file) (fn [event] (dom/stop-propagation event) (st/emit! (dd/start-edit-file-name file-id)))) handle-key-down (mf/use-callback (mf/deps on-navigate on-select) (fn [event] (dom/stop-propagation event) (when (kbd/enter? event) (on-navigate event)) (when (kbd/shift? event) (when (or (kbd/down-arrow? event) (kbd/left-arrow? event) (kbd/up-arrow? event) (kbd/right-arrow? event)) (on-select event)) ;; TODO Fix this )))] [:li {:class (stl/css-case :grid-item true :project-th true :library is-library-view)} [:div {:class (stl/css-case :selected selected? :library is-library-view) :ref node-ref :role "button" :title (:name file) :draggable (dm/str can-edit) :on-click on-select :on-key-down handle-key-down :on-double-click on-navigate :on-drag-start on-drag-start :on-context-menu on-context-menu} [:div {:class (stl/css :overlay)}] (if ^boolean is-library-view [:> grid-item-library* {:file file}] [:> grid-item-thumbnail* {:file file :can-edit can-edit}]) (when (and (:is-shared file) (not is-library-view)) [:div {:class (stl/css :item-badge)} i/library]) [:div {:class (stl/css :info-wrapper)} [:div {:class (stl/css :item-info)} (if (and (= file-id (:file-id dashboard-local)) (:edition dashboard-local)) [:& inline-edition {:content (:name file) :on-end edit}] [:h3 (:name file)]) [:& grid-item-metadata {:modified-at (:modified-at file)}]] (when-not is-library-view [:div {:class (stl/css-case :project-th-actions true :force-display (:menu-open dashboard-local))} [:div {:class (stl/css :project-th-icon :menu) :tab-index "0" :ref menu-ref :id (str file-id "-action-menu") :on-click on-menu-click :on-key-down (fn [event] (when (kbd/enter? event) (dom/stop-propagation event) (on-menu-click event)))} menu-icon (when (and selected? file-menu-open?) ;; When the menu is open we disable events in the dashboard. We need to force pointer events ;; so the menu can be handled [:div {:style {:pointer-events "all"}} [:> file-menu* {:files (vals selected-files) :left (+ 24 (:x (:menu-pos dashboard-local))) :top (:y (:menu-pos dashboard-local)) :can-edit can-edit :navigate true :on-edit on-edit :on-menu-close on-menu-close :origin origin :parent-id (dm/str file-id "-action-menu")}]])]])]]])) (mf/defc grid {::mf/props :obj} [{:keys [files project origin limit create-fn can-edit selected-files]}] (let [dragging? (mf/use-state false) project-id (:id project) node-ref (mf/use-var nil) on-finish-import (mf/use-fn (fn [] (st/emit! (dpj/fetch-files project-id) (dtm/fetch-shared-files) (dd/clear-selected-files)))) import-files (use-import-file project-id on-finish-import) on-drag-enter (mf/use-fn (fn [e] (when can-edit (when (and (not (dnd/has-type? e "penpot/files")) (or (dnd/has-type? e "Files") (dnd/has-type? e "application/x-moz-file"))) (dom/prevent-default e) (reset! dragging? true))))) on-drag-over (mf/use-fn (fn [e] (when (or (dnd/has-type? e "Files") (dnd/has-type? e "application/x-moz-file")) (dom/prevent-default e)))) on-drag-leave (mf/use-fn (fn [e] (when-not (dnd/from-child? e) (reset! dragging? false)))) on-drop (mf/use-fn (fn [e] (if can-edit (when (and (not (dnd/has-type? e "penpot/files")) (or (dnd/has-type? e "Files") (dnd/has-type? e "application/x-moz-file"))) (dom/prevent-default e) (reset! dragging? false) (import-files (.-files (.-dataTransfer e)))) (dom/prevent-default e))))] [:div {:class (stl/css :dashboard-grid) :dragabble (dm/str can-edit) :on-drag-enter on-drag-enter :on-drag-over on-drag-over :on-drag-leave on-drag-leave :on-drop on-drop :ref node-ref} (cond (nil? files) [:& loading-placeholder] (seq files) (for [[index slice] (d/enumerate (partition-all limit files))] [:ul {:class (stl/css :grid-row) :key (dm/str index)} (when @dragging? [:li {:class (stl/css :grid-item)}]) (for [item slice] [:> grid-item* {:file item :key (dm/str (:id item)) :origin origin :selected-files selected-files :can-edit can-edit}])]) :else [:& empty-placeholder {:limit limit :can-edit can-edit :create-fn create-fn :origin origin :project-id project-id :on-finish-import on-finish-import}])])) (mf/defc line-grid-row [{:keys [files selected-files dragging? limit can-edit] :as props}] (let [elements limit limit (if dragging? (dec limit) limit)] [:ul {:class (stl/css :grid-row :no-wrap) :style {:grid-template-columns (dm/str "repeat(" elements ", 1fr)")}} (when dragging? [:li {:class (stl/css :grid-item :dragged)}]) (for [item (take limit files)] [:> grid-item* {:id (:id item) :file item :selected-files selected-files :can-edit can-edit :key (dm/str (:id item))}])])) (mf/defc line-grid [{:keys [project team files limit create-fn can-edit] :as props}] (let [dragging? (mf/use-state false) project-id (:id project) team-id (:id team) selected-files (mf/deref refs/selected-files) selected-project (mf/deref refs/selected-project) on-finish-import (mf/use-fn (fn [] (st/emit! (dd/fetch-recent-files) (dd/clear-selected-files)))) import-files (use-import-file project-id on-finish-import) on-drag-enter (mf/use-fn (mf/deps selected-project can-edit) (fn [e] (when can-edit (cond (dnd/has-type? e "penpot/files") (do (dom/prevent-default e) (when-not (or (dnd/from-child? e) (dnd/broken-event? e)) (when (not= selected-project project-id) (reset! dragging? true)))) (or (dnd/has-type? e "Files") (dnd/has-type? e "application/x-moz-file")) (do (dom/prevent-default e) (reset! dragging? true)))))) on-drag-over (mf/use-fn (fn [e] (when (or (dnd/has-type? e "penpot/files") (dnd/has-type? e "Files") (dnd/has-type? e "application/x-moz-file")) (dom/prevent-default e)))) on-drag-leave (mf/use-fn (fn [e] (when-not (dnd/from-child? e) (reset! dragging? false)))) on-drop-success (mf/use-fn (fn [] (st/emit! (ntf/success (tr "dashboard.success-move-file")) (dd/fetch-recent-files) (dd/clear-selected-files)))) on-drop (mf/use-fn (mf/deps files selected-files can-edit) (fn [e] (if can-edit (cond (dnd/has-type? e "penpot/files") (do (reset! dragging? false) (when (not= selected-project project-id) (let [data {:ids (into #{} (keys selected-files)) :project-id project-id} mdata {:on-success on-drop-success}] (st/emit! (dd/move-files (with-meta data mdata)))))) (or (dnd/has-type? e "Files") (dnd/has-type? e "application/x-moz-file")) (do (dom/prevent-default e) (reset! dragging? false) (import-files (.-files (.-dataTransfer e))))) (dom/prevent-default e))))] [:div {:class (stl/css :dashboard-grid) :dragabble (dm/str can-edit) :on-drag-enter on-drag-enter :on-drag-over on-drag-over :on-drag-leave on-drag-leave :on-drop on-drop} (cond (nil? files) [:& loading-placeholder] (seq files) [:& line-grid-row {:files files :team-id team-id :selected-files selected-files :dragging? @dragging? :can-edit can-edit :limit limit}] :else [:& empty-placeholder {:dragging? @dragging? :limit limit :can-edit can-edit :create-fn create-fn :project-id project-id :on-finish-import on-finish-import}])]))