mirror of
https://github.com/penpot/penpot.git
synced 2025-03-20 19:51:23 -05:00
✨ Adapt to handoff changes
This commit is contained in:
alonso.torres
parent
94602feab1
commit
cebda20dd4
8 changed files with 384 additions and 372 deletions
|
|
@ -83,14 +83,16 @@
|
|||
:layout-h-orientation :layout-container
|
||||
:layout-v-orientation :layout-container
|
||||
|
||||
:layout-margin :layout-item
|
||||
:layout-margin-type :layout-item
|
||||
:layout-h-behavior :layout-item
|
||||
:layout-v-behavior :layout-item
|
||||
:layout-max-h :layout-item
|
||||
:layout-min-h :layout-item
|
||||
:layout-max-w :layout-item
|
||||
:layout-min-w :layout-item})
|
||||
:layout-item-margin :layout-item
|
||||
:layout-item-margin-type :layout-item
|
||||
:layout-item-h-sizing :layout-item
|
||||
:layout-item-v-sizing :layout-item
|
||||
:layout-item-max-h :layout-item
|
||||
:layout-item-min-h :layout-item
|
||||
:layout-item-max-w :layout-item
|
||||
:layout-item-min-w :layout-item
|
||||
:layout-item-align-self :layout-item
|
||||
})
|
||||
|
||||
;; Attributes that may directly be edited by the user with forms
|
||||
(def editable-attrs
|
||||
|
|
@ -133,56 +135,59 @@
|
|||
:exports
|
||||
|
||||
:layout
|
||||
:layout-dir
|
||||
:layout-flex-dir
|
||||
:layout-gap
|
||||
:layout-type
|
||||
:layout-gap-type
|
||||
:layout-align-items
|
||||
:layout-justify-content
|
||||
:layout-align-content
|
||||
:layout-wrap-type
|
||||
:layout-padding-type
|
||||
:layout-padding
|
||||
:layout-h-orientation
|
||||
:layout-v-orientation
|
||||
|
||||
:layout-margin
|
||||
:layout-margin-type
|
||||
:layout-h-behavior
|
||||
:layout-v-behavior
|
||||
:layout-max-h
|
||||
:layout-min-h
|
||||
:layout-max-w
|
||||
:layout-min-w}
|
||||
:layout-item-margin
|
||||
:layout-item-margin-type
|
||||
:layout-item-h-sizing
|
||||
:layout-item-v-sizing
|
||||
:layout-item-max-h
|
||||
:layout-item-min-h
|
||||
:layout-item-max-w
|
||||
:layout-item-min-w
|
||||
:layout-item-align-self}
|
||||
|
||||
:group #{:proportion-lock
|
||||
:width :height
|
||||
:x :y
|
||||
:rotation
|
||||
:selrect
|
||||
:points
|
||||
:x :y
|
||||
:rotation
|
||||
:selrect
|
||||
:points
|
||||
|
||||
:constraints-h
|
||||
:constraints-v
|
||||
:fixed-scroll
|
||||
:parent-id
|
||||
:frame-id
|
||||
:constraints-h
|
||||
:constraints-v
|
||||
:fixed-scroll
|
||||
:parent-id
|
||||
:frame-id
|
||||
|
||||
:opacity
|
||||
:blend-mode
|
||||
:blocked
|
||||
:hidden
|
||||
:opacity
|
||||
:blend-mode
|
||||
:blocked
|
||||
:hidden
|
||||
|
||||
:shadow
|
||||
:shadow
|
||||
|
||||
:blur
|
||||
:blur
|
||||
|
||||
:exports
|
||||
:exports
|
||||
|
||||
:layout-margin
|
||||
:layout-margin-type
|
||||
:layout-h-behavior
|
||||
:layout-v-behavior
|
||||
:layout-max-h
|
||||
:layout-min-h
|
||||
:layout-max-w
|
||||
:layout-min-w}
|
||||
:layout-item-margin
|
||||
:layout-item-margin-type
|
||||
:layout-item-h-sizing
|
||||
:layout-item-v-sizing
|
||||
:layout-item-max-h
|
||||
:layout-item-min-h
|
||||
:layout-item-max-w
|
||||
:layout-item-min-w
|
||||
:layout-item-align-self}
|
||||
|
||||
:rect #{:proportion-lock
|
||||
:width :height
|
||||
|
|
@ -229,14 +234,15 @@
|
|||
|
||||
:exports
|
||||
|
||||
:layout-margin
|
||||
:layout-margin-type
|
||||
:layout-h-behavior
|
||||
:layout-v-behavior
|
||||
:layout-max-h
|
||||
:layout-min-h
|
||||
:layout-max-w
|
||||
:layout-min-w}
|
||||
:layout-item-margin
|
||||
:layout-item-margin-type
|
||||
:layout-item-h-sizing
|
||||
:layout-item-v-sizing
|
||||
:layout-item-max-h
|
||||
:layout-item-min-h
|
||||
:layout-item-max-w
|
||||
:layout-item-min-w
|
||||
:layout-item-align-self}
|
||||
|
||||
:circle #{:proportion-lock
|
||||
:width :height
|
||||
|
|
@ -281,143 +287,237 @@
|
|||
|
||||
:exports
|
||||
|
||||
:layout-margin
|
||||
:layout-margin-type
|
||||
:layout-h-behavior
|
||||
:layout-v-behavior
|
||||
:layout-max-h
|
||||
:layout-min-h
|
||||
:layout-max-w
|
||||
:layout-min-w}
|
||||
:layout-item-margin
|
||||
:layout-item-margin-type
|
||||
:layout-item-h-sizing
|
||||
:layout-item-v-sizing
|
||||
:layout-item-max-h
|
||||
:layout-item-min-h
|
||||
:layout-item-max-w
|
||||
:layout-item-min-w
|
||||
:layout-item-align-self}
|
||||
|
||||
:path #{:proportion-lock
|
||||
:width :height
|
||||
:x :y
|
||||
:rotation
|
||||
:selrect
|
||||
:points
|
||||
:path #{:proportion-lock
|
||||
:width :height
|
||||
:x :y
|
||||
:rotation
|
||||
:selrect
|
||||
:points
|
||||
|
||||
:constraints-h
|
||||
:constraints-v
|
||||
:fixed-scroll
|
||||
:parent-id
|
||||
:frame-id
|
||||
:constraints-h
|
||||
:constraints-v
|
||||
:fixed-scroll
|
||||
:parent-id
|
||||
:frame-id
|
||||
|
||||
:opacity
|
||||
:blend-mode
|
||||
:blocked
|
||||
:hidden
|
||||
:opacity
|
||||
:blend-mode
|
||||
:blocked
|
||||
:hidden
|
||||
|
||||
:fills
|
||||
:fill-color
|
||||
:fill-opacity
|
||||
:fill-color-ref-id
|
||||
:fill-color-ref-file
|
||||
:fill-color-gradient
|
||||
:fills
|
||||
:fill-color
|
||||
:fill-opacity
|
||||
:fill-color-ref-id
|
||||
:fill-color-ref-file
|
||||
:fill-color-gradient
|
||||
|
||||
:strokes
|
||||
:stroke-style
|
||||
:stroke-alignment
|
||||
:stroke-width
|
||||
:stroke-color
|
||||
:stroke-color-ref-id
|
||||
:stroke-color-ref-file
|
||||
:stroke-opacity
|
||||
:stroke-color-gradient
|
||||
:stroke-cap-start
|
||||
:stroke-cap-end
|
||||
:strokes
|
||||
:stroke-style
|
||||
:stroke-alignment
|
||||
:stroke-width
|
||||
:stroke-color
|
||||
:stroke-color-ref-id
|
||||
:stroke-color-ref-file
|
||||
:stroke-opacity
|
||||
:stroke-color-gradient
|
||||
:stroke-cap-start
|
||||
:stroke-cap-end
|
||||
|
||||
:shadow
|
||||
:shadow
|
||||
|
||||
:blur
|
||||
:blur
|
||||
|
||||
:exports
|
||||
:exports
|
||||
|
||||
:layout-margin
|
||||
:layout-margin-type
|
||||
:layout-h-behavior
|
||||
:layout-v-behavior
|
||||
:layout-max-h
|
||||
:layout-min-h
|
||||
:layout-max-w
|
||||
:layout-min-w}
|
||||
:layout-item-margin
|
||||
:layout-item-margin-type
|
||||
:layout-item-h-sizing
|
||||
:layout-item-v-sizing
|
||||
:layout-item-max-h
|
||||
:layout-item-min-h
|
||||
:layout-item-max-w
|
||||
:layout-item-min-w
|
||||
:layout-item-align-self}
|
||||
|
||||
:text #{:proportion-lock
|
||||
:width :height
|
||||
:x :y
|
||||
:rotation
|
||||
:selrect
|
||||
:points
|
||||
:text #{:proportion-lock
|
||||
:width :height
|
||||
:x :y
|
||||
:rotation
|
||||
:selrect
|
||||
:points
|
||||
|
||||
:constraints-h
|
||||
:constraints-v
|
||||
:fixed-scroll
|
||||
:parent-id
|
||||
:frame-id
|
||||
:constraints-h
|
||||
:constraints-v
|
||||
:fixed-scroll
|
||||
:parent-id
|
||||
:frame-id
|
||||
|
||||
:opacity
|
||||
:blend-mode
|
||||
:blocked
|
||||
:hidden
|
||||
:opacity
|
||||
:blend-mode
|
||||
:blocked
|
||||
:hidden
|
||||
|
||||
:fill-color
|
||||
:fill-opacity
|
||||
:fill-color-ref-id
|
||||
:fill-color-ref-file
|
||||
:fill-color-gradient
|
||||
:fill-color
|
||||
:fill-opacity
|
||||
:fill-color-ref-id
|
||||
:fill-color-ref-file
|
||||
:fill-color-gradient
|
||||
|
||||
:stroke-style
|
||||
:stroke-alignment
|
||||
:stroke-width
|
||||
:stroke-color
|
||||
:stroke-color-ref-id
|
||||
:stroke-color-ref-file
|
||||
:stroke-opacity
|
||||
:stroke-color-gradient
|
||||
:stroke-cap-start
|
||||
:stroke-cap-end
|
||||
:stroke-style
|
||||
:stroke-alignment
|
||||
:stroke-width
|
||||
:stroke-color
|
||||
:stroke-color-ref-id
|
||||
:stroke-color-ref-file
|
||||
:stroke-opacity
|
||||
:stroke-color-gradient
|
||||
:stroke-cap-start
|
||||
:stroke-cap-end
|
||||
|
||||
:shadow
|
||||
:shadow
|
||||
|
||||
:blur
|
||||
:blur
|
||||
|
||||
:typography-ref-id
|
||||
:typography-ref-file
|
||||
:typography-ref-id
|
||||
:typography-ref-file
|
||||
|
||||
:font-id
|
||||
:font-family
|
||||
:font-variant-id
|
||||
:font-size
|
||||
:font-weight
|
||||
:font-style
|
||||
:font-id
|
||||
:font-family
|
||||
:font-variant-id
|
||||
:font-size
|
||||
:font-weight
|
||||
:font-style
|
||||
|
||||
:text-align
|
||||
:text-align
|
||||
|
||||
:text-direction
|
||||
:text-direction
|
||||
|
||||
:line-height
|
||||
:letter-spacing
|
||||
:line-height
|
||||
:letter-spacing
|
||||
|
||||
:vertical-align
|
||||
:vertical-align
|
||||
|
||||
:text-decoration
|
||||
:text-decoration
|
||||
|
||||
:text-transform
|
||||
:text-transform
|
||||
|
||||
:grow-type
|
||||
:grow-type
|
||||
|
||||
:exports
|
||||
:exports
|
||||
|
||||
:layout-margin
|
||||
:layout-margin-type
|
||||
:layout-h-behavior
|
||||
:layout-v-behavior
|
||||
:layout-max-h
|
||||
:layout-min-h
|
||||
:layout-max-w
|
||||
:layout-min-w}
|
||||
:layout-item-margin
|
||||
:layout-item-margin-type
|
||||
:layout-item-h-sizing
|
||||
:layout-item-v-sizing
|
||||
:layout-item-max-h
|
||||
:layout-item-min-h
|
||||
:layout-item-max-w
|
||||
:layout-item-min-w
|
||||
:layout-item-align-self}
|
||||
|
||||
:image #{:proportion-lock
|
||||
:image #{:proportion-lock
|
||||
:width :height
|
||||
:x :y
|
||||
:rotation
|
||||
:rx :ry
|
||||
:r1 :r2 :r3 :r4
|
||||
:selrect
|
||||
:points
|
||||
|
||||
:constraints-h
|
||||
:constraints-v
|
||||
:fixed-scroll
|
||||
:parent-id
|
||||
:frame-id
|
||||
|
||||
:opacity
|
||||
:blend-mode
|
||||
:blocked
|
||||
:hidden
|
||||
|
||||
:shadow
|
||||
|
||||
:blur
|
||||
|
||||
:exports
|
||||
|
||||
:layout-item-margin
|
||||
:layout-item-margin-type
|
||||
:layout-item-h-sizing
|
||||
:layout-item-v-sizing
|
||||
:layout-item-max-h
|
||||
:layout-item-min-h
|
||||
:layout-item-max-w
|
||||
:layout-item-min-w
|
||||
:layout-item-align-self}
|
||||
|
||||
:svg-raw #{:proportion-lock
|
||||
:width :height
|
||||
:x :y
|
||||
:rotation
|
||||
:rx :ry
|
||||
:r1 :r2 :r3 :r4
|
||||
:selrect
|
||||
:points
|
||||
|
||||
:constraints-h
|
||||
:constraints-v
|
||||
:fixed-scroll
|
||||
:parent-id
|
||||
:frame-id
|
||||
|
||||
:opacity
|
||||
:blend-mode
|
||||
:blocked
|
||||
:hidden
|
||||
|
||||
:fills
|
||||
:fill-color
|
||||
:fill-opacity
|
||||
:fill-color-ref-id
|
||||
:fill-color-ref-file
|
||||
:fill-color-gradient
|
||||
|
||||
:strokes
|
||||
:stroke-style
|
||||
:stroke-alignment
|
||||
:stroke-width
|
||||
:stroke-color
|
||||
:stroke-color-ref-id
|
||||
:stroke-color-ref-file
|
||||
:stroke-opacity
|
||||
:stroke-color-gradient
|
||||
:stroke-cap-start
|
||||
:stroke-cap-end
|
||||
|
||||
:shadow
|
||||
|
||||
:blur
|
||||
|
||||
:exports
|
||||
|
||||
:layout-item-margin
|
||||
:layout-item-margin-type
|
||||
:layout-item-h-sizing
|
||||
:layout-item-v-sizing
|
||||
:layout-item-max-h
|
||||
:layout-item-min-h
|
||||
:layout-item-max-w
|
||||
:layout-item-min-w
|
||||
:layout-item-align-self}
|
||||
|
||||
:bool #{:proportion-lock
|
||||
:width :height
|
||||
:x :y
|
||||
:rotation
|
||||
|
|
@ -437,124 +537,36 @@
|
|||
:blocked
|
||||
:hidden
|
||||
|
||||
:fill-color
|
||||
:fill-opacity
|
||||
:fill-color-ref-id
|
||||
:fill-color-ref-file
|
||||
:fill-color-gradient
|
||||
|
||||
:stroke-style
|
||||
:stroke-alignment
|
||||
:stroke-width
|
||||
:stroke-color
|
||||
:stroke-color-ref-id
|
||||
:stroke-color-ref-file
|
||||
:stroke-opacity
|
||||
:stroke-color-gradient
|
||||
:stroke-cap-start
|
||||
:stroke-cap-end
|
||||
|
||||
:shadow
|
||||
|
||||
:blur
|
||||
|
||||
:exports
|
||||
|
||||
:layout-margin
|
||||
:layout-margin-type
|
||||
:layout-h-behavior
|
||||
:layout-v-behavior
|
||||
:layout-max-h
|
||||
:layout-min-h
|
||||
:layout-max-w
|
||||
:layout-min-w}
|
||||
|
||||
:svg-raw #{:proportion-lock
|
||||
:width :height
|
||||
:x :y
|
||||
:rotation
|
||||
:rx :ry
|
||||
:r1 :r2 :r3 :r4
|
||||
:selrect
|
||||
:points
|
||||
|
||||
:constraints-h
|
||||
:constraints-v
|
||||
:fixed-scroll
|
||||
:parent-id
|
||||
:frame-id
|
||||
|
||||
:opacity
|
||||
:blend-mode
|
||||
:blocked
|
||||
:hidden
|
||||
|
||||
:fills
|
||||
:fill-color
|
||||
:fill-opacity
|
||||
:fill-color-ref-id
|
||||
:fill-color-ref-file
|
||||
:fill-color-gradient
|
||||
|
||||
:strokes
|
||||
:stroke-style
|
||||
:stroke-alignment
|
||||
:stroke-width
|
||||
:stroke-color
|
||||
:stroke-color-ref-id
|
||||
:stroke-color-ref-file
|
||||
:stroke-opacity
|
||||
:stroke-color-gradient
|
||||
:stroke-cap-start
|
||||
:stroke-cap-end
|
||||
|
||||
:shadow
|
||||
|
||||
:blur
|
||||
|
||||
:exports
|
||||
|
||||
:layout-margin
|
||||
:layout-margin-type
|
||||
:layout-h-behavior
|
||||
:layout-v-behavior
|
||||
:layout-max-h
|
||||
:layout-min-h
|
||||
:layout-max-w
|
||||
:layout-min-w}
|
||||
|
||||
:bool #{:proportion-lock
|
||||
:width :height
|
||||
:x :y
|
||||
:rotation
|
||||
:rx :ry
|
||||
:r1 :r2 :r3 :r4
|
||||
:selrect
|
||||
:points
|
||||
|
||||
:constraints-h
|
||||
:constraints-v
|
||||
:fixed-scroll
|
||||
:parent-id
|
||||
:frame-id
|
||||
|
||||
:opacity
|
||||
:blend-mode
|
||||
:blocked
|
||||
:hidden
|
||||
|
||||
:fill-color
|
||||
:fill-opacity
|
||||
:fill-color-ref-id
|
||||
:fill-color-ref-file
|
||||
:fill-color-gradient
|
||||
|
||||
:stroke-style
|
||||
:stroke-alignment
|
||||
:stroke-width
|
||||
:stroke-color
|
||||
:stroke-color-ref-id
|
||||
:stroke-color-ref-file
|
||||
:stroke-opacity
|
||||
:stroke-color-gradient
|
||||
:stroke-cap-start
|
||||
:stroke-cap-end
|
||||
|
||||
:shadow
|
||||
|
||||
:blur
|
||||
|
||||
:exports
|
||||
|
||||
:layout-margin
|
||||
:layout-margin-type
|
||||
:layout-h-behavior
|
||||
:layout-v-behavior
|
||||
:layout-max-h
|
||||
:layout-min-h
|
||||
:layout-max-w
|
||||
:layout-min-w}})
|
||||
:layout-item-margin
|
||||
:layout-item-margin-type
|
||||
:layout-item-h-sizing
|
||||
:layout-item-v-sizing
|
||||
:layout-item-max-h
|
||||
:layout-item-min-h
|
||||
:layout-item-max-w
|
||||
:layout-item-min-w
|
||||
:layout-item-align-self}})
|
||||
|
||||
|
|
|
|||
|
|
@ -21,14 +21,14 @@
|
|||
;; :layout-padding ;; {:p1 num :p2 num :p3 num :p4 num} number could be negative
|
||||
|
||||
;; ITEMS
|
||||
;; :layout-margin ;; {:m1 0 :m2 0 :m3 0 :m4 0}
|
||||
;; :layout-margin-type ;; :simple :multiple
|
||||
;; :layout-h-behavior ;; :fill :fix :auto
|
||||
;; :layout-v-behavior ;; :fill :fix :auto
|
||||
;; :layout-max-h ;; num
|
||||
;; :layout-min-h ;; num
|
||||
;; :layout-max-w ;; num
|
||||
;; :layout-min-w
|
||||
;; :layout-item-margin ;; {:m1 0 :m2 0 :m3 0 :m4 0}
|
||||
;; :layout-item-margin-type ;; :simple :multiple
|
||||
;; :layout-item-h-sizing ;; :fill :fix :auto
|
||||
;; :layout-item-v-sizing ;; :fill :fix :auto
|
||||
;; :layout-item-max-h ;; num
|
||||
;; :layout-item-min-h ;; num
|
||||
;; :layout-item-max-w ;; num
|
||||
;; :layout-item-min-w
|
||||
|
||||
(s/def ::layout #{:flex :grid})
|
||||
(s/def ::layout-flex-dir #{:row :reverse-row :column :reverse-column})
|
||||
|
|
@ -74,38 +74,38 @@
|
|||
(s/def ::m3 ::us/safe-number)
|
||||
(s/def ::m4 ::us/safe-number)
|
||||
|
||||
(s/def ::layout-margin (s/keys :req-un [::m1]
|
||||
:opt-un [::m2 ::m3 ::m4]))
|
||||
(s/def ::layout-item-margin (s/keys :req-un [::m1]
|
||||
:opt-un [::m2 ::m3 ::m4]))
|
||||
|
||||
(s/def ::layout-margin-type #{:simple :multiple})
|
||||
(s/def ::layout-h-behavior #{:fill :fix :auto})
|
||||
(s/def ::layout-v-behavior #{:fill :fix :auto})
|
||||
(s/def ::layout-align-self #{:start :end :center :stretch})
|
||||
(s/def ::layout-max-h ::us/safe-number)
|
||||
(s/def ::layout-min-h ::us/safe-number)
|
||||
(s/def ::layout-max-w ::us/safe-number)
|
||||
(s/def ::layout-min-w ::us/safe-number)
|
||||
(s/def ::layout-item-margin-type #{:simple :multiple})
|
||||
(s/def ::layout-item-h-sizing #{:fill :fix :auto})
|
||||
(s/def ::layout-item-v-sizing #{:fill :fix :auto})
|
||||
(s/def ::layout-item-align-self #{:start :end :center :stretch})
|
||||
(s/def ::layout-item-max-h ::us/safe-number)
|
||||
(s/def ::layout-item-min-h ::us/safe-number)
|
||||
(s/def ::layout-item-max-w ::us/safe-number)
|
||||
(s/def ::layout-item-min-w ::us/safe-number)
|
||||
|
||||
(s/def ::layout-child-props
|
||||
(s/keys :opt-un [::layout-margin
|
||||
::layout-margin-type
|
||||
::layout-h-behavior
|
||||
::layout-v-behavior
|
||||
::layout-max-h
|
||||
::layout-min-h
|
||||
::layout-max-w
|
||||
::layout-min-w
|
||||
::layout-align-self]))
|
||||
(s/keys :opt-un [::layout-item-margin
|
||||
::layout-item-margin-type
|
||||
::layout-item-h-sizing
|
||||
::layout-item-v-sizing
|
||||
::layout-item-max-h
|
||||
::layout-item-min-h
|
||||
::layout-item-max-w
|
||||
::layout-item-min-w
|
||||
::layout-item-align-self]))
|
||||
|
||||
|
||||
(defn wrap? [{:keys [layout-wrap-type]}]
|
||||
(= layout-wrap-type :wrap))
|
||||
|
||||
(defn fill-width? [child]
|
||||
(= :fill (:layout-h-behavior child)))
|
||||
(= :fill (:layout-item-h-sizing child)))
|
||||
|
||||
(defn fill-height? [child]
|
||||
(= :fill (:layout-v-behavior child)))
|
||||
(= :fill (:layout-item-v-sizing child)))
|
||||
|
||||
(defn col?
|
||||
[{:keys [layout-flex-dir]}]
|
||||
|
|
@ -126,38 +126,38 @@
|
|||
(defn child-min-width
|
||||
[child]
|
||||
(if (and (fill-width? child)
|
||||
(some? (:layout-min-w child)))
|
||||
(max 0 (:layout-min-w child))
|
||||
(some? (:layout-item-min-w child)))
|
||||
(max 0 (:layout-item-min-w child))
|
||||
0))
|
||||
|
||||
(defn child-max-width
|
||||
[child]
|
||||
(if (and (fill-width? child)
|
||||
(some? (:layout-max-w child)))
|
||||
(max 0 (:layout-max-w child))
|
||||
(some? (:layout-item-max-w child)))
|
||||
(max 0 (:layout-item-max-w child))
|
||||
##Inf))
|
||||
|
||||
(defn child-min-height
|
||||
[child]
|
||||
(if (and (fill-height? child)
|
||||
(some? (:layout-min-h child)))
|
||||
(max 0 (:layout-min-h child))
|
||||
(some? (:layout-item-min-h child)))
|
||||
(max 0 (:layout-item-min-h child))
|
||||
0))
|
||||
|
||||
(defn child-max-height
|
||||
[child]
|
||||
(if (and (fill-height? child)
|
||||
(some? (:layout-max-h child)))
|
||||
(max 0 (:layout-max-h child))
|
||||
(some? (:layout-item-max-h child)))
|
||||
(max 0 (:layout-item-max-h child))
|
||||
##Inf))
|
||||
|
||||
(defn child-margins
|
||||
[{{:keys [m1 m2 m3 m4]} :layout-margin :keys [layout-margin-type]}]
|
||||
[{{:keys [m1 m2 m3 m4]} :layout-item-margin :keys [layout-item-margin-type]}]
|
||||
(let [m1 (or m1 0)
|
||||
m2 (or m2 0)
|
||||
m3 (or m3 0)
|
||||
m4 (or m4 0)]
|
||||
(if (= layout-margin-type :multiple)
|
||||
(if (= layout-item-margin-type :multiple)
|
||||
[m1 m2 m3 m4]
|
||||
[m1 m1 m1 m1])))
|
||||
|
||||
|
|
@ -252,14 +252,14 @@
|
|||
[{:keys [layout-justify-content]}]
|
||||
(= layout-justify-content :space-around))
|
||||
|
||||
(defn align-self-start? [{:keys [layout-align-self]}]
|
||||
(= :start layout-align-self))
|
||||
(defn align-self-start? [{:keys [layout-item-align-self]}]
|
||||
(= :start layout-item-align-self))
|
||||
|
||||
(defn align-self-end? [{:keys [layout-align-self]}]
|
||||
(= :end layout-align-self))
|
||||
(defn align-self-end? [{:keys [layout-item-align-self]}]
|
||||
(= :end layout-item-align-self))
|
||||
|
||||
(defn align-self-center? [{:keys [layout-align-self]}]
|
||||
(= :center layout-align-self))
|
||||
(defn align-self-center? [{:keys [layout-item-align-self]}]
|
||||
(= :center layout-item-align-self))
|
||||
|
||||
(defn align-self-stretch? [{:keys [layout-align-self]}]
|
||||
(= :stretch layout-align-self))
|
||||
(defn align-self-stretch? [{:keys [layout-item-align-self]}]
|
||||
(= :stretch layout-item-align-self))
|
||||
|
|
|
|||
|
|
@ -442,7 +442,10 @@
|
|||
(l/derived
|
||||
(fn [state]
|
||||
(let [objects (wsh/lookup-viewer-objects state page-id)]
|
||||
(filterv #(= :flex (:layout (cph/get-parent objects %))) ids)))
|
||||
(into []
|
||||
(comp (filter #(= :flex (:layout (cph/get-parent objects %))))
|
||||
(map #(get objects %)))
|
||||
ids)))
|
||||
st/state =))
|
||||
|
||||
(def colorpicker
|
||||
|
|
|
|||
|
|
@ -254,7 +254,7 @@
|
|||
|
||||
objects
|
||||
(mf/with-memo [frame-id objects vector]
|
||||
(let [update-fn #(update-in %1 %2 ctm/add-move vector)]
|
||||
(let [update-fn #(update %1 %2 gsh/transform-shape (ctm/move vector))]
|
||||
(->> children-ids
|
||||
(into [frame-id])
|
||||
(reduce update-fn objects))))
|
||||
|
|
@ -290,7 +290,6 @@
|
|||
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
||||
:xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")
|
||||
:fill "none"}
|
||||
|
||||
[:& shape-wrapper {:shape frame}]]]))
|
||||
|
||||
|
||||
|
|
@ -313,10 +312,9 @@
|
|||
(mf/use-memo
|
||||
(mf/deps vector objects group-id)
|
||||
(fn []
|
||||
(let [modifier-ids (cons group-id (cph/get-children-ids objects group-id))
|
||||
update-fn #(update %1 %2 ctm/add-move vector)
|
||||
modifiers (reduce update-fn {} modifier-ids)]
|
||||
(ctm/merge-modifiers objects modifiers))))
|
||||
(let [children-ids (cons group-id (cph/get-children-ids objects group-id))
|
||||
update-fn #(update %1 %2 gsh/transform-shape (ctm/move vector))]
|
||||
(reduce update-fn objects children-ids))))
|
||||
|
||||
group (get objects group-id)
|
||||
width (* (:width group) zoom)
|
||||
|
|
|
|||
|
|
@ -57,8 +57,6 @@
|
|||
|
||||
shapes (resolve-shapes objects [hover])
|
||||
hover-shape (or (first shapes) frame)
|
||||
hover-shape (gsh/translate-to-frame hover-shape size)
|
||||
|
||||
selected-shapes (resolve-shapes objects selected)
|
||||
selrect (gsh/selection-rect selected-shapes)]
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
[app.common.data :as d]
|
||||
[app.common.data.macros :as dm]
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.geom.shapes :as gsh]
|
||||
[app.common.pages.helpers :as cph]
|
||||
[app.common.types.modifiers :as ctm]
|
||||
[app.common.types.page :as ctp]
|
||||
|
|
@ -29,13 +30,10 @@
|
|||
|
||||
(defn prepare-objects
|
||||
[frame size objects]
|
||||
(let [
|
||||
frame-id (:id frame)
|
||||
(let [frame-id (:id frame)
|
||||
vector (-> (gpt/point (:x size) (:y size))
|
||||
(gpt/negate))
|
||||
|
||||
update-fn #(d/update-when %1 %2 ctm/add-move vector)]
|
||||
|
||||
update-fn #(d/update-when %1 %2 gsh/transform-shape (ctm/move vector))]
|
||||
(->> (cph/get-children-ids objects frame-id)
|
||||
(into [frame-id])
|
||||
(reduce update-fn objects))))
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
(def layout-container-flex-attrs
|
||||
[:layout ;; :flex, :grid in the future
|
||||
:layout-flex-dir ;; :row, :reverse-row, :column, :reverse-column
|
||||
:layout-flex-dir ;; :row, :reverse-row, :column, :reverse-column
|
||||
:layout-gap-type ;; :simple, :multiple
|
||||
:layout-gap ;; {:row-gap number , :column-gap number}
|
||||
:layout-align-items ;; :start :end :center :stretch
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
:space-around i/align-content-column-around
|
||||
:space-between i/align-content-column-between
|
||||
:stretch nil)
|
||||
|
||||
|
||||
(case val
|
||||
:start i/align-content-row-start
|
||||
:end i/align-content-row-end
|
||||
|
|
@ -129,7 +129,7 @@
|
|||
[{:keys [is-col? align-items set-align] :as props}]
|
||||
|
||||
[:div.align-items-style
|
||||
(for [align [:start :center :end :stretch]]
|
||||
(for [align [:start :center :end #_:stretch #_:baseline]]
|
||||
[:button.align-start.tooltip
|
||||
{:class (dom/classnames :active (= align-items align)
|
||||
:tooltip-bottom-left (not= align :start)
|
||||
|
|
@ -274,13 +274,14 @@
|
|||
(st/emit! (dwsl/remove-layout ids))
|
||||
(reset! open? false))
|
||||
|
||||
set-flex (fn []
|
||||
(st/emit! (dwsl/remove-layout ids))
|
||||
(on-add-layout :flex))
|
||||
|
||||
set-grid (fn []
|
||||
(st/emit! (dwsl/remove-layout ids))
|
||||
(on-add-layout :grid))
|
||||
;; Uncomment when activating the grid options
|
||||
;; set-flex (fn []
|
||||
;; (st/emit! (dwsl/remove-layout ids))
|
||||
;; (on-add-layout :flex))
|
||||
;;
|
||||
;; set-grid (fn []
|
||||
;; (st/emit! (dwsl/remove-layout ids))
|
||||
;; (on-add-layout :grid))
|
||||
|
||||
;; Flex-direction
|
||||
|
||||
|
|
@ -365,7 +366,7 @@
|
|||
[:span "Layout"]
|
||||
(if (:layout values)
|
||||
[:div.title-actions
|
||||
[:div.layout-btns
|
||||
#_[:div.layout-btns
|
||||
[:button {:on-click set-flex
|
||||
:class (dom/classnames
|
||||
:active (= :flex layout-type))} "Flex"]
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
(mf/defc margin-section
|
||||
[{:keys [values change-margin-style on-margin-change] :as props}]
|
||||
|
||||
(let [margin-type (or (:layout-margin-type values) :simple)]
|
||||
(let [margin-type (or (:layout-item-margin-type values) :simple)]
|
||||
|
||||
[:div.margin-row
|
||||
[:div.margin-icons
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
{:placeholder "--"
|
||||
:on-click #(dom/select-target %)
|
||||
:on-change (partial on-margin-change :simple)
|
||||
:value (or (-> values :layout-margin :m1) 0)}]]]
|
||||
:value (or (-> values :layout-item-margin :m1) 0)}]]]
|
||||
|
||||
(= margin-type :multiple)
|
||||
(for [num [:m1 :m2 :m3 :m4]]
|
||||
|
|
@ -73,10 +73,10 @@
|
|||
{:placeholder "--"
|
||||
:on-click #(dom/select-target %)
|
||||
:on-change (partial on-margin-change num)
|
||||
:value (or (-> values :layout-margin num) 0)}]]]))]]))
|
||||
:value (or (-> values :layout-item-margin num) 0)}]]]))]]))
|
||||
|
||||
(mf/defc element-behavior
|
||||
[{:keys [is-layout-container? is-layout-child? layout-h-behavior layout-v-behavior on-change-behavior] :as props}]
|
||||
[{:keys [is-layout-container? is-layout-child? layout-item-h-sizing layout-item-v-sizing on-change-behavior] :as props}]
|
||||
(let [fill? is-layout-child?
|
||||
auto? is-layout-container?]
|
||||
|
||||
|
|
@ -84,45 +84,45 @@
|
|||
[:div.layout-behavior.horizontal
|
||||
[:button.behavior-btn.tooltip.tooltip-bottom
|
||||
{:alt "Fix width"
|
||||
:class (dom/classnames :active (= layout-h-behavior :fix))
|
||||
:class (dom/classnames :active (= layout-item-h-sizing :fix))
|
||||
:on-click #(on-change-behavior :h :fix)}
|
||||
i/auto-fix-layout]
|
||||
(when fill?
|
||||
[:button.behavior-btn.tooltip.tooltip-bottom
|
||||
{:alt "Width 100%"
|
||||
:class (dom/classnames :active (= layout-h-behavior :fill))
|
||||
:class (dom/classnames :active (= layout-item-h-sizing :fill))
|
||||
:on-click #(on-change-behavior :h :fill)}
|
||||
i/auto-fill])
|
||||
(when auto?
|
||||
[:button.behavior-btn.tooltip.tooltip-bottom
|
||||
{:alt "Fit content"
|
||||
:class (dom/classnames :active (= layout-v-behavior :auto))
|
||||
:class (dom/classnames :active (= layout-item-v-sizing :auto))
|
||||
:on-click #(on-change-behavior :h :auto)}
|
||||
i/auto-hug])]
|
||||
|
||||
[:div.layout-behavior
|
||||
[:button.behavior-btn.tooltip.tooltip-bottom
|
||||
{:alt "Fix height"
|
||||
:class (dom/classnames :active (= layout-v-behavior :fix))
|
||||
:class (dom/classnames :active (= layout-item-v-sizing :fix))
|
||||
:on-click #(on-change-behavior :v :fix)}
|
||||
i/auto-fix-layout]
|
||||
(when fill?
|
||||
[:button.behavior-btn.tooltip.tooltip-bottom
|
||||
{:alt "Height 100%"
|
||||
:class (dom/classnames :active (= layout-v-behavior :fill))
|
||||
:class (dom/classnames :active (= layout-item-v-sizing :fill))
|
||||
:on-click #(on-change-behavior :v :fill)}
|
||||
i/auto-fill])
|
||||
(when auto?
|
||||
[:button.behavior-btn.tooltip.tooltip-bottom-left
|
||||
{:alt "Fit content"
|
||||
:class (dom/classnames :active (= layout-v-behavior :auto))
|
||||
:class (dom/classnames :active (= layout-item-v-sizing :auto))
|
||||
:on-click #(on-change-behavior :v :auto)}
|
||||
i/auto-hug])]]))
|
||||
|
||||
|
||||
(mf/defc align-self-row
|
||||
[{:keys [is-col? align-self set-align-self] :as props}]
|
||||
(let [dir-v [:start :center :end :stretch :baseline]]
|
||||
(let [dir-v [:start :center :end #_:stretch #_:baseline]]
|
||||
[:div.align-self-style
|
||||
(for [align dir-v]
|
||||
[:button.align-self.tooltip.tooltip-bottom
|
||||
|
|
@ -143,11 +143,13 @@
|
|||
|
||||
change-margin-style
|
||||
(fn [type]
|
||||
(st/emit! (dwsl/update-layout-child ids {:layout-margin-type type})))
|
||||
(st/emit! (dwsl/update-layout-child ids {:layout-item-margin-type type})))
|
||||
|
||||
align-self (:layout-align-self values)
|
||||
align-self (:layout-item-align-self values)
|
||||
set-align-self (fn [value]
|
||||
(st/emit! (dwsl/update-layout-child ids {:layout-align-self value})))
|
||||
(if (= align-self value)
|
||||
(st/emit! (dwsl/update-layout-child ids {:layout-item-align-self nil}))
|
||||
(st/emit! (dwsl/update-layout-child ids {:layout-item-align-self value}))))
|
||||
|
||||
saved-dir (:layout-flex-dir values)
|
||||
is-col? (or (= :column saved-dir) (= :reverse-column saved-dir))
|
||||
|
|
@ -155,14 +157,14 @@
|
|||
on-margin-change
|
||||
(fn [type val]
|
||||
(if (= type :simple)
|
||||
(st/emit! (dwsl/update-layout-child ids {:layout-margin {:m1 val :m2 val :m3 val :m4 val}}))
|
||||
(st/emit! (dwsl/update-layout-child ids {:layout-margin {type val}}))))
|
||||
(st/emit! (dwsl/update-layout-child ids {:layout-item-margin {:m1 val :m2 val :m3 val :m4 val}}))
|
||||
(st/emit! (dwsl/update-layout-child ids {:layout-item-margin {type val}}))))
|
||||
|
||||
on-change-behavior
|
||||
(fn [dir value]
|
||||
(if (= dir :h)
|
||||
(st/emit! (dwsl/update-layout-child ids {:layout-h-behavior value}))
|
||||
(st/emit! (dwsl/update-layout-child ids {:layout-v-behavior value}))))
|
||||
(st/emit! (dwsl/update-layout-child ids {:layout-item-h-sizing value}))
|
||||
(st/emit! (dwsl/update-layout-child ids {:layout-item-v-sizing value}))))
|
||||
|
||||
on-size-change
|
||||
(fn [measure value]
|
||||
|
|
@ -177,8 +179,8 @@
|
|||
[:div.row-title "Sizing"]
|
||||
[:& element-behavior {:is-layout-child? is-layout-child?
|
||||
:is-layout-container? is-layout-container?
|
||||
:layout-v-behavior (or (:layout-v-behavior values) :fix)
|
||||
:layout-h-behavior (or (:layout-h-behavior values) :fix)
|
||||
:layout-item-v-sizing (or (:layout-item-v-sizing values) :fix)
|
||||
:layout-item-h-sizing (or (:layout-item-h-sizing values) :fix)
|
||||
:on-change-behavior on-change-behavior}]]
|
||||
|
||||
|
||||
|
|
@ -201,14 +203,14 @@
|
|||
:align-self align-self
|
||||
:set-align-self set-align-self}]]]
|
||||
[:div.input-wrapper
|
||||
(for [item [:layout-max-h :layout-min-h :layout-max-w :layout-min-w]]
|
||||
(for [item [:layout-item-max-h :layout-item-min-h :layout-item-max-w :layout-item-min-w]]
|
||||
[:div.tooltip.tooltip-bottom
|
||||
{:key (d/name item)
|
||||
:alt (tr (dm/str "workspace.options.layout-item.title." (d/name item)))
|
||||
:class (dom/classnames "maxH" (= item :layout-max-h)
|
||||
"minH" (= item :layout-min-h)
|
||||
"maxW" (= item :layout-max-w)
|
||||
"minW" (= item :layout-min-w))}
|
||||
:class (dom/classnames "maxH" (= item :layout-item-max-h)
|
||||
"minH" (= item :layout-item-min-h)
|
||||
"maxW" (= item :layout-item-max-w)
|
||||
"minW" (= item :layout-item-min-w))}
|
||||
[:div.input-element
|
||||
{:alt (tr (dm/str "workspace.options.layout-item." (d/name item)))}
|
||||
[:> numeric-input
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue