Merge pull request #8171 from penpot/ladybenko-13152-fix-blur

🐛 Fix blur when clicking on same page

frontend/src/app/main/ui/workspace/shapes/text/v2_editor.cljs

@@ -90,7 +90,8 @@
         instance
         (dwt/create-editor editor-node canvas-node options)
 
-        update-name? (nil? content)
+        ;; Store original content to compare name later
+        original-content content
 
         on-key-up
         (fn [event]
@@ -101,10 +102,22 @@
         on-blur
         (fn []
           (when-let [content (content/dom->cljs (dwt/get-editor-root instance))]
-            (st/emit! (dwt/v2-update-text-shape-content shape-id content
-                                                        :update-name? update-name?
-                                                        :name (gen-name instance)
-                                                        :finalize? true)))
+            (let [state @st/state
+                  objects (dsh/lookup-page-objects state)
+                  shape (get objects shape-id)
+                  current-name (:name shape)
+                  generated-name (gen-name instance)
+                  ;; Update name if: (1) it's a new shape (nil original content), or
+                  ;; (2) the current name matches the generated name from original content
+                  ;; (meaning it was never manually renamed)
+                  update-name? (or (nil? original-content)
+                                   (and (some? current-name)
+                                        (some? original-content)
+                                        (= current-name (txt/generate-shape-name (txt/content->text original-content)))))]
+              (st/emit! (dwt/v2-update-text-shape-content shape-id content
+                                                          :update-name? update-name?
+                                                          :name generated-name
+                                                          :finalize? true))))
 
           (let [container-node (mf/ref-val container-ref)]
             (dom/set-style! container-node "opacity" 0)))

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

@@ -61,7 +61,7 @@
 
 (mf/defc page-item
   {::mf/wrap-props false}
-  [{:keys [page index deletable? selected? editing? hovering?]}]
+  [{:keys [page index deletable? selected? editing? hovering? current-page-id]}]
   (let [input-ref    (mf/use-ref)
         id           (:id page)
         delete-fn    (mf/use-fn (mf/deps id) #(st/emit! (dw/delete-page id)))
@@ -72,8 +72,10 @@
         (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")
+           ;; For the wasm renderer, apply a blur effect to the viewport canvas
+           ;; when we navigate to a different page.
+           (if (and (features/active-feature? @st/state "render-wasm/v1")
+                    (not= id current-page-id))
              (do
                (wasm.api/capture-canvas-pixels)
                (wasm.api/apply-canvas-blur)
@@ -203,12 +205,13 @@
 
 (mf/defc page-item-wrapper
   {::mf/wrap-props false}
-  [{:keys [page-id index deletable? selected? editing?]}]
+  [{:keys [page-id index deletable? selected? editing? current-page-id]}]
   (let [page-ref (mf/with-memo [page-id]
                    (make-page-ref page-id))
         page     (mf/deref page-ref)]
     [:& page-item {:page page
                    :index index
+                   :current-page-id current-page-id
                    :deletable? deletable?
                    :selected? selected?
                    :editing? editing?}]))
@@ -231,6 +234,7 @@
           :deletable? deletable?
           :editing? (= page-id editing-page-id)
           :selected? (= page-id current-page-id)
+          :current-page-id current-page-id
           :key page-id}])]]))
 
 ;; --- Sitemap Toolbox

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

@@ -144,7 +144,7 @@
         modifiers (hooks/use-equal-memo modifiers)
         shapes    (hooks/use-equal-memo shapes)]
 
-    [:g.outlines
+    [:g.outlines.blurrable
      [:& shape-outlines-render {:shapes shapes
                                 :zoom zoom
                                 :modifiers modifiers}]]))

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

@@ -252,7 +252,7 @@
         edition        (mf/deref refs/selected-edition)
         grid-edition?  (ctl/grid-layout? objects edition)]
 
-    [:g.frame-titles
+    [:g.frame-titles.blurrable
      (for [{:keys [id parent-id] :as shape} shapes]
        (when (and
               (not= id uuid/zero)

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

@@ -424,6 +424,7 @@
        :xmlnsXlink "http://www.w3.org/1999/xlink"
        :preserveAspectRatio "xMidYMid meet"
        :key (str "viewport" page-id)
+       :id "viewport-controls"
        :view-box (utils/format-viewbox vbox)
        :ref on-viewport-ref
        :class (dm/str @cursor (when drawing-tool " drawing") " " (stl/css :viewport-controls))
@@ -473,7 +474,7 @@
               :zoom zoom}]
 
             (when (ctl/any-layout? outlined-frame)
-              [:g.ghost-outline
+              [:g.ghost-outline.blurrable
                [:& outline/shape-outlines
                 {:objects base-objects
                  :selected selected

frontend/src/app/render_wasm/api.cljs

@@ -1429,8 +1429,9 @@
 
 (defn apply-canvas-blur
   []
-  (when wasm/canvas
-    (dom/set-style! wasm/canvas "filter" "blur(4px)")))
+  (when wasm/canvas (dom/set-style! wasm/canvas "filter" "blur(4px)"))
+  (let [controls-to-blur (dom/query-all (dom/get-element "viewport-controls") ".blurrable")]
+    (run! #(dom/set-style! % "filter" "blur(4px)") controls-to-blur)))
 
 
 (defn init-wasm-module

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

@@ -151,6 +151,8 @@ void main() {
       (.clear ^js context (.-DEPTH_BUFFER_BIT ^js context))
       (.clear ^js context (.-STENCIL_BUFFER_BIT ^js context)))
     (dom/set-style! wasm/canvas "filter" "none")
+    (let [controls-to-unblur (dom/query-all (dom/get-element "viewport-controls") ".blurrable")]
+      (run! #(dom/set-style! % "filter" "none") controls-to-unblur))
     (set! wasm/canvas-pixels nil)))
 
 (defn capture-canvas-pixels

frontend/src/app/render_wasm/shape.cljs

@@ -227,7 +227,7 @@
         :svg-attrs
         (do
           (api/set-shape-svg-attrs v)
-          ;; Always update fills/blur/shadow to clear previous state if filters disappear          
+          ;; Always update fills/blur/shadow to clear previous state if filters disappear
           (api/set-shape-fills id (:fills shape) false)
           (api/set-shape-blur (:blur shape))
           (api/set-shape-shadows (:shadow shape)))
@@ -397,12 +397,18 @@
                    (next es))
             (throw (js/Error. "conj on a map takes map entries or seqables of map entries"))))))))
 
+(def ^:private xf:without-id-and-type
+  (remove (fn [kvpair]
+            (let [k (key kvpair)]
+              (or (= k :id)
+                  (= k :type))))))
+
 (defn create-shape
   "Instanciate a shape from a map"
   [attrs]
   (ShapeProxy. (:id attrs)
                (:type attrs)
-               (dissoc attrs :id :type)))
+               (into {} xf:without-id-and-type attrs)))
 
 (t/add-handlers!
  ;; We only add a write handler, read handler uses the dynamic dispatch

frontend/src/app/worker/index.cljs

@@ -58,6 +58,8 @@
 
         (swap! state update ::snap snap/update-page old-page new-page)
         (swap! state update ::selection selection/update-page old-page new-page))
+      (catch :default cause
+        (log/error :hint "error updating page index" :id page-id :cause cause))
       (finally
         (let [elapsed (tpoint)]
           (log/dbg :hint "page index updated" :id page-id :elapsed elapsed ::log/sync? true))))