Merge remote-tracking branch 'origin/staging' into develop

CHANGES.md

@@ -1,6 +1,6 @@
 # CHANGELOG
 
-## :rocket: 1.20.0
+## 1.20.0
 
 ### :boom: Breaking changes & Deprecations
 
@@ -12,24 +12,32 @@
 
 ### :heart: Community contributions by (Thank you!)
 
+
 ## 1.19.0
 
 ### :boom: Breaking changes & Deprecations
 
 ### :sparkles: New features
+
 - Default naming of text layers [Taiga #2836](https://tree.taiga.io/project/penpot/us/2836)
 - Create typography style from a selected text layer[Taiga #3041](https://tree.taiga.io/project/penpot/us/3041)
 - Board as ruler origin [Taiga #4833](https://tree.taiga.io/project/penpot/us/4833)
 - Access tokens support [Taiga #4460](https://tree.taiga.io/project/penpot/us/4460)
 - Show interactions setting at the view mode [Taiga #1330](https://tree.taiga.io/project/penpot/issue/1330)
+- Improve dashboard performance related to thumbnails; now the thumbnails are
+  rendered as bitmap images.
+- Add the ability to disable google fonts provider with the `disable-google-fonts-provider` flag
+- Add the ability to disable dashboard templates section with the `disable-dashboard-templates-section` flag
 
 ### :bug: Bugs fixed
+
 - Fix files can be opened from multiple urls [Taiga #5310](https://tree.taiga.io/project/penpot/issue/5310)
 - Fix asset color item was created from the selected layer [Taiga #5180](https://tree.taiga.io/project/penpot/issue/5180)
 
 ### :arrow_up: Deps updates
 
 ### :heart: Community contributions by (Thank you!)
+
 - Update Typography palette order (by @akshay-gupta7) [Github #3156](https://github.com/penpot/penpot/pull/3156)
 - Palettes (color, typographies) empty state (by @akshay-gupta7) [Github #3160](https://github.com/penpot/penpot/pull/3160)
 - Duplicate objects via drag + alt (by @akshay-gupta7) [Github #3147](https://github.com/penpot/penpot/pull/3147)

backend/src/app/http/awsns.clj

@@ -36,10 +36,10 @@
 
 (defmethod ig/init-key ::routes
   [_ {:keys [::wrk/executor] :as cfg}]
-  (letfn [(handler [request respond _]
+  (letfn [(handler [request]
             (let [data (-> request yrq/body slurp)]
               (px/run! executor #(handle-request cfg data)))
-            (respond {::yrs/status 200}))]
+            {::yrs/status 200})]
     ["/sns" {:handler handler
              :allowed-methods #{:post}}]))
 

backend/src/app/rpc/commands/files.clj

@@ -549,9 +549,11 @@
           f.created_at,
           f.modified_at,
           f.name,
-          f.is_shared
+          f.is_shared,
+          ft.media_id
      from file as f
     inner join project as p on (p.id = f.project_id)
+     left join file_thumbnail as ft on (ft.file_id = f.id and ft.revn = f.revn)
     where f.is_shared = true
       and f.deleted_at is null
       and p.deleted_at is null
@@ -582,6 +584,12 @@
     (->> (db/exec! conn [sql:team-shared-files team-id])
          (into #{} (comp
                     (map decode-row)
+                    (map (fn [row]
+                           (if-let [media-id (:media-id row)]
+                             (-> row
+                                 (dissoc :media-id)
+                                 (assoc :thumbnail-uri (resolve-public-uri media-id)))
+                             (dissoc row :media-id))))
                     (map #(assoc % :library-summary (library-summary %)))
                     (map #(dissoc % :data)))))))
 

frontend/src/app/config.cljs

@@ -59,7 +59,9 @@
     :webworker))
 
 (def default-flags
-  [:enable-newsletter-subscription])
+  [:enable-newsletter-subscription
+   :enable-dashboard-templates-section
+   :enable-google-fonts-provider])
 
 (defn- parse-flags
   [global]

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

@@ -21,7 +21,6 @@
    [app.main.data.workspace.state-helpers :as wsh]
    [app.main.data.workspace.texts :as dwt]
    [app.main.data.workspace.undo :as dwu]
-   [app.main.store :as st]
    [app.util.color :as uc]
    [beicon.core :as rx]
    [potok.core :as ptk]))
@@ -610,7 +609,7 @@
                                               (materialize-color-components))]))))))))))
 
 (defn select-color
-  [position]
+  [position add-color]
   (ptk/reify ::select-color
     ptk/WatchEvent
     (watch [_ state _]
@@ -635,7 +634,7 @@
         (rx/of (md/show :colorpicker
                  {:x (:x position)
                   :y (:y position)
-                  :on-accept #(st/emit! (dwl/add-color data))
+                  :on-accept add-color
                   :data data
                   :position :right})
           (ptk/event ::ev/event {::ev/name "add-asset-to-library"

frontend/src/app/main/fonts.cljs

@@ -65,7 +65,9 @@
              (merge db (d/index-by :id fonts))))))
 
 (register! :builtin local-fonts)
-(register! :google google-fonts)
+
+(when (contains? cf/flags :google-fonts-provider)
+  (register! :google google-fonts))
 
 (defn get-font-data [id]
   (get @fontsdb id))

frontend/src/app/main/ui/dashboard.cljs

@@ -9,6 +9,7 @@
    [app.common.data :as d]
    [app.common.math :as mth]
    [app.common.spec :as us]
+   [app.config :as cf]
    [app.main.data.dashboard :as dd]
    [app.main.data.dashboard.shortcuts :as sc]
    [app.main.data.events :as ev]
@@ -259,11 +260,13 @@
                               :projects projects
                               :profile profile
                               :default-project-id default-project-id}]
+
+        (when (contains? cf/flags :dashboard-templates-section)
           [:& templates-section {:profile profile
                                  :project project
                                  :default-project-id default-project-id
                                  :team team
-                               :content-width @content-width}]]
+                                 :content-width @content-width}])]
 
        :dashboard-fonts
        [:& fonts-page {:team team}]
@@ -275,11 +278,12 @@
        (when project
          [:*
           [:& files-section {:team team :project project}]
+          (when (contains? cf/flags :dashboard-templates-section)
             [:& templates-section {:profile profile
                                    :project project
                                    :default-project-id default-project-id
                                    :team team
-                                 :content-width @content-width}]])
+                                   :content-width @content-width}])])
 
        :dashboard-search
        [:& search-page {:team team

frontend/src/app/main/ui/dashboard/libraries.cljs

@@ -23,38 +23,39 @@
   [{:keys [team] :as props}]
   (let [files-map       (mf/deref refs/dashboard-shared-files)
         projects        (mf/deref refs/dashboard-projects)
+
         default-project (->> projects vals (d/seek :is-default))
-        files           (if (nil? files-map)
+
+        files           (mf/with-memo [files-map]
+                          (if (nil? files-map)
                             nil
                             (->> (vals files-map)
                                  (sort-by :modified-at)
-                             (reverse)))
+                                 (reverse))))
 
         components-v2   (features/use-feature :components-v2)
 
         width           (mf/use-state nil)
         rowref          (mf/use-ref)
-        itemsize        (if (>= @width 1030)
+
-                          280
+        itemsize        (if (>= @width 1030) 280 230)
-                          230)
         ratio           (if (some? @width) (/ @width itemsize) 0)
         nitems          (mth/floor ratio)
         limit           (min 10 nitems)
         limit           (max 1 limit)]
-    (mf/use-effect
+
-     (mf/deps team)
+    (mf/with-effect [team]
-     (fn []
       (when team
         (let [tname (if (:is-default team)
                       (tr "dashboard.your-penpot")
                       (:name team))]
-           (dom/set-html-title (tr "title.dashboard.shared-libraries" tname))))))
+          (dom/set-html-title (tr "title.dashboard.shared-libraries" tname)))))
 
