From b5e965cf1ab7dc848b75639d78062dd25a2a3e92 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Tue, 15 Mar 2022 12:32:02 +0100 Subject: [PATCH] :sparkles: Improved behaviour for horizontal/vertical lines --- common/src/app/common/geom/shapes/path.cljc | 1 - .../app/main/data/workspace/path/streams.cljs | 1 - .../app/main/data/workspace/svg_upload.cljs | 2 +- .../src/app/main/data/workspace/texts.cljs | 19 +---- .../app/main/data/workspace/transforms.cljs | 16 +++- .../main/ui/workspace/viewport/selection.cljs | 74 +++++++++++-------- 6 files changed, 59 insertions(+), 54 deletions(-) diff --git a/common/src/app/common/geom/shapes/path.cljc b/common/src/app/common/geom/shapes/path.cljc index fe9d0fd21..b1922095a 100644 --- a/common/src/app/common/geom/shapes/path.cljc +++ b/common/src/app/common/geom/shapes/path.cljc @@ -981,7 +981,6 @@ (gpr/points->selrect))] [points selrect])) - (defn open-path? [shape] diff --git a/frontend/src/app/main/data/workspace/path/streams.cljs b/frontend/src/app/main/data/workspace/path/streams.cljs index 5fded7dd3..f1de64407 100644 --- a/frontend/src/app/main/data/workspace/path/streams.cljs +++ b/frontend/src/app/main/data/workspace/path/streams.cljs @@ -8,7 +8,6 @@ (:require [app.common.geom.point :as gpt] [app.common.geom.shapes.path :as upg] - [app.common.math :as mth] [app.main.data.workspace.path.state :as state] [app.main.snap :as snap] [app.main.store :as st] diff --git a/frontend/src/app/main/data/workspace/svg_upload.cljs b/frontend/src/app/main/data/workspace/svg_upload.cljs index 282a87920..538dfaddb 100644 --- a/frontend/src/app/main/data/workspace/svg_upload.cljs +++ b/frontend/src/app/main/data/workspace/svg_upload.cljs @@ -11,8 +11,8 @@ [app.common.geom.matrix :as gmt] [app.common.geom.point :as gpt] [app.common.geom.shapes :as gsh] - [app.common.pages.changes-builder :as pcb] [app.common.pages :as cp] + [app.common.pages.changes-builder :as pcb] [app.common.pages.helpers :as cph] [app.common.spec :refer [max-safe-int min-safe-int]] [app.common.uuid :as uuid] diff --git a/frontend/src/app/main/data/workspace/texts.cljs b/frontend/src/app/main/data/workspace/texts.cljs index 58087a559..7a1ccbcb0 100644 --- a/frontend/src/app/main/data/workspace/texts.cljs +++ b/frontend/src/app/main/data/workspace/texts.cljs @@ -289,14 +289,6 @@ ;; --- RESIZE UTILS -(defn update-overflow-text [id value] - (ptk/reify ::update-overflow-text - ptk/UpdateEvent - (update [_ state] - (let [page-id (:current-page-id state)] - (update-in state [:workspace-data :pages-index page-id :objects id] assoc :overflow-text value))))) - - (def start-edit-if-selected (ptk/reify ::start-edit-if-selected ptk/UpdateEvent @@ -325,22 +317,13 @@ update-fn (fn [shape] (let [[new-width new-height] (get changes-map (:id shape)) - {:keys [selrect grow-type overflow-text]} (gsh/transform-shape shape) + {:keys [selrect grow-type]} (gsh/transform-shape shape) {shape-width :width shape-height :height} selrect modifier-width (gsh/resize-modifiers shape :width new-width) modifier-height (gsh/resize-modifiers shape :height new-height)] (cond-> shape - (and overflow-text (not= :fixed grow-type)) - (assoc :overflow-text false) - - (and (= :fixed grow-type) (not overflow-text) (> new-height shape-height)) - (assoc :overflow-text true) - - (and (= :fixed grow-type) overflow-text (<= new-height shape-height)) - (assoc :overflow-text false) - (and (not-changed? shape-width new-width) (= grow-type :auto-width)) (-> (assoc :modifiers modifier-width) (gsh/transform-shape)) diff --git a/frontend/src/app/main/data/workspace/transforms.cljs b/frontend/src/app/main/data/workspace/transforms.cljs index d8b76148b..a74676903 100644 --- a/frontend/src/app/main/data/workspace/transforms.cljs +++ b/frontend/src/app/main/data/workspace/transforms.cljs @@ -121,7 +121,7 @@ (set-modifiers ids modifiers false)) ([ids modifiers ignore-constraints] - (set-modifiers ids modifiers false false)) + (set-modifiers ids modifiers ignore-constraints false)) ([ids modifiers ignore-constraints ignore-snap-pixel] (us/verify (s/coll-of uuid?) ids) @@ -264,8 +264,18 @@ flip-x? (neg? (get-in modifiers [:resize-vector :x])) flip-y? (neg? (get-in modifiers [:resize-vector :y])) - target-width (max 1 (mth/round (:width raw-bounds))) - target-height (max 1 (mth/round (:height raw-bounds))) + path? (= :path (:type shape)) + vertical-line? (and path? (<= (:width raw-bounds) 0.01)) + horizontal-line? (and path? (<= (:height raw-bounds) 0.01)) + + target-width (if vertical-line? + (:width raw-bounds) + (max 1 (mth/round (:width raw-bounds)))) + + target-height (if horizontal-line? + (:height raw-bounds) + (max 1 (mth/round (:height raw-bounds)))) + target-p (cond-> (gpt/round (gpt/point raw-bounds)) flip-x? (update :x + target-width) diff --git a/frontend/src/app/main/ui/workspace/viewport/selection.cljs b/frontend/src/app/main/ui/workspace/viewport/selection.cljs index 69fecc4f0..dcac1a492 100644 --- a/frontend/src/app/main/ui/workspace/viewport/selection.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/selection.cljs @@ -7,6 +7,7 @@ (ns app.main.ui.workspace.viewport.selection "Selection handlers component." (:require + [app.common.data.macros :as dm] [app.common.geom.matrix :as gmt] [app.common.geom.point :as gpt] [app.common.geom.shapes :as gsh] @@ -18,7 +19,6 @@ [app.main.ui.workspace.shapes.path.editor :refer [path-editor]] [app.util.dom :as dom] [app.util.object :as obj] - [cuerdas.core :as str] [debug :refer [debug?]] [rumext.alpha :as mf] [rumext.util :refer [map->obj]])) @@ -43,7 +43,7 @@ :y y :width width :height height - :transform transform + :transform (str transform) :on-mouse-down on-move-selected :on-context-menu on-context-menu :style {:stroke color @@ -93,7 +93,8 @@ :y y :length length :angle 0 - :align align}})) + :align align + :show-handler? tiny-width?}})) (when-not horizontal-line? (let [x (if small-width? (+ x (/ (+ width threshold-small) 2)) (+ x width)) @@ -104,7 +105,8 @@ :y (+ y height) :length length :angle 180 - :align align}})) + :align align + :show-handler? tiny-width?}})) (when-not vertical-line? (let [y (if small-height? (+ y (/ (- height threshold-small) 2)) y) @@ -115,7 +117,8 @@ :y y :length length :angle 90 - :align align}})) + :align align + :show-handler? tiny-height?}})) (when-not vertical-line? (let [y (if small-height? (+ y (/ (+ height threshold-small) 2)) (+ y height)) @@ -126,7 +129,8 @@ :y y :length length :angle 270 - :align align}})) + :align align + :show-handler? tiny-height?}})) (when (and (not tiny-width?) (not tiny-height?)) {:type :resize-point @@ -166,11 +170,11 @@ :height size :fill (if (debug? :handlers) "blue" "none") :stroke-width 0 - :transform transform + :transform (str transform) :on-mouse-down on-rotate}])) (mf/defc resize-point-handler - [{:keys [cx cy zoom position on-resize transform rotation color overflow-text align]}] + [{:keys [cx cy zoom position on-resize transform rotation color align]}] (let [cursor (if (#{:top-left :bottom-right} position) (cur/resize-nesw rotation) (cur/resize-nwse rotation)) {cx' :x cy' :y} (gpt/transform (gpt/point cx cy) transform)] @@ -181,7 +185,7 @@ :strokeWidth "1px" :vectorEffect "non-scaling-stroke"} :fill "var(--color-white)" - :stroke (if (and (= position :bottom-right) overflow-text) "red" color) + :stroke color :cx cx' :cy cy'}] @@ -196,7 +200,7 @@ :y cy' :width resize-point-circle-radius :height resize-point-circle-radius - :transform (when rotation (str/fmt "rotate(%s, %s, %s)" rotation cx' cy')) + :transform (when rotation (dm/fmt "rotate(%, %, %)" rotation cx' cy')) :style {:fill (if (debug? :handlers) "red" "none") :stroke-width 0 :cursor cursor} @@ -212,26 +216,37 @@ (mf/defc resize-side-handler "The side handler is always rendered horizontally and then rotated" - [{:keys [x y length align angle zoom position rotation transform on-resize]}] + [{:keys [x y length align angle zoom position rotation transform on-resize color show-handler?]}] (let [res-point (if (#{:top :bottom} position) {:y y} {:x x}) height (/ resize-side-height zoom) offset-y (if (= align :outside) (- height) (- (/ height 2))) - target-y (+ y offset-y)] - [:rect {:x x - :y target-y - :width length - :height height - :transform (gmt/multiply transform - (gmt/rotate-matrix angle (gpt/point x y))) - :on-mouse-down #(on-resize res-point %) - :style {:fill (if (debug? :handlers) "yellow" "none") - :stroke-width 0 - :cursor (if (#{:left :right} position) - (cur/resize-ew rotation) - (cur/resize-ns rotation)) }}])) + target-y (+ y offset-y) + transform-str (str (gmt/multiply transform (gmt/rotate-matrix angle (gpt/point x y))))] + [:g.resize-handler + (when show-handler? + [:circle {:r (/ resize-point-radius zoom) + :style {:fillOpacity 1 + :stroke color + :strokeWidth "1px" + :fill "var(--color-white)" + :vectorEffect "non-scaling-stroke"} + :cx (+ x (/ length 2)) + :cy y + :transform transform-str}]) + [:rect {:x x + :y target-y + :width length + :height height + :transform transform-str + :on-mouse-down #(on-resize res-point %) + :style {:fill (if (debug? :handlers) "yellow" "none") + :stroke-width 0 + :cursor (if (#{:left :right} position) + (cur/resize-ew rotation) + (cur/resize-ns rotation)) }}]])) (defn minimum-selrect [{:keys [x y width height] :as selrect}] (let [final-width (max width min-selrect-side) @@ -262,7 +277,7 @@ [:g.controls {:pointer-events (if disable-handlers "none" "visible")} ;; Selection rect [:& selection-rect {:rect selrect - :transform transform + :transform (str transform) :zoom zoom :color color :on-move-selected on-move-selected @@ -271,7 +286,7 @@ (mf/defc controls-handlers {::mf/wrap-props false} [props] - (let [{:keys [overflow-text] :as shape} (obj/get props "shape") + (let [shape (obj/get props "shape") zoom (obj/get props "zoom") color (obj/get props "color") on-resize (obj/get props "on-resize") @@ -291,15 +306,14 @@ [:g.controls {:pointer-events (if disable-handlers "none" "visible")} ;; Handlers (for [{:keys [type position props]} (handlers-for-selection selrect shape zoom)] - (let [common-props {:key (str (name type) "-" (name position)) + (let [common-props {:key (dm/str (name type) "-" (name position)) :zoom zoom :position position :on-rotate on-rotate :on-resize (partial on-resize position) :transform transform :rotation rotation - :color color - :overflow-text overflow-text} + :color color} props (map->obj (merge common-props props))] (case type :rotation (when (not= :frame (:type shape)) [:> rotation-handler props]) @@ -313,7 +327,7 @@ (let [{:keys [x y width height]} shape] [:g.controls [:rect.main {:x x :y y - :transform (gsh/transform-matrix shape) + :transform (str (gsh/transform-matrix shape)) :width width :height height :pointer-events "visible"