✨ Add events for use library assets

frontend/src/app/main/data/workspace.cljs

@@ -2016,6 +2016,8 @@
                                 (map :id)
                                 (pcb/resize-parents changes))
 
+              orig-shapes  (map (d/getf all-objects) selected)
+
               selected     (into (d/ordered-set)
                                  (comp
                                   (filter add-obj?)
@@ -2028,13 +2030,22 @@
                              (some? drop-cell)
                              (pcb/update-shapes [parent-id]
                                                 #(ctl/add-children-to-cell % selected all-objects drop-cell)))
+
               undo-id      (js/Symbol)]
 
-          (rx/of (dwu/start-undo-transaction undo-id)
+          (rx/concat
-                 (dch/commit-changes changes)
+           (->> (filter ctk/instance-head? orig-shapes)
-                 (dws/select-shapes selected)
+                (map (fn [{:keys [component-file]}]
-                 (ptk/data-event :layout/update {:ids [frame-id]})
+                       (ptk/event ::ev/event
-                 (dwu/commit-undo-transaction undo-id)))))))
+                                  {::ev/name "use-library-component"
+                                   ::ev/origin "paste"
+                                   :external-library (not= file-id component-file)})))
+                (rx/from))
+           (rx/of (dwu/start-undo-transaction undo-id)
+                  (dch/commit-changes changes)
+                  (dws/select-shapes selected)
+                  (ptk/data-event :layout/update {:ids [frame-id]})
+                  (dwu/commit-undo-transaction undo-id))))))))
 
 (defn as-content [text]
   (let [paragraphs (->> (str/lines text)

frontend/src/app/main/data/workspace/libraries.cljs

@@ -586,7 +586,7 @@
   in the given file library. Then selects the newly created instance."
   ([file-id component-id position]
    (instantiate-component file-id component-id position nil))
-  ([file-id component-id position {:keys [start-move? initial-point id-ref]}]
+  ([file-id component-id position {:keys [start-move? initial-point id-ref origin]}]
    (dm/assert! (uuid? file-id))
    (dm/assert! (uuid? component-id))
    (dm/assert! (gpt/point? position))
@@ -600,6 +600,8 @@
              changes   (-> (pcb/empty-changes it (:id page))
                            (pcb/with-objects objects))
 
+             current-file-id (:current-file-id state)
+
              [new-shape changes]
              (cll/generate-instantiate-component changes
                                                  objects
@@ -608,12 +610,18 @@
                                                  position
                                                  page
                                                  libraries)
+
              undo-id (js/Symbol)]
 
          (when id-ref
            (reset! id-ref (:id new-shape)))
 
-         (rx/of (dwu/start-undo-transaction undo-id)
+         (rx/of (ptk/event
+                 ::ev/event
+                 {::ev/name "use-library-component"
+                  ::ev/origin origin
+                  :external-library (not= file-id current-file-id)})
+                (dwu/start-undo-transaction undo-id)
                 (dch/commit-changes changes)
                 (ptk/data-event :layout/update {:ids [(:id new-shape)]})
                 (dws/select-shapes (d/ordered-set (:id new-shape)))

frontend/src/app/main/data/workspace/selection.cljs

@@ -456,22 +456,30 @@
 
                 id-duplicated   (first new-ids)
 
-                frames (into #{}
+                frames          (into #{}
-                             (map #(get-in objects [% :frame-id]))
+                                      (map #(get-in objects [% :frame-id]))
-                             ids)
+                                      ids)
-                undo-id (js/Symbol)]
+                undo-id         (js/Symbol)]
-
+            (rx/concat
+             (->> (map (d/getf objects) ids)
+                  (filter ctk/instance-head?)
+                  (map (fn [{:keys [component-file]}]
+                         (ptk/event ::ev/event
+                                    {::ev/name "use-library-component"
+                                     ::ev/origin "duplicate"
+                                     :external-library (not= file-id component-file)})))
+                  (rx/from))
             ;; Warning: This order is important for the focus mode.
-            (->> (rx/of
+             (->> (rx/of
-                  (dwu/start-undo-transaction undo-id)
+                   (dwu/start-undo-transaction undo-id)
-                  (dch/commit-changes changes)
+                   (dch/commit-changes changes)
-                  (when change-selection?
+                   (when change-selection?
-                    (select-shapes new-ids))
+                     (select-shapes new-ids))
-                  (ptk/data-event :layout/update {:ids frames})
+                   (ptk/data-event :layout/update {:ids frames})
-                  (memorize-duplicated id-original id-duplicated)
+                   (memorize-duplicated id-original id-duplicated)
-                  (dwu/commit-undo-transaction undo-id))
+                   (dwu/commit-undo-transaction undo-id))
-                 (rx/tap #(when (some? return-ref)
+                  (rx/tap #(when (some? return-ref)
-                            (reset! return-ref id-duplicated))))))))))
+                             (reset! return-ref id-duplicated)))))))))))
 
 (defn duplicate-selected
   ([move-delta?]

frontend/src/app/main/ui/workspace/color_palette.cljs

@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
+   [app.main.data.events :as ev]
    [app.main.data.workspace.colors :as mdc]
    [app.main.data.workspace.libraries :as dwl]
    [app.main.refs :as refs]
@@ -20,15 +21,22 @@
    [app.util.i18n :refer [tr]]
    [app.util.keyboard :as kbd]
    [app.util.object :as obj]
+   [potok.v2.core :as ptk]
    [rumext.v2 :as mf]))
 
 (mf/defc palette-item
   {::mf/wrap [mf/memo]}
-  [{:keys [color size]}]
+  [{:keys [color size selected]}]
   (letfn [(select-color [event]
             (st/emit!
              (dwl/add-recent-color color)
-             (mdc/apply-color-from-palette color (kbd/alt? event))))]
+             (mdc/apply-color-from-palette color (kbd/alt? event))
+             (when (not= selected :recent)
+               (ptk/event
+                ::ev/event
+                {::ev/name "use-library-color"
+                 ::ev/origin "color-palette"
+                 :external-library (not= selected :file)}))))]
     [:div {:class (stl/css-case  :color-cell true
                                  :is-not-library-color (nil? (:id color))
                                  :no-text (<= size 64))
@@ -39,7 +47,7 @@
 
 
 (mf/defc palette
-  [{:keys [current-colors size width]}]
+  [{:keys [current-colors size width selected]}]
   (let [;; We had to do this due to a bug that leave some bugged colors
         current-colors (h/use-equal-memo (filter #(or (:gradient %) (:color %) (:image %)) current-colors))
         state          (mf/use-state {:show-menu false})
@@ -132,7 +140,7 @@
                        :max-width (str width "px")
                        :right (str (* offset-step offset) "px")}}
          (for [[idx item] (map-indexed vector current-colors)]
-           [:& palette-item {:color item :key idx :size size}])])]
+           [:& palette-item {:color item :key idx :size size :selected selected}])])]
      (when show-arrows?
        [:button {:class (stl/css :right-arrow)
                  :disabled (= offset max-offset)
@@ -170,4 +178,5 @@
 
     [:& palette {:current-colors @colors
                  :size size
-                 :width width}]))
+                 :width width
+                 :selected selected}]))

frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs

@@ -22,6 +22,7 @@
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
+   [potok.v2.core :as ptk]
    [rumext.v2 :as mf]))
 
 (mf/defc libraries
@@ -76,8 +77,14 @@
 
         on-color-click
         (mf/use-fn
-         (mf/deps state)
+         (mf/deps state @selected)
          (fn [event]
+           (when-not (= :recent @selected)
+             (st/emit! (ptk/event
+                        ::ev/event
+                        {::ev/name "use-library-color"
+                         ::ev/origin "colorpicker"
+                         :external-library (not= :file @selected)})))
            (on-select-color state event)))]
 
     ;; Load library colors when the select is changed

frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs

@@ -70,7 +70,12 @@
          (fn [event]
            (st/emit!
             (dwl/add-recent-color color)
-            (dc/apply-color-from-palette color (kbd/alt? event)))))
+            (dc/apply-color-from-palette color (kbd/alt? event))
+            (ptk/event
+             ::ev/event
+             {::ev/name "use-library-color"
+              ::ev/origin "sidebar"
+              :external-library (not local?)}))))
 
         rename-color
         (mf/use-fn

frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs

@@ -10,6 +10,7 @@
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.files.helpers :as cfh]
+   [app.main.data.events :as ev]
    [app.main.data.modal :as modal]
    [app.main.data.workspace :as dw]
    [app.main.data.workspace.libraries :as dwl]
