✨ Add slugify to the filename on assets exportation

Fixes https://github.com/penpot/penpot/issues/8017

.github/workflows/build-docker-devenv.yml

@@ -10,6 +10,11 @@ jobs:
     runs-on: penpot-runner-02
 
     steps:
+      - name: Set common environment variables
+        run: |
+          # Each job execution will use its own docker configuration.
+          echo "DOCKER_CONFIG=${{ runner.temp }}/.docker-${{ github.run_id }}-${{ github.job }}" >> $GITHUB_ENV
+
       - name: Checkout code
         uses: actions/checkout@v4
 

.github/workflows/build-docker.yml

@@ -22,6 +22,11 @@ jobs:
     runs-on: penpot-runner-02
 
     steps:
+      - name: Set common environment variables
+        run: |
+          # Each job execution will use its own docker configuration.
+          echo "DOCKER_CONFIG=${{ runner.temp }}/.docker-${{ github.run_id }}-${{ github.job }}" >> $GITHUB_ENV
+
       - name: Checkout code
         uses: actions/checkout@v4
         with:
@@ -66,6 +71,15 @@ jobs:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
 
+      # To avoid the “429 Too Many Requests” error when downloading
+      # images from DockerHub for unregistered users.
+      # https://docs.docker.com/docker-hub/usage/
+      - name: Login to DockerHub Registry
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.PUB_DOCKER_USERNAME }}
+          password: ${{ secrets.PUB_DOCKER_PASSWORD }}
+
       - name: Extract metadata (tags, labels)
         id: meta
         uses: docker/metadata-action@v5

CHANGES.md

