Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-30 16:41:20 -05:00
Code Issues Activity

✨ Fixes problem with snap keys

Browse source
This commit is contained in:
alonso.torres 2020-05-19 12:45:05 +02:00 • committed by Andrés Moya
parent ad99e6df9d
commit 235e196094
6 changed files with 74 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
frontend/resources/styles/main/partials/sidebar-element-options.scss
View file

@ -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;

2
frontend/src/uxbox/main/data/workspace.cljs
View file

@ -1501,7 +1501,7 @@
:column {:size 12
:type :stretch
:item-width nil
:item-length nil
:gutter 8
:margin 0
:color {:value "#DE4762"

43
frontend/src/uxbox/main/ui/workspace/grid.cljs
View file

@ -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)"}]]))

47
frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_layouts.cljs
View file

@ -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}])])]))

36
frontend/src/uxbox/main/ui/workspace/snap_feedback.cljs
View file

@ -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)

12
frontend/src/uxbox/util/geom/layout.cljs
View file

@ -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)