Merge pull request #1708 from penpot/alotor/bugfixes

Alotor/bugfixes

CHANGES.md

@@ -11,6 +11,9 @@
 ## 1.13.0-beta
 
 ### :boom: Breaking changes
+
+- We've changed the behaviour of the border-radius so it works as CSS that [has some limits](https://www.w3.org/TR/css-backgrounds-3/#corner-overlap).
+
 ### :sparkles: New features
 
 - Exporting big files flow [Taiga #2218](https://tree.taiga.io/project/penpot/us/2218)
@@ -34,6 +37,7 @@
 - Add the ability to specify the attr for retrieve the email on OIDC integration [#1460](https://github.com/penpot/penpot/issues/1460)
 - Allow registration with invitation token when registration is disabled
 - Add the ability to disable standard, password login [Taiga #2999](https://tree.taiga.io/project/penpot/us/2999)
+- Don't stop SVG import when an image cannot be imported [#1531](https://github.com/penpot/penpot/issues/1531)
 
 ### :bug: Bugs fixed
 
@@ -45,6 +49,12 @@
 - Fix ellipsis in long page names [Taiga #2962](https://tree.taiga.io/project/penpot/issue/2962)
 - Fix color palette animation [Taiga #2852](https://tree.taiga.io/project/penpot/issue/2852)
 - Fix display code icon on preview hover [Taiga #2838](https://tree.taiga.io/project/penpot/us/2838)
+- Fix crash on iOS when displaying viewer [#1522](https://github.com/penpot/penpot/issues/1522)
+- Fix problem when importing a SVG with text [#1532](https://github.com/penpot/penpot/issues/1532)
+- Fix problem when adding shadows to imported text [#Taiga 3057](https://tree.taiga.io/project/penpot/issue/3057)
+- Fix problem when importing SVG's with uses with overriding properties [#Taiga 2884](https://tree.taiga.io/project/penpot/issue/2884)
+- Fix inconsistency with radius in SVG an CSS [#1587](https://github.com/penpot/penpot/issues/1587)
+- Fix clickable area in layers [#1680](https://github.com/penpot/penpot/issues/1680)
 
 ### :arrow_up: Deps updates
 ### :heart: Community contributions by (Thank you!)

common/src/app/common/geom/shapes.cljc

@@ -11,6 +11,7 @@
    [app.common.geom.shapes.bool :as gsb]
    [app.common.geom.shapes.common :as gco]
    [app.common.geom.shapes.constraints :as gct]
+   [app.common.geom.shapes.corners :as gsc]
    [app.common.geom.shapes.intersect :as gin]
    [app.common.geom.shapes.path :as gsp]
    [app.common.geom.shapes.rect :as gpr]
@@ -153,3 +154,7 @@
 ;; Constraints
 (dm/export gct/default-constraints-h)
 (dm/export gct/default-constraints-v)
+
+;; Corners
+(dm/export gsc/shape-corners-1)
+(dm/export gsc/shape-corners-4)

common/src/app/common/geom/shapes/corners.cljc

@@ -0,0 +1,46 @@
+;; 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) UXBOX Labs SL
+
+(ns app.common.geom.shapes.corners)
+
+(defn fix-radius
+  ;; https://www.w3.org/TR/css-backgrounds-3/#corner-overlap
+  ;;
+  ;; > Corner curves must not overlap: When the sum of any two adjacent border radii exceeds the size of the border box,
+  ;; > UAs must proportionally reduce the used values of all border radii until none of them overlap.
+  ;;
+  ;; > The algorithm for reducing radii is as follows: Let f = min(Li/Si), where i ∈ {top, right, bottom, left}, Si is
+  ;; > the sum of the two corresponding radii of the corners on side i, and Ltop = Lbottom = the width of the box, and
+  ;; > Lleft = Lright = the height of the box. If f < 1, then all corner radii are reduced by multiplying them by f.
+  ([width height r]
+   (let [f (min (/ width  (* 2 r))
+                (/ height (* 2 r)))]
+     (if (< f 1)
+       (* r f)
+       r)))
+
+  ([width height r1 r2 r3 r4]
+   (let [f (min (/ width  (+ r1 r2))
+                (/ height (+ r2 r3))
+                (/ width  (+ r3 r4))
+                (/ height (+ r4 r1)))]
+     (if (< f 1)
+       [(* r1 f) (* r2 f) (* r3 f) (* r4 f)]
+       [r1 r2 r3 r4]))))
+
+(defn shape-corners-1
+  "Retrieve the effective value for the corner given a single value for corner."
+  [{:keys [width height rx] :as shape}]
+  (if (some? rx)
+    (fix-radius width height rx)
+    0))
+
+(defn shape-corners-4
+  "Retrieve the effective value for the corner given four values for the corners."
+  [{:keys [width height r1 r2 r3 r4]}]
+  (if (and (some? r1) (some? r2) (some? r3) (some? r4))
+    (fix-radius width height r1 r2 r3 r4)
+    [r1 r2 r3 r4]))

common/src/app/common/path/shapes_to_path.cljc

@@ -11,9 +11,11 @@
    [app.common.geom.matrix :as gmt]
    [app.common.geom.point :as gpt]
    [app.common.geom.shapes.common :as gsc]
+   [app.common.geom.shapes.corners :as gso]
    [app.common.geom.shapes.path :as gsp]
    [app.common.path.bool :as pb]
-   [app.common.path.commands :as pc]))
+   [app.common.path.commands :as pc]
+   [app.common.spec.radius :as ctr]))
 
 (def ^:const bezier-circle-c 0.551915024494)
 
@@ -93,7 +95,7 @@
 
 (defn circle->path
   "Creates the bezier curves to approximate a circle shape"
-  [x y width height]
+  [{:keys [x y width height]}]
   (let [mx (+ x (/ width 2))
         my (+ y (/ height 2))
         ex (+ x width)
@@ -116,35 +118,50 @@
      (pc/make-curve-to p4 (assoc p3 :x c1x) (assoc p4 :y c2y))
      (pc/make-curve-to p1 (assoc p4 :y c1y) (assoc p1 :x c1x))]))
 
+(defn draw-rounded-rect-path
+  ([x y width height r]
+   (draw-rounded-rect-path x y width height r r r r))
+
+  ([x y width height r1 r2 r3 r4]
+   (let [p1 (gpt/point x (+ y r1))
+         p2 (gpt/point (+ x r1) y)
+
+         p3 (gpt/point (+ width x (- r2)) y)
+         p4 (gpt/point (+ width x) (+ y r2))
+
+         p5 (gpt/point (+ width x) (+ height y (- r3)))
+         p6 (gpt/point (+ width x (- r3)) (+ height y))
+
+         p7 (gpt/point (+ x r4) (+ height y))
+         p8 (gpt/point x (+ height y (- r4)))]
+     (-> []
+         (conj (pc/make-move-to p1))
+         (cond-> (not= p1 p2)
+           (conj (make-corner-arc p1 p2 :top-left r1)))
+         (conj (pc/make-line-to p3))
+         (cond-> (not= p3 p4)
+           (conj (make-corner-arc p3 p4 :top-right r2)))
+         (conj (pc/make-line-to p5))
+         (cond-> (not= p5 p6)
+           (conj (make-corner-arc p5 p6 :bottom-right r3)))
+         (conj (pc/make-line-to p7))
+         (cond-> (not= p7 p8)
+           (conj (make-corner-arc p7 p8 :bottom-left r4)))
+         (conj (pc/make-line-to p1))))))
+
 (defn rect->path
   "Creates a bezier curve that approximates a rounded corner rectangle"
-  [x y width height r1 r2 r3 r4 rx]
+  [{:keys [x y width height] :as shape}]
-  (let [[r1 r2 r3 r4] (->> [r1 r2 r3 r4] (mapv #(or % rx 0)))
+  (case (ctr/radius-mode shape)
-        p1 (gpt/point x (+ y r1))
+    :radius-1
-        p2 (gpt/point (+ x r1) y)
+    (let [radius (gso/shape-corners-1 shape)]
+      (draw-rounded-rect-path x y width height radius))
 
-        p3 (gpt/point (+ width x (- r2)) y)
+    :radius-4
-        p4 (gpt/point (+ width x) (+ y r2))
+    (let [[r1 r2 r3 r4] (gso/shape-corners-4 shape)]
+      (draw-rounded-rect-path x y width height r1 r2 r3 r4))
 
-        p5 (gpt/point (+ width x) (+ height y (- r3)))
+    []))
-        p6 (gpt/point (+ width x (- r3)) (+ height y))
-
-        p7 (gpt/point (+ x r4) (+ height y))
-        p8 (gpt/point x (+ height y (- r4)))]
-    (-> []
-        (conj (pc/make-move-to p1))
-        (cond-> (not= p1 p2)
-          (conj (make-corner-arc p1 p2 :top-left r1)))
-        (conj (pc/make-line-to p3))
-        (cond-> (not= p3 p4)
-          (conj (make-corner-arc p3 p4 :top-right r2)))
-        (conj (pc/make-line-to p5))
-        (cond-> (not= p5 p6)
-          (conj (make-corner-arc p5 p6 :bottom-right r3)))
-        (conj (pc/make-line-to p7))
-        (cond-> (not= p7 p8)
-          (conj (make-corner-arc p7 p8 :bottom-left r4)))
-        (conj (pc/make-line-to p1)))))
 
 (declare convert-to-path)
 
@@ -192,9 +209,9 @@
   "Transforms the given shape to a path"
   ([shape]
    (convert-to-path shape {}))
-  ([{:keys [type x y width height r1 r2 r3 r4 rx metadata] :as shape} objects]
+  ([{:keys [type metadata] :as shape} objects]
    (assert (map? objects))
-   (case (:type shape)
+   (case type
      :group
      (group-to-path shape objects)
 
@@ -204,8 +221,8 @@
      (:rect :circle :image :text)
      (let [new-content
            (case type
-             :circle (circle->path x y width height)
+             :circle (circle->path shape)
-             #_:else (rect->path x y width height r1 r2 r3 r4 rx))
+             #_:else (rect->path shape))
 
            ;; Apply the transforms that had the shape
            transform (:transform shape)

exporter/src/app/handlers/resources.cljs

@@ -26,6 +26,7 @@
 
 (defn- get-mtype
   [type]
+
   (case (d/name type)
     "zip"  "application/zip"
     "pdf"  "application/pdf"

exporter/src/app/renderer/svg.cljs

@@ -327,6 +327,7 @@
                   :page-id page-id
                   :object-id object-id
                   :render-texts true
+                  :embed true
                   :route "render-object"}
 
           uri    (-> (or uri (cf/get :public-uri))

frontend/resources/styles/main/partials/sidebar-layers.scss

@@ -215,6 +215,7 @@ span.element-name {
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  flex: 1;
 }
 
 .element-actions {

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

@@ -70,30 +70,32 @@
                     :else (str tag))))
 
 (defn setup-fill [shape]
-  (cond-> shape
+  (if (some? (:fills shape))
-    ;; Color present as attribute
+    shape
-    (uc/color? (str/trim (get-in shape [:svg-attrs :fill])))
+    (cond-> shape
-    (-> (update :svg-attrs dissoc :fill)
+      ;; Color present as attribute
-        (assoc-in [:fills 0 :fill-color] (-> (get-in shape [:svg-attrs :fill])
+      (uc/color? (str/trim (get-in shape [:svg-attrs :fill])))
-                                             (str/trim)
+      (-> (update :svg-attrs dissoc :fill)
-                                             (uc/parse-color))))
+          (assoc-in [:fills 0 :fill-color] (-> (get-in shape [:svg-attrs :fill])
+                                               (str/trim)
+                                               (uc/parse-color))))
 
-    ;; Color present as style
+      ;; Color present as style
-    (uc/color? (str/trim (get-in shape [:svg-attrs :style :fill])))
+      (uc/color? (str/trim (get-in shape [:svg-attrs :style :fill])))
-    (-> (update-in [:svg-attrs :style] dissoc :fill)
+      (-> (update-in [:svg-attrs :style] dissoc :fill)
-        (assoc-in [:fills 0 :fill-color] (-> (get-in shape [:svg-attrs :style :fill])
+          (assoc-in [:fills 0 :fill-color] (-> (get-in shape [:svg-attrs :style :fill])
-                                             (str/trim)
+                                               (str/trim)
-                                             (uc/parse-color))))
+                                               (uc/parse-color))))
 
-    (get-in shape [:svg-attrs :fill-opacity])
+      (get-in shape [:svg-attrs :fill-opacity])
-    (-> (update :svg-attrs dissoc :fill-opacity)
+      (-> (update :svg-attrs dissoc :fill-opacity)
-        (assoc-in [:fills 0 :fill-opacity] (-> (get-in shape [:svg-attrs :fill-opacity])
+          (assoc-in [:fills 0 :fill-opacity] (-> (get-in shape [:svg-attrs :fill-opacity])
-                                                (d/parse-double))))
+                                                 (d/parse-double))))
 
-    (get-in shape [:svg-attrs :style :fill-opacity])
+      (get-in shape [:svg-attrs :style :fill-opacity])
-    (-> (update-in [:svg-attrs :style] dissoc :fill-opacity)
+      (-> (update-in [:svg-attrs :style] dissoc :fill-opacity)
-        (assoc-in [:fills 0 :fill-opacity] (-> (get-in shape [:svg-attrs :style :fill-opacity])
+          (assoc-in [:fills 0 :fill-opacity] (-> (get-in shape [:svg-attrs :style :fill-opacity])
-                                                (d/parse-double))))))
+                                                 (d/parse-double)))))))
 
 (defn setup-stroke [shape]
   (let [stroke-linecap (-> (or (get-in shape [:svg-attrs :stroke-linecap])
@@ -105,11 +107,25 @@
         (cond-> shape
           (uc/color? (str/trim (get-in shape [:svg-attrs :stroke])))
           (-> (update :svg-attrs dissoc :stroke)
-              (assoc-in [:strokes 0 :stroke-color] (get-in shape [:svg-attrs :stroke])))
+              (assoc-in [:strokes 0 :stroke-color] (-> (get-in shape [:svg-attrs :stroke])
+                                                       (str/trim)
+                                                       (uc/parse-color))))
 
           (uc/color? (str/trim (get-in shape [:svg-attrs :style :stroke])))
           (-> (update-in [:svg-attrs :style] dissoc :stroke)
-              (assoc-in [:strokes 0 :stroke-color] (get-in shape [:svg-attrs :style :stroke])))
+              (assoc-in [:strokes 0 :stroke-color] (-> (get-in shape [:svg-attrs :style :stroke])
+                                                       (str/trim)
+                                                       (uc/parse-color))))
+
+          (get-in shape [:svg-attrs :stroke-opacity])
+          (-> (update :svg-attrs dissoc :stroke-opacity)
+              (assoc-in [:strokes 0 :stroke-opacity] (-> (get-in shape [:svg-attrs :stroke-opacity])
+                                                         (d/parse-double))))
+
+          (get-in shape [:svg-attrs :style :stroke-opacity])
+          (-> (update-in [:svg-attrs :style] dissoc :stroke-opacity)
+              (assoc-in [:fills 0 :stroke-opacity] (-> (get-in shape [:svg-attrs :style :stroke-opacity])
+                                                       (d/parse-double))))
 
           (get-in shape [:svg-attrs :stroke-width])
           (-> (update :svg-attrs dissoc :stroke-width)
@@ -123,14 +139,13 @@
 
           (and stroke-linecap (= (:type shape) :path))
           (-> (update-in [:svg-attrs :style] dissoc :stroke-linecap)
-              (cond->
+              (cond-> (#{:round :square} stroke-linecap)
-                (#{:round :square} stroke-linecap)
                 (assoc :stroke-cap-start stroke-linecap
                        :stroke-cap-end   stroke-linecap))))]
 
-    (if (d/any-key? (get-in [:strokes 0] shape) :stroke-color :stroke-opacity :stroke-width :stroke-cap-start :stroke-cap-end)
+    (cond-> shape
-      (assoc-in shape [:strokes 0 :stroke-style] :svg)
+      (d/any-key? (get-in shape [:strokes 0]) :stroke-color :stroke-opacity :stroke-width :stroke-cap-start :stroke-cap-end)
-      shape)))
+      (assoc-in [:strokes 0 :stroke-style] :svg))))
 
 (defn setup-opacity [shape]
   (cond-> shape
@@ -324,18 +339,20 @@
                       (update :y - (:y origin)))
 
         rect-metadata (calculate-rect-metadata rect-data transform)]
-    (-> {:id (uuid/next)
-         :type :image
-         :name name
-         :frame-id frame-id
-         :metadata {:width (:width image-data)
-                    :height (:height image-data)
-                    :mtype (:mtype image-data)
-                    :id (:id image-data)}}
 
-        (merge rect-metadata)
+    (when (some? image-data)
-        (assoc :svg-viewbox (select-keys rect [:x :y :width :height]))
+      (-> {:id (uuid/next)
-        (assoc :svg-attrs (dissoc attrs :x :y :width :height :xlink:href)))))
+           :type :image
+           :name name
+           :frame-id frame-id
+           :metadata {:width (:width image-data)
+                      :height (:height image-data)
+                      :mtype (:mtype image-data)
+                      :id (:id image-data)}}
+
+          (merge rect-metadata)
+          (assoc :svg-viewbox (select-keys rect [:x :y :width :height]))
+          (assoc :svg-attrs (dissoc attrs :x :y :width :height :xlink:href))))))
 
 (defn parse-svg-element [frame-id svg-data element-data unames]
   (let [{:keys [tag attrs]} element-data
@@ -352,8 +369,9 @@
         use-tag? (and (= :use tag) (contains? defs href-id))]
 
     (if use-tag?
-      (let [use-data (get defs href-id)
+      (let [;; Merge the data of the use definition with the properties passed as attributes
-
+            use-data (-> (get defs href-id)
+                         (update :attrs #(d/deep-merge % (dissoc attrs :xlink:href :href))))
             displacement (gpt/point (d/parse-double (:x attrs "0")) (d/parse-double (:y attrs "0")))
             disp-matrix (str (gmt/translate-matrix displacement))
             element-data (-> element-data
@@ -375,21 +393,21 @@
                         :polygon     (create-path-shape name frame-id svg-data (-> element-data usvg/polygon->path))
                         :line        (create-path-shape name frame-id svg-data (-> element-data usvg/line->path))
                         :image       (create-image-shape name frame-id svg-data element-data)
-                        #_other      (create-raw-svg name frame-id svg-data element-data)))
+                        #_other      (create-raw-svg name frame-id svg-data element-data)))]
+        (when (some? shape)
+          (let [shape (assoc shape :fills [])
+                shape (assoc shape :strokes [])
 
-            shape (assoc shape :fills [])
+                shape (when (some? shape)
-            shape (assoc shape :strokes [])
+                        (-> shape
+                            (assoc :svg-defs (select-keys (:defs svg-data) references))
+                            (setup-fill)
+                            (setup-stroke)))
 
-            shape (when (some? shape)
+                children (cond->> (:content element-data)
-                    (-> shape
+                           (or (= tag :g) (= tag :svg))
-                        (assoc :svg-defs (select-keys (:defs svg-data) references))
+                           (mapv #(usvg/inherit-attributes attrs %)))]
-                        (setup-fill)
+            [shape children]))))))
-                        (setup-stroke)))
-
-            children (cond->> (:content element-data)
-                       (or (= tag :g) (= tag :svg))
-                       (mapv #(usvg/inherit-attributes attrs %)))]
-        [shape children]))))
 
 (defn add-svg-child-changes [page-id objects selected frame-id parent-id svg-data [unames changes] [index data]]
   (let [[shape children] (parse-svg-element frame-id svg-data data unames)]
@@ -434,6 +452,9 @@
                         (->> (rp/mutation! (if (contains? uri-data :content)
                                              :upload-file-media-object
                                              :create-file-media-object-from-url) uri-data)
+                             ;; When the image uploaded fail we skip the shape
+                             ;; returning `nil` will afterward not create the shape.
+                             (rx/catch #(rx/of nil))
                              (rx/map #(vector (:url uri-data) %)))))
            (rx/reduce (fn [acc [url image]] (assoc acc url image)) {})
            (rx/map #(create-svg-shapes (assoc svg-data :image-data %) position))))))

frontend/src/app/main/fonts.cljs

@@ -226,7 +226,7 @@
   font-style: %(style)s;
   font-weight: %(weight)s;
   font-display: block;
-  src: url(/fonts/%(family)s-%(suffix)s.woff) format('woff');
+  src: url(%(baseurl)sfonts/%(family)s-%(suffix)s.woff) format('woff');
 }
 ")
 
@@ -262,7 +262,8 @@
       :else
       (let [{:keys [weight style suffix] :as variant}
             (d/seek #(= (:id %) font-variant-id) variants)
-            font-data {:family family
+            font-data {:baseurl (str cf/public-uri)
+                       :family family
                        :style style
                        :suffix (or suffix font-variant-id)
                        :weight weight}]

frontend/src/app/main/ui.cljs

@@ -115,10 +115,12 @@
          (let [file-id      (uuid (get-in route [:path-params :file-id]))
                page-id      (uuid (get-in route [:path-params :page-id]))
                object-id    (uuid (get-in route [:path-params :object-id]))
+               embed?       (= (get-in route [:query-params :embed]) "true")
                render-texts (get-in route [:query-params :render-texts])]
            [:& render/render-object {:file-id file-id
                                      :page-id page-id
                                      :object-id object-id
+                                     :embed? embed?
                                      :render-texts? (and (some? render-texts) (= render-texts "true"))}]))
 
        :render-sprite

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

@@ -52,8 +52,8 @@
 
 (mf/defc object-svg
   {::mf/wrap [mf/memo]}
-  [{:keys [objects object-id zoom render-texts?]
+  [{:keys [objects object-id zoom render-texts? embed?]
-    :or {zoom 1}
+    :or {zoom 1 embed? false}
     :as props}]
   (let [object   (get objects object-id)
         frame-id (if (= :frame (:type object))
@@ -106,7 +106,7 @@
        {:size (str (mth/ceil width) "px "
                    (mth/ceil height) "px")}))
 
-    [:& (mf/provider embed/context) {:value false}
+    [:& (mf/provider embed/context) {:value embed?}
      [:svg {:id "screenshot"
             :view-box vbox
             :width width
@@ -152,7 +152,7 @@
     objects))
 
 (mf/defc render-object
-  [{:keys [file-id page-id object-id render-texts?] :as props}]
+  [{:keys [file-id page-id object-id render-texts? embed?] :as props}]
   (let [objects (mf/use-state nil)]
 
     (mf/with-effect [file-id page-id object-id]
@@ -171,6 +171,7 @@
     (when @objects
       [:& object-svg {:objects @objects
                       :object-id object-id
+                      :embed? embed?
                       :render-texts? render-texts?
                       :zoom 1}])))
 

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

@@ -7,6 +7,8 @@
 (ns app.main.ui.shapes.attrs
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
+   [app.common.geom.shapes :as gsh]
    [app.common.spec.radius :as ctr]
    [app.common.spec.shape :refer [stroke-caps-line stroke-caps-marker]]
    [app.main.ui.context :as muc]
@@ -26,58 +28,30 @@
 
     (->> values (map #(+ % width)) (str/join ","))))
 
-(defn- truncate-side
-  [shape ra-attr rb-attr dimension-attr]
-  (let [ra        (ra-attr shape)
-        rb        (rb-attr shape)
-        dimension (dimension-attr shape)]
-    (if (<= (+ ra rb) dimension)
-      [ra rb]
-      [(/ (* ra dimension) (+ ra rb))
-       (/ (* rb dimension) (+ ra rb))])))
 
-(defn- truncate-radius
+(defn add-border-radius [attrs {:keys [x y width height] :as shape}]
-  [shape]
-  (let [[r-top-left r-top-right]
-        (truncate-side shape :r1 :r2 :width)
-
-        [r-right-top r-right-bottom]
-        (truncate-side shape :r2 :r3 :height)
-
-        [r-bottom-right r-bottom-left]
-        (truncate-side shape :r3 :r4 :width)
-
-        [r-left-bottom r-left-top]
-        (truncate-side shape :r4 :r1 :height)]
-
-    [(min r-top-left r-left-top)
-     (min r-top-right r-right-top)
-     (min r-right-bottom r-bottom-right)
-     (min r-bottom-left r-left-bottom)]))
-
-(defn add-border-radius [attrs shape]
   (case (ctr/radius-mode shape)
-
     :radius-1
-    (obj/merge! attrs #js {:rx (:rx shape 0)
+    (let [radius (gsh/shape-corners-1 shape)]
-                           :ry (:ry shape 0)})
+      (obj/merge! attrs #js {:rx radius :ry radius}))
 
     :radius-4
-    (let [[r1 r2 r3 r4] (truncate-radius shape)
+    (let [[r1 r2 r3 r4] (gsh/shape-corners-4 shape)
-          top    (- (:width shape) r1 r2)
+          top    (- width r1 r2)
-          right  (- (:height shape) r2 r3)
+          right  (- height r2 r3)
-          bottom (- (:width shape) r3 r4)
+          bottom (- width r3 r4)
-          left   (- (:height shape) r4 r1)]
+          left   (- height r4 r1)]
-      (obj/merge! attrs #js {:d (str "M" (+ (:x shape) r1) "," (:y shape) " "
+      (obj/merge! attrs #js {:d (dm/str
-                                     "h" top " "
+                                 "M" (+ x r1) "," y " "
-                                     "a" r2 "," r2 " 0 0 1 " r2 "," r2 " "
+                                 "h" top " "
-                                     "v" right " "
+                                 "a" r2 "," r2 " 0 0 1 " r2 "," r2 " "
-                                     "a" r3 "," r3 " 0 0 1 " (- r3) "," r3 " "
+                                 "v" right " "
-                                     "h" (- bottom) " "
+                                 "a" r3 "," r3 " 0 0 1 " (- r3) "," r3 " "
-                                     "a" r4 "," r4 " 0 0 1 " (- r4) "," (- r4) " "
+                                 "h" (- bottom) " "
-                                     "v" (- left) " "
+                                 "a" r4 "," r4 " 0 0 1 " (- r4) "," (- r4) " "
-                                     "a" r1 "," r1 " 0 0 1 " r1 "," (- r1) " "
+                                 "v" (- left) " "
-                                     "z")}))
+                                 "a" r1 "," r1 " 0 0 1 " r1 "," (- r1) " "
+                                 "z")}))
     attrs))
 
 (defn add-fill
@@ -98,14 +72,8 @@
            (contains? shape :fill-color)
            {:fill (:fill-color shape)}
 
-           ;; If contains svg-attrs the origin is svg. If it's not svg origin
-           ;; we setup the default fill as transparent (instead of black)
-           (and (not (contains? shape :svg-attrs))
-                (not (#{:svg-raw :group} (:type shape))))
-           {:fill "none"}
-
            :else
-           {})
+           {:fill "none"})
 
          fill-attrs (cond-> fill-attrs
                       (contains? shape :fill-opacity)
@@ -212,8 +180,23 @@
                           (obj/set! "fill" (obj/get svg-styles "fill"))
                           (obj/set! "fillOpacity" (obj/get svg-styles "fillOpacity")))
 
+                      (obj/contains? svg-attrs "fill")
+                      (-> styles
+                          (obj/set! "fill" (obj/get svg-attrs "fill"))
+                          (obj/set! "fillOpacity" (obj/get svg-attrs "fillOpacity")))
+
+                      ;; If contains svg-attrs the origin is svg. If it's not svg origin
+                      ;; we setup the default fill as transparent (instead of black)
+                      (and (contains? shape :svg-attrs)
+                           (#{:svg-raw :group} (:type shape))
+                           (empty? (:fills shape)))
+                      styles
+
+                      (d/not-empty? (:fills shape))
+                      (add-fill styles (d/without-nils (get-in shape [:fills 0])) render-id 0)
+
                       :else
-                      (add-fill styles (d/without-nils (get-in shape [:fills 0])) render-id 0))]
+                      styles)]
 
      (-> props
          (obj/merge! svg-attrs)

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

@@ -328,7 +328,13 @@
 
         props        (cond-> props
                        (d/not-empty? (:shadow shape))
-                       (obj/set! "filter" (dm/fmt "url(#filter_%)" render-id)))]
+                       (obj/set! "filter" (dm/fmt "url(#filter_%)" render-id)))
+
+        svg-defs  (:svg-defs shape {})
+        svg-attrs (:svg-attrs shape {})
+
+        [svg-attrs svg-styles]
+        (attrs/extract-svg-attrs render-id svg-defs svg-attrs)]
 
     (cond
       url-fill?
@@ -339,6 +345,25 @@
                                 (obj/without ["fill" "fillOpacity"])))]
         (obj/set! props "fill" (dm/fmt "url(#fill-0-%)" render-id)))
 
+      (obj/contains? svg-styles "fill")
+      (let [style
+            (-> (obj/get props "style")
+                (obj/clone)
+                (obj/set! "fill" (obj/get svg-styles "fill"))
+                (obj/set! "fillOpacity" (obj/get svg-styles "fillOpacity")))]
+        (-> props
+            (obj/set! "style" style)))
+
+      (obj/contains? svg-attrs "fill")
+      (let [style
+            (-> (obj/get props "style")
+                (obj/clone)
+                (obj/set! "fill" (obj/get svg-attrs "fill"))
+                (obj/set! "fillOpacity" (obj/get svg-attrs "fillOpacity")))]
+        (-> props
+            (obj/set! "style" style)))
+
+
       (d/not-empty? (:fills shape))
       (let [fill-props
             (attrs/extract-fill-attrs (get-in shape [:fills 0]) render-id 0)

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

@@ -175,7 +175,7 @@
      (if svg-root?
        ;; When is a raw-svg but not the root we use the whole svg as bound for the filter. Is the maximum
        ;; we're allowed to display
-       {:x 0 :y 0 :width width :height height}
+       {:x x :y y :width width :height height}
 
        ;; Otherwise we calculate the bound
        (let [filter-bounds (->> filters
@@ -224,15 +224,14 @@
         filter-y      (/ (- (:y bounds) (:y selrect) padding) (:height selrect))
         filter-width  (/ (+ (:width bounds) (* 2 padding)) (:width selrect))
         filter-height (/ (+ (:height bounds) (* 2 padding)) (:height selrect))]
-    [:*
+    (when (> (count filters) 2)
-     (when (> (count filters) 2)
+      [:filter {:id          filter-id
-       [:filter {:id          filter-id
+                :x           filter-x
-                 :x           filter-x
+                :y           filter-y
-                 :y           filter-y
+                :width       filter-width
-                 :width       filter-width
+                :height      filter-height
-                 :height      filter-height
+                :filterUnits "objectBoundingBox"
-                 :filterUnits "objectBoundingBox"
+                :color-interpolation-filters "sRGB"}
-                 :color-interpolation-filters "sRGB"}
+       (for [entry filters]
-        (for [entry filters]
+         [:& filter-entry {:entry entry}])])))
-          [:& filter-entry {:entry entry}])])]))
 

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

@@ -152,7 +152,7 @@
      (mf/deps fullscreen?)
      (fn []
        ;; Trigger dom fullscreen depending on our state
-       (let [wrapper     (dom/get-element "viewer-layout")
+       (let [wrapper         (dom/get-element "viewer-layout")
              fullscreen-dom? (dom/fullscreen?)]
          (when (not= fullscreen? fullscreen-dom?)
            (if fullscreen?

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

@@ -69,31 +69,24 @@
    ::mf/wrap-props false}
   [props]
   (let [shape  (obj/get props "shape")
-        opts  #js {:shape shape}
+        opts  #js {:shape shape}]
-
-        svg-element? (and (= (:type shape) :svg-raw)
-                          (not= :svg (get-in shape [:content :tag])))]
 
     (when (and (some? shape) (not (:hidden shape)))
       [:*
-       (if-not svg-element?
+       (case (:type shape)
-         (case (:type shape)
+         :path    [:> path/path-wrapper opts]
-           :path    [:> path/path-wrapper opts]
+         :text    [:> text/text-wrapper opts]
-           :text    [:> text/text-wrapper opts]
+         :group   [:> group-wrapper opts]
-           :group   [:> group-wrapper opts]
+         :rect    [:> rect-wrapper opts]
-           :rect    [:> rect-wrapper opts]
+         :image   [:> image-wrapper opts]
-           :image   [:> image-wrapper opts]
+         :circle  [:> circle-wrapper opts]
-           :circle  [:> circle-wrapper opts]
+         :svg-raw [:> svg-raw-wrapper opts]
-           :svg-raw [:> svg-raw-wrapper opts]
+         :bool    [:> bool-wrapper opts]
-           :bool    [:> bool-wrapper opts]
 
-           ;; Only used when drawing a new frame.
+         ;; Only used when drawing a new frame.
-           :frame [:> frame-wrapper opts]
+         :frame [:> frame-wrapper opts]
 
-           nil)
+         nil)
-
-         ;; Don't wrap svg elements inside a <g> otherwise some can break
-         [:> svg-raw-wrapper opts])
 
        (when (debug? :bounding-boxes)
          [:> bounding-box opts])])))

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

@@ -9,6 +9,7 @@
    [app.main.refs :as refs]
    [app.main.ui.shapes.shape :refer [shape-container]]
    [app.main.ui.shapes.svg-raw :as svg-raw]
+   [app.util.svg :as usvg]
    [rumext.alpha :as mf]))
 
 (defn svg-raw-wrapper-factory
@@ -20,11 +21,9 @@
       [props]
       (let [shape      (unchecked-get props "shape")
             childs-ref (mf/use-memo (mf/deps shape) #(refs/objects-by-id (:shapes shape)))
-            childs     (mf/deref childs-ref)]
+            childs     (mf/deref childs-ref)
-
+            svg-tag (get-in shape [:content :tag])]
-
+        (if (contains? usvg/svg-group-safe-tags svg-tag)
-        (if (or (= (get-in shape [:content :tag]) :svg)
-                (and (contains? shape :svg-attrs) (map? (:content shape))))
           [:> shape-container {:shape shape}
            [:& svg-raw-shape {:shape shape
                               :childs childs}]]

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

@@ -235,11 +235,12 @@
 (defn translate-point-from-viewport
   "Translate a point in the viewport into client coordinates"
   [pt viewport zoom]
-  (let [vbox     (.. ^js viewport -viewBox -baseVal)
+  (when (some? viewport)
-        box      (gpt/point (.-x vbox) (.-y vbox))
+    (let [vbox     (.. ^js viewport -viewBox -baseVal)
-        zoom     (gpt/point zoom)]
+          box      (gpt/point (.-x vbox) (.-y vbox))
-    (-> (gpt/subtract pt box)
+          zoom     (gpt/point zoom)]
-        (gpt/multiply zoom))))
+      (-> (gpt/subtract pt box)
+          (gpt/multiply zoom)))))
 
 (mf/defc text-editor-viewport
   {::mf/wrap-props false}

frontend/src/app/render.cljs

@@ -60,17 +60,19 @@
 (s/def ::file-id ::us/uuid)
 (s/def ::object-id ::us/uuid)
 (s/def ::render-text ::us/boolean)
+(s/def ::embed ::us/boolean)
 
 (s/def ::render-object-params
   (s/keys :req-un [::file-id ::page-id ::object-id]
-          :opt-un [::render-text]))
+          :opt-un [::render-text ::embed]))
 
 (defn- render-object
   [params]
-  (let [{:keys [page-id file-id object-id render-texts]} (us/conform ::render-object-params params)]
+  (let [{:keys [page-id file-id object-id render-texts embed]} (us/conform ::render-object-params params)]
     (mf/html
      [:& render/render-object
       {:file-id file-id
        :page-id page-id
        :object-id object-id
-       :render-texts? (and (some? render-texts) (= render-texts "true"))}])))
+       :embed? embed
+       :render-texts? render-texts}])))

frontend/src/app/util/dom.cljs

@@ -7,14 +7,16 @@
 (ns app.util.dom
   (:require
    [app.common.data.macros :as dm]
-   [app.common.exceptions :as ex]
    [app.common.geom.point :as gpt]
+   [app.common.logging :as log]
    [app.util.globals :as globals]
    [app.util.object :as obj]
    [cuerdas.core :as str]
    [goog.dom :as dom]
    [promesa.core :as p]))
 
+(log/set-level! :warn)
+
 ;; --- Deprecated methods
 
 (defn event->inner-text
@@ -306,8 +308,9 @@
     (boolean (.-fullscreenElement globals/document))
 
     :else
-    (ex/raise :type :not-supported
+    (do
-              :hint "seems like the current browser does not support fullscreen api.")))
+      (log/error :msg "Seems like the current browser does not support fullscreen api.")
+      false)))
 
 (defn ^boolean blob?
   [^js v]

frontend/src/app/util/svg.cljs

@@ -458,6 +458,49 @@
     :feTile
     :feTurbulence})
 
+;; By spec: https://www.w3.org/TR/SVG11/single-page.html#struct-GElement
+(defonce svg-group-safe-tags
+  #{:animate
+    :animateColor
+    :animateMotion
+    :animateTransform
+    :set
+    :desc
+    :metadata
+    :title
+    :circle
+    :ellipse
+    :line
+    :path
+    :polygon
+    :polyline
+    :rect
+    :defs
+    :g
+    :svg
+    :symbol
+    :use
+    :linearGradient
+    :radialGradient
+    :a
+    :altGlyphDef
+    :clipPath
+    :color-profile
+    :cursor
+    :filter
+    :font
+    :font-face
+    :foreignObject
+    :image
+    :marker
+    :mask
+    :pattern
+    :script
+    :style
+    :switch
+    :text
+    :view})
+
 ;; Props not supported by react we need to keep them lowercase
 (defonce non-react-props
   #{:mask-type})

frontend/src/app/util/webapi.cljs

@@ -8,11 +8,13 @@
   "HTML5 web api helpers."
   (:require
    [app.common.data :as d]
-   [app.common.exceptions :as ex]
+   [app.common.logging :as log]
    [app.util.object :as obj]
    [beicon.core :as rx]
    [cuerdas.core :as str]))
 
+(log/set-level! :warn)
+
 (defn- file-reader
   [f]
   (rx/create
@@ -114,8 +116,9 @@
     (.webkitRequestFullscreen el)
 
     :else
-    (ex/raise :type :not-supported
+    (do
-              :hint "seems like the current browser does not support fullscreen api.")))
+      (log/error :msg "Seems like the current browser does not support fullscreen api.")
+      false)))
 
 (defn exit-fullscreen
   []
@@ -127,8 +130,9 @@
     (.webkitExitFullscreen js/document)
 
     :else
-    (ex/raise :type :not-supported
+    (do
-              :hint "seems like the current browser does not support fullscreen api.")))
+      (log/error :msg "Seems like the current browser does not support fullscreen api.")
+      false)))
 
 (defn observe-resize
   [node]