@@ -14,14 +14,16 @@
 - Tokens panel nested path view [Taiga #9966](https://tree.taiga.io/project/penpot/us/9966)
 - Improve usability of lock and hide buttons in the layer panel. [Taiga #12916](https://tree.taiga.io/project/penpot/issue/12916)
 - Optimize sidebar performance for deeply nested shapes [Taiga #13017](https://tree.taiga.io/project/penpot/task/13017)
-- Change the default option on tokens import dialog [Github #8051](https://github.com/penpot/penpot/pull/8051)
 
 ### :bug: Bugs fixed
 
+- Remove whitespaces from asset export filename [Github #8133](https://github.com/penpot/penpot/pull/8133)
 - Fix prototype connections lost when switching between variants [Taiga #12812](https://tree.taiga.io/project/penpot/issue/12812)
 - Fix wrong image in the onboarding invitation block [Taiga #13040](https://tree.taiga.io/project/penpot/issue/13040)
 - Fix wrong register image [Taiga #12955](https://tree.taiga.io/project/penpot/task/12955)
 - Fix error message on components doesn't close automatically [Taiga #12012](https://tree.taiga.io/project/penpot/issue/12012)
+- Fix incorrect default option on tokens import dialog [Github #8051](https://github.com/penpot/penpot/pull/8051)
+
 
 ## 2.13.0 (Unreleased)
 

exporter/src/app/handlers/resources.cljs

@@ -36,7 +36,7 @@
     {:path     path
      :mtype    (mime/get type)
      :name     name
-     :filename (str/concat name (mime/get-extension type))
+     :filename (str/concat (str/slug name) (mime/get-extension type))
      :id       task-id}))
 
 (defn create-zip

frontend/playwright/ui/specs/tokens/crud.spec.js

@@ -14,7 +14,7 @@ test.beforeEach(async ({ page }) => {
   await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
 });
 
-test.describe("Tokens - CRUD", () => {
+test.describe("Tokens - creation", () => {
   test("User creates border radius token", async ({ page }) => {
     await testTokenCreationFlow(page, {
       tokenLabel: "Border Radius",
@@ -1256,6 +1256,91 @@ test.describe("Tokens - CRUD", () => {
     ).toBeEnabled();
   });
 
+  test("User creates grouped color token", async ({ page }) => {
+    const { workspacePage, tokensUpdateCreateModal, tokensSidebar } =
+      await setupEmptyTokensFile(page);
+
+    await tokensSidebar
+      .getByRole("button", { name: "Add Token: Color" })
+      .click();
+
+    // Create grouped color token with mouse
+
+    await expect(tokensUpdateCreateModal).toBeVisible();
+
+    const nameField = tokensUpdateCreateModal.getByLabel("Name");
+    const valueField = tokensUpdateCreateModal.getByLabel("Value");
+
+    await nameField.click();
+    await nameField.fill("dark.primary");
+
+    await valueField.click();
+    await valueField.fill("red");
+
+    const submitButton = tokensUpdateCreateModal.getByRole("button", {
+      name: "Save",
+    });
+    await expect(submitButton).toBeEnabled();
+    await submitButton.click();
+
+    await unfoldTokenTree(tokensSidebar, "color", "dark.primary");
+
+    await expect(tokensSidebar.getByLabel("primary")).toBeEnabled();
+  });
+
+  test("User cant create regular token with value missing", async ({
+    page,
+  }) => {
+    const { tokensUpdateCreateModal } = await setupEmptyTokensFile(page);
+
+    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
+    await tokensTabPanel
+      .getByRole("button", { name: "Add Token: Color" })
+      .click();
+
+    await expect(tokensUpdateCreateModal).toBeVisible();
+
+    const nameField = tokensUpdateCreateModal.getByLabel("Name");
+    const submitButton = tokensUpdateCreateModal.getByRole("button", {
+      name: "Save",
+    });
+
+    // Initially submit button should be disabled
+    await expect(submitButton).toBeDisabled();
+
+    // Fill in name but leave value empty
+    await nameField.click();
+    await nameField.fill("primary");
+
+    // Submit button should remain disabled when value is empty
+    await expect(submitButton).toBeDisabled();
+  });
+
+  test("User duplicate color token", async ({ page }) => {
+    const { tokensSidebar, tokenContextMenuForToken } =
+      await setupTokensFile(page);
+
+    await expect(tokensSidebar).toBeVisible();
+
+    unfoldTokenTree(tokensSidebar, "color", "colors.blue.100");
+
+    const colorToken = tokensSidebar.getByRole("button", {
+      name: "100",
+    });
+
+    await colorToken.click({ button: "right" });
+    await expect(tokenContextMenuForToken).toBeVisible();
+
+    await tokenContextMenuForToken.getByText("Duplicate token").click();
+    await expect(tokenContextMenuForToken).not.toBeVisible();
+
+    await expect(
+      tokensSidebar.getByRole("button", { name: "colors.blue.100-copy" }),
+    ).toBeVisible();
+  });
+});
+
+test.describe("Tokens tab - edition", () => {
   test("User edits typography token and all fields are valid", async ({
     page,
   }) => {
@@ -1388,67 +1473,7 @@ test.describe("Tokens - CRUD", () => {
     await expect(colorTokenChanged).toBeVisible();
   });
 
-  test("User creates grouped color token", async ({ page }) => {
-    const { workspacePage, tokensUpdateCreateModal, tokensSidebar } =
-      await setupEmptyTokensFile(page);
-
-    await tokensSidebar
-      .getByRole("button", { name: "Add Token: Color" })
-      .click();
-
-    // Create grouped color token with mouse
-
-    await expect(tokensUpdateCreateModal).toBeVisible();
-
-    const nameField = tokensUpdateCreateModal.getByLabel("Name");
-    const valueField = tokensUpdateCreateModal.getByLabel("Value");
-
-    await nameField.click();
-    await nameField.fill("dark.primary");
-
-    await valueField.click();
-    await valueField.fill("red");
-
-    const submitButton = tokensUpdateCreateModal.getByRole("button", {
-      name: "Save",
-    });
-    await expect(submitButton).toBeEnabled();
-    await submitButton.click();
-
-    await unfoldTokenTree(tokensSidebar, "color", "dark.primary");
-
-    await expect(tokensSidebar.getByLabel("primary")).toBeEnabled();
-  });
-
-  test("User cant create regular token with value missing", async ({
-    page,
-  }) => {
-    const { tokensUpdateCreateModal } = await setupEmptyTokensFile(page);
-
-    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
-    await tokensTabPanel
-      .getByRole("button", { name: "Add Token: Color" })
-      .click();
-
-    await expect(tokensUpdateCreateModal).toBeVisible();
-
-    const nameField = tokensUpdateCreateModal.getByLabel("Name");
-    const submitButton = tokensUpdateCreateModal.getByRole("button", {
-      name: "Save",
-    });
-
-    // Initially submit button should be disabled
-    await expect(submitButton).toBeDisabled();
-
-    // Fill in name but leave value empty
-    await nameField.click();
-    await nameField.fill("primary");
-
-    // Submit button should remain disabled when value is empty
-    await expect(submitButton).toBeDisabled();
-  });
-
-  test("User changes color token color while keeping custom color space", async ({
+  test("User edits color token color while keeping custom color space", async ({
     page,
   }) => {
     const { workspacePage, tokensUpdateCreateModal, tokenThemesSetsSidebar } =
@@ -1502,30 +1527,9 @@ test.describe("Tokens - CRUD", () => {
     await valueSaturationSelector.click({ position: { x: 0, y: 0 } });
     await expect(valueField).toHaveValue(/^rgba(.*)$/);
   });
+});
 
-  test("User duplicate color token", async ({ page }) => {
-    const { tokensSidebar, tokenContextMenuForToken } =
-      await setupTokensFile(page);
-
-    await expect(tokensSidebar).toBeVisible();
-
-    unfoldTokenTree(tokensSidebar, "color", "colors.blue.100");
-
-    const colorToken = tokensSidebar.getByRole("button", {
-      name: "100",
-    });
-
-    await colorToken.click({ button: "right" });
-    await expect(tokenContextMenuForToken).toBeVisible();
-
-    await tokenContextMenuForToken.getByText("Duplicate token").click();
-    await expect(tokenContextMenuForToken).not.toBeVisible();
-
-    await expect(
-      tokensSidebar.getByRole("button", { name: "colors.blue.100-copy" }),
-    ).toBeVisible();
-  });
-
+test.describe("Tokens tab - delete", () => {
   test("User delete color token", async ({ page }) => {
     const { tokensSidebar, tokenContextMenuForToken } =
       await setupTokensFile(page);
@@ -1546,4 +1550,40 @@ test.describe("Tokens - CRUD", () => {
     await expect(tokenContextMenuForToken).not.toBeVisible();
     await expect(colorToken).not.toBeVisible();
   });
+
+  test("User removes node and all child tokens", async ({ page }) => {
+    const { tokensSidebar, workspacePage } = await setupTokensFile(page);
+
+    await expect(tokensSidebar).toBeVisible();
+
+    // Expand color tokens
+    unfoldTokenTree(tokensSidebar, "color", "colors.blue.100");
+
+    // Verify that the node and child token are visible before deletion
+    const colorNode = tokensSidebar.getByRole("button", {
+      name: "blue",
+      exact: true,
+    });
+    const colorNodeToken = tokensSidebar.getByRole("button", {
+      name: "100",
+    });
+
+    // Select a node and right click on it to open context menu
+    await expect(colorNode).toBeVisible();
+    await expect(colorNodeToken).toBeVisible();
+    await colorNode.click({ button: "right" });
+
+    // select "Delete" from the context menu
+    const deleteNodeButton = page.getByRole("button", {
+      name: "Delete",
+      exact: true,
+    });
+    await expect(deleteNodeButton).toBeVisible();
+    await deleteNodeButton.click();
+
+    // Verify that the node is removed
+    await expect(colorNode).not.toBeVisible();
+    // Verify that child token is also removed
+    await expect(colorNodeToken).not.toBeVisible();
+  });
 });

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

@@ -433,11 +433,22 @@
     ptk/WatchEvent
     (watch [it state _]
       (let [data    (dsh/lookup-file-data state)
+
             changes (-> (pcb/empty-changes it)
                         (pcb/with-library-data data)
                         (pcb/set-token set-id token-id nil))]
         (rx/of (dch/commit-changes changes))))))
 
+(defn bulk-delete-tokens
+  [set-id token-ids]
+  (dm/assert! (uuid? set-id))
+  (dm/assert! (every? uuid? token-ids))
+  (ptk/reify ::bulk-delete-tokens
+    ptk/WatchEvent
+    (watch [_ _ _]
+      (apply rx/of
+             (map #(delete-token set-id %) token-ids)))))
+
 (defn duplicate-token
   [token-id]
   (dm/assert! (uuid? token-id))
@@ -505,6 +516,19 @@
         (update state :workspace-tokens assoc :token-context-menu params)
         (update state :workspace-tokens dissoc :token-context-menu)))))
 
+(defn assign-token-node-context-menu
+  [{:keys [position] :as params}]
+
+  (when params
+    (assert (gpt/point? position) "expected a point instance for `position` param"))
+
+  (ptk/reify ::show-token-node-context-menu
+    ptk/UpdateEvent
+    (update [_ state]
+      (if params
+        (update state :workspace-tokens assoc :token-node-context-menu params)
+        (update state :workspace-tokens dissoc :token-node-context-menu)))))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; TOKEN-SET UI OPS
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

frontend/src/app/main/ui/ds/layers/layer_button.cljs

@@ -19,17 +19,19 @@
    [:expandable {:optional true} :boolean]
    [:expanded {:optional true} :boolean]
    [:icon {:optional true} :string]
-   [:on-toggle-expand fn?]])
+   [:on-toggle-expand {:optional true} fn?]
+   [:on-context-menu {:optional true} fn?]])
 
 (mf/defc layer-button*
   {::mf/schema schema:layer-button}
-  [{:keys [label description class is-expandable expanded icon on-toggle-expand children] :rest props}]
+  [{:keys [label description class is-expandable expanded icon on-toggle-expand on-context-menu children] :rest props}]
   (let [button-props (mf/spread-props props
                                       {:class [class (stl/css-case :layer-button true
                                                                    :layer-button--expandable is-expandable
                                                                    :layer-button--expanded expanded)]
                                        :type "button"
-                                       :on-click on-toggle-expand})]
+                                       :on-click on-toggle-expand
+                                       :on-context-menu on-context-menu})]
     [:div {:class (stl/css :layer-button-wrapper)}
      [:> "button" button-props
       [:div {:class (stl/css :layer-button-content)}

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

@@ -312,8 +312,8 @@
   []
   (let [on-reload (mf/use-fn #(js/location.reload))]
     [:> error-container* {}
-     [:div {:class (stl/css :main-message)} (tr "labels.webgl-context-lost.main-message")]
-     [:div {:class (stl/css :desc-message)} (tr "labels.webgl-context-lost.desc-message")]
+     [:div {:class (stl/css :main-message)} (tr "errors.webgl-context-lost.main-message")]
+     [:div {:class (stl/css :desc-message)} (tr "errors.webgl-context-lost.desc-message")]
      [:div {:class (stl/css :buttons-container)}
       [:> button* {:variant "primary" :on-click on-reload}
        (tr "labels.reload-page")]]]))

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

@@ -276,7 +276,11 @@
               :wglobal wglobal
               :layout layout}])
           (when (or (not (and file-loaded? page-id))
-                    (and wasm-renderer-enabled? (not @first-frame-rendered?)))
+                    ;; in wasm renderer, extend the pixel loader until the first frame is rendered
+                    ;; but do not apply it when switching pages
+                    (and wasm-renderer-enabled?
+                         (not file-loaded?)
+                         (not @first-frame-rendered?)))
             [:> workspace-loader*])]]]]]]))
 
 (mf/defc workspace-page*

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

@@ -13,6 +13,7 @@
    [app.main.data.helpers :as dsh]
    [app.main.data.modal :as modal]
    [app.main.data.workspace :as dw]
+   [app.main.features :as features]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.title-bar :refer [title-bar*]]
@@ -22,9 +23,11 @@
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.notifications.badge :refer [badge-notification]]
+   [app.render-wasm.api :as wasm.api]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
+   [app.util.timers :as timers]
    [cuerdas.core :as str]
    [okulary.core :as l]
    [rumext.v2 :as mf]))
@@ -52,6 +55,8 @@
              refs/workspace-data
              =))
 
+
+
 ;; --- Page Item
 
 (mf/defc page-item
@@ -63,6 +68,22 @@
         navigate-fn  (mf/use-fn (mf/deps id) #(st/emit! :interrupt (dcm/go-to-workspace :page-id id)))
         read-only?   (mf/use-ctx ctx/workspace-read-only?)
 
+        on-click
+        (mf/use-fn
+         (mf/deps id)
+         (fn []
+           ;; when using the wasm renderer, apply a blur effect to the viewport canvas
+           (if (features/active-feature? @st/state "render-wasm/v1")
+             (do
+               (wasm.api/capture-canvas-pixels)
+               (wasm.api/apply-canvas-blur)
+               ;; NOTE: it seems we need two RAF so the blur is actually applied and visible
+               ;;       in the canvas :(
+               (timers/raf
+                (fn []
+                  (timers/raf navigate-fn))))
+             (navigate-fn))))
+
         on-delete
         (mf/use-fn
          (mf/deps id)
@@ -155,7 +176,7 @@
                     :selected selected?)
             :data-testid (dm/str "page-" id)
             :tab-index "0"
-            :on-click navigate-fn
+            :on-click on-click
             :on-double-click on-double-click
             :on-context-menu on-context-menu}
       [:div {:class (stl/css :page-icon)}

frontend/src/app/main/ui/workspace/tokens/management.cljs

@@ -14,8 +14,10 @@
    [app.main.ui.ds.foundations.typography.text :refer [text*]]
    [app.main.ui.workspace.tokens.management.context-menu :refer [token-context-menu]]
    [app.main.ui.workspace.tokens.management.group :refer [token-group*]]
+   [app.main.ui.workspace.tokens.management.node-context-menu :refer [token-node-context-menu*]]
    [app.util.array :as array]
    [app.util.i18n :refer [tr]]
+   [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
 (defn- get-sorted-token-groups
@@ -120,7 +122,27 @@
 
         [empty-group filled-group]
         (mf/with-memo [tokens-by-type]
-          (get-sorted-token-groups tokens-by-type))]
+          (get-sorted-token-groups tokens-by-type))
+
+        ;; Filter tokens by their path and return their ids
+        filter-tokens-by-path-ids
+        (mf/use-fn
+         (mf/deps tokens)
+         (fn [type path]
+           (->> tokens
+                (filter (fn [token]
+                          (let [[_ token-value] token]
+                            (and (= (:type token-value) type) (str/starts-with? (:name token-value) path)))))
+                (mapv (fn [token]
+                        (let [[_ token-value] token]
+                          (:id token-value)))))))
+
+        delete-node
+        (mf/with-memo [tokens selected-token-set-id]
+          (fn [node type]
+            (let [path (:path node)
+                  tokens-in-path-ids (filter-tokens-by-path-ids type path)]
+              (st/emit! (dwtl/bulk-delete-tokens selected-token-set-id tokens-in-path-ids)))))]
 
     (mf/with-effect [tokens-lib selected-token-set-id]
       (when (and tokens-lib
@@ -134,6 +156,7 @@
 
     [:*
      [:& token-context-menu]
+     [:> token-node-context-menu* {:on-delete-node delete-node}]
 
      [:& selected-set-info* {:tokens-lib tokens-lib
                              :selected-token-set-id selected-token-set-id}]

frontend/src/app/main/ui/workspace/tokens/management/group.cljs

@@ -88,7 +88,7 @@
 
         expandable? (d/nilv (seq tokens) false)
 
-        on-context-menu
+        on-pill-context-menu
         (mf/use-fn
          (fn [event token]
            (dom/prevent-default event)
@@ -98,6 +98,15 @@
                        :errors (:errors token)
                        :token-id (:id token)}))))
 
+        on-node-context-menu
+        (mf/use-fn
+         (fn [event node]
+           (dom/prevent-default event)
+           (st/emit! (dwtl/assign-token-node-context-menu
+                      {:node node
+                       :type type
+                       :position (dom/get-client-position event)}))))
+
         on-toggle-open-click
         (mf/use-fn
          (mf/deps type expandable?)
@@ -159,4 +168,5 @@
                         :selected-token-set-id selected-token-set-id
                         :is-selected-inside-layout is-selected-inside-layout
                         :on-token-pill-click on-token-pill-click
-                        :on-context-menu on-context-menu}])]))
+                        :on-pill-context-menu on-pill-context-menu
+                        :on-node-context-menu on-node-context-menu}])]))

