Merge pull request #496 from penpot/fixes/bugfixing

Bugfixing

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

@@ -18,7 +18,7 @@
    [beicon.core :as rx]
    [cuerdas.core :as str]
    [potok.core :as ptk]
-
+   [app.util.svg :as usvg]
    [app.util.geom.path :as ugp]))
 
 (defn- svg-dimensions [data]
@@ -30,37 +30,6 @@
         height (d/parse-integer height-str)]
     [width height]))
 
-
-(defn clean-attrs
-  "Transforms attributes to their react equivalent"
-  [attrs]
-  (letfn [(transform-key [key]
-            (-> (name key)
-                (str/replace ":" "-")
-                (str/camel)
-                (keyword)))
-
-          (format-styles [style-str]
-            (->> (str/split style-str ";")
-                 (map str/trim)
-                 (map #(str/split % ":"))
-                 (group-by first)
-                 (map (fn [[key val]]
-                        (vector
-                         (transform-key key)
-                         (second (first val)))))
-                 (into {})))
-
-          (map-fn [[key val]]
-            (cond
-              (= key :class) [:className val]
-              (= key :style) [key (format-styles val)]
-              :else (vector (transform-key key) val)))]
-
-    (->> attrs
-         (map map-fn)
-         (into {}))))
-
 (defn tag-name [{:keys [tag]}]
   (cond (string? tag) tag
         (keyword? tag) (name tag)
@@ -103,7 +72,7 @@
        :height height
        :x x
        :y y
-       :content (if (map? data) (update data :attrs clean-attrs) data)}
+       :content (if (map? data) (update data :attrs usvg/clean-attrs) data)}
       (gsh/setup-selrect)))
 
 (defn parse-path [name frame-id {:keys [attrs] :as data}]

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

@@ -228,11 +228,12 @@
       (let [page-id  (:current-page-id state)
 
             objects0 (get-in state [:workspace-file :data :pages-index page-id :objects])
-            objects1 (get-in state [:workspace-data :pages-index page-id :objects])
+            objects1 (get-in state [:workspace-data :pages-index page-id :objects])]
-
+        (if-not (every? #(contains? objects1(first %)) changes)
-            change-text-shape
+          (rx/empty)
+          (let [change-text-shape
                 (fn [objects [id [new-width new-height]]]
-
+                  (when (contains? objects id)
                     (let [shape (get objects id)
                           {:keys [selrect grow-type overflow-text]} (gsh/transform-shape shape)
                           {shape-width :width shape-height :height} selrect
@@ -258,7 +259,7 @@
                                        (or (= grow-type :auto-height) (= grow-type :auto-width)))
                                   (-> (assoc :modifiers modifier-height)
                                       (gsh/transform-shape)))]
-                (assoc objects id shape)))
+                      (assoc objects id shape))))
 
                 undo-transaction (get-in state [:workspace-undo :transaction])
                 objects2 (->> changes (reduce change-text-shape objects1))
@@ -276,7 +277,7 @@
                  (rx/of (dwc/start-undo-transaction)))
                (rx/of (dwc/commit-changes (conj rchanges regchg) (conj uchanges regchg) {:commit-local? true}))
                (when-not undo-transaction
-             (rx/of (dwc/discard-undo-transaction)))))))))
+                 (rx/of (dwc/discard-undo-transaction)))))))))))
 
 ;; When a resize-event arrives we start "buffering" for a time
 ;; after that time we invoke `resize-text-batch` with all the changes
