From 235e1960948d2c392d0cff50d4676b626a63e4fc Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Tue, 19 May 2020 12:45:05 +0200 Subject: [PATCH] :sparkles: Fixes problem with snap keys --- .../partials/sidebar-element-options.scss | 21 +++++++-- frontend/src/uxbox/main/data/workspace.cljs | 2 +- .../src/uxbox/main/ui/workspace/grid.cljs | 43 ----------------- .../sidebar/options/frame_layouts.cljs | 47 +++++++++++++------ .../main/ui/workspace/snap_feedback.cljs | 36 +++++++------- frontend/src/uxbox/util/geom/layout.cljs | 12 ++--- 6 files changed, 74 insertions(+), 87 deletions(-) delete mode 100644 frontend/src/uxbox/main/ui/workspace/grid.cljs diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index c3c1e4e77..937432c47 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss @@ -285,7 +285,7 @@ position: absolute; left: 0; z-index: 12; - width: 200px; + // width: 200px; max-height: 30rem; min-width: 7rem; overflow-y: auto; @@ -414,9 +414,21 @@ } } -.grid-option-main .editable-select.input-option .input-text { - padding: 0; - padding-top: 0.18rem; +.element-set-content .grid-option-main { + .editable-select.input-option .input-text { + padding: 0; + padding-top: 0.18rem; + } + + .input-element { + width: 55px; + margin: 0 0.2rem; + } + + .input-text { + padding-left: 0; + color: #b1b2b5; + } } .color-th { @@ -644,6 +656,7 @@ } & .custom-select { + min-width: 4.75rem; height: 2rem; border: none; border-bottom: 1px solid #65666A; diff --git a/frontend/src/uxbox/main/data/workspace.cljs b/frontend/src/uxbox/main/data/workspace.cljs index d607e35a9..a80432eb9 100644 --- a/frontend/src/uxbox/main/data/workspace.cljs +++ b/frontend/src/uxbox/main/data/workspace.cljs @@ -1501,7 +1501,7 @@ :column {:size 12 :type :stretch - :item-width nil + :item-length nil :gutter 8 :margin 0 :color {:value "#DE4762" diff --git a/frontend/src/uxbox/main/ui/workspace/grid.cljs b/frontend/src/uxbox/main/ui/workspace/grid.cljs deleted file mode 100644 index 31b1c30aa..000000000 --- a/frontend/src/uxbox/main/ui/workspace/grid.cljs +++ /dev/null @@ -1,43 +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 uxbox.main.ui.workspace.grid - (:require - [cuerdas.core :as str] - [okulary.core :as l] - [rumext.alpha :as mf] - [uxbox.main.constants :as c] - [uxbox.main.refs :as refs])) - -;; --- Grid (Component) - -(def options-iref - (l/derived :options refs/workspace-data)) - -(mf/defc grid - {:wrap [mf/memo]} - [props] - (let [options (mf/deref options-iref) - width (:grid-x options 10) - height (:grid-y options 10) - color (:grid-color options "#cccccc")] - [:g.grid - [:defs - [:pattern {:id "grid-pattern" - :x "0" :y "0" - :width width :height height - :patternUnits "userSpaceOnUse"} - [:path {:d (str/format "M 0 %s L %s %s L %s 0" height width height width) - :fill "transparent" - :stroke color}]]] - [:rect {:style {:pointer-events "none"} - :x 0 :y 0 - :width "100%" - :height "100%" - :fill "url(#grid-pattern)"}]])) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_layouts.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_layouts.cljs index fa0872c37..5bf198c65 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_layouts.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_layouts.cljs @@ -12,10 +12,12 @@ [rumext.alpha :as mf] [uxbox.util.dom :as dom] [uxbox.util.data :as d] + [uxbox.util.math :as mth] [uxbox.common.data :refer [parse-integer]] [uxbox.main.store :as st] [uxbox.main.refs :as refs] [uxbox.main.data.workspace :as dw] + [uxbox.util.geom.layout :as gla] [uxbox.main.ui.icons :as i] [uxbox.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] [uxbox.main.ui.workspace.sidebar.options.rows.input-row :refer [input-row]] @@ -38,7 +40,7 @@ :separator 18 12 10 8 6 4 3 2]) -(mf/defc layout-options [{:keys [layout default-layout-params on-change on-remove on-save-layout]}] +(mf/defc layout-options [{:keys [frame layout default-layout-params on-change on-remove on-save-layout]}] (let [state (mf/use-state {:show-advanced-options false :changes {}}) {:keys [type display params] :as layout} (d/deep-merge layout (:changes @state)) @@ -77,6 +79,27 @@ (let [change-fn (apply handle-change keys)] (-> event dom/get-target dom/get-value parse-integer change-fn)))) + handle-change-size + (fn [size] + (let [layout (d/deep-merge layout (:changes @state)) + {:keys [margin gutter item-length]} (:params layout) + frame-length (if (= :column (:type layout)) (:width frame) (:height frame)) + item-length (if (or (nil? size) (= :auto size)) + (-> (gla/calculate-default-item-length frame-length margin gutter) + (mth/round)) + item-length)] + (emit-changes! #(-> % + (assoc-in [:params :size] size) + (assoc-in [:params :item-length] item-length))))) + + handle-change-item-length + (fn [item-length] + (let [{:keys [margin gutter size]} (->> @state :changes :params (d/deep-merge (:params layout))) + size (if (and (nil? item-length) (or (nil? size) (= :auto size))) 12 size)] + (emit-changes! #(-> % + (assoc-in [:params :size] size) + (assoc-in [:params :item-length] item-length))))) + handle-use-default (fn [] (emit-changes! #(hash-map :params ((:type layout) default-layout-params)))) @@ -112,7 +135,7 @@ :type (when (number? (:size params)) "number" ) :class "input-option" :options size-options - :on-change (handle-change :params :size)}]) + :on-change handle-change-size}]) [:div.grid-option-main-actions [:button.custom-button {:on-click handle-toggle-visibility} (if display i/eye i/eye-closed)] @@ -133,7 +156,7 @@ :options size-options :value (:size params) :min 1 - :on-change (handle-change :params :size)}]) + :on-change handle-change-size}]) (when (= :column type) [:& input-row {:label "Columns" @@ -141,7 +164,7 @@ :options size-options :value (:size params) :min 1 - :on-change (handle-change :params :size)}]) + :on-change handle-change-size}]) (when (#{:row :column} type) [:& input-row {:label "Type" @@ -153,18 +176,11 @@ :value (:type params) :on-change (handle-change :params :type)}]) - (when (= :row type) - [:& input-row {:label "Height" + (when (#{:row :column} type) + [:& input-row {:label (if (= :row type) "Height" "Width") :class "pixels" - :min 1 - :value (or (:item-height params) "") - :on-change (handle-change :params :item-height)}]) - - (when (= :column type) - [:& input-row {:label "Width" - :class "pixels" - :value (or (:item-width params) "") - :on-change (handle-change :params :item-width)}]) + :value (or (:item-length params) "") + :on-change handle-change-item-length}]) (when (#{:row :column} type) [:* @@ -205,6 +221,7 @@ [:& layout-options {:key (str (:id shape) "-" index) :layout layout :default-layout-params default-layout-params + :frame shape :on-change (handle-edit-layout index) :on-remove (handle-remove-layout index) :on-save-layout handle-save-layout}])])])) diff --git a/frontend/src/uxbox/main/ui/workspace/snap_feedback.cljs b/frontend/src/uxbox/main/ui/workspace/snap_feedback.cljs index b219ee627..a70866307 100644 --- a/frontend/src/uxbox/main/ui/workspace/snap_feedback.cljs +++ b/frontend/src/uxbox/main/ui/workspace/snap_feedback.cljs @@ -45,8 +45,15 @@ (mf/defc snap-feedback-points [{:keys [shapes page-id filter-shapes zoom] :as props}] (let [state (mf/use-state []) - subject (mf/use-memo #(rx/subject))] + subject (mf/use-memo #(rx/subject)) + ;; We use sets to store points/lines so there are no points/lines repeated + ;; can cause problems with react keys + snap-points (into #{} (mapcat (fn [[point snaps coord]] + (when (not-empty snaps) (concat [point] snaps))) @state)) + + snap-lines (into #{} (mapcat (fn [[point snaps coord]] + (when (not-empty snaps) (map #(vector point %) snaps))) @state))] (mf/use-effect (fn [] (->> subject @@ -61,24 +68,17 @@ (fn [] (rx/push! subject props))) + [:g.snap-feedback - (for [[point snaps coord] @state] - (if (not-empty snaps) - [:g.point {:key (str "point-" (:x point) "-" (:y point) "-" (name coord))} - [:& snap-point {:key (str "point-" (:x point) "-" (:y point) "-" (name coord)) - :point point - :zoom zoom}] - - (for [snap snaps] - [:& snap-point {:key (str "snap-" (:x point) "-" (:y point) "-" (:x snap) "-" (:y snap) "-" (name coord)) - :point snap - :zoom zoom}]) - - (for [snap snaps] - [:& snap-line {:key (str "line-" (:x point) "-" (:y point) "-" (:x snap) "-" (:y snap) "-" (name coord)) - :snap snap - :point point - :zoom zoom}])]))])) + (for [[from-point to-point] snap-lines] + [:& snap-line {:key (str "line-" (:x from-point) "-" (:y from-point) "-" (:x to-point) "-" (:y to-point) "-") + :snap from-point + :point to-point + :zoom zoom}]) + (for [point snap-points] + [:& snap-point {:key (str "point-" (:x point) "-" (:y point)) + :point point + :zoom zoom}])])) (mf/defc snap-feedback [{:keys [layout]}] (let [page-id (mf/deref refs/workspace-page-id) diff --git a/frontend/src/uxbox/util/geom/layout.cljs b/frontend/src/uxbox/util/geom/layout.cljs index ddc453311..7c12100bc 100644 --- a/frontend/src/uxbox/util/geom/layout.cljs +++ b/frontend/src/uxbox/util/geom/layout.cljs @@ -24,10 +24,10 @@ frame-length-no-margins (- frame-length (+ margin (- margin gutter)))] (mth/floor (/ frame-length-no-margins (+ item-length gutter))))) -(defn calculate-column-layout [{:keys [width height x y] :as frame} {:keys [size gutter margin item-width type] :as params}] - (let [size (if (number? size) size (calculate-size width item-width margin gutter)) +(defn calculate-column-layout [{:keys [width height x y] :as frame} {:keys [size gutter margin item-length type] :as params}] + (let [size (if (number? size) size (calculate-size width item-length margin gutter)) parts (/ width size) - item-width (or item-width (+ parts (- gutter) (/ gutter size) (- (/ (* margin 2) size)))) + item-width (or item-length (+ parts (- gutter) (/ gutter size) (- (/ (* margin 2) size)))) item-height height initial-offset (case type :right (- width (* item-width size) (* gutter (dec size)) margin) @@ -38,11 +38,11 @@ next-y (fn [cur-val] y)] [size item-width item-height next-x next-y])) -(defn calculate-row-layout [{:keys [width height x y] :as frame} {:keys [size gutter margin item-height type] :as params}] - (let [size (if (number? size) size (calculate-size height item-height margin gutter)) +(defn calculate-row-layout [{:keys [width height x y] :as frame} {:keys [size gutter margin item-length type] :as params}] + (let [size (if (number? size) size (calculate-size height item-length margin gutter)) parts (/ height size) item-width width - item-height (or item-height (+ parts (- gutter) (/ gutter size) (- (/ (* margin 2) size)))) + item-height (or item-length (+ parts (- gutter) (/ gutter size) (- (/ (* margin 2) size)))) initial-offset (case type :right (- height (* item-height size) (* gutter (dec size)) margin) :center (/ (- height (* item-height size) (* gutter (dec size))) 2)