frontend/src/app/main/ui/workspace/tokens/management/node_context_menu.cljs

@@ -0,0 +1,83 @@
+(ns app.main.ui.workspace.tokens.management.node-context-menu
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.common.data.macros :as dm]
+   [app.main.data.workspace.tokens.library-edit :as dwtl]
+   [app.main.refs :as refs]
+   [app.main.store :as st]
+   [app.main.ui.components.dropdown :refer [dropdown]]
+   [app.util.dom :as dom]
+   [app.util.i18n :refer [tr]]
+   [okulary.core :as l]
+   [rumext.v2 :as mf]))
+
+(def ^:private schema:token-node-context-menu
+  [:map
+   [:on-delete-node fn?]])
+
+(def ^:private tokens-node-menu-ref
+  (l/derived :token-node-context-menu refs/workspace-tokens))
+
+(defn- prevent-default
+  [event]
+  (dom/prevent-default event)
+  (dom/stop-propagation event))
+
+(mf/defc token-node-context-menu*
+  {::mf/schema schema:token-node-context-menu}
+  [{:keys [on-delete-node]}]
+  (let [mdata               (mf/deref tokens-node-menu-ref)
+        is-open?            (boolean mdata)
+        dropdown-ref        (mf/use-ref)
+        dropdown-action    (mf/use-ref)
+        dropdown-direction* (mf/use-state "down")
+        dropdown-direction  (deref dropdown-direction*)
+        dropdown-direction-change* (mf/use-ref 0)
+        top                 (+ (get-in mdata [:position :y]) 5)
+        left                (+ (get-in mdata [:position :x]) 5)
+
+        delete-node          (mf/use-fn
+                              (mf/deps mdata)
+                              (fn []
+                                (let [node (get mdata :node)
+                                      type (get mdata :type)]
+                                  (when node
+                                    (on-delete-node node type)))))]
+
+    (mf/with-effect [is-open?]
+      (when (and (not= 0 (mf/ref-val dropdown-direction-change*)) (= false is-open?))
+        (reset! dropdown-direction* "down")
+        (mf/set-ref-val! dropdown-direction-change* 0)))
+
+    (mf/with-effect [is-open? dropdown-ref dropdown-action]
+      (let [dropdown-element (mf/ref-val dropdown-ref)]
+        (when (and (= 0 (mf/ref-val dropdown-direction-change*)) dropdown-element)
+          (let [is-outside? (dom/is-element-outside? dropdown-element)]
+            (reset! dropdown-direction* (if is-outside? "up" "down"))
+            (mf/set-ref-val! dropdown-direction-change* (inc (mf/ref-val dropdown-direction-change*)))))))
+
+    ;; FIXME: perf optimization
+
+    (when is-open?
+      (mf/portal
+       (mf/html
+        [:& dropdown {:show is-open?
+                      :on-close #(st/emit! (dwtl/assign-token-node-context-menu nil))}
+         [:div {:class (stl/css :token-node-context-menu)
+                :data-testid "tokens-context-menu-for-token-node"
+                :ref dropdown-ref
+                :data-direction dropdown-direction
+                :style {:--bottom (if (= dropdown-direction "up")
+                                    "40px"
+                                    "unset")
+                        :--top (dm/str top "px")
+                        :left (dm/str left "px")}
+                :on-context-menu prevent-default}
+          (when mdata
+            [:ul {:class (stl/css :token-node-context-menu-list)}
+             [:li {:class (stl/css :token-node-context-menu-listitem)}
+              [:button {:class (stl/css :token-node-context-menu-action)
+                        :type "button"
+                        :on-click delete-node}
+               (tr "labels.delete")]]])]])
+       (dom/get-body)))))

frontend/src/app/main/ui/workspace/tokens/management/node_context_menu.scss

@@ -0,0 +1,70 @@
+// 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
+
+@use "ds/_utils.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/_borders.scss" as *;
+@use "ds/typography.scss" as t;
+@use "ds/spacing.scss" as *;
+@use "ds/mixins.scss" as *;
+
+.token-node-context-menu {
+  --menu-inline-size: #{px2rem(240)};
+
+  position: absolute;
+  z-index: var(--z-index-dropdown);
+}
+
+.token-node-context-menu[data-direction="up"] {
+  bottom: var(--bottom);
+}
+
+.token-node-context-menu[data-direction="down"] {
+  top: var(--top);
+}
+
+.token-node-context-menu-list {
+  inline-size: var(--menu-inline-size);
+  padding: var(--sp-xs);
+  border-radius: $br-8;
+  border: $b-2 solid var(--color-background-quaternary);
+  background-color: var(--color-background-tertiary);
+  max-block-size: 100vh;
+  overflow-y: auto;
+  box-shadow: 0px 0px $sz-12 0px var(--menu-shadow-color);
+}
+
+.token-node-context-menu-action {
+  --context-menu-item-bg-color: none;
+  --context-menu-item-fg-color: var(--color-foreground-primary);
+  --context-menu-item-border-color: none;
+
+  @include t.use-typography("body-small");
+  appearance: none;
+  background: var(--context-menu-item-bg-color);
+  border: $b-1 solid var(--context-menu-item-border-color);
+  color: var(--context-menu-item-fg-color);
+  border-radius: $br-8;
+  cursor: pointer;
+  block-size: px2rem(32);
+  inline-size: 100%;
+  display: flex;
+  align-items: center;
+  padding: var(--sp-xs);
+
+  &:hover {
+    --context-menu-item-bg-color: var(--color-background-quaternary);
+  }
+
+  &:focus {
+    --context-menu-item-bg-color: var(--menu-background-color-focus);
+    --context-menu-item-border-color: var(--color-background-tertiary);
+  }
+
+  &[aria-selected="true"] {
+    --context-menu-item-bg-color: var(--color-background-quaternary);
+  }
+}

frontend/src/app/main/ui/workspace/tokens/management/token_tree.cljs

@@ -10,6 +10,7 @@
    [app.common.path-names :as cpn]
    [app.common.types.tokens-lib :as ctob]
    [app.main.data.workspace.tokens.library-edit :as dwtl]
+   [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.ds.layers.layer-button :refer [layer-button*]]
    [app.main.ui.workspace.tokens.management.token-pill :refer [token-pill*]]
@@ -26,7 +27,8 @@
    [:selected-token-set-id {:optional true} :any]
    [:tokens-lib {:optional true} :any]
    [:on-token-pill-click {:optional true} fn?]
-   [:on-context-menu {:optional true} fn?]])
+   [:on-pill-context-menu {:optional true} fn?]
+   [:on-node-context-menu {:optional true} fn?]])
 
 (mf/defc folder-node*
   {::mf/schema schema:folder-node}
@@ -39,22 +41,29 @@
            selected-token-set-id
            tokens-lib
            on-token-pill-click
-           on-context-menu]}]
+           on-pill-context-menu
+           on-node-context-menu]}]
   (let [full-path (str (name type) "." (:path node))
         is-folder-expanded (contains? (set (or unfolded-token-paths [])) full-path)
-
         swap-folder-expanded (mf/use-fn
                               (mf/deps (:path node) type)
                               (fn []
                                 (let [path (str (name type)  "." (:path node))]
-                                  (st/emit! (dwtl/toggle-token-path path)))))]
+                                  (st/emit! (dwtl/toggle-token-path path)))))
+
+        node-context-menu-prep (mf/use-fn
+                                (mf/deps on-node-context-menu node)
+                                (fn [event]
+                                  (when on-node-context-menu
+                                    (on-node-context-menu event node))))]
     [:li {:class (stl/css :folder-node)}
      [:> layer-button* {:label (:name node)
                         :expanded is-folder-expanded
                         :aria-expanded is-folder-expanded
                         :aria-controls (str "folder-children-" (:path node))
                         :is-expandable (not (:leaf node))
-                        :on-toggle-expand swap-folder-expanded}]
+                        :on-toggle-expand swap-folder-expanded
+                        :on-context-menu node-context-menu-prep}]
      (when is-folder-expanded
        (let [children-fn (:children-fn node)]
          [:div {:class (stl/css :folder-children-wrapper)
@@ -63,16 +72,17 @@
             (let [children (children-fn)]
               (for [child children]
                 (if (not (:leaf child))
-                  [:ul {:class (stl/css :node-parent)}
-                   [:> folder-node* {:key (:path child)
-                                     :type type
+                  [:ul {:class (stl/css :node-parent)
+                        :key (:path child)}
+                   [:> folder-node* {:type type
                                      :node child
                                      :unfolded-token-paths unfolded-token-paths
                                      :selected-shapes selected-shapes
                                      :is-selected-inside-layout is-selected-inside-layout
                                      :active-theme-tokens active-theme-tokens
                                      :on-token-pill-click on-token-pill-click
-                                     :on-context-menu on-context-menu
+                                     :on-pill-context-menu on-pill-context-menu
+                                     :on-node-context-menu on-node-context-menu
                                      :tokens-lib tokens-lib
                                      :selected-token-set-id selected-token-set-id}]]
                   (let [id (:id (:leaf child))
@@ -84,7 +94,7 @@
                       :is-selected-inside-layout is-selected-inside-layout
                       :active-theme-tokens active-theme-tokens
                       :on-click on-token-pill-click
-                      :on-context-menu on-context-menu}])))))]))]))
+                      :on-context-menu on-pill-context-menu}])))))]))]))
 
 (def ^:private schema:token-tree
   [:map
@@ -97,7 +107,8 @@
    [:selected-token-set-id {:optional true} :any]
    [:tokens-lib {:optional true} :any]
    [:on-token-pill-click {:optional true} fn?]
-   [:on-context-menu {:optional true} fn?]])
+   [:on-pill-context-menu {:optional true} fn?]
+   [:on-node-context-menu {:optional true} fn?]])
 
 (mf/defc token-tree*
   {::mf/schema schema:token-tree}
@@ -110,12 +121,19 @@
            tokens-lib
            selected-token-set-id
            on-token-pill-click
-           on-context-menu]}]
+           on-pill-context-menu
+           on-node-context-menu]}]
   (let [separator "."
         tree (mf/use-memo
               (mf/deps tokens)
               (fn []
-                (cpn/build-tree-root tokens separator)))]
+                (cpn/build-tree-root tokens separator)))
+        can-edit? (:can-edit (deref refs/permissions))
+        on-node-context-menu (mf/use-fn
+                              (mf/deps can-edit? on-node-context-menu)
+                              (fn [event node]
+                                (when can-edit?
+                                  (on-node-context-menu event node))))]
     [:div {:class (stl/css :token-tree-wrapper)}
      (for [node tree]
        (if (:leaf node)
@@ -127,7 +145,7 @@
              :is-selected-inside-layout is-selected-inside-layout
              :active-theme-tokens active-theme-tokens
              :on-click on-token-pill-click
-             :on-context-menu on-context-menu}])
+             :on-context-menu on-pill-context-menu}])
           ;; Render segment folder
          [:ul {:class (stl/css :node-parent)
                :key (:path node)}
@@ -138,6 +156,7 @@
                             :is-selected-inside-layout is-selected-inside-layout
                             :active-theme-tokens active-theme-tokens
                             :on-token-pill-click on-token-pill-click
-                            :on-context-menu on-context-menu
+                            :on-node-context-menu on-node-context-menu
+                            :on-pill-context-menu on-pill-context-menu
                             :tokens-lib tokens-lib
                             :selected-token-set-id selected-token-set-id}]]))]))

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