@@ -292,16 +293,16 @@
     ptk/WatchEvent
     (watch [_ state stream]
       (let [;; This stream aggregates the events of "resizing"
-            resize-events (rx/merge
+            resize-events
+            (rx/merge
              (->> (rx/of (resize-text id new-width new-height)))
              (->> stream (rx/filter (ptk/type? ::resize-text))))
 
             ;; Stop buffering after time without resizes
-            stop-buffer (->> resize-events (rx/debounce 100))]
+            stop-buffer (->> resize-events (rx/debounce 100))
 
-        (if-not (::handling-texts state)
+            ;; Agregates the resizes so only send the resize when the sizes are stable
-          (->> (rx/concat
+            resize-batch
-                (rx/of #(assoc % ::handling-texts true))
             (->> resize-events
                  (rx/take-until stop-buffer)
                  (rx/reduce (fn [acc event]
@@ -309,5 +310,16 @@
                             {id [new-width new-height]})
                  (rx/map #(resize-text-batch %)))
 
+            ;; This stream retrieves the changes of page so we cancel the agregation
+            change-page
+            (->> stream
+                 (rx/filter (ptk/type? :app.main.data.workspace/finalize-page))
+                 (rx/take 1)
+                 (rx/ignore))]
+
+        (if-not (::handling-texts state)
+          (->> (rx/concat
+                (rx/of #(assoc % ::handling-texts true))
+                (rx/race resize-batch change-page)
                 (rx/of #(dissoc % ::handling-texts))))
           (rx/empty))))))

frontend/src/app/main/ui/handoff/right_sidebar.cljs

@@ -29,14 +29,14 @@
             (mapv resolve-shape selected)))]
     #(l/derived selected->shapes st/state)))
 
-
 (mf/defc right-sidebar
   [{:keys [frame page-id file-id]}]
   (let [expanded (mf/use-state false)
         locale (mf/deref i18n/locale)
         section (mf/use-state :info #_:code)
         selected-ref (mf/use-memo (make-selected-shapes-iref))
-        shapes (mf/deref selected-ref)]
+        shapes (mf/deref selected-ref)
+        selected-type (-> shapes first (:type :not-found))]
     [:aside.settings-bar.settings-bar-right {:class (when @expanded "expanded")}
      [:div.settings-bar-inside
       (when (seq shapes)
@@ -49,7 +49,7 @@
             [:*
              [:span.tool-window-bar-icon
               [:& element-icon {:shape (-> shapes first)}]]
-             [:span.tool-window-bar-title (->> shapes first :type name (str "handoff.tabs.code.selected.") (t locale))]])
+             [:span.tool-window-bar-title (->> selected-type name (str "handoff.tabs.code.selected.") (t locale))]])
           ]
          [:div.tool-window-content
           [:& tab-container {:on-change-tab #(do

frontend/src/app/main/ui/handoff/selection_feedback.cljs

@@ -40,7 +40,7 @@
           (let [selected (get-in state [:viewer-local :selected])
                 objects (get-in state [:viewer-data :page :objects])
                 resolve-shape #(get objects %)]
-            (mapv resolve-shape selected)))]
+            (->> selected (map resolve-shape) (filterv (comp not nil?)))))]
     #(l/derived selected->shapes st/state)))
 
 (defn make-hover-shapes-iref

frontend/src/app/main/ui/shapes/svg_raw.cljs

@@ -9,14 +9,15 @@
 
 (ns app.main.ui.shapes.svg-raw
   (:require
+   [app.common.data :as cd]
    [app.common.geom.matrix :as gmt]
    [app.common.geom.point :as gpt]
    [app.common.geom.shapes :as gsh]
+   [app.common.uuid :as uuid]
    [app.main.ui.shapes.attrs :as usa]
    [app.util.data :as ud]
-   [app.common.data :as cd]
-   [app.common.uuid :as uuid]
    [app.util.object :as obj]
+   [app.util.svg :as usvg]
    [cuerdas.core :as str]
    [rumext.alpha :as mf]))
 
@@ -49,6 +50,8 @@
 
 (defn set-styles [attrs shape]
   (let [custom-attrs (usa/extract-style-attrs shape)
+        attrs (cond-> attrs
+                (string? (:style attrs)) usvg/clean-attrs)
         style (obj/merge! (clj->js (:style attrs {}))
                           (obj/get custom-attrs "style"))]
     (-> (clj->js attrs)

frontend/src/app/util/svg.cljs

@@ -0,0 +1,42 @@
+;; 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/.
+;;
+;; This Source Code Form is "Incompatible With Secondary Licenses", as
+;; defined by the Mozilla Public License, v. 2.0.
+;;
+;; Copyright (c) 2020-2021 UXBOX Labs SL
+
+(ns app.util.svg
+  (:require
+   [cuerdas.core :as str]))
+
+(defn clean-attrs
+  "Transforms attributes to their react equivalent"
+  [attrs]
+  (letfn [(transform-key [key]
+            (-> (name key)
+                (str/replace ":" "-")
+                (str/camel)
+                (keyword)))
+
+          (format-styles [style-str]
+            (->> (str/split style-str ";")
+                 (map str/trim)
+                 (map #(str/split % ":"))
+                 (group-by first)
+                 (map (fn [[key val]]
+                        (vector
+                         (transform-key key)
+                         (second (first val)))))
+                 (into {})))
+
+          (map-fn [[key val]]
+            (cond
+              (= key :class) [:className val]
+              (and (= key :style) (string? val)) [key (format-styles val)]
+              :else (vector (transform-key key) val)))]
+
+    (->> attrs
+         (map map-fn)
+         (into {}))))