@@ -26,6 +27,7 @@
    [app.util.i18n :as i18n :refer [tr]]
    [cuerdas.core :as str]
    [okulary.core :as l]
+   [potok.v2.core :as ptk]
    [rumext.v2 :as mf]))
 
 (def lens:typography-section-state
@@ -97,7 +99,18 @@
         on-asset-click
         (mf/use-fn
          (mf/deps typography apply-typography on-asset-click)
-         (partial on-asset-click typography-id apply-typography))]
+         (partial on-asset-click typography-id apply-typography))
+
+        on-click
+        (mf/use-fn
+         (mf/deps typography apply-typography on-asset-click)
+         (fn [ev]
+           (st/emit! (ptk/event
+                      ::ev/event
+                      {::ev/name "use-library-typography"
+                       ::ev/origin "sidebar"
+                       :external-library (not local?)}))
+           (on-asset-click ev)))]
 
     [:div {:class (stl/css :typography-item)
            :ref item-ref
@@ -113,7 +126,7 @@
        :typography typography
        :local? local?
        :selected? (contains? selected typography-id)
-       :on-click on-asset-click
+       :on-click on-click
        :on-change handle-change
        :on-context-menu on-context-menu
        :editing? editing?

frontend/src/app/main/ui/workspace/text_palette.cljs

@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data :as d]
+   [app.main.data.events :as ev]
    [app.main.data.workspace.texts :as dwt]
    [app.main.fonts :as f]
    [app.main.refs :as refs]
@@ -18,23 +19,30 @@
    [app.util.i18n :refer [tr]]
    [app.util.object :as obj]
    [cuerdas.core :as str]
+   [potok.v2.core :as ptk]
    [rumext.v2 :as mf]))
 
 (mf/defc typography-item
-  [{:keys [file-id selected-ids typography name-only? size]}]
+  [{:keys [file-id selected-ids typography name-only? size current-file-id]}]
   (let [font-data (f/get-font-data (:font-id typography))
         font-variant-id (:font-variant-id typography)
         variant-data (->> font-data :variants (d/seek #(= (:id %) font-variant-id)))
 
+
         handle-click
         (mf/use-callback
-         (mf/deps typography selected-ids)
+         (mf/deps typography selected-ids file-id current-file-id)
          (fn []
            (let [attrs (merge
                         {:typography-ref-file file-id
                          :typography-ref-id (:id typography)}
                         (dissoc typography :id :name))]
 
+             (st/emit! (ptk/event
+                        ::ev/event
+                        {::ev/name "use-library-typography"
+                         ::ev/origin "text-palette"
+                         :external-library (not= file-id current-file-id)}))
              (run! #(st/emit!
                      (dwt/update-text-attrs
                       {:id %
@@ -160,6 +168,7 @@
            [:& typography-item
             {:key idx
              :file-id file-id
+             :current-file-id current-file-id
              :selected-ids selected-ids
              :typography item
              :size size}])])]

frontend/src/app/main/ui/workspace/viewport/actions.cljs

@@ -422,7 +422,7 @@
                       file-id
                       (:id component)
                       (gpt/point final-x final-y)
-                      {:start-move? true :initial-point viewport-coord})))))
+                      {:start-move? true :initial-point viewport-coord :origin "sidebar"})))))
      (when (or (dnd/has-type? e "penpot/shape")
                (dnd/has-type? e "penpot/component")
                (dnd/has-type? e "Files")

frontend/src/app/plugins/library.cljs

@@ -676,7 +676,7 @@
 
         :else
         (let [id-ref (atom nil)]
-          (st/emit! (dwl/instantiate-component file-id id (gpt/point 0 0) {:id-ref id-ref}))
+          (st/emit! (dwl/instantiate-component file-id id (gpt/point 0 0) {:id-ref id-ref :origin "plugin"}))
           (shape/shape-proxy plugin-id @id-ref))))
 
     :getPluginData