@@ -312,6 +312,11 @@
                                          (js/console.error "Error initializing canvas context:" e)
                                          false))]
                            (reset! canvas-init? init?)
+                           (when init?
+                             ;; Restore previous canvas pixels immediately after context initialization
+                             ;; This happens before initialize-viewport is called
+                             (wasm.api/apply-canvas-blur)
+                             (wasm.api/restore-previous-canvas-pixels))
                            (when-not init?
                              (js/alert "WebGL not supported")
                              (st/emit! (dcm/go-to-dashboard-recent))))))))
@@ -340,6 +345,7 @@
 
     (mf/with-effect [@canvas-init? zoom vbox background]
       (when (and @canvas-init? (not @initialized?))
+        (wasm.api/clear-canvas-pixels)
         (wasm.api/initialize-viewport base-objects zoom vbox background)
         (reset! initialized? true)))
 

frontend/src/app/render_wasm/api.cljs

@@ -29,6 +29,7 @@
    [app.main.worker :as mw]
    [app.render-wasm.api.fonts :as f]
    [app.render-wasm.api.texts :as t]
+   [app.render-wasm.api.webgl :as webgl]
    [app.render-wasm.deserializers :as dr]
    [app.render-wasm.helpers :as h]
    [app.render-wasm.mem :as mem]
