Merge remote-tracking branch 'origin/bugfixing' into staging

CHANGES.md

@@ -43,6 +43,7 @@
 - Fix issue when undo after changing the artboard of a shape [Taiga #1304](https://tree.taiga.io/project/penpot/issue/1304)
 - Fix issue with Alt key in distance measurement [#672](https://github.com/penpot/penpot/issues/672)
 - Fix issue with blending modes in masks [Taiga #1476](https://tree.taiga.io/project/penpot/issue/1476)
+- Fix issue with blocked shapes [Taiga #1480](https://tree.taiga.io/project/penpot/issue/1480)
 - Fix issue with comments styles on dashboard [Taiga #1405](https://tree.taiga.io/project/penpot/issue/1405)
 - Fix issue with default square grid [Taiga #1344](https://tree.taiga.io/project/penpot/issue/1344)
 - Fix issue with enter key shortcut [#775](https://github.com/penpot/penpot/issues/775)
@@ -56,6 +57,7 @@
 - Fix issue with system shortcuts and application [#737](https://github.com/penpot/penpot/issues/737)
 - Fix issue with team management in dashboard [Taiga #1475](https://tree.taiga.io/project/penpot/issue/1475)
 - Fix issue with typographies panel cannot be collapsed [#707](https://github.com/penpot/penpot/issues/707)
+- Fix text selection in comments [#745](https://github.com/penpot/penpot/issues/745)
 - Updates Work-Sans font [#744](https://github.com/penpot/penpot/issues/744)
 
 

common/app/common/pages/helpers.cljc

@@ -187,16 +187,18 @@
 (defn clean-loops
   "Clean a list of ids from circular references."
   [objects ids]
-  (loop [ids    ids
+  (let [parent-selected?
-         id     (first ids)
+        (fn [id]
-         others (rest ids)]
+          (let [parents (get-parents id objects)]
-    (if-not id
+            (some ids parents)))
-      ids
+
-      (recur (cond-> ids
+        add-element
-               (some #(contains? ids %) (get-parents id objects))
+        (fn [result id]
-               (disj id))
+          (cond-> result
-             (first others)
+            (not (parent-selected? id))
-             (rest others)))))
+            (conj id)))]
+
+    (reduce add-element (d/ordered-set) ids)))
 
 (defn calculate-invalid-targets
   [shape-id objects]

frontend/resources/styles/main/partials/comments.scss

@@ -42,6 +42,7 @@
     border-radius: 2px;
     min-width: 280px;
     max-width: 280px;
+    user-select: text;
 
     .comments {
       max-height: 420px;

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

@@ -1356,7 +1356,8 @@
       ptk/WatchEvent
       (watch [_ state stream]
         (let [objects  (dwc/lookup-page-objects state)
-              selected (get-in state [:workspace-local :selected])
+              selected (->> (get-in state [:workspace-local :selected])
+                            (cp/clean-loops objects))
               pdata    (reduce (partial collect-object-ids objects) {} selected)
               initial  {:type :copied-shapes
                         :file-id (:current-file-id state)

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

@@ -1,62 +0,0 @@
-;; 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 UXBOX Labs SL
-
-(ns app.main.ui.workspace.shapes.outline
-  (:require
-   [rumext.alpha :as mf]
-   [app.common.geom.shapes :as gsh]
-   [app.util.object :as obj]
-   [rumext.util :refer [map->obj]]
-   [app.main.refs :as refs]
-   [app.util.geom.path :as ugp]))
-
-
-(mf/defc outline
-  {::mf/wrap-props false}
-  [props]
-  (let [zoom (mf/deref refs/selected-zoom)
-        shape (unchecked-get props "shape")
-        color (unchecked-get props "color")
-        transform (gsh/transform-matrix shape)
-        path? (= :path (:type shape))
-        path-data
-        (mf/use-memo
-         (mf/deps shape)
-         #(when path? (ugp/content->path (:content shape))))
-
-        {:keys [id x y width height]} shape
-
-        outline-type (case (:type shape)
-                       :circle "ellipse"
-                       :path "path"
-                       "rect")
-
-        common {:fill "transparent"
-                :stroke color
-                :strokeWidth (/ 1 zoom)
-                :pointerEvents "none"
-                :transform transform}
-
-        props (case (:type shape)
-                :circle
-                {:cx (+ x (/ width 2))
-                 :cy (+ y (/ height 2))
-                 :rx (/ width 2)
-                 :ry (/ height 2)}
-
-                :path
-                {:d path-data
-                 :transform nil}
-
-                {:x x
-                 :y y
-                 :width width
-                 :height height})]
-
-    [:> outline-type (map->obj (merge common props))]))

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

@@ -22,6 +22,7 @@
    [app.main.ui.workspace.viewport.gradients :as gradients]
    [app.main.ui.workspace.viewport.hooks :as hooks]
    [app.main.ui.workspace.viewport.interactions :as interactions]
+   [app.main.ui.workspace.viewport.outline :as outline]
    [app.main.ui.workspace.viewport.pixel-overlay :as pixel-overlay]
    [app.main.ui.workspace.viewport.presence :as presence]
    [app.main.ui.workspace.viewport.selection :as selection]
@@ -197,12 +198,13 @@
       [:g {:style {:pointer-events (if disable-events? "none" "auto")}}
 
        (when show-outlines?
-         [:& widgets/shape-outlines
+         [:& outline/shape-outlines
           {:objects objects
            :selected selected
            :hover (when (not= :frame (:type @hover))
                     #{(or @frame-hover (:id @hover))})
-           :edition edition}])
+           :edition edition
+           :zoom zoom}])
 
        (when show-selection-handlers?
          [:& selection/selection-handlers

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

@@ -15,12 +15,13 @@
    [app.main.data.workspace :as dw]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.workspace.shapes.outline :refer [outline]]
+   [app.main.ui.workspace.viewport.outline :refer [outline]]
    [app.util.data :as dt]
    [app.util.dom :as dom]
    [app.util.keyboard :as kbd]
    [cuerdas.core :as str]
-   [rumext.alpha :as mf]))
+   [rumext.alpha :as mf]
+   ))
 
 (defn- get-click-interaction
   [shape]

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

@@ -0,0 +1,103 @@
+;; 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 UXBOX Labs SL
+
+(ns app.main.ui.workspace.viewport.outline
+  (:require
+   [app.common.geom.shapes :as gsh]
+   [app.common.pages :as cp]
+   [app.main.refs :as refs]
+   [app.util.geom.path :as ugp]
+   [app.util.object :as obj]
+   [clojure.set :as set]
+   [rumext.alpha :as mf]
+   [rumext.util :refer [map->obj]]))
+
+(mf/defc outline
+  {::mf/wrap-props false}
+  [props]
+  (let [shape (unchecked-get props "shape")
+        zoom (unchecked-get props "zoom")
+        color (unchecked-get props "color")
+        transform (gsh/transform-matrix shape)
+        path? (= :path (:type shape))
+        path-data
+        (mf/use-memo
+         (mf/deps shape)
+         #(when path? (ugp/content->path (:content shape))))
+
+        {:keys [id x y width height]} shape
+
+        outline-type (case (:type shape)
+                       :circle "ellipse"
+                       :path "path"
+                       "rect")
+
+        common {:fill "transparent"
+                :stroke color
+                :strokeWidth (/ 1 zoom)
+                :pointerEvents "none"
+                :transform transform}
+
+        props (case (:type shape)
+                :circle
+                {:cx (+ x (/ width 2))
+                 :cy (+ y (/ height 2))
+                 :rx (/ width 2)
+                 :ry (/ height 2)}
+
+                :path
+                {:d path-data
+                 :transform nil}
+
+                {:x x
+                 :y y
+                 :width width
+                 :height height})]
+
+    [:> outline-type (map->obj (merge common props))]))
+
+(mf/defc shape-outlines-render
+  {::mf/wrap-props false
+   ::mf/wrap [#(mf/memo' % (mf/check-props ["shapes" "zoom"]))]}
+  [props]
+  (let [shapes (obj/get props "shapes")
+        zoom (obj/get props "zoom")
+        color (if (or (> (count shapes) 1) (nil? (:shape-ref (first shapes))))
+                "#31EFB8" "#00E0FF")]
+    (for [shape shapes]
+      [:& outline {:key (str "outline-" (:id shape))
+                   :shape (gsh/transform-shape shape)
+                   :zoom zoom
+                   :color color}])))
+
+(mf/defc shape-outlines
+  {::mf/wrap-props false}
+  [props]
+  (let [selected  (or (obj/get props "selected") #{})
+        hover     (or (obj/get props "hover") #{})
+        objects   (obj/get props "objects")
+        edition   (obj/get props "edition")
+        zoom      (obj/get props "zoom")
+
+        transform (mf/deref refs/current-transform)
+
+        outlines-ids  (->> (set/union selected hover)
+                           (cp/clean-loops objects))
+
+        show-outline? (fn [shape] (and (not (:hidden shape))
+                                       (not (:blocked shape))))
+
+        shapes (->> outlines-ids
+                    (filter #(not= edition %))
+                    (map #(get objects %))
+                    (filterv show-outline?))]
+
+    [:g.outlines {:display (when (some? transform) "none")}
+     [:& shape-outlines-render {:shapes shapes
+                                :zoom zoom}]]))

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

@@ -23,7 +23,7 @@
    [app.main.ui.cursors :as cur]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.measurements :as msr]
-   [app.main.ui.workspace.shapes.outline :refer [outline]]
+   [app.main.ui.workspace.viewport.outline :refer [outline]]
    [app.main.ui.workspace.shapes.path.editor :refer [path-editor]]
    [app.util.data :as d]
    [app.util.debug :refer [debug?]]
@@ -296,7 +296,13 @@
 
 (mf/defc multiple-selection-handlers
   [{:keys [shapes selected zoom color show-distances disable-handlers on-move-selected] :as props}]
-  (let [shape (geom/setup {:type :rect} (geom/selection-rect (->> shapes (map geom/transform-shape))))
+  (let [shape (mf/use-memo
+               (mf/deps shapes)
+               #(->> shapes
+                     (map geom/transform-shape)
+                     (geom/selection-rect)
+                     (geom/setup {:type :rect})))
+
         shape-center (geom/center-shape shape)
 
         hover-id (-> (mf/deref refs/current-hover) first)

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

@@ -17,39 +17,11 @@
    [app.main.store :as st]
    [app.main.streams :as ms]
    [app.main.ui.hooks :as hooks]
-   [app.main.ui.workspace.shapes.outline :refer [outline]]
    [app.main.ui.workspace.shapes.path.actions :refer [path-actions]]
    [app.util.dom :as dom]
-   [clojure.set :as set]
+   [app.util.object :as obj]
    [rumext.alpha :as mf]))
 
-(mf/defc shape-outlines
-  {::mf/wrap-props false}
-  [props]
-  (let [objects   (unchecked-get props "objects")
-        selected  (or (unchecked-get props "selected") #{})
-        hover     (or (unchecked-get props "hover") #{})
-        edition   (unchecked-get props "edition")
-        outline?  (set/union selected hover)
-        show-outline? (fn [shape] (and (not (:hidden shape))
-                                       (not (:blocked shape))
-                                       (not= edition (:id shape))
-                                       (outline? (:id shape))))
-
-        shapes    (cond->> (vals objects)
-                    show-outline?   (filter show-outline?))
-
-        transform (mf/deref refs/current-transform)
-        color (if (or (> (count shapes) 1) (nil? (:shape-ref (first shapes))))
-                "#31EFB8" "#00E0FF")]
-    (when (nil? transform)
-      [:g.outlines
-       (for [shape shapes]
-         [:& outline {:key (str "outline-" (:id shape))
-                      :shape (gsh/transform-shape shape)
-                      :color color}])])))
-
-
 (mf/defc pixel-grid
   [{:keys [vbox zoom]}]
   [:g.pixel-grid

frontend/src/app/worker/selection.cljs

@@ -54,6 +54,7 @@
           match-criteria?
           (fn [shape]
             (and (not (:hidden shape))
+                 (not (:blocked shape))
                  (or (not frame-id) (= frame-id (:frame-id shape)))
                  (case (:type shape)
                    :frame   include-frames?