Merge pull request #4056 from penpot/alotor-bugfixes-11

Bugfixing (general and Safari)

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

@@ -728,10 +728,11 @@
 
 
 (defmethod read-section :v1/files
-  [{:keys [::db/conn ::input ::project-id ::enabled-features ::timestamp ::overwrite?] :as system}]
+  [{:keys [::db/conn ::input ::project-id ::enabled-features ::timestamp ::overwrite? ::name] :as system}]
 
-  (doseq [expected-file-id (-> *state* deref :files)]
+  (doseq [[idx expected-file-id] (d/enumerate (-> *state* deref :files))]
     (let [file       (read-obj! input)
+
           media      (read-obj! input)
 
           file-id    (:id file)
@@ -770,6 +771,8 @@
 
       (let [file (-> file
                      (assoc :id file-id')
+                     (cond-> (and (= idx 0) (some? name))
+                       (assoc :name name))
                      (process-file))
 
             ;; All features that are enabled and requires explicit migration are
@@ -1105,6 +1108,7 @@
   schema:import-binfile
   (sm/define
     [:map {:title "import-binfile"}
+     [:name :string]
      [:project-id ::sm/uuid]
      [:file ::media/upload]]))
 
@@ -1116,12 +1120,13 @@
    ::webhooks/event? true
    ::sse/stream? true
    ::sm/params schema:import-binfile}
-  [{:keys [::db/pool] :as cfg} {:keys [::rpc/profile-id project-id file] :as params}]
+  [{:keys [::db/pool] :as cfg} {:keys [::rpc/profile-id name project-id file] :as params}]
   (projects/check-read-permissions! pool profile-id project-id)
   (let [params (-> cfg
                    (assoc ::input (:path file))
                    (assoc ::project-id project-id)
                    (assoc ::profile-id profile-id)
+                   (assoc ::name name)
                    (assoc ::ignore-index-errors? true))]
     (with-meta
       (sse/response #(import-binfile params))

frontend/resources/styles/debug.scss

@@ -10,6 +10,5 @@
 //       debugging.
 
 body {
-  background-color: red;
   color: yellow;
 }

frontend/src/app/config.cljs

@@ -22,7 +22,7 @@
 ;; --- Auxiliar Functions
 
 (def valid-browsers
-  #{:chrome :firefox :safari :edge :other})
+  #{:chrome :firefox :safari :safari-16 :safari-17 :edge :other})
 
 (def valid-platforms
   #{:windows :linux :macos :other})
@@ -33,11 +33,15 @@
         check-chrome? (fn [] (str/includes? user-agent "chrom"))
         check-firefox? (fn [] (str/includes? user-agent "firefox"))
         check-edge? (fn [] (str/includes? user-agent "edg"))
-        check-safari? (fn [] (str/includes? user-agent "safari"))]
+        check-safari? (fn [] (str/includes? user-agent "safari"))
+        check-safari-16? (fn [] (and (check-safari?) (str/includes? user-agent "version/16")))
+        check-safari-17? (fn [] (and (check-safari?) (str/includes? user-agent "version/17")))]
     (cond
       (check-edge?)      :edge
       (check-chrome?)    :chrome
       (check-firefox?)   :firefox
+      (check-safari-16?) :safari-16
+      (check-safari-17?) :safari-17
       (check-safari?)    :safari
       :else              :other)))
 
@@ -130,7 +134,9 @@
 
 (defn ^boolean check-browser? [candidate]
   (dm/assert! (contains? valid-browsers candidate))
-  (= candidate browser))
+  (if (= candidate :safari)
+    (contains? #{:safari :safari-16 :safari-17} browser)
+    (= candidate browser)))
 
 (defn ^boolean check-platform? [candidate]
   (dm/assert! (contains? valid-platforms candidate))

frontend/src/app/main/data/workspace/drawing/box.cljs

@@ -129,6 +129,9 @@
 
                (->> ms/mouse-position
                     (rx/filter #(> (gpt/distance % initial) (/ 2 zoom)))
+                    ;; Take until before the snap calculation otherwise we could cancel the snap in the worker
+                    ;; and its a problem for fast moving drawing
+                    (rx/take-until stoper)
                     (rx/with-latest-from ms/mouse-position-shift ms/mouse-position-mod)
                     (rx/switch-map
                      (fn [[point :as current]]
@@ -136,8 +139,7 @@
                             (rx/map (partial array/conj current)))))
                     (rx/map
                      (fn [[_ shift? mod? point]]
-                       #(update-drawing % initial (cond-> point snap-pixel? (gpt/round-step snap-prec)) shift? mod?)))))
+                       #(update-drawing % initial (cond-> point snap-pixel? (gpt/round-step snap-prec)) shift? mod?))))))
-              (rx/take-until stoper))
 
          (->> (rx/of (common/handle-finish-drawing))
               (rx/delay 100)))))))

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

@@ -6,6 +6,7 @@
 
 (ns app.main.data.workspace.media
   (:require
+   [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.exceptions :as ex]
    [app.common.files.builder :as fb]
@@ -308,9 +309,37 @@
 
         process-svg
         (fn [svg-data]
-          (let [[shape children]
+          (let [[root-svg-shape children]
-                (csvg.shapes-builder/create-svg-shapes svg-data pos objects uuid/zero nil #{} false)]
+                (csvg.shapes-builder/create-svg-shapes svg-data pos objects uuid/zero nil #{} false)
-            [shape children]))]
+
+                frame-shape
+                (cts/setup-shape
+                 {:type :frame
+                  :x (:x pos)
+                  :y (:y pos)
+                  :width (-> root-svg-shape :selrect :width)
+                  :height (-> root-svg-shape :selrect :height)
+                  :name (:name root-svg-shape)
+                  :frame-id uuid/zero
+                  :parent-id uuid/zero
+                  :fills []})
+
+                root-svg-shape
+                (-> root-svg-shape
+                    (assoc :frame-id (:id frame-shape) :parent-id (:id frame-shape)))
+
+                shapes
+                (->> children
+                     (filter #(= (:parent-id %) (:id root-svg-shape)))
+                     (mapv :id))
+
+                root-svg-shape
+                (assoc root-svg-shape :shapes shapes)
+
+                children (->> children (mapv #(assoc % :frame-id (:id frame-shape))))
+                children (d/concat-vec [root-svg-shape] children)]
+
+            [frame-shape children]))]
 
     (->> (upload-images svg-data)
          (rx/map process-svg))))
@@ -427,4 +456,3 @@
               (rx/tap on-success)
               (rx/catch on-error)
               (rx/finalize #(st/emit! (msg/hide-tag :media-loading)))))))))
-

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

@@ -19,18 +19,18 @@
     {::mf/wrap-props false}
     [props]
     (let [shape       (unchecked-get props "shape")
-          children  (unchecked-get props "childs")
+          child-objs  (unchecked-get props "childs")
-          children  (h/use-equal-memo children)
+          child-objs  (h/use-equal-memo child-objs)
 
           metadata? (mf/use-ctx use/include-metadata-ctx)
-          content   (mf/with-memo [shape children]
+          content   (mf/with-memo [shape child-objs]
                       (let [content (:bool-content shape)]
                         (cond
                           (some? content)
                           content
 
-                          (some? children)
+                          (some? child-objs)
-                          (gsh/calc-bool-content shape children))))
+                          (gsh/calc-bool-content shape child-objs))))
 
           shape     (mf/with-memo [shape content]
                       (assoc shape :content content))]
@@ -40,9 +40,8 @@
          [:& path-shape {:shape shape}])
 
        (when metadata?
-         ;; FIXME: get children looks wrong
          [:> "penpot:bool" {}
-          (for [item (map #(get children %) (:shapes shape))]
+          (for [item (map #(get child-objs %) (:shapes shape))]
             [:& shape-wrapper
              {:shape item
               :key (dm/str (dm/get-prop item :id))}])])])))

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

@@ -58,7 +58,7 @@
                          :width width
                          :height height}
 
-        pat-props   (if (= :path type)
+        pat-props   (if (or (= :path type) (= :bool type))
                       (obj/set! pat-props "patternTransform" transform)
                       pat-props)]
 

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

@@ -179,7 +179,7 @@
                               :on-key-down (fn [event]
                                              (when (kbd/enter? event)
                                                (toggle-flag event)))
-                              :data-test   "scale.-text"
+                              :data-test   "scale-text"
                               :id          "file-menu-scale-text"}
       [:span {:class (stl/css :item-name)}
        (if (contains? layout :scale-text)

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

@@ -281,7 +281,7 @@
         ;; NOTE: this teoretically breaks hooks rules, but in practice
         ;; it is imposible to really break it
         maybe-zoom
-        (when (cf/check-browser? :safari)
+        (when (cf/check-browser? :safari-16)
           (mf/deref refs/selected-zoom))
 
         shape (cond-> shape
@@ -300,26 +300,27 @@
         width  (mth/max (dm/get-prop bounds :width)
                         (dm/get-prop shape :width))
         height (mth/max (dm/get-prop bounds :height)
-                        (dm/get-prop shape :height))]
+                        (dm/get-prop shape :height))
+
+        style
+        (cond-> #js {:pointer-events "all"}
+          (cf/check-browser? :safari-16)
+          (obj/merge!
+           #js {:position "fixed"
+                :left 0
+                :top  (- (dm/get-prop shape :y) y)
+                :transform-origin "top left"
+                :transform (when (some? maybe-zoom)
+                             (dm/fmt "scale(%)" maybe-zoom))}))]
 
     [:g.text-editor {:clip-path (dm/fmt "url(#%)" clip-id)
                      :transform (dm/str (gsh/transform-matrix shape))}
      [:defs
       [:clipPath {:id clip-id}
-       [:rect {:x x
+       [:rect {:x x :y y :width width :height height}]]]
-               :y y
-               :width width
-               :height height
-               :fill "red"}]]]
 
      [:foreignObject {:x x :y y :width width :height height}
-      [:div {:style {:position "fixed"
+      [:div {:style style}
-                     :left 0
-                     :top  (- (dm/get-prop shape :y) y)
-                     :pointer-events "all"
-                     :transform-origin "top left"
-                     :transform (when (some? maybe-zoom)
-                                  (dm/fmt "scale(%)" maybe-zoom))}}
        [:& text-shape-edit-html
         {:shape shape
          :key (dm/str shape-id)}]]]]))

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

@@ -377,8 +377,8 @@
        [:clipPath {:id "clip-handlers"}
         [:rect {:x (+ (:x vbox) rule-area-size)
                 :y (+ (:y vbox) rule-area-size)
-                :width (max 0 (- (:width vbox) (* rule-area-size 2)))
+                :width (max 0 (- (:width vbox) rule-area-size))
-                :height (max 0 (- (:height vbox) (* rule-area-size 2)))}]]]
+                :height (max 0 (- (:height vbox) rule-area-size))}]]]
 
       [:g {:style {:pointer-events (if disable-events? "none" "auto")}}
        (when show-text-editor?
@@ -539,12 +539,6 @@
          [:& presence/active-cursors
           {:page-id page-id}])
 
-       [:& scroll-bars/viewport-scrollbars
-        {:objects base-objects
-         :zoom zoom
-         :vbox vbox
-         :bottom-padding (when palete-size (+ palete-size 8))}]
-
        (when-not hide-ui?
          [:& rules/rules
           {:zoom zoom
@@ -637,4 +631,10 @@
               :objects base-objects
               :modifiers modifiers
               :shape frame
-              :view-only true}]))]]]]))
+              :view-only true}]))
+
+        [:& scroll-bars/viewport-scrollbars
+         {:objects base-objects
+          :zoom zoom
+          :vbox vbox
+          :bottom-padding (when palete-size (+ palete-size 8))}]]]]]))

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

@@ -7,6 +7,7 @@
 (ns app.main.ui.workspace.viewport.pixel-overlay
   (:require
    [app.common.math :as mth]
+   [app.config :as cfg]
    [app.main.data.modal :as modal]
    [app.main.data.workspace.colors :as dwc]
    [app.main.data.workspace.undo :as dwu]
@@ -99,7 +100,9 @@
                      ;; I don't know why, but the zoom view is offset by 24px
                      ;; instead of 25.
                      sx (- x 32)
-                     sy (- y 17)
+
+                     ;; Safari has a different offset fro the y coord
+                     sy (if (cfg/check-browser? :safari) y (- y 17))
                      sw 65
                      sh 35
                      dx 0

frontend/src/app/worker/import.cljs

@@ -728,7 +728,10 @@
                     :method :get})
                   (rx/map :body)
                   (rx/mapcat (fn [file]
-                               (->> (rp/cmd! ::sse/import-binfile {:file file :project-id project-id})
+                               (->> (rp/cmd! ::sse/import-binfile
+                                             {:name (str/replace (:name data) #".penpot$" "")
+                                              :file file
+                                              :project-id project-id})
                                     (rx/tap (fn [event]
                                               (let [payload (sse/get-payload event)
                                                     type    (sse/get-type event)]