@@ -37,7 +38,6 @@
    [app.render-wasm.serializers :as sr]
    [app.render-wasm.serializers.color :as sr-clr]
    [app.render-wasm.svg-filters :as svg-filters]
-   ;; FIXME: rename; confunsing name
    [app.render-wasm.wasm :as wasm]
    [app.util.debug :as dbg]
    [app.util.dom :as dom]
@@ -279,30 +279,6 @@
   [string]
   (+ (count string) 1))
 
-(defn- create-webgl-texture-from-image
-  "Creates a WebGL texture from an HTMLImageElement or ImageBitmap and returns the texture object"
-  [gl image-element]
-  (let [texture (.createTexture ^js gl)]
-    (.bindTexture ^js gl (.-TEXTURE_2D ^js gl) texture)
-    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_WRAP_S ^js gl) (.-CLAMP_TO_EDGE ^js gl))
-    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_WRAP_T ^js gl) (.-CLAMP_TO_EDGE ^js gl))
-    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_MIN_FILTER ^js gl) (.-LINEAR ^js gl))
-    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_MAG_FILTER ^js gl) (.-LINEAR ^js gl))
-    (.texImage2D ^js gl (.-TEXTURE_2D ^js gl) 0 (.-RGBA ^js gl) (.-RGBA ^js gl) (.-UNSIGNED_BYTE ^js gl) image-element)
-    (.bindTexture ^js gl (.-TEXTURE_2D ^js gl) nil)
-    texture))
-
-(defn- get-webgl-context
-  "Gets the WebGL context from the WASM module"
-  []
-  (when wasm/context-initialized?
-    (let [gl-obj (unchecked-get wasm/internal-module "GL")]
-      (when gl-obj
-        ;; Get the current WebGL context from Emscripten
-        ;; The GL object has a currentContext property that contains the context handle
-        (let [current-ctx (.-currentContext ^js gl-obj)]
-          (when current-ctx
-            (.-GLctx ^js current-ctx)))))))
 
 (defn- get-texture-id-for-gl-object
   "Registers a WebGL texture with Emscripten's GL object system and returns its ID"
@@ -332,8 +308,8 @@
        (->> (retrieve-image url)
             (rx/map
              (fn [img]
-               (when-let [gl (get-webgl-context)]
-                 (let [texture (create-webgl-texture-from-image gl img)
+               (when-let [gl (webgl/get-webgl-context)]
+                 (let [texture (webgl/create-webgl-texture-from-image gl img)
                        texture-id (get-texture-id-for-gl-object texture)
                        width  (.-width ^js img)
                        height (.-height ^js img)
@@ -979,6 +955,7 @@
       (set-shape-grow-type grow-type))
 
     (set-shape-layout shape)
+    (set-layout-data shape)
     (set-shape-selrect selrect)
 
     (let [pending_thumbnails (into [] (concat
@@ -1055,8 +1032,9 @@
      (perf/end-measure "set-objects")
      (process-pending shapes thumbnails full noop-fn
                       (fn []
-                        (when render-callback (render-callback))
-                        (render-finish)
+                        (if render-callback
+                          (render-callback)
+                          (render-finish))
                         (ug/dispatch! (ug/event "penpot:wasm:set-objects")))))))
 
 (defn clear-focus-mode
@@ -1384,8 +1362,9 @@
         all-children
         (->> ids
              (mapcat #(cfh/get-children-with-self objects %)))]
+
     (h/call wasm/internal-module "_init_shapes_pool" (count all-children))
-    (run! (partial set-object objects) all-children)
+    (run! set-object all-children)
 
     (let [content (-> (calculate-bool* bool-type ids)
                       (path.impl/path-data))]
@@ -1448,6 +1427,12 @@
 
       result)))
 
+(defn apply-canvas-blur
+  []
+  (when wasm/canvas
+    (dom/set-style! wasm/canvas "filter" "blur(4px)")))
+
+
 (defn init-wasm-module
   [module]
   (let [default-fn (unchecked-get module "default")
@@ -1469,3 +1454,8 @@
                 (js/console.error cause)
                 (p/resolved false)))))
       (p/resolved false))))
+
+;; Re-export public WebGL functions
+(def capture-canvas-pixels webgl/capture-canvas-pixels)
+(def restore-previous-canvas-pixels webgl/restore-previous-canvas-pixels)
+(def clear-canvas-pixels webgl/clear-canvas-pixels)

frontend/src/app/render_wasm/api/webgl.cljs

@@ -0,0 +1,166 @@
+;; 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.render-wasm.api.webgl
+  "WebGL utilities for pixel capture and rendering"
+  (:require
+   [app.common.logging :as log]
+   [app.render-wasm.wasm :as wasm]
+   [app.util.dom :as dom]))
+
+(defn get-webgl-context
+  "Gets the WebGL context from the WASM module"
+  []
+  (when wasm/context-initialized?
+    (let [gl-obj (unchecked-get wasm/internal-module "GL")]
+      (when gl-obj
+        ;; Get the current WebGL context from Emscripten
+        ;; The GL object has a currentContext property that contains the context handle
+        (let [current-ctx (.-currentContext ^js gl-obj)]
+          (when current-ctx
+            (.-GLctx ^js current-ctx)))))))
+
+(defn create-webgl-texture-from-image
+  "Creates a WebGL texture from an HTMLImageElement or ImageBitmap and returns the texture object"
+  [gl image-element]
+  (let [texture (.createTexture ^js gl)]
+    (.bindTexture ^js gl (.-TEXTURE_2D ^js gl) texture)
+    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_WRAP_S ^js gl) (.-CLAMP_TO_EDGE ^js gl))
+    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_WRAP_T ^js gl) (.-CLAMP_TO_EDGE ^js gl))
+    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_MIN_FILTER ^js gl) (.-LINEAR ^js gl))
+    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_MAG_FILTER ^js gl) (.-LINEAR ^js gl))
+    (.texImage2D ^js gl (.-TEXTURE_2D ^js gl) 0 (.-RGBA ^js gl) (.-RGBA ^js gl) (.-UNSIGNED_BYTE ^js gl) image-element)
+    (.bindTexture ^js gl (.-TEXTURE_2D ^js gl) nil)
+    texture))
+
+;; FIXME: temporary function until we are able to keep the same <canvas> across pages.
+(defn- draw-imagedata-to-webgl
+  "Draws ImageData to a WebGL2 context by creating a texture"
+  [gl image-data]
+  (let [width (.-width ^js image-data)
+        height (.-height ^js image-data)
+        texture (.createTexture ^js gl)]
+    ;; Bind texture and set parameters
+    (.bindTexture ^js gl (.-TEXTURE_2D ^js gl) texture)
+    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_WRAP_S ^js gl) (.-CLAMP_TO_EDGE ^js gl))
+    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_WRAP_T ^js gl) (.-CLAMP_TO_EDGE ^js gl))
+    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_MIN_FILTER ^js gl) (.-LINEAR ^js gl))
+    (.texParameteri ^js gl (.-TEXTURE_2D ^js gl) (.-TEXTURE_MAG_FILTER ^js gl) (.-LINEAR ^js gl))
+    (.texImage2D ^js gl (.-TEXTURE_2D ^js gl) 0 (.-RGBA ^js gl) (.-RGBA ^js gl) (.-UNSIGNED_BYTE ^js gl) image-data)
+
+    ;; Set up viewport
+    (.viewport ^js gl 0 0 width height)
+
+    ;; Vertex & Fragment shaders
+    ;; Since we are only calling this function once (on page switch), we don't need
+    ;; to cache the compiled shaders somewhere else (cannot be reused in a differen context).
+    (let [vertex-shader-source "#version 300 es
+in vec2 a_position;
+in vec2 a_texCoord;
+out vec2 v_texCoord;
+void main() {
+  gl_Position = vec4(a_position, 0.0, 1.0);
+  v_texCoord = a_texCoord;
+}"
+          fragment-shader-source "#version 300 es
+precision highp float;
+in vec2 v_texCoord;
+uniform sampler2D u_texture;
+out vec4 fragColor;
+void main() {
+  fragColor = texture(u_texture, v_texCoord);
+}"
+          vertex-shader (.createShader ^js gl (.-VERTEX_SHADER ^js gl))
+          fragment-shader (.createShader ^js gl (.-FRAGMENT_SHADER ^js gl))
+          program (.createProgram ^js gl)]
+      (.shaderSource ^js gl vertex-shader vertex-shader-source)
+      (.compileShader ^js gl vertex-shader)
+      (when-not (.getShaderParameter ^js gl vertex-shader (.-COMPILE_STATUS ^js gl))
+        (log/error :hint "Vertex shader compilation failed"
+                   :log (.getShaderInfoLog ^js gl vertex-shader)))
+
+      (.shaderSource ^js gl fragment-shader fragment-shader-source)
+      (.compileShader ^js gl fragment-shader)
+      (when-not (.getShaderParameter ^js gl fragment-shader (.-COMPILE_STATUS ^js gl))
+        (log/error :hint "Fragment shader compilation failed"
+                   :log (.getShaderInfoLog ^js gl fragment-shader)))
+
+      (.attachShader ^js gl program vertex-shader)
+      (.attachShader ^js gl program fragment-shader)
+      (.linkProgram ^js gl program)
+
+      (if (.getProgramParameter ^js gl program (.-LINK_STATUS ^js gl))
+        (do
+          (.useProgram ^js gl program)
+
+          ;; Create full-screen quad vertices (normalized device coordinates)
+          (let [position-location (.getAttribLocation ^js gl program "a_position")
+                texcoord-location (.getAttribLocation ^js gl program "a_texCoord")
+                position-buffer (.createBuffer ^js gl)
+                texcoord-buffer (.createBuffer ^js gl)
+                positions #js [-1.0 -1.0  1.0 -1.0  -1.0 1.0  -1.0 1.0  1.0 -1.0  1.0 1.0]
+                texcoords #js [0.0 0.0  1.0 0.0  0.0 1.0  0.0 1.0  1.0 0.0  1.0 1.0]]
+            ;; Set up position buffer
+            (.bindBuffer ^js gl (.-ARRAY_BUFFER ^js gl) position-buffer)
+            (.bufferData ^js gl (.-ARRAY_BUFFER ^js gl) (js/Float32Array. positions) (.-STATIC_DRAW ^js gl))
+            (.enableVertexAttribArray ^js gl position-location)
+            (.vertexAttribPointer ^js gl position-location 2 (.-FLOAT ^js gl) false 0 0)
+           ;; Set up texcoord buffer
+            (.bindBuffer ^js gl (.-ARRAY_BUFFER ^js gl) texcoord-buffer)
+            (.bufferData ^js gl (.-ARRAY_BUFFER ^js gl) (js/Float32Array. texcoords) (.-STATIC_DRAW ^js gl))
+            (.enableVertexAttribArray ^js gl texcoord-location)
+            (.vertexAttribPointer ^js gl texcoord-location 2 (.-FLOAT ^js gl) false 0 0)
+            ;; Set texture uniform
+            (.activeTexture ^js gl (.-TEXTURE0 ^js gl))
+            (.bindTexture ^js gl (.-TEXTURE_2D ^js gl) texture)
+            (let [texture-location (.getUniformLocation ^js gl program "u_texture")]
+              (.uniform1i ^js gl texture-location 0))
+
+            ;; draw
+            (.drawArrays ^js gl (.-TRIANGLES ^js gl) 0 6)
+
+            ;; cleanup
+            (.deleteBuffer ^js gl position-buffer)
+            (.deleteBuffer ^js gl texcoord-buffer)
+            (.deleteShader ^js gl vertex-shader)
+            (.deleteShader ^js gl fragment-shader)
+            (.deleteProgram ^js gl program)))
+        (log/error :hint "Program linking failed"
+                   :log (.getProgramInfoLog ^js gl program)))
+
+      (.bindTexture ^js gl (.-TEXTURE_2D ^js gl) nil)
+      (.deleteTexture ^js gl texture))))
+
+(defn restore-previous-canvas-pixels
+  "Restores previous canvas pixels into the new canvas"
+  []
+  (when-let [previous-canvas-pixels wasm/canvas-pixels]
+    (when-let [gl wasm/gl-context]
+      (draw-imagedata-to-webgl gl previous-canvas-pixels)
+      (set! wasm/canvas-pixels nil))))
+
+(defn clear-canvas-pixels
+  []
+  (when wasm/canvas
+    (let [context wasm/gl-context]
+      (.clearColor ^js context 0 0 0 0.0)
+      (.clear ^js context (.-COLOR_BUFFER_BIT ^js context))
+      (.clear ^js context (.-DEPTH_BUFFER_BIT ^js context))
+      (.clear ^js context (.-STENCIL_BUFFER_BIT ^js context)))
+    (dom/set-style! wasm/canvas "filter" "none")
+    (set! wasm/canvas-pixels nil)))
+
+(defn capture-canvas-pixels
+  "Captures the pixels of the viewport canvas"
+  []
+  (when wasm/canvas
+    (let [context wasm/gl-context
+          width (.-width wasm/canvas)
+          height (.-height wasm/canvas)
+          buffer (js/Uint8ClampedArray. (* width height  4))
+          _ (.readPixels ^js context 0 0 width height (.-RGBA ^js context) (.-UNSIGNED_BYTE ^js context) buffer)
+          image-data (js/ImageData. buffer width height)]
+      (set! wasm/canvas-pixels image-data))))