-    (mf/use-effect
+    (mf/with-effect []
-     #(st/emit! (dd/fetch-shared-files)
+      (st/emit! (dd/fetch-shared-files)
                 (dd/clear-selected-files)))
 
-    (mf/with-effect
+    (mf/with-effect []
       (let [node (mf/ref-val rowref)
             mnt? (volatile! true)
             sub  (->> (wapi/observe-resize node)

frontend/src/app/main/ui/dashboard/projects.cljs

@@ -9,6 +9,7 @@
    [app.common.data :as d]
    [app.common.geom.point :as gpt]
    [app.common.math :as mth]
+   [app.config :as cf]
    [app.main.data.dashboard :as dd]
    [app.main.data.events :as ev]
    [app.main.data.messages :as msg]
@@ -414,7 +415,9 @@
        (when team-hero?
          [:& team-hero {:team team :close-fn close-banner}])
 
-       (when (or (not tutorial-viewed?) (not walkthrough-viewed?))
+       (when (and (contains? cf/flags :dashboard-templates-section)
+                  (or (not tutorial-viewed?)
+                      (not walkthrough-viewed?)))
          [:div.hero-projects
           (when (and (not tutorial-viewed?) (:is-default team))
             [:& tutorial-project

frontend/src/app/main/ui/viewer.cljs

@@ -313,22 +313,25 @@
         (mf/use-fn
          (fn [event]
            (let [event  (.getBrowserEvent ^js event)
-                 norm-event ^js (nw/normalize-wheel event)
+                 wrapper (dom/get-element-by-class "inspect-svg-wrapper")
+                 section (dom/get-element-by-class "inspect-svg-container")
+                 target (.-target event)]
+             (when (or (dom/child? target wrapper) (dom/class? target "inspect-svg-container"))
+               (let [norm-event ^js (nw/normalize-wheel event)
                      mod? (kbd/mod? event)
                      shift? (kbd/shift? event)
                      delta (.-pixelY norm-event)
-                 viewer-section (.target event)
                      scroll-pos (if shift?
-                              (dom/get-h-scroll-pos viewer-section)
+                                  (dom/get-h-scroll-pos section)
-                              (dom/get-scroll-pos viewer-section))
+                                  (dom/get-scroll-pos section))
                      new-scroll-pos (+ scroll-pos delta)]
                  (when-not mod?
                    (do
                      (dom/prevent-default event)
                      (dom/stop-propagation event)
                      (if shift?
-                   (dom/set-h-scroll-pos! viewer-section new-scroll-pos)
+                       (dom/set-h-scroll-pos! section new-scroll-pos)
-                   (dom/set-scroll-pos! viewer-section new-scroll-pos)))))))
+                       (dom/set-scroll-pos! section new-scroll-pos)))))))))
 
         on-exit-fullscreen
         (mf/use-callback

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

@@ -465,8 +465,8 @@
         toggle-flag
         (mf/use-fn
          (fn [event]
-           (let [flag (-> (dom/get-target event)
+           (let [flag (-> (dom/get-current-target event)
-                          (dom/get-data :flag)
+                          (dom/get-data "flag")
                           (keyword))]
              (st/emit!
               (-> (dw/toggle-layout-flag flag)

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

@@ -1546,11 +1546,16 @@
 
         read-only?      (mf/use-ctx ctx/workspace-read-only?)
 
+        add-color
+        (mf/use-fn
+          (fn [value _]
+            (st/emit! (dwl/add-color value))))
+
         add-color-clicked
         (mf/use-fn
           (fn [event]
             (let [position (dom/get-client-position event)]
-              (st/emit! (dc/select-color position)))))
+              (st/emit! (dc/select-color position add-color)))))
 
         create-group
         (mf/use-fn
@@ -1888,7 +1893,7 @@
 
         create-group
         (mf/use-fn
-         (mf/deps typographies selected on-clear-selection file-id)
+         (mf/deps typographies selected on-clear-selection file-id (:id @state))
          (fn [group-name]
            (on-clear-selection)
            (let [undo-id (js/Symbol)]
@@ -1922,7 +1927,7 @@
 
         on-group
         (mf/use-fn
-         (mf/deps typographies selected)
+         (mf/deps typographies selected create-group)
          (fn [event]
            (dom/stop-propagation event)
            (modal/show! :name-group-dialog {:accept create-group})))

frontend/src/app/util/dom.cljs

@@ -493,7 +493,7 @@
       (.remove ^js class-list class-name))))
 
 (defn child? [^js node1 ^js node2]
-  (when (some? node1)
+  (when (and (some? node1) (some? node2))
     (.contains ^js node2 ^js node1)))
 
 (defn get-user-agent []