frontend/src/app/render_wasm/wasm.cljs

@@ -12,6 +12,8 @@
 
 ;; Reference to the HTML canvas element.
 (defonce canvas nil)
+;; Reference to the captured pixels of the canvas (for page switching effect)
+(defonce canvas-pixels nil)
 
 ;; Reference to the Emscripten GL context wrapper.
 (defonce gl-context-handle nil)
@@ -56,3 +58,4 @@
        :stroke-linecap shared/RawStrokeLineCap
        :stroke-linejoin shared/RawStrokeLineJoin
        :fill-rule shared/RawFillRule})
+

frontend/src/app/worker/thumbnails.cljs

@@ -179,6 +179,7 @@
 
                       (->> (render-canvas-blob canvas width height bgcolor)
                            (p/fnly (fn [data cause]
+                                     (wasm.api/clear-canvas)
                                      (if cause
                                        (rx/error! subs cause)
                                        (rx/push! subs

frontend/translations/en.po

@@ -8731,10 +8731,10 @@ msgstr ""
 msgid "workspace.versions.warning.text"
 msgstr "Autosaved versions will be kept for %s days."
 
-msgid "labels.webgl-context-lost.main-message"
+msgid "errors.webgl-context-lost.main-message"
 msgstr "Oops! The canvas context was lost"
 
-msgid "labels.webgl-context-lost.desc-message"
+msgid "errors.webgl-context-lost.desc-message"
 msgstr "WebGL has stopped working. Please reload the page to reset it"
 
 #, unused

frontend/translations/es.po

@@ -8582,8 +8582,8 @@ msgstr "Los autoguardados duran %s días."
 msgid "workspace.viewport.click-to-close-path"
 msgstr "Pulsar para cerrar la ruta"
 
-msgid "labels.webgl-context-lost.main-message"
+msgid "errors.webgl-context-lost.main-message"
 msgstr "Ups! Se ha perdido el contexto del canvas"
 
-msgid "labels.webgl-context-lost.desc-message"
-msgstr "WebGL ha dejado de funcionar. Por favor, recarga la página para restaurarlo"
+msgid "errors.webgl-context-lost.desc-message"
+msgstr "WebGL ha dejado de funcionar. Por favor, recarga la página para restaurarlo"

render-wasm/src/shapes.rs

@@ -90,6 +90,18 @@ impl Type {
         }
     }
 
+    pub fn clear_corners(&mut self) {
+        match self {
+            Type::Rect(data) => {
+                data.corners = None;
+            }
+            Type::Frame(data) => {
+                data.corners = None;
+            }
+            _ => {}
+        }
+    }
+
     pub fn path(&self) -> Option<&Path> {
         match self {
             Type::Path(path) => Some(path),
@@ -694,9 +706,11 @@ impl Shape {
     pub fn set_corners(&mut self, raw_corners: (f32, f32, f32, f32)) {
         if let Some(corners) = make_corners(raw_corners) {
             self.shape_type.set_corners(corners);
-            self.invalidate_bounds();
-            self.invalidate_extrect();
+        } else {
+            self.shape_type.clear_corners();
         }
+        self.invalidate_bounds();
+        self.invalidate_extrect();
     }
 
     pub fn set_svg(&mut self, svg: skia::svg::Dom) {
@@ -1590,6 +1604,13 @@ mod tests {
         } else {
             unreachable!();
         }
+
+        shape.set_corners((0.0, 0.0, 0.0, 0.0));
+        if let Type::Rect(Rect { corners, .. }) = shape.shape_type {
+            assert_eq!(corners, None);
+        } else {
+            unreachable!();
+        }
     }
 
     #[test]