mirror of
https://github.com/penpot/penpot.git
synced 2025-03-13 16:21:57 -05:00
✨ Fix linter issues on frontend (part 5).
This commit is contained in:
Andrey Antukh
Andrés Moya
parent
e0846ce00e
commit
0f3e4c289c
51 changed files with 406 additions and 660 deletions
|
|
@ -6,12 +6,11 @@
|
|||
|
||||
(ns app.main.ui.shapes.attrs
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[cuerdas.core :as str]
|
||||
[app.common.data :as d]
|
||||
[app.util.object :as obj]
|
||||
[app.main.ui.context :as muc]
|
||||
[app.util.svg :as usvg]))
|
||||
[app.util.object :as obj]
|
||||
[app.util.svg :as usvg]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(defn- stroke-type->dasharray
|
||||
[style]
|
||||
|
|
|
|||
|
|
@ -6,17 +6,17 @@
|
|||
|
||||
(ns app.main.ui.shapes.circle
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[app.common.geom.shapes :as geom]
|
||||
[app.main.ui.shapes.attrs :as attrs]
|
||||
[app.main.ui.shapes.custom-stroke :refer [shape-custom-stroke]]
|
||||
[app.common.geom.shapes :as geom]
|
||||
[app.util.object :as obj]))
|
||||
[app.util.object :as obj]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(mf/defc circle-shape
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [shape (unchecked-get props "shape")
|
||||
{:keys [id x y width height]} shape
|
||||
{:keys [x y width height]} shape
|
||||
transform (geom/transform-matrix shape)
|
||||
|
||||
cx (+ x (/ width 2))
|
||||
|
|
|
|||
|
|
@ -7,8 +7,6 @@
|
|||
(ns app.main.ui.shapes.custom-stroke
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.geom.shapes :as geom]
|
||||
[app.common.uuid :as uuid]
|
||||
[app.main.ui.context :as muc]
|
||||
[app.util.object :as obj]
|
||||
[cuerdas.core :as str]
|
||||
|
|
@ -26,7 +24,7 @@
|
|||
(-> props (obj/merge #js {:style style}))))
|
||||
|
||||
(mf/defc inner-stroke-clip-path
|
||||
[{:keys [shape render-id]}]
|
||||
[{:keys [render-id]}]
|
||||
(let [clip-id (str "inner-stroke-" render-id)
|
||||
shape-id (str "stroke-shape-" render-id)]
|
||||
[:> "clipPath" #js {:id clip-id}
|
||||
|
|
@ -70,8 +68,6 @@
|
|||
child (obj/get props "children")
|
||||
base-props (obj/get child "props")
|
||||
elem-name (obj/get child "type")
|
||||
shape (obj/get props "shape")
|
||||
stroke-width (:stroke-width shape 0)
|
||||
stroke-mask-id (str "outer-stroke-" render-id)
|
||||
shape-id (str "stroke-shape-" render-id)
|
||||
|
||||
|
|
@ -148,8 +144,8 @@
|
|||
stroke-width (:stroke-width shape 0)
|
||||
stroke-style (:stroke-style shape :none)
|
||||
stroke-position (:stroke-alignment shape :center)
|
||||
has-stroke? (and (and (> stroke-width 0)
|
||||
(not= stroke-style :none)))
|
||||
has-stroke? (and (> stroke-width 0)
|
||||
(not= stroke-style :none))
|
||||
inner? (= :inner stroke-position)
|
||||
outer? (= :outer stroke-position)]
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
(ns app.main.ui.shapes.export
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.geom.matrix :as gmt]
|
||||
[app.common.geom.shapes :as gsh]
|
||||
[app.util.json :as json]
|
||||
[app.util.object :as obj]
|
||||
|
|
@ -47,8 +46,7 @@
|
|||
(cond-> props
|
||||
(some? val)
|
||||
(obj/set! ns-attr (trfn val))))))]
|
||||
(let [frame? (= :frame (:type shape))
|
||||
group? (= :group (:type shape))
|
||||
(let [group? (= :group (:type shape))
|
||||
rect? (= :rect (:type shape))
|
||||
text? (= :text (:type shape))
|
||||
mask? (and group? (:masked-group? shape))
|
||||
|
|
@ -175,6 +173,6 @@
|
|||
|
||||
|
||||
(when (and (= (:type shape) :frame)
|
||||
(not (empty? (:grids shape))))
|
||||
(seq (:grids shape)))
|
||||
[:& export-grid-data {:grids (:grids shape)}])]))
|
||||
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@
|
|||
:result filter-id}]]))
|
||||
|
||||
(mf/defc background-blur-filter
|
||||
[{:keys [filter-id filter-in params]}]
|
||||
[{:keys [filter-id params]}]
|
||||
[:*
|
||||
[:feGaussianBlur {:in "BackgroundImage"
|
||||
:stdDeviation (/ (:value params) 2)}]
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
(ns app.main.ui.shapes.frame
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.main.ui.shapes.attrs :as attrs]
|
||||
[app.util.object :as obj]
|
||||
[rumext.alpha :as mf]))
|
||||
|
|
@ -20,7 +19,7 @@
|
|||
[props]
|
||||
(let [childs (unchecked-get props "childs")
|
||||
shape (unchecked-get props "shape")
|
||||
{:keys [id width height]} shape
|
||||
{:keys [width height]} shape
|
||||
|
||||
props (-> (merge frame-default-props shape)
|
||||
(attrs/extract-style-attrs)
|
||||
|
|
@ -32,7 +31,7 @@
|
|||
:className "frame-background"}))]
|
||||
[:*
|
||||
[:> :rect props]
|
||||
(for [[i item] (d/enumerate childs)]
|
||||
(for [item childs]
|
||||
[:& shape-wrapper {:frame shape
|
||||
:shape item
|
||||
:key (:id item)}])])))
|
||||
|
|
|
|||
|
|
@ -6,18 +6,15 @@
|
|||
|
||||
(ns app.main.ui.shapes.gradients
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[cuerdas.core :as str]
|
||||
[app.util.object :as obj]
|
||||
[app.common.uuid :as uuid]
|
||||
[app.main.ui.context :as muc]
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.geom.matrix :as gmt]
|
||||
[app.common.geom.shapes :as gsh]))
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.geom.shapes :as gsh]
|
||||
[app.main.ui.context :as muc]
|
||||
[app.util.object :as obj]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(mf/defc linear-gradient [{:keys [id gradient shape]}]
|
||||
(let [{:keys [x y width height]} (:selrect shape)
|
||||
transform (when (= :path (:type shape)) (gsh/transform-matrix shape nil (gpt/point 0.5 0.5)))]
|
||||
(let [transform (when (= :path (:type shape)) (gsh/transform-matrix shape nil (gpt/point 0.5 0.5)))]
|
||||
[:> :linearGradient #js {:id id
|
||||
:x1 (:start-x gradient)
|
||||
:y1 (:start-y gradient)
|
||||
|
|
@ -43,49 +40,46 @@
|
|||
|
||||
(mf/defc radial-gradient [{:keys [id gradient shape]}]
|
||||
(let [{:keys [x y width height]} (:selrect shape)
|
||||
center (gsh/center-shape shape)
|
||||
transform (if (= :path (:type shape))
|
||||
(gsh/transform-matrix shape)
|
||||
(gmt/matrix))]
|
||||
(let [[x y] (if (= (:type shape) :frame) [0 0] [x y])
|
||||
translate-vec (gpt/point (+ x (* width (:start-x gradient)))
|
||||
(+ y (* height (:start-y gradient))))
|
||||
(gmt/matrix))
|
||||
[x y] (if (= (:type shape) :frame) [0 0] [x y])
|
||||
translate-vec (gpt/point (+ x (* width (:start-x gradient)))
|
||||
(+ y (* height (:start-y gradient))))
|
||||
|
||||
gradient-vec (gpt/to-vec (gpt/point (* width (:start-x gradient))
|
||||
(* height (:start-y gradient)))
|
||||
(gpt/point (* width (:end-x gradient))
|
||||
(* height (:end-y gradient))))
|
||||
gradient-vec (gpt/to-vec (gpt/point (* width (:start-x gradient))
|
||||
(* height (:start-y gradient)))
|
||||
(gpt/point (* width (:end-x gradient))
|
||||
(* height (:end-y gradient))))
|
||||
|
||||
angle (gpt/angle gradient-vec
|
||||
(gpt/point 1 0))
|
||||
angle (gpt/angle gradient-vec
|
||||
(gpt/point 1 0))
|
||||
|
||||
shape-height-vec (gpt/point 0 (/ height 2))
|
||||
scale-factor-y (/ (gpt/length gradient-vec) (/ height 2))
|
||||
scale-factor-x (* scale-factor-y (:width gradient))
|
||||
|
||||
scale-factor-y (/ (gpt/length gradient-vec) (/ height 2))
|
||||
scale-factor-x (* scale-factor-y (:width gradient))
|
||||
scale-vec (gpt/point (* scale-factor-y (/ height 2))
|
||||
(* scale-factor-x (/ width 2)))
|
||||
|
||||
scale-vec (gpt/point (* scale-factor-y (/ height 2))
|
||||
(* scale-factor-x (/ width 2)))
|
||||
transform (gmt/multiply transform
|
||||
(gmt/translate-matrix translate-vec)
|
||||
(gmt/rotate-matrix angle)
|
||||
(gmt/scale-matrix scale-vec))
|
||||
|
||||
transform (gmt/multiply transform
|
||||
(gmt/translate-matrix translate-vec)
|
||||
(gmt/rotate-matrix angle)
|
||||
(gmt/scale-matrix scale-vec))
|
||||
base-props #js {:id id
|
||||
:cx 0
|
||||
:cy 0
|
||||
:r 1
|
||||
:gradientUnits "userSpaceOnUse"
|
||||
:gradientTransform transform}
|
||||
|
||||
base-props #js {:id id
|
||||
:cx 0
|
||||
:cy 0
|
||||
:r 1
|
||||
:gradientUnits "userSpaceOnUse"
|
||||
:gradientTransform transform}
|
||||
|
||||
props (-> base-props (add-metadata gradient))]
|
||||
[:> :radialGradient props
|
||||
(for [{:keys [offset color opacity]} (:stops gradient)]
|
||||
[:stop {:key (str id "-stop-" offset)
|
||||
:offset (or offset 0)
|
||||
:stop-color color
|
||||
:stop-opacity opacity}])])))
|
||||
props (-> base-props (add-metadata gradient))]
|
||||
[:> :radialGradient props
|
||||
(for [{:keys [offset color opacity]} (:stops gradient)]
|
||||
[:stop {:key (str id "-stop-" offset)
|
||||
:offset (or offset 0)
|
||||
:stop-color color
|
||||
:stop-opacity opacity}])]))
|
||||
|
||||
(mf/defc gradient
|
||||
{::mf/wrap-props false}
|
||||
|
|
|
|||
|
|
@ -6,10 +6,9 @@
|
|||
|
||||
(ns app.main.ui.shapes.group
|
||||
(:require
|
||||
[app.main.ui.shapes.mask :refer [mask-str clip-str mask-factory]]
|
||||
[app.util.object :as obj]
|
||||
[rumext.alpha :as mf]
|
||||
[app.main.ui.shapes.attrs :as attrs]
|
||||
[app.main.ui.shapes.mask :refer [mask-str clip-str mask-factory]]))
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(defn group-shape
|
||||
[shape-wrapper]
|
||||
|
|
@ -20,9 +19,8 @@
|
|||
(let [frame (unchecked-get props "frame")
|
||||
shape (unchecked-get props "shape")
|
||||
childs (unchecked-get props "childs")
|
||||
pointer-events (unchecked-get props "pointer-events")
|
||||
|
||||
{:keys [id x y width height masked-group?]} shape
|
||||
masked-group? (:masked-group? shape)
|
||||
|
||||
[mask childs] (if masked-group?
|
||||
[(first childs) (rest childs)]
|
||||
|
|
|
|||
|
|
@ -7,39 +7,38 @@
|
|||
(ns app.main.ui.shapes.image
|
||||
(:require
|
||||
[app.common.geom.shapes :as geom]
|
||||
[app.config :as cfg]
|
||||
[app.main.ui.shapes.attrs :as attrs]
|
||||
[app.main.ui.shapes.embed :as se]
|
||||
[app.main.ui.shapes.embed :as embed]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.object :as obj]
|
||||
[rumext.alpha :as mf]
|
||||
[app.config :as cfg]
|
||||
[app.main.ui.shapes.embed :as embed]))
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(mf/defc image-shape
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
|
||||
(let [shape (unchecked-get props "shape")
|
||||
{:keys [id x y width height rotation metadata]} shape
|
||||
uri (cfg/resolve-file-media metadata)
|
||||
embed (embed/use-data-uris [uri])]
|
||||
{:keys [x y width height metadata]} shape
|
||||
uri (cfg/resolve-file-media metadata)
|
||||
embed (embed/use-data-uris [uri])
|
||||
|
||||
(let [transform (geom/transform-matrix shape)
|
||||
props (-> (attrs/extract-style-attrs shape)
|
||||
(obj/merge!
|
||||
#js {:x x
|
||||
:y y
|
||||
:transform transform
|
||||
:width width
|
||||
:height height
|
||||
:preserveAspectRatio "none"
|
||||
:data-loading (str (not (contains? embed uri)))}))
|
||||
transform (geom/transform-matrix shape)
|
||||
props (-> (attrs/extract-style-attrs shape)
|
||||
(obj/merge!
|
||||
#js {:x x
|
||||
:y y
|
||||
:transform transform
|
||||
:width width
|
||||
:height height
|
||||
:preserveAspectRatio "none"
|
||||
:data-loading (str (not (contains? embed uri)))}))
|
||||
|
||||
on-drag-start (fn [event]
|
||||
;; Prevent browser dragging of the image
|
||||
(dom/prevent-default event))]
|
||||
on-drag-start (fn [event]
|
||||
;; Prevent browser dragging of the image
|
||||
(dom/prevent-default event))]
|
||||
|
||||
[:> "image" (obj/merge!
|
||||
props
|
||||
#js {:xlinkHref (get embed uri uri)
|
||||
:onDragStart on-drag-start})])))
|
||||
[:> "image" (obj/merge!
|
||||
props
|
||||
#js {:xlinkHref (get embed uri uri)
|
||||
:onDragStart on-drag-start})]))
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@
|
|||
|
||||
(ns app.main.ui.shapes.mask
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[app.common.geom.shapes :as gsh]
|
||||
[cuerdas.core :as str]
|
||||
[app.common.geom.shapes :as gsh]))
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(defn mask-str [mask]
|
||||
(str/fmt "url(#%s)" (str (:id mask) "-mask")))
|
||||
|
|
|
|||
|
|
@ -6,26 +6,23 @@
|
|||
|
||||
(ns app.main.ui.shapes.path
|
||||
(:require
|
||||
[cuerdas.core :as str]
|
||||
[rumext.alpha :as mf]
|
||||
[app.main.ui.shapes.attrs :as attrs]
|
||||
[app.main.ui.shapes.custom-stroke :refer [shape-custom-stroke]]
|
||||
[app.util.object :as obj]
|
||||
[app.util.path.format :as upf]))
|
||||
[app.util.path.format :as upf]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
;; --- Path Shape
|
||||
|
||||
(mf/defc path-shape
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [shape (unchecked-get props "shape")
|
||||
background? (unchecked-get props "background?")
|
||||
{:keys [id x y width height]} (:selrect shape)
|
||||
(let [shape (unchecked-get props "shape")
|
||||
content (:content shape)
|
||||
pdata (mf/use-memo (mf/deps content) #(upf/format-path content))
|
||||
props (-> (attrs/extract-style-attrs shape)
|
||||
(obj/merge!
|
||||
#js {:d pdata}))]
|
||||
pdata (mf/use-memo (mf/deps content) #(upf/format-path content))
|
||||
props (-> (attrs/extract-style-attrs shape)
|
||||
(obj/merge!
|
||||
#js {:d pdata}))]
|
||||
[:& shape-custom-stroke {:shape shape}
|
||||
[:> :path props]]))
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
[app.common.geom.shapes :as gsh]
|
||||
[app.main.ui.shapes.attrs :as attrs]
|
||||
[app.main.ui.shapes.custom-stroke :refer [shape-custom-stroke]]
|
||||
[app.main.ui.shapes.gradients :refer [gradient]]
|
||||
[app.util.object :as obj]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
|
|
@ -17,7 +16,7 @@
|
|||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [shape (unchecked-get props "shape")
|
||||
{:keys [id x y width height]} shape
|
||||
{:keys [x y width height]} shape
|
||||
transform (gsh/transform-matrix shape)
|
||||
|
||||
props (-> (attrs/extract-style-attrs shape)
|
||||
|
|
|
|||
|
|
@ -100,7 +100,8 @@
|
|||
(cond->> id
|
||||
(contains? svg-defs id) (str render-id "-")))]
|
||||
|
||||
(when (and svg-defs (not (empty? svg-defs)))
|
||||
;; TODO: no key?
|
||||
(when (seq svg-defs)
|
||||
(for [svg-def (vals svg-defs)]
|
||||
[:& svg-node {:node svg-def
|
||||
:prefix-id prefix-id
|
||||
|
|
|
|||
|
|
@ -6,15 +6,10 @@
|
|||
|
||||
(ns app.main.ui.shapes.svg-raw
|
||||
(:require
|
||||
[app.common.data :as cd]
|
||||
[app.common.geom.matrix :as gmt]
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.geom.shapes :as gsh]
|
||||
[app.main.ui.shapes.attrs :as usa]
|
||||
[app.util.data :as ud]
|
||||
[app.util.object :as obj]
|
||||
[app.util.svg :as usvg]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
;; Graphic tags
|
||||
|
|
@ -53,7 +48,7 @@
|
|||
children (unchecked-get props "children")
|
||||
|
||||
{:keys [x y width height]} shape
|
||||
{:keys [tag attrs] :as content} (:content shape)
|
||||
{:keys [attrs] :as content} (:content shape)
|
||||
|
||||
ids-mapping (mf/use-memo #(usvg/generate-id-mapping content))
|
||||
|
||||
|
|
@ -85,9 +80,7 @@
|
|||
element-id (get-in content [:attrs :id])
|
||||
attrs (cond-> (set-styles attrs shape)
|
||||
(and element-id (contains? ids-mapping element-id))
|
||||
(obj/set! "id" (get ids-mapping element-id)))
|
||||
|
||||
{:keys [x y width height]} (:selrect shape)]
|
||||
(obj/set! "id" (get ids-mapping element-id)))]
|
||||
[:> (name tag) attrs children]))
|
||||
|
||||
(defn svg-raw-shape [shape-wrapper]
|
||||
|
|
|
|||
|
|
@ -8,12 +8,9 @@
|
|||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.geom.shapes :as geom]
|
||||
[app.main.ui.context :as muc]
|
||||
[app.main.ui.shapes.attrs :as attrs]
|
||||
[app.main.ui.shapes.text.styles :as sts]
|
||||
[app.util.color :as uc]
|
||||
[app.util.object :as obj]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(mf/defc render-text
|
||||
|
|
@ -40,8 +37,7 @@
|
|||
(mf/defc render-paragraph-set
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [node (obj/get props "node")
|
||||
children (obj/get props "children")
|
||||
(let [children (obj/get props "children")
|
||||
shape (obj/get props "shape")
|
||||
style (sts/generate-paragraph-set-styles shape)]
|
||||
[:div.paragraph-set {:style style} children]))
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
#(rx/dispose! sub))))
|
||||
|
||||
(mf/ref-val fonts-css-ref)))
|
||||
|
||||
|
||||
(mf/defc fontfaces-style
|
||||
{::mf/wrap-props false
|
||||
::mf/wrap [#(mf/memo' % (mf/check-props ["shapes"]))]}
|
||||
|
|
@ -74,6 +74,6 @@
|
|||
|
||||
;; Creates a style tag by replacing the urls with the data uri
|
||||
style (replace-embeds fonts-css fonts-urls fonts-embed)]
|
||||
|
||||
(when (and (some? style) (not (empty? style)))
|
||||
|
||||
(when (seq style)
|
||||
[:style style])))
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
(defn generate-root-styles
|
||||
[shape node]
|
||||
(let [valign (or (:vertical-align node "top"))
|
||||
(let [valign (:vertical-align node "top")
|
||||
base #js {:height (or (:height shape) "100%")
|
||||
:width (or (:width shape) "100%")}]
|
||||
(cond-> base
|
||||
|
|
@ -104,18 +104,18 @@
|
|||
(when (and (string? font-id)
|
||||
(pos? (alength font-id)))
|
||||
(fonts/ensure-loaded! font-id)
|
||||
(let [font (get fontsdb font-id)]
|
||||
(let [font-family (str/quote
|
||||
(or (:family font)
|
||||
(:font-family data)))
|
||||
font-variant (d/seek #(= font-variant-id (:id %))
|
||||
(:variants font))
|
||||
font-style (or (:style font-variant)
|
||||
(:font-style data))
|
||||
font-weight (or (:weight font-variant)
|
||||
(:font-weight data))]
|
||||
(obj/set! base "fontFamily" font-family)
|
||||
(obj/set! base "fontStyle" font-style)
|
||||
(obj/set! base "fontWeight" font-weight))))
|
||||
(let [font (get fontsdb font-id)
|
||||
font-family (str/quote
|
||||
(or (:family font)
|
||||
(:font-family data)))
|
||||
font-variant (d/seek #(= font-variant-id (:id %))
|
||||
(:variants font))
|
||||
font-style (or (:style font-variant)
|
||||
(:font-style data))
|
||||
font-weight (or (:weight font-variant)
|
||||
(:font-weight data))]
|
||||
(obj/set! base "fontFamily" font-family)
|
||||
(obj/set! base "fontStyle" font-style)
|
||||
(obj/set! base "fontWeight" font-weight)))
|
||||
|
||||
base))
|
||||
|
|
|
|||
|
|
@ -10,12 +10,9 @@
|
|||
[app.main.data.users :as du]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.i18n :refer [tr]]
|
||||
[app.util.router :as rt]
|
||||
[cljs.spec.alpha :as s]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(defn- go-to-dashboard
|
||||
|
|
@ -24,7 +21,7 @@
|
|||
(st/emit! (rt/nav :dashboard-projects {:team-id team-id}))))
|
||||
|
||||
(mf/defc not-found
|
||||
[{:keys [error] :as props}]
|
||||
[]
|
||||
(let [profile (mf/deref refs/profile)]
|
||||
[:section.exception-layout
|
||||
[:div.exception-header
|
||||
|
|
@ -42,7 +39,7 @@
|
|||
(tr "labels.sign-out")]]]]]))
|
||||
|
||||
(mf/defc bad-gateway
|
||||
[{:keys [error] :as props}]
|
||||
[]
|
||||
(let [profile (mf/deref refs/profile)]
|
||||
[:section.exception-layout
|
||||
[:div.exception-header
|
||||
|
|
@ -59,7 +56,7 @@
|
|||
(tr "labels.retry")]]]]]))
|
||||
|
||||
(mf/defc service-unavailable
|
||||
[{:keys [error] :as props}]
|
||||
[]
|
||||
(let [profile (mf/deref refs/profile)]
|
||||
[:section.exception-layout
|
||||
[:div.exception-header
|
||||
|
|
@ -76,7 +73,7 @@
|
|||
(tr "labels.retry")]]]]]))
|
||||
|
||||
(mf/defc internal-error
|
||||
[props]
|
||||
[]
|
||||
(let [profile (mf/deref refs/profile)]
|
||||
[:section.exception-layout
|
||||
[:div.exception-header
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
(ns app.main.ui.viewer
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.exceptions :as ex]
|
||||
[app.common.geom.matrix :as gmt]
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.geom.shapes :as geom]
|
||||
|
|
@ -19,9 +18,8 @@
|
|||
[app.main.store :as st]
|
||||
[app.main.ui.comments :as cmt]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.viewer.header :refer [header]]
|
||||
[app.main.ui.viewer.shapes :as shapes :refer [frame-svg]]
|
||||
[app.main.ui.viewer.shapes :as shapes]
|
||||
[app.main.ui.viewer.thumbnails :refer [thumbnails-panel]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [t tr]]
|
||||
|
|
@ -44,7 +42,7 @@
|
|||
(l/derived :comments-local st/state))
|
||||
|
||||
(mf/defc comments-layer
|
||||
[{:keys [width height zoom frame data] :as props}]
|
||||
[{:keys [zoom frame data] :as props}]
|
||||
(let [profile (mf/deref refs/profile)
|
||||
|
||||
modifier1 (-> (gpt/point (:x frame) (:y frame))
|
||||
|
|
@ -62,7 +60,7 @@
|
|||
mframe (geom/transform-shape frame)
|
||||
threads (->> (vals threads-map)
|
||||
(dcm/apply-filters cstate profile)
|
||||
(filter (fn [{:keys [seqn position]}]
|
||||
(filter (fn [{:keys [position]}]
|
||||
(frame-contains? mframe position))))
|
||||
|
||||
on-bubble-click
|
||||
|
|
@ -127,7 +125,7 @@
|
|||
|
||||
(mf/defc viewport
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [state data index section] :or {zoom 1} :as props}]
|
||||
[{:keys [state data index section] :as props}]
|
||||
(let [zoom (:zoom state)
|
||||
objects (:objects data)
|
||||
|
||||
|
|
|
|||
|
|
@ -13,10 +13,8 @@
|
|||
[app.common.geom.shapes :as geom]
|
||||
[app.common.pages :as cp]
|
||||
[app.main.data.viewer :as dv]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.shapes.circle :as circle]
|
||||
[app.main.ui.shapes.filters :as filters]
|
||||
[app.main.ui.shapes.frame :as frame]
|
||||
[app.main.ui.shapes.group :as group]
|
||||
[app.main.ui.shapes.image :as image]
|
||||
|
|
@ -62,13 +60,10 @@
|
|||
(mf/fnc generic-wrapper
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [shape (unchecked-get props "shape")
|
||||
(let [shape (unchecked-get props "shape")
|
||||
objects (unchecked-get props "objects")
|
||||
{:keys [x y width height]} (:selrect shape)
|
||||
frame? (= :frame (:type shape))
|
||||
|
||||
childs (unchecked-get props "childs")
|
||||
frame (unchecked-get props "frame")
|
||||
childs (unchecked-get props "childs")
|
||||
frame (unchecked-get props "frame")
|
||||
|
||||
interactions (->> (:interactions shape)
|
||||
(filter #(contains? objects (:destination %))))
|
||||
|
|
|
|||
|
|
@ -6,25 +6,16 @@
|
|||
|
||||
(ns app.main.ui.viewer.thumbnails
|
||||
(:require
|
||||
[goog.events :as events]
|
||||
[goog.object :as gobj]
|
||||
[rumext.alpha :as mf]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.common.data :as d]
|
||||
[app.main.store :as st]
|
||||
[app.main.data.viewer :as dv]
|
||||
[app.main.ui.components.dropdown :refer [dropdown']]
|
||||
[app.main.ui.shapes.frame :as frame]
|
||||
[app.main.exports :as exports]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.dropdown :refer [dropdown']]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.data :refer [classnames]]
|
||||
[app.util.dom :as dom]
|
||||
[app.common.geom.matrix :as gmt]
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.util.i18n :as i18n :refer [t tr]]
|
||||
[app.common.math :as mth]
|
||||
[app.util.router :as rt]
|
||||
[app.main.data.viewer :as vd])
|
||||
(:import goog.events.EventType))
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[goog.object :as gobj]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(mf/defc thumbnails-content
|
||||
[{:keys [children expanded? total] :as props}]
|
||||
|
|
@ -35,14 +26,14 @@
|
|||
offset (mf/use-state 0)
|
||||
|
||||
on-left-arrow-click
|
||||
(fn [event]
|
||||
(fn [_]
|
||||
(swap! offset (fn [v]
|
||||
(if (pos? v)
|
||||
(dec v)
|
||||
v))))
|
||||
|
||||
on-right-arrow-click
|
||||
(fn [event]
|
||||
(fn [_]
|
||||
(let [visible (/ @width @element-width)
|
||||
max-val (- total visible)]
|
||||
(swap! offset (fn [v]
|
||||
|
|
@ -90,26 +81,25 @@
|
|||
[:span.name {:title (:name frame)} (:name frame)]]])
|
||||
|
||||
(mf/defc thumbnails-panel
|
||||
[{:keys [data index screen] :as props}]
|
||||
[{:keys [data index] :as props}]
|
||||
(let [expanded? (mf/use-state false)
|
||||
container (mf/use-ref)
|
||||
page-id (get-in data [:page :id])
|
||||
file-id (get-in data [:file :id])
|
||||
|
||||
on-close #(st/emit! dv/toggle-thumbnails-panel)
|
||||
selected (mf/use-var false)
|
||||
|
||||
on-mouse-leave
|
||||
(fn [event]
|
||||
(fn [_]
|
||||
(when @selected
|
||||
(on-close)))
|
||||
|
||||
on-item-click
|
||||
(fn [event index]
|
||||
(fn [_ index]
|
||||
(compare-and-set! selected false true)
|
||||
(st/emit! (dv/go-to-frame-by-index index))
|
||||
(when @expanded?
|
||||
(on-close)))]
|
||||
|
||||
[:& dropdown' {:on-close on-close
|
||||
:container container
|
||||
:show true}
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@
|
|||
(when page-id
|
||||
(st/emit! (dw/finalize-page page-id))))))
|
||||
|
||||
(when-let [page (mf/deref trimmed-page-ref)]
|
||||
(when (mf/deref trimmed-page-ref)
|
||||
[:& workspace-content {:key page-id
|
||||
:file file
|
||||
:layout layout}]))
|
||||
|
|
|
|||
|
|
@ -7,14 +7,12 @@
|
|||
(ns app.main.ui.workspace.colorpalette
|
||||
(:require
|
||||
[app.common.math :as mth]
|
||||
[app.main.data.workspace :as udw]
|
||||
[app.main.data.workspace.colors :as mdc]
|
||||
[app.main.data.workspace.state-helpers :as wsh]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.color-bullet :as cb]
|
||||
[app.main.ui.components.dropdown :refer [dropdown]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.color :as uc]
|
||||
[app.util.i18n :refer [tr]]
|
||||
|
|
@ -39,14 +37,9 @@
|
|||
(-> (l/in [:workspace-local :selected-palette-size])
|
||||
(l/derived st/state)))
|
||||
|
||||
(defn- make-selected-palette-item-ref
|
||||
[lib-id]
|
||||
(-> (l/in [:library-items :palettes lib-id])
|
||||
(l/derived st/state)))
|
||||
|
||||
;; --- Components
|
||||
(mf/defc palette-item
|
||||
[{:keys [color size local?]}]
|
||||
[{:keys [color size]}]
|
||||
(let [select-color
|
||||
(fn [event]
|
||||
(let [ids (wsh/lookup-selected @st/state)]
|
||||
|
|
@ -70,13 +63,12 @@
|
|||
max-offset (- (count current-colors)
|
||||
visible)
|
||||
|
||||
close-fn #(st/emit! (udw/toggle-layout-flags :colorpalette))
|
||||
container (mf/use-ref nil)
|
||||
|
||||
on-left-arrow-click
|
||||
(mf/use-callback
|
||||
(mf/deps max-offset visible)
|
||||
(fn [event]
|
||||
(fn [_]
|
||||
(swap! state update :offset
|
||||
(fn [offset]
|
||||
(if (pos? offset)
|
||||
|
|
@ -86,7 +78,7 @@
|
|||
on-right-arrow-click
|
||||
(mf/use-callback
|
||||
(mf/deps max-offset visible)
|
||||
(fn [event]
|
||||
(fn [_]
|
||||
(swap! state update :offset
|
||||
(fn [offset]
|
||||
(if (< offset max-offset)
|
||||
|
|
@ -104,7 +96,7 @@
|
|||
|
||||
on-resize
|
||||
(mf/use-callback
|
||||
(fn [event]
|
||||
(fn [_]
|
||||
(let [dom (mf/ref-val container)
|
||||
width (obj/get dom "clientWidth")]
|
||||
(swap! state assoc :width width))))]
|
||||
|
|
@ -132,7 +124,7 @@
|
|||
(when (= selected (:id cur-library)) i/tick)
|
||||
[:div.library-name (str (:name cur-library) " " (str/format "(%s)" (count colors)))]
|
||||
[:div.color-sample
|
||||
(for [[idx {:keys [id color]}] (map-indexed vector (take 7 colors))]
|
||||
(for [[idx {:keys [color]}] (map-indexed vector (take 7 colors))]
|
||||
[:& cb/color-bullet {:key (str "color-" idx)
|
||||
:color color}])]]))
|
||||
|
||||
|
|
@ -193,8 +185,7 @@
|
|||
|
||||
(mf/defc colorpalette
|
||||
[]
|
||||
(let [team-id (mf/use-ctx ctx/current-team-id)
|
||||
recent-colors (mf/deref refs/workspace-recent-colors)
|
||||
(let [recent-colors (mf/deref refs/workspace-recent-colors)
|
||||
file-colors (mf/deref refs/workspace-file-colors)
|
||||
shared-libs (mf/deref refs/workspace-libraries)
|
||||
selected (or (mf/deref selected-palette-ref) :recent)
|
||||
|
|
|
|||
|
|
@ -6,28 +6,24 @@
|
|||
|
||||
(ns app.main.ui.workspace.colorpicker
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[okulary.core :as l]
|
||||
[cuerdas.core :as str]
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.math :as math]
|
||||
[app.common.uuid :refer [uuid]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.color :as uc]
|
||||
[app.util.object :as obj]
|
||||
[app.main.store :as st]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.data.workspace.libraries :as dwl]
|
||||
[app.main.data.workspace.colors :as dc]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.data.workspace.colors :as dc]
|
||||
[app.main.data.workspace.libraries :as dwl]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.i18n :as i18n :refer [t]]
|
||||
[app.main.ui.workspace.colorpicker.color-inputs :refer [color-inputs]]
|
||||
[app.main.ui.workspace.colorpicker.gradients :refer [gradients]]
|
||||
[app.main.ui.workspace.colorpicker.harmony :refer [harmony-selector]]
|
||||
[app.main.ui.workspace.colorpicker.hsva :refer [hsva-selector]]
|
||||
[app.main.ui.workspace.colorpicker.libraries :refer [libraries]]
|
||||
[app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector]]
|
||||
[app.main.ui.workspace.colorpicker.color-inputs :refer [color-inputs]]
|
||||
[app.main.ui.workspace.colorpicker.libraries :refer [libraries]]))
|
||||
[app.util.color :as uc]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [t]]
|
||||
[cuerdas.core :as str]
|
||||
[okulary.core :as l]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
;; --- Refs
|
||||
|
||||
|
|
@ -127,7 +123,6 @@
|
|||
picking-color? (mf/deref picking-color?)
|
||||
picked-color (mf/deref picked-color)
|
||||
picked-color-select (mf/deref picked-color-select)
|
||||
picked-shift? (mf/deref picked-shift?)
|
||||
|
||||
editing-spot-state (mf/deref editing-spot-state-ref)
|
||||
current-gradient (mf/deref current-gradient-ref)
|
||||
|
|
@ -156,11 +151,11 @@
|
|||
handle-change-stop
|
||||
(fn [offset]
|
||||
(when-let [offset-color (get-in @state [:stops offset])]
|
||||
(do (swap! state assoc
|
||||
:current-color offset-color
|
||||
:editing-stop offset)
|
||||
(swap! state assoc
|
||||
:current-color offset-color
|
||||
:editing-stop offset)
|
||||
|
||||
(st/emit! (dc/select-gradient-stop offset)))))
|
||||
(st/emit! (dc/select-gradient-stop offset))))
|
||||
|
||||
on-select-library-color
|
||||
(fn [color]
|
||||
|
|
@ -172,7 +167,7 @@
|
|||
(on-change color)))))
|
||||
|
||||
on-add-library-color
|
||||
(fn [color]
|
||||
(fn [_]
|
||||
(st/emit! (dwl/add-color (state->data @state))))
|
||||
|
||||
on-activate-gradient
|
||||
|
|
@ -197,7 +192,7 @@
|
|||
(mf/use-effect
|
||||
(mf/deps current-color)
|
||||
(fn [] (let [node (mf/ref-val ref-picker)
|
||||
{:keys [r g b h s v]} current-color
|
||||
{:keys [r g b h v]} current-color
|
||||
rgb [r g b]
|
||||
hue-rgb (uc/hsv->rgb [h 1.0 255])
|
||||
hsl-from (uc/hsv->hsl [h 0.0 v])
|
||||
|
|
@ -248,9 +243,8 @@
|
|||
:end-x :end-y
|
||||
:width])]
|
||||
(when (not= (:gradient-data @state) gradient-data)
|
||||
(do
|
||||
(reset! dirty? true)
|
||||
(swap! state assoc :gradient-data gradient-data)))))))
|
||||
(reset! dirty? true)
|
||||
(swap! state assoc :gradient-data gradient-data))))))
|
||||
|
||||
;; Check if we've opened a color with gradient
|
||||
(mf/use-effect
|
||||
|
|
@ -265,7 +259,7 @@
|
|||
(mf/use-effect
|
||||
(mf/deps @state)
|
||||
(fn []
|
||||
(if @dirty?
|
||||
(when @dirty?
|
||||
(let [color (state->data @state)]
|
||||
(reset! dirty? false)
|
||||
(reset! last-color color)
|
||||
|
|
@ -357,7 +351,7 @@
|
|||
(mf/defc colorpicker-modal
|
||||
{::mf/register modal/components
|
||||
::mf/register-as :colorpicker}
|
||||
[{:keys [x y default data page position
|
||||
[{:keys [x y data position
|
||||
disable-gradient
|
||||
disable-opacity
|
||||
on-change on-close on-accept] :as props}]
|
||||
|
|
@ -367,7 +361,7 @@
|
|||
position (or position :left)
|
||||
style (calculate-position vport position x y)
|
||||
|
||||
handle-change (fn [new-data shift-clicked?]
|
||||
handle-change (fn [new-data _shift-clicked?]
|
||||
(reset! dirty? (not= data new-data))
|
||||
(reset! last-change new-data)
|
||||
(when on-change
|
||||
|
|
|
|||
|
|
@ -6,22 +6,10 @@
|
|||
|
||||
(ns app.main.ui.workspace.colorpicker.color-inputs
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[okulary.core :as l]
|
||||
[cuerdas.core :as str]
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.math :as math]
|
||||
[app.common.uuid :refer [uuid]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.color :as uc]
|
||||
[app.util.object :as obj]
|
||||
[app.main.store :as st]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.data.workspace.libraries :as dwl]
|
||||
[app.main.data.workspace.colors :as dc]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.i18n :as i18n :refer [t]]))
|
||||
[app.util.dom :as dom]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(mf/defc color-inputs [{:keys [type color disable-opacity on-change]}]
|
||||
(let [{red :r green :g blue :b
|
||||
|
|
|
|||
|
|
@ -6,22 +6,8 @@
|
|||
|
||||
(ns app.main.ui.workspace.colorpicker.gradients
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[okulary.core :as l]
|
||||
[cuerdas.core :as str]
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.math :as math]
|
||||
[app.common.uuid :refer [uuid]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.color :as uc]
|
||||
[app.util.object :as obj]
|
||||
[app.main.store :as st]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.data.workspace.libraries :as dwl]
|
||||
[app.main.data.workspace.colors :as dc]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.i18n :as i18n :refer [t]]))
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(defn gradient->string [stops]
|
||||
(let [format-stop
|
||||
|
|
|
|||
|
|
@ -6,24 +6,14 @@
|
|||
|
||||
(ns app.main.ui.workspace.colorpicker.harmony
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[okulary.core :as l]
|
||||
[cuerdas.core :as str]
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.math :as math]
|
||||
[app.common.uuid :refer [uuid]]
|
||||
[app.util.dom :as dom]
|
||||
[app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]]
|
||||
[app.util.color :as uc]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.object :as obj]
|
||||
[app.main.store :as st]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.data.workspace.libraries :as dwl]
|
||||
[app.main.data.workspace.colors :as dc]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.i18n :as i18n :refer [t]]
|
||||
[app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]]))
|
||||
|
||||
[cuerdas.core :as str]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(defn create-color-wheel
|
||||
[canvas-node]
|
||||
|
|
@ -100,7 +90,7 @@
|
|||
(on-change {:hex hex
|
||||
:r r :g g :b b
|
||||
:v new-value})))
|
||||
on-complement-click (fn [ev]
|
||||
on-complement-click (fn [_]
|
||||
(let [new-hue (mod (+ hue 180) 360)
|
||||
hex (uc/hsv->hex [new-hue saturation value])
|
||||
[r g b] (uc/hex->rgb hex)]
|
||||
|
|
|
|||
|
|
@ -6,23 +6,9 @@
|
|||
|
||||
(ns app.main.ui.workspace.colorpicker.hsva
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[okulary.core :as l]
|
||||
[cuerdas.core :as str]
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.math :as math]
|
||||
[app.common.uuid :refer [uuid]]
|
||||
[app.util.dom :as dom]
|
||||
[app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]]
|
||||
[app.util.color :as uc]
|
||||
[app.util.object :as obj]
|
||||
[app.main.store :as st]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.data.workspace.libraries :as dwl]
|
||||
[app.main.data.workspace.colors :as dc]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.i18n :as i18n :refer [t]]
|
||||
[app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]]))
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(mf/defc hsva-selector [{:keys [color disable-opacity on-change]}]
|
||||
(let [{hue :h saturation :s value :v alpha :alpha} color
|
||||
|
|
|
|||
|
|
@ -6,42 +6,29 @@
|
|||
|
||||
(ns app.main.ui.workspace.colorpicker.libraries
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[okulary.core :as l]
|
||||
[cuerdas.core :as str]
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.math :as math]
|
||||
[app.common.uuid :refer [uuid]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.color :as uc]
|
||||
[app.util.object :as obj]
|
||||
[app.main.store :as st]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.data.workspace.libraries :as dwl]
|
||||
[app.main.data.workspace.colors :as dc]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.i18n :as i18n :refer [t]]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.color-bullet :refer [color-bullet]]
|
||||
[app.main.ui.workspace.colorpicker.gradients :refer [gradients]]
|
||||
[app.main.ui.workspace.colorpicker.harmony :refer [harmony-selector]]
|
||||
[app.main.ui.workspace.colorpicker.hsva :refer [hsva-selector]]
|
||||
[app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector]]
|
||||
[app.main.ui.workspace.colorpicker.color-inputs :refer [color-inputs]]))
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[okulary.core :as l]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(def selected-palette-ref
|
||||
(-> (l/in [:workspace-local :selected-palette-colorpicker])
|
||||
(l/derived st/state)))
|
||||
|
||||
(mf/defc libraries [{:keys [current-color on-select-color on-add-library-color
|
||||
disable-gradient disable-opacity]}]
|
||||
(mf/defc libraries
|
||||
[{:keys [on-select-color on-add-library-color disable-gradient disable-opacity]}]
|
||||
(let [selected-library (or (mf/deref selected-palette-ref) :recent)
|
||||
current-library-colors (mf/use-state [])
|
||||
|
||||
shared-libs (mf/deref refs/workspace-libraries)
|
||||
file-colors (mf/deref refs/workspace-file-colors)
|
||||
recent-colors (mf/deref refs/workspace-recent-colors)
|
||||
locale (mf/deref i18n/locale)
|
||||
|
||||
parse-selected
|
||||
(fn [selected-str]
|
||||
|
|
@ -85,8 +72,8 @@
|
|||
(when-let [val (parse-selected (dom/get-target-val e))]
|
||||
(st/emit! (dc/change-palette-selected-colorpicker val))))
|
||||
:value (name selected-library)}
|
||||
[:option {:value "recent"} (t locale "workspace.libraries.colors.recent-colors")]
|
||||
[:option {:value "file"} (t locale "workspace.libraries.colors.file-library")]
|
||||
[:option {:value "recent"} (tr "workspace.libraries.colors.recent-colors")]
|
||||
[:option {:value "file"} (tr "workspace.libraries.colors.file-library")]
|
||||
|
||||
(for [[_ {:keys [name id]}] shared-libs]
|
||||
[:option {:key id
|
||||
|
|
|
|||
|
|
@ -6,26 +6,14 @@
|
|||
|
||||
(ns app.main.ui.workspace.colorpicker.ramp
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[okulary.core :as l]
|
||||
[cuerdas.core :as str]
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.math :as math]
|
||||
[app.common.uuid :refer [uuid]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.color :as uc]
|
||||
[app.util.object :as obj]
|
||||
[app.main.store :as st]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.data.workspace.libraries :as dwl]
|
||||
[app.main.data.workspace.colors :as dc]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.i18n :as i18n :refer [t]]
|
||||
[app.main.ui.components.color-bullet :refer [color-bullet]]
|
||||
[app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]]))
|
||||
[app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]]
|
||||
[app.util.color :as uc]
|
||||
[app.util.dom :as dom]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(mf/defc value-saturation-selector [{:keys [hue saturation value on-change]}]
|
||||
(mf/defc value-saturation-selector [{:keys [saturation value on-change]}]
|
||||
(let [dragging? (mf/use-state false)
|
||||
calculate-pos
|
||||
(fn [ev]
|
||||
|
|
|
|||
|
|
@ -6,22 +6,10 @@
|
|||
|
||||
(ns app.main.ui.workspace.colorpicker.slider-selector
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[okulary.core :as l]
|
||||
[cuerdas.core :as str]
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.math :as math]
|
||||
[app.common.uuid :refer [uuid]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.color :as uc]
|
||||
[app.util.object :as obj]
|
||||
[app.main.store :as st]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.data.workspace.libraries :as dwl]
|
||||
[app.main.data.workspace.colors :as dc]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.i18n :as i18n :refer [t]]))
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(mf/defc slider-selector
|
||||
[{:keys [value class min-value max-value vertical? reverse? on-change]}]
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [t tr]]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[app.util.timers :as tm]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
|
|
@ -25,10 +25,8 @@
|
|||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(mf/defc sidebar-options
|
||||
[{:keys [local] :as props}]
|
||||
[]
|
||||
(let [{cmode :mode cshow :show} (mf/deref refs/comments-local)
|
||||
locale (mf/deref i18n/locale)
|
||||
|
||||
update-mode
|
||||
(mf/use-callback
|
||||
(fn [mode]
|
||||
|
|
@ -43,19 +41,19 @@
|
|||
[:li {:class (dom/classnames :selected (or (= :all cmode) (nil? cmode)))
|
||||
:on-click #(update-mode :all)}
|
||||
[:span.icon i/tick]
|
||||
[:span.label (t locale "labels.show-all-comments")]]
|
||||
[:span.label (tr "labels.show-all-comments")]]
|
||||
|
||||
[:li {:class (dom/classnames :selected (= :yours cmode))
|
||||
:on-click #(update-mode :yours)}
|
||||
[:span.icon i/tick]
|
||||
[:span.label (t locale "labels.show-your-comments")]]
|
||||
[:span.label (tr "labels.show-your-comments")]]
|
||||
|
||||
[:hr]
|
||||
|
||||
[:li {:class (dom/classnames :selected (= :pending cshow))
|
||||
:on-click #(update-show (if (= :pending cshow) :all :pending))}
|
||||
[:span.icon i/tick]
|
||||
[:span.label (t locale "labels.hide-resolved-comments")]]]))
|
||||
[:span.label (tr "labels.hide-resolved-comments")]]]))
|
||||
|
||||
(mf/defc comments-sidebar
|
||||
[]
|
||||
|
|
@ -109,7 +107,7 @@
|
|||
:on-thread-click on-thread-click
|
||||
:users users
|
||||
:key (:page-id tgroup)}]])]
|
||||
|
||||
|
||||
[:div.thread-groups-placeholder
|
||||
i/chat
|
||||
(tr "labels.no-comments-available")])]))
|
||||
|
|
|
|||
|
|
@ -9,23 +9,17 @@
|
|||
(:require
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.data.workspace.common :as dwc]
|
||||
[app.main.data.workspace.undo :as dwu]
|
||||
[app.main.data.workspace.libraries :as dwl]
|
||||
[app.main.data.workspace.shortcuts :as sc]
|
||||
[app.main.data.workspace.undo :as dwu]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.streams :as ms]
|
||||
[app.main.ui.components.dropdown :refer [dropdown]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.hooks :refer [use-rxsub]]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :refer [t] :as i18n]
|
||||
[app.util.i18n :refer [tr] :as i18n]
|
||||
[app.util.timers :as timers]
|
||||
[beicon.core :as rx]
|
||||
[okulary.core :as l]
|
||||
[potok.core :as ptk]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(def menu-ref
|
||||
|
|
@ -43,13 +37,12 @@
|
|||
[:span.shortcut (or shortcut "")]])
|
||||
|
||||
(mf/defc menu-separator
|
||||
[props]
|
||||
[]
|
||||
[:li.separator])
|
||||
|
||||
(mf/defc shape-context-menu
|
||||
[{:keys [mdata] :as props}]
|
||||
(let [locale (mf/deref i18n/locale)
|
||||
{:keys [id] :as shape} (:shape mdata)
|
||||
(let [{:keys [id] :as shape} (:shape mdata)
|
||||
selected (:selected mdata)
|
||||
|
||||
single? (= (count selected) 1)
|
||||
|
|
@ -97,91 +90,91 @@
|
|||
do-update-remote-component (st/emitf (modal/show
|
||||
{:type :confirm
|
||||
:message ""
|
||||
:title (t locale "modals.update-remote-component.message")
|
||||
:hint (t locale "modals.update-remote-component.hint")
|
||||
:cancel-label (t locale "modals.update-remote-component.cancel")
|
||||
:accept-label (t locale "modals.update-remote-component.accept")
|
||||
:title (tr "modals.update-remote-component.message")
|
||||
:hint (tr "modals.update-remote-component.hint")
|
||||
:cancel-label (tr "modals.update-remote-component.cancel")
|
||||
:accept-label (tr "modals.update-remote-component.accept")
|
||||
:accept-style :primary
|
||||
:on-accept confirm-update-remote-component}))
|
||||
do-show-component (st/emitf (dw/go-to-layout :assets))
|
||||
do-navigate-component-file (st/emitf (dwl/nav-to-component-file
|
||||
(:component-file shape)))]
|
||||
[:*
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.copy")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.copy")
|
||||
:shortcut (sc/get-tooltip :copy)
|
||||
:on-click do-copy}]
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.cut")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.cut")
|
||||
:shortcut (sc/get-tooltip :cut)
|
||||
:on-click do-cut}]
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.paste")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.paste")
|
||||
:shortcut (sc/get-tooltip :paste)
|
||||
:on-click do-paste}]
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.duplicate")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.duplicate")
|
||||
:shortcut (sc/get-tooltip :duplicate)
|
||||
:on-click do-duplicate}]
|
||||
[:& menu-separator]
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.forward")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.forward")
|
||||
:shortcut (sc/get-tooltip :bring-forward)
|
||||
:on-click do-bring-forward}]
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.front")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.front")
|
||||
:shortcut (sc/get-tooltip :bring-front)
|
||||
:on-click do-bring-to-front}]
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.backward")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.backward")
|
||||
:shortcut (sc/get-tooltip :bring-backward)
|
||||
:on-click do-send-backward}]
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.back")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.back")
|
||||
:shortcut (sc/get-tooltip :bring-back)
|
||||
:on-click do-send-to-back}]
|
||||
[:& menu-separator]
|
||||
|
||||
(when multiple?
|
||||
[:*
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.group")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.group")
|
||||
:shortcut (sc/get-tooltip :group)
|
||||
:on-click do-create-group}]
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.mask")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.mask")
|
||||
:shortcut (sc/get-tooltip :mask)
|
||||
:on-click do-mask-group}]
|
||||
[:& menu-separator]])
|
||||
|
||||
(when (or single? multiple?)
|
||||
[:*
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.flip-vertical")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.flip-vertical")
|
||||
:shortcut (sc/get-tooltip :flip-vertical)
|
||||
:on-click do-flip-vertical}]
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.flip-horizontal")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.flip-horizontal")
|
||||
:shortcut (sc/get-tooltip :flip-horizontal)
|
||||
:on-click do-flip-horizontal}]
|
||||
[:& menu-separator]])
|
||||
|
||||
(when (and single? (= (:type shape) :group))
|
||||
[:*
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.ungroup")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.ungroup")
|
||||
:shortcut (sc/get-tooltip :ungroup)
|
||||
:on-click do-remove-group}]
|
||||
(if (:masked-group? shape)
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.unmask")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.unmask")
|
||||
:shortcut (sc/get-tooltip :unmask)
|
||||
:on-click do-unmask-group}]
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.mask")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.mask")
|
||||
:shortcut (sc/get-tooltip :group)
|
||||
:on-click do-mask-group}])])
|
||||
|
||||
(when (and single? editable-shape?)
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.edit")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.edit")
|
||||
:shortcut (sc/get-tooltip :start-editing)
|
||||
:on-click do-start-editing}])
|
||||
|
||||
(if (:hidden shape)
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.show")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.show")
|
||||
:on-click do-show-shape}]
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.hide")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.hide")
|
||||
:on-click do-hide-shape}])
|
||||
|
||||
(if (:blocked shape)
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.unlock")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.unlock")
|
||||
:on-click do-unlock-shape}]
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.lock")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.lock")
|
||||
:on-click do-lock-shape}])
|
||||
|
||||
(when (and (or (nil? (:shape-ref shape))
|
||||
|
|
@ -189,7 +182,7 @@
|
|||
(not= (:type shape) :frame))
|
||||
[:*
|
||||
[:& menu-separator]
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.create-component")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.create-component")
|
||||
:shortcut (sc/get-tooltip :create-component)
|
||||
:on-click do-add-component}]])
|
||||
|
||||
|
|
@ -201,41 +194,39 @@
|
|||
(if (= (:component-file shape) current-file-id)
|
||||
[:*
|
||||
[:& menu-separator]
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.detach-instance")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.detach-instance")
|
||||
:on-click do-detach-component}]
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.reset-overrides")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.reset-overrides")
|
||||
:on-click do-reset-component}]
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.update-main")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.update-main")
|
||||
:on-click do-update-component}]
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.show-main")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.show-main")
|
||||
:on-click do-show-component}]]
|
||||
[:*
|
||||
[:& menu-separator]
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.detach-instance")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.detach-instance")
|
||||
:on-click do-detach-component}]
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.reset-overrides")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.reset-overrides")
|
||||
:on-click do-reset-component}]
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.go-main")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.go-main")
|
||||
:on-click do-navigate-component-file}]
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.update-main")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.update-main")
|
||||
:on-click do-update-remote-component}]]))
|
||||
|
||||
[:& menu-separator]
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.delete")
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.delete")
|
||||
:shortcut (sc/get-tooltip :delete)
|
||||
:on-click do-delete}]]))
|
||||
|
||||
(mf/defc viewport-context-menu
|
||||
[{:keys [mdata] :as props}]
|
||||
(let [locale (mf/deref i18n/locale)
|
||||
do-paste (st/emitf dw/paste)]
|
||||
[:*
|
||||
[:& menu-entry {:title (t locale "workspace.shape.menu.paste")
|
||||
:shortcut (sc/get-tooltip :paste)
|
||||
:on-click do-paste}]]))
|
||||
[]
|
||||
(let [do-paste (st/emitf dw/paste)]
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.paste")
|
||||
:shortcut (sc/get-tooltip :paste)
|
||||
:on-click do-paste}]))
|
||||
|
||||
(mf/defc context-menu
|
||||
[props]
|
||||
[]
|
||||
(let [mdata (mf/deref menu-ref)
|
||||
top (- (get-in mdata [:position :y]) 20)
|
||||
left (get-in mdata [:position :x])
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
|
||||
(ns app.main.ui.workspace.coordinates
|
||||
(:require
|
||||
[app.main.ui.hooks :as hooks]
|
||||
[app.main.streams :as ms]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(mf/defc coordinates
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
(dom/stop-propagation event)
|
||||
|
||||
(let [toggle-selected? (and selected? shift?)
|
||||
deselect? (and (not selected?) (not (empty? selected)) (not shift?))]
|
||||
deselect? (and (not selected?) (seq selected) (not shift?))]
|
||||
(apply
|
||||
st/emit!
|
||||
(cond-> []
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
[app.main.data.modal :as modal]
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.data.workspace.shortcuts :as sc]
|
||||
[app.main.data.workspace.shortcuts :as sc]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.dropdown :refer [dropdown]]
|
||||
|
|
@ -89,8 +88,6 @@
|
|||
(let [show-menu? (mf/use-state false)
|
||||
editing? (mf/use-state false)
|
||||
|
||||
locale (mf/deref i18n/locale)
|
||||
|
||||
edit-input-ref (mf/use-ref nil)
|
||||
|
||||
add-shared-fn
|
||||
|
|
@ -125,7 +122,7 @@
|
|||
:on-accept del-shared-fn})))
|
||||
|
||||
|
||||
handle-blur (fn [event]
|
||||
handle-blur (fn [_]
|
||||
(let [value (-> edit-input-ref mf/ref-val dom/get-value)]
|
||||
(st/emit! (dw/rename-file (:id file) value)))
|
||||
(reset! editing? false))
|
||||
|
|
@ -243,9 +240,7 @@
|
|||
[{:keys [file layout project page-id] :as props}]
|
||||
(let [team-id (:team-id project)
|
||||
zoom (mf/deref refs/selected-zoom)
|
||||
router (mf/deref refs/router)
|
||||
params {:page-id page-id :file-id (:id file)}
|
||||
view-url (rt/resolve router :viewer params {:index 0})
|
||||
|
||||
go-back
|
||||
(mf/use-callback
|
||||
|
|
|
|||
|
|
@ -7,18 +7,18 @@
|
|||
(ns app.main.ui.workspace.libraries
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[rumext.alpha :as mf]
|
||||
[cuerdas.core :as str]
|
||||
[okulary.core :as l]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [t tr]]
|
||||
[app.util.data :refer [classnames matches-search]]
|
||||
[app.main.store :as st]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.data.workspace.libraries :as dwl]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.data.modal :as modal]))
|
||||
[app.util.data :refer [classnames matches-search]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [t tr]]
|
||||
[cuerdas.core :as str]
|
||||
[okulary.core :as l]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(def workspace-file
|
||||
(l/derived :workspace-file st/state))
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
|
||||
on-search-clear
|
||||
(mf/use-callback
|
||||
(fn [event]
|
||||
(fn [_]
|
||||
(reset! search-term "")))
|
||||
|
||||
link-library
|
||||
|
|
@ -152,8 +152,7 @@
|
|||
project (mf/deref refs/workspace-project)
|
||||
file (mf/deref workspace-file)
|
||||
libraries (->> (mf/deref refs/workspace-libraries)
|
||||
(d/removem (fn [[key val]]
|
||||
(:is-indirect val))))
|
||||
(d/removem (fn [[_ val]] (:is-indirect val))))
|
||||
shared-files (mf/deref refs/workspace-shared-files)
|
||||
|
||||
change-tab #(reset! selected-tab %)
|
||||
|
|
|
|||
|
|
@ -8,14 +8,12 @@
|
|||
(:require
|
||||
[app.config :as cfg]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.util.router :as rt]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
;; --- SESSION WIDGET
|
||||
|
||||
(mf/defc session-widget
|
||||
[{:keys [session self? profile] :as props}]
|
||||
[{:keys [session profile] :as props}]
|
||||
[:li.tooltip.tooltip-bottom
|
||||
{:alt (:fullname profile)}
|
||||
[:img {:style {:border-color (:color session)}
|
||||
|
|
@ -24,15 +22,13 @@
|
|||
(mf/defc active-sessions
|
||||
{::mf/wrap [mf/memo]}
|
||||
[]
|
||||
(let [profile (mf/deref refs/profile)
|
||||
users (mf/deref refs/users)
|
||||
(let [users (mf/deref refs/users)
|
||||
presence (mf/deref refs/workspace-presence)]
|
||||
[:ul.active-users
|
||||
(for [session (vals presence)]
|
||||
[:& session-widget
|
||||
{:session session
|
||||
:profile (get users (:profile-id session))
|
||||
:self? (= (:profile-id session) (:id profile))
|
||||
:key (:id session)}])]))
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -6,10 +6,9 @@
|
|||
|
||||
(ns app.main.ui.workspace.rules
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[app.common.math :as mth]
|
||||
[app.util.object :as obj]
|
||||
[app.util.timers :as timers]))
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(defn- calculate-step-size
|
||||
[zoom]
|
||||
|
|
@ -30,7 +29,7 @@
|
|||
:else 1))
|
||||
|
||||
(defn draw-rule!
|
||||
[dctx {:keys [zoom size start count type] :or {count 200}}]
|
||||
[dctx {:keys [zoom size start type]}]
|
||||
(when start
|
||||
(let [txfm (- (* (- 0 start) zoom) 20)
|
||||
step (calculate-step-size zoom)
|
||||
|
|
|
|||
|
|
@ -6,15 +6,11 @@
|
|||
|
||||
(ns app.main.ui.workspace.shapes.bounding-box
|
||||
(:require
|
||||
[cuerdas.core :as str]
|
||||
[rumext.alpha :as mf]
|
||||
[app.util.debug :as debug]
|
||||
["randomcolor" :as rdcolor]
|
||||
[app.common.geom.shapes :as gsh]
|
||||
[app.common.geom.matrix :as gmt]
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.util.debug :refer [debug?]]
|
||||
[app.main.refs :as refs]
|
||||
["randomcolor" :as rdcolor]))
|
||||
[cuerdas.core :as str]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(defn fixed
|
||||
[num]
|
||||
|
|
@ -58,15 +54,11 @@
|
|||
(mf/defc bounding-box
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [shape (-> (unchecked-get props "shape"))
|
||||
frame (unchecked-get props "frame")
|
||||
(let [shape (unchecked-get props "shape")
|
||||
bounding-box (gsh/points->selrect (-> shape :points))
|
||||
shape-center (gsh/center-shape shape)
|
||||
line-color (rdcolor #js {:seed (str (:id shape))})
|
||||
zoom (mf/deref refs/selected-zoom)
|
||||
childs-ref (mf/use-memo (mf/deps shape) #(refs/objects-by-id (:shapes shape)))
|
||||
childs (->> (mf/deref childs-ref)
|
||||
(map gsh/transform-shape))]
|
||||
line-color (rdcolor #js {:seed (str (:id shape))})
|
||||
zoom (mf/deref refs/selected-zoom)]
|
||||
|
||||
[:g.bounding-box
|
||||
[:text {:x (:x bounding-box)
|
||||
|
|
@ -81,7 +73,7 @@
|
|||
[:& cross-point {:point shape-center
|
||||
:zoom zoom
|
||||
:color line-color}]]
|
||||
|
||||
|
||||
[:g.points
|
||||
(for [point (:points shape)]
|
||||
[:& cross-point {:point point
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
(ns app.main.ui.workspace.shapes.frame
|
||||
(:require
|
||||
[app.common.geom.shapes :as gsh]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.ui.shapes.frame :as frame]
|
||||
[app.main.ui.shapes.shape :refer [shape-container]]
|
||||
[app.main.ui.shapes.text.fontfaces :as ff]
|
||||
|
|
@ -77,14 +76,10 @@
|
|||
objects (unchecked-get props "objects")
|
||||
thumbnail? (unchecked-get props "thumbnail?")
|
||||
|
||||
edition (mf/deref refs/selected-edition)
|
||||
|
||||
shape (gsh/transform-shape shape)
|
||||
children (mapv #(get objects %) (:shapes shape))
|
||||
|
||||
ds-modifier (get-in shape [:modifiers :displacement])
|
||||
|
||||
rendered? (mf/use-state false)
|
||||
rendered? (mf/use-state false)
|
||||
|
||||
show-thumbnail? (and thumbnail? (some? (:thumbnail shape)))
|
||||
|
||||
|
|
|
|||
|
|
@ -6,15 +6,12 @@
|
|||
|
||||
(ns app.main.ui.workspace.shapes.group
|
||||
(:require
|
||||
[app.common.geom.shapes :as gsh]
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.streams :as ms]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
[app.main.ui.shapes.group :as group]
|
||||
[app.main.ui.shapes.shape :refer [shape-container]]
|
||||
[app.util.debug :refer [debug?]]
|
||||
[app.util.dom :as dom]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
|
|
@ -33,10 +30,8 @@
|
|||
{::mf/wrap [#(mf/memo' % (mf/check-props ["shape" "frame"]))]
|
||||
::mf/wrap-props false}
|
||||
[props]
|
||||
(let [shape (unchecked-get props "shape")
|
||||
frame (unchecked-get props "frame")
|
||||
|
||||
{:keys [id x y width height]} shape
|
||||
(let [shape (unchecked-get props "shape")
|
||||
frame (unchecked-get props "frame")
|
||||
|
||||
childs-ref (mf/use-memo (mf/deps shape) #(refs/objects-by-id (:shapes shape) {:with-modifiers? true}))
|
||||
childs (mf/deref childs-ref)]
|
||||
|
|
|
|||
|
|
@ -6,13 +6,10 @@
|
|||
|
||||
(ns app.main.ui.workspace.shapes.path
|
||||
(:require
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.shapes.path :as path]
|
||||
[app.main.ui.shapes.shape :refer [shape-container]]
|
||||
[app.main.ui.workspace.shapes.path.common :as pc]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.path.commands :as upc]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
|
|
|
|||
|
|
@ -17,10 +17,10 @@
|
|||
[app.main.ui.hooks :as hooks]
|
||||
[app.main.ui.workspace.shapes.path.common :as pc]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.path.geom :as upg]
|
||||
[app.util.keyboard :as kbd]
|
||||
[app.util.path.commands :as upc]
|
||||
[app.util.path.format :as upf]
|
||||
[app.util.keyboard :as kbd]
|
||||
[app.util.path.geom :as upg]
|
||||
[clojure.set :refer [map-invert]]
|
||||
[goog.events :as events]
|
||||
[rumext.alpha :as mf])
|
||||
|
|
@ -31,12 +31,12 @@
|
|||
|
||||
on-enter
|
||||
(mf/use-callback
|
||||
(fn [event]
|
||||
(fn [_]
|
||||
(st/emit! (drp/path-pointer-enter position))))
|
||||
|
||||
|
||||
on-leave
|
||||
(mf/use-callback
|
||||
(fn [event]
|
||||
(fn [_]
|
||||
(st/emit! (drp/path-pointer-leave position))))
|
||||
|
||||
on-mouse-down
|
||||
|
|
@ -96,11 +96,11 @@
|
|||
(when (and point handler)
|
||||
(let [{:keys [x y]} handler
|
||||
on-enter
|
||||
(fn [event]
|
||||
(fn [_]
|
||||
(st/emit! (drp/path-handler-enter index prefix)))
|
||||
|
||||
on-leave
|
||||
(fn [event]
|
||||
(fn [_]
|
||||
(st/emit! (drp/path-handler-leave index prefix)))
|
||||
|
||||
on-mouse-down
|
||||
|
|
@ -135,7 +135,7 @@
|
|||
:y (- y (/ 3 zoom))
|
||||
:width (/ 6 zoom)
|
||||
:height (/ 6 zoom)
|
||||
|
||||
|
||||
:style {:stroke-width (/ 1 zoom)
|
||||
:stroke (cond (or selected? hover?) pc/black-color
|
||||
:else pc/primary-color)
|
||||
|
|
@ -225,7 +225,6 @@
|
|||
|
||||
points (into #{} content-points)
|
||||
|
||||
last-command (last content)
|
||||
last-p (->> content last upc/command->point)
|
||||
handlers (upc/content->handlers content)
|
||||
|
||||
|
|
@ -247,7 +246,7 @@
|
|||
moving-nodes))
|
||||
|
||||
handle-double-click-outside
|
||||
(fn [event]
|
||||
(fn [_]
|
||||
(when (= edit-mode :move)
|
||||
(st/emit! :interrupt)))]
|
||||
|
||||
|
|
@ -298,7 +297,7 @@
|
|||
last-p? (= last-point (get point->base position))
|
||||
|
||||
pos-handlers (->> pos-handlers (filter show-handler?))
|
||||
curve? (not (empty? pos-handlers))]
|
||||
curve? (boolean (seq pos-handlers))]
|
||||
|
||||
[:g.path-node
|
||||
[:g.point-handlers {:pointer-events (when (= edit-mode :draw) "none")}
|
||||
|
|
|
|||
|
|
@ -7,11 +7,9 @@
|
|||
(ns app.main.ui.workspace.shapes.svg-raw
|
||||
(:require
|
||||
[app.main.refs :as refs]
|
||||
[app.main.ui.shapes.svg-raw :as svg-raw]
|
||||
[app.main.ui.shapes.shape :refer [shape-container]]
|
||||
[rumext.alpha :as mf]
|
||||
[app.common.geom.shapes :as gsh]
|
||||
[app.main.ui.context :as muc]))
|
||||
[app.main.ui.shapes.svg-raw :as svg-raw]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(defn svg-raw-wrapper-factory
|
||||
[shape-wrapper]
|
||||
|
|
@ -20,20 +18,12 @@
|
|||
{::mf/wrap [#(mf/memo' % (mf/check-props ["shape" "frame"]))]
|
||||
::mf/wrap-props false}
|
||||
[props]
|
||||
(let [shape (unchecked-get props "shape")
|
||||
frame (unchecked-get props "frame")
|
||||
|
||||
{:keys [id x y width height]} shape
|
||||
(let [shape (unchecked-get props "shape")
|
||||
frame (unchecked-get props "frame")
|
||||
|
||||
childs-ref (mf/use-memo (mf/deps shape) #(refs/objects-by-id (:shapes shape)))
|
||||
childs (mf/deref childs-ref)
|
||||
childs (mf/deref childs-ref)]
|
||||
|
||||
{:keys [id x y width height]} shape
|
||||
transform (gsh/transform-matrix shape)
|
||||
|
||||
tag (get-in shape [:content :tag])
|
||||
|
||||
def-ctx? (mf/use-ctx muc/def-ctx)]
|
||||
|
||||
(if (or (= (get-in shape [:content :tag]) :svg)
|
||||
(and (contains? shape :svg-attrs) (map? (:content shape))))
|
||||
|
|
|
|||
|
|
@ -6,25 +6,20 @@
|
|||
|
||||
(ns app.main.ui.workspace.shapes.text
|
||||
(:require
|
||||
[app.common.geom.shapes :as gsh]
|
||||
[app.common.math :as mth]
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.data.workspace.common :as dwc]
|
||||
[app.main.data.workspace.texts :as dwt]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.context :as muc]
|
||||
[app.main.ui.shapes.shape :refer [shape-container]]
|
||||
[app.main.ui.shapes.text :as text]
|
||||
[app.main.ui.workspace.shapes.common :as common]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.logging :as log]
|
||||
[app.util.object :as obj]
|
||||
[app.util.text-editor :as ted]
|
||||
[app.util.timers :as timers]
|
||||
[app.util.webapi :as wapi]
|
||||
[app.util.text-editor :as ted]
|
||||
[okulary.core :as l]
|
||||
[beicon.core :as rx]
|
||||
[okulary.core :as l]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
;; Change this to :info :debug or :trace to debug this module
|
||||
|
|
@ -50,7 +45,7 @@
|
|||
(mf/defc text-resize-content
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [{:keys [id name x y grow-type] :as shape} (obj/get props "shape")
|
||||
(let [{:keys [id name grow-type] :as shape} (obj/get props "shape")
|
||||
|
||||
;; NOTE: this breaks the hooks rule of "no hooks inside
|
||||
;; conditional code"; but we ensure that this component will
|
||||
|
|
@ -77,8 +72,8 @@
|
|||
#(let [width (obj/get-in entries [0 "contentRect" "width"])
|
||||
height (obj/get-in entries [0 "contentRect" "height"])]
|
||||
(when (and (not (mth/almost-zero? width)) (not (mth/almost-zero? height)))
|
||||
(do (log/debug :msg "Resize detected" :shape-id id :width width :height height)
|
||||
(st/emit! (dwt/resize-text id (mth/ceil width) (mth/ceil height))))))))))
|
||||
(log/debug :msg "Resize detected" :shape-id id :width width :height height)
|
||||
(st/emit! (dwt/resize-text id (mth/ceil width) (mth/ceil height)))))))))
|
||||
|
||||
text-ref-cb
|
||||
(mf/use-callback
|
||||
|
|
@ -109,7 +104,7 @@
|
|||
(mf/defc text-wrapper
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [{:keys [id x y width height] :as shape} (unchecked-get props "shape")
|
||||
(let [{:keys [id] :as shape} (unchecked-get props "shape")
|
||||
edition-ref (mf/use-memo (mf/deps id) #(l/derived (fn [o] (= id (:edition o))) refs/workspace-local))
|
||||
edition? (mf/deref edition-ref)]
|
||||
|
||||
|
|
@ -124,4 +119,4 @@
|
|||
;; the component if the edition flag changes.
|
||||
[:& text-resize-content {:shape shape
|
||||
:edition? edition?
|
||||
:key (str (:id shape) edition?)}]]]))
|
||||
:key (str id edition?)}]]]))
|
||||
|
|
|
|||
|
|
@ -7,12 +7,9 @@
|
|||
(ns app.main.ui.workspace.shapes.text.editor
|
||||
(:require
|
||||
["draft-js" :as draft]
|
||||
[app.common.data :as d]
|
||||
[app.common.geom.shapes :as gsh]
|
||||
[app.common.text :as txt]
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.data.workspace.common :as dwc]
|
||||
[app.main.data.workspace.selection :as dws]
|
||||
[app.main.data.workspace.texts :as dwt]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
|
|
@ -22,9 +19,7 @@
|
|||
[app.util.keyboard :as kbd]
|
||||
[app.util.object :as obj]
|
||||
[app.util.text-editor :as ted]
|
||||
[cuerdas.core :as str]
|
||||
[goog.events :as events]
|
||||
[okulary.core :as l]
|
||||
[rumext.alpha :as mf])
|
||||
(:import
|
||||
goog.events.EventType))
|
||||
|
|
@ -34,12 +29,11 @@
|
|||
(mf/defc block-component
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [children (obj/get props "children")
|
||||
bprops (obj/get props "blockProps")
|
||||
data (obj/get bprops "data")
|
||||
style (sts/generate-paragraph-styles (obj/get bprops "shape")
|
||||
(let [bprops (obj/get props "blockProps")
|
||||
data (obj/get bprops "data")
|
||||
style (sts/generate-paragraph-styles (obj/get bprops "shape")
|
||||
(obj/get bprops "data"))
|
||||
dir (:text-direction data "auto")]
|
||||
dir (:text-direction data "auto")]
|
||||
|
||||
|
||||
[:div {:style style :dir dir}
|
||||
|
|
@ -72,10 +66,9 @@
|
|||
{::mf/wrap [mf/memo]
|
||||
::mf/wrap-props false
|
||||
::mf/forward-ref true}
|
||||
[props ref]
|
||||
(let [{:keys [id x y width height grow-type content] :as shape} (obj/get props "shape")
|
||||
[props _]
|
||||
(let [{:keys [id content] :as shape} (obj/get props "shape")
|
||||
|
||||
zoom (mf/deref refs/selected-zoom)
|
||||
state-map (mf/deref refs/workspace-editor-state)
|
||||
state (get state-map id empty-editor-state)
|
||||
self-ref (mf/use-ref)
|
||||
|
|
@ -86,9 +79,8 @@
|
|||
(fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(when (kbd/esc? event)
|
||||
(do
|
||||
(st/emit! :interrupt)
|
||||
(st/emit! dw/clear-edition-mode))))
|
||||
(st/emit! :interrupt)
|
||||
(st/emit! dw/clear-edition-mode)))
|
||||
|
||||
on-mount
|
||||
(fn []
|
||||
|
|
@ -111,7 +103,7 @@
|
|||
on-focus
|
||||
(mf/use-callback
|
||||
(mf/deps shape state)
|
||||
(fn [event]
|
||||
(fn [_]
|
||||
(reset! blured false)))
|
||||
|
||||
on-change
|
||||
|
|
@ -131,7 +123,7 @@
|
|||
|
||||
handle-return
|
||||
(mf/use-callback
|
||||
(fn [event state]
|
||||
(fn [_ state]
|
||||
(st/emit! (dwt/update-editor-state shape (ted/editor-split-block state)))
|
||||
"handled"))
|
||||
]
|
||||
|
|
@ -165,7 +157,7 @@
|
|||
{::mf/wrap [mf/memo]
|
||||
::mf/wrap-props false
|
||||
::mf/forward-ref true}
|
||||
[props ref]
|
||||
[props _]
|
||||
(let [{:keys [id x y width height grow-type] :as shape} (obj/get props "shape")
|
||||
clip-id (str "clip-" id)]
|
||||
[:g.text-editor {:clip-path (str "url(#" clip-id ")")}
|
||||
|
|
|
|||
|
|
@ -7,22 +7,18 @@
|
|||
(ns app.main.ui.workspace.sidebar.assets
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.spec :as us]
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.geom.shapes :as geom]
|
||||
[app.common.media :as cm]
|
||||
[app.common.pages :as cp]
|
||||
[app.common.spec :as us]
|
||||
[app.common.text :as txt]
|
||||
[app.common.uuid :as uuid]
|
||||
[app.config :as cfg]
|
||||
[app.main.data.workspace.colors :as dc]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.data.workspace.common :as dwc]
|
||||
[app.main.data.workspace.undo :as dwu]
|
||||
[app.main.data.workspace.colors :as dc]
|
||||
[app.main.data.workspace.libraries :as dwl]
|
||||
[app.main.data.workspace.state-helpers :as wsh]
|
||||
[app.main.data.workspace.texts :as dwt]
|
||||
[app.main.data.workspace.undo :as dwu]
|
||||
[app.main.exports :as exports]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
|
|
@ -31,17 +27,15 @@
|
|||
[app.main.ui.components.editable-label :refer [editable-label]]
|
||||
[app.main.ui.components.file-uploader :refer [file-uploader]]
|
||||
[app.main.ui.components.forms :as fm]
|
||||
[app.main.ui.components.tab-container :refer [tab-container tab-element]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.sidebar.options.menus.typography :refer [typography-entry]]
|
||||
[app.util.data :refer [matches-search]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.dom.dnd :as dnd]
|
||||
[app.util.i18n :as i18n :refer [tr t]]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[app.util.keyboard :as kbd]
|
||||
[app.util.router :as rt]
|
||||
[app.util.timers :as timers]
|
||||
[cljs.spec.alpha :as s]
|
||||
[cuerdas.core :as str]
|
||||
[okulary.core :as l]
|
||||
|
|
@ -133,7 +127,7 @@
|
|||
on-accept
|
||||
(mf/use-callback
|
||||
(mf/deps form)
|
||||
(fn [event]
|
||||
(fn [_]
|
||||
(let [asset-name (get-in @form [:clean-data :asset-name])]
|
||||
(if create?
|
||||
(accept asset-name)
|
||||
|
|
@ -219,7 +213,7 @@
|
|||
content)]))
|
||||
|
||||
(mf/defc asset-section-block
|
||||
[{:keys [children role]}]
|
||||
[{:keys [children]}]
|
||||
[:* children])
|
||||
|
||||
(mf/defc asset-group-title
|
||||
|
|
@ -352,11 +346,11 @@
|
|||
|
||||
selected-components (:components selected-assets)
|
||||
multi-components? (> (count selected-components) 1)
|
||||
multi-assets? (or (not (empty? (:graphics selected-assets)))
|
||||
(not (empty? (:colors selected-assets)))
|
||||
(not (empty? (:typographies selected-assets))))
|
||||
multi-assets? (or (seq (:graphics selected-assets))
|
||||
(seq (:colors selected-assets))
|
||||
(seq (:typographies selected-assets)))
|
||||
|
||||
groups (group-assets components)
|
||||
groups (group-assets components)
|
||||
|
||||
on-duplicate
|
||||
(mf/use-callback
|
||||
|
|
@ -603,9 +597,9 @@
|
|||
|
||||
selected-objects (:graphics selected-assets)
|
||||
multi-objects? (> (count selected-objects) 1)
|
||||
multi-assets? (or (not (empty? (:components selected-assets)))
|
||||
(not (empty? (:colors selected-assets)))
|
||||
(not (empty? (:typographies selected-assets))))
|
||||
multi-assets? (or (seq (:components selected-assets))
|
||||
(seq (:colors selected-assets))
|
||||
(seq (:typographies selected-assets)))
|
||||
|
||||
groups (group-assets objects)
|
||||
|
||||
|
|
@ -776,10 +770,8 @@
|
|||
|
||||
(mf/defc color-item
|
||||
[{:keys [color local? file-id selected-colors multi-colors? multi-assets?
|
||||
on-asset-click on-assets-delete on-clear-selection on-group
|
||||
colors locale] :as props}]
|
||||
on-asset-click on-assets-delete on-clear-selection on-group] :as props}]
|
||||
(let [rename? (= (:color-for-rename @refs/workspace-local) (:id color))
|
||||
id (:id color)
|
||||
input-ref (mf/use-ref)
|
||||
state (mf/use-state {:editing rename?})
|
||||
|
||||
|
|
@ -790,8 +782,9 @@
|
|||
(:color color) (:color color)
|
||||
:else (:value color))
|
||||
|
||||
;; TODO: looks like the first argument is not necessary
|
||||
apply-color
|
||||
(fn [color-id event]
|
||||
(fn [_ event]
|
||||
(let [ids (wsh/lookup-selected @st/state)]
|
||||
(if (kbd/shift? event)
|
||||
(st/emit! (dc/change-stroke ids color))
|
||||
|
|
@ -892,17 +885,17 @@
|
|||
{:on-close on-close-menu
|
||||
:state @menu-state
|
||||
:options [(when-not (or multi-colors? multi-assets?)
|
||||
[(t locale "workspace.assets.rename") rename-color-clicked])
|
||||
[(tr "workspace.assets.rename") rename-color-clicked])
|
||||
(when-not (or multi-colors? multi-assets?)
|
||||
[(t locale "workspace.assets.edit") edit-color-clicked])
|
||||
[(t locale "workspace.assets.delete") delete-color]
|
||||
[(tr "workspace.assets.edit") edit-color-clicked])
|
||||
[(tr "workspace.assets.delete") delete-color]
|
||||
(when-not multi-assets?
|
||||
[(tr "workspace.assets.group") (on-group (:id color))])]}])]))
|
||||
|
||||
(mf/defc colors-group
|
||||
[{:keys [file-id prefix groups open-groups local? selected-colors
|
||||
multi-colors? multi-assets? on-asset-click on-assets-delete
|
||||
on-clear-selection on-group on-rename-group on-ungroup colors locale]}]
|
||||
on-clear-selection on-group on-rename-group on-ungroup colors]}]
|
||||
(let [group-open? (get open-groups prefix true)]
|
||||
|
||||
[:*
|
||||
|
|
@ -932,8 +925,7 @@
|
|||
:on-assets-delete on-assets-delete
|
||||
:on-clear-selection on-clear-selection
|
||||
:on-group on-group
|
||||
:colors colors
|
||||
:locale locale}]))])
|
||||
:colors colors}]))])
|
||||
(for [[path-item content] groups]
|
||||
(when-not (empty? path-item)
|
||||
[:& colors-group {:file-id file-id
|
||||
|
|
@ -950,24 +942,23 @@
|
|||
:on-group on-group
|
||||
:on-rename-group on-rename-group
|
||||
:on-ungroup on-ungroup
|
||||
:colors colors
|
||||
:locale locale}]))])]))
|
||||
:colors colors}]))])]))
|
||||
|
||||
(mf/defc colors-box
|
||||
[{:keys [file-id local? colors locale open? open-groups selected-assets
|
||||
[{:keys [file-id local? colors open? open-groups selected-assets
|
||||
on-asset-click on-assets-delete on-clear-selection] :as props}]
|
||||
(let [selected-colors (:colors selected-assets)
|
||||
multi-colors? (> (count selected-colors) 1)
|
||||
multi-assets? (or (not (empty? (:components selected-assets)))
|
||||
(not (empty? (:graphics selected-assets)))
|
||||
(not (empty? (:typographies selected-assets))))
|
||||
multi-assets? (or (seq (:components selected-assets))
|
||||
(seq (:graphics selected-assets))
|
||||
(seq (:typographies selected-assets)))
|
||||
|
||||
groups (group-assets colors)
|
||||
groups (group-assets colors)
|
||||
|
||||
add-color
|
||||
(mf/use-callback
|
||||
(mf/deps file-id)
|
||||
(fn [value opacity]
|
||||
(fn [value _opacity]
|
||||
(st/emit! (dwl/add-color value))))
|
||||
|
||||
add-color-clicked
|
||||
|
|
@ -1072,8 +1063,7 @@
|
|||
:on-group on-group
|
||||
:on-rename-group on-rename-group
|
||||
:on-ungroup on-ungroup
|
||||
:colors colors
|
||||
:locale locale}]]]))
|
||||
:colors colors}]]]))
|
||||
|
||||
;; ---- Typography box ----
|
||||
|
||||
|
|
@ -1127,7 +1117,7 @@
|
|||
:on-context-menu on-context-menu}]))])]))
|
||||
|
||||
(mf/defc typographies-box
|
||||
[{:keys [file file-id local? typographies locale open? open-groups selected-assets
|
||||
[{:keys [file file-id local? typographies open? open-groups selected-assets
|
||||
on-asset-click on-assets-delete on-clear-selection] :as props}]
|
||||
(let [state (mf/use-state {:detail-open? false
|
||||
:id nil})
|
||||
|
|
@ -1140,14 +1130,14 @@
|
|||
|
||||
selected-typographies (:typographies selected-assets)
|
||||
multi-typographies? (> (count selected-typographies) 1)
|
||||
multi-assets? (or (not (empty? (:components selected-assets)))
|
||||
(not (empty? (:graphics selected-assets)))
|
||||
(not (empty? (:colors selected-assets))))
|
||||
multi-assets? (or (seq (:components selected-assets))
|
||||
(seq (:graphics selected-assets))
|
||||
(seq (:colors selected-assets)))
|
||||
|
||||
add-typography
|
||||
(mf/use-callback
|
||||
(mf/deps file-id)
|
||||
(fn [value opacity]
|
||||
(fn [_]
|
||||
(st/emit! (dwl/add-typography txt/default-typography))))
|
||||
|
||||
handle-change
|
||||
|
|
@ -1157,7 +1147,7 @@
|
|||
(st/emit! (dwl/update-typography (merge typography changes) file-id))))
|
||||
|
||||
apply-typography
|
||||
(fn [typography event]
|
||||
(fn [typography _event]
|
||||
(let [ids (wsh/lookup-selected @st/state)
|
||||
attrs (merge
|
||||
{:typography-ref-file file-id
|
||||
|
|
@ -1243,11 +1233,6 @@
|
|||
(fn []
|
||||
(swap! menu-state close-auto-pos-menu)))
|
||||
|
||||
closed-typography-edit
|
||||
(mf/use-callback
|
||||
(mf/deps file-id)
|
||||
(fn [event] ))
|
||||
|
||||
handle-rename-typography-clicked
|
||||
(fn []
|
||||
(st/emit! #(assoc-in % [:workspace-local :rename-typography] (:id @state))))
|
||||
|
|
@ -1307,10 +1292,10 @@
|
|||
{:on-close on-close-menu
|
||||
:state @menu-state
|
||||
:options [(when-not (or multi-typographies? multi-assets?)
|
||||
[(t locale "workspace.assets.rename") handle-rename-typography-clicked])
|
||||
[(tr "workspace.assets.rename") handle-rename-typography-clicked])
|
||||
(when-not (or multi-typographies? multi-assets?)
|
||||
[(t locale "workspace.assets.edit") handle-edit-typography-clicked])
|
||||
[(t locale "workspace.assets.delete") handle-delete-typography]
|
||||
[(tr "workspace.assets.edit") handle-edit-typography-clicked])
|
||||
[(tr "workspace.assets.delete") handle-delete-typography]
|
||||
(when-not multi-assets?
|
||||
[(tr "workspace.assets.group") on-group])]}])]]))
|
||||
|
||||
|
|
@ -1322,7 +1307,7 @@
|
|||
(l/derived (fn [state]
|
||||
(let [wfile (:workspace-data state)]
|
||||
(if (= (:id wfile) id)
|
||||
(vals (get-in wfile [:colors]))
|
||||
(vals (get wfile :colors))
|
||||
(vals (get-in state [:workspace-libraries id :data :colors])))))
|
||||
st/state =))
|
||||
|
||||
|
|
@ -1331,7 +1316,7 @@
|
|||
(l/derived (fn [state]
|
||||
(let [wfile (:workspace-data state)]
|
||||
(if (= (:id wfile) id)
|
||||
(vals (get-in wfile [:media]))
|
||||
(vals (get wfile :media))
|
||||
(vals (get-in state [:workspace-libraries id :data :media])))))
|
||||
st/state =))
|
||||
|
||||
|
|
@ -1340,7 +1325,7 @@
|
|||
(l/derived (fn [state]
|
||||
(let [wfile (:workspace-data state)]
|
||||
(if (= (:id wfile) id)
|
||||
(vals (get-in wfile [:components]))
|
||||
(vals (get wfile :components))
|
||||
(vals (get-in state [:workspace-libraries id :data :components])))))
|
||||
st/state =))
|
||||
|
||||
|
|
@ -1349,7 +1334,7 @@
|
|||
(l/derived (fn [state]
|
||||
(let [wfile (:workspace-data state)]
|
||||
(if (= (:id wfile) id)
|
||||
(vals (get-in wfile [:typographies]))
|
||||
(vals (get wfile :typographies))
|
||||
(vals (get-in state [:workspace-libraries id :data :typographies])))))
|
||||
st/state =))
|
||||
|
||||
|
|
@ -1374,7 +1359,7 @@
|
|||
comp-fn))))
|
||||
|
||||
(mf/defc file-library
|
||||
[{:keys [file local? default-open? filters locale] :as props}]
|
||||
[{:keys [file local? default-open? filters] :as props}]
|
||||
(let [open-file (mf/deref (open-file-ref (:id file)))
|
||||
open? (-> open-file
|
||||
:library
|
||||
|
|
@ -1425,23 +1410,23 @@
|
|||
|
||||
toggle-sort
|
||||
(mf/use-callback
|
||||
(fn [event]
|
||||
(swap! reverse-sort? not)))
|
||||
(fn [_]
|
||||
(swap! reverse-sort? not)))
|
||||
|
||||
toggle-listing
|
||||
(mf/use-callback
|
||||
(fn [event]
|
||||
(swap! listing-thumbs? not)))
|
||||
(fn [_]
|
||||
(swap! listing-thumbs? not)))
|
||||
|
||||
toggle-selected-asset
|
||||
(mf/use-callback
|
||||
(mf/deps @selected-assets)
|
||||
(fn [asset-type asset-id]
|
||||
(swap! selected-assets update asset-type
|
||||
(fn [selected]
|
||||
(if (contains? selected asset-id)
|
||||
(disj selected asset-id)
|
||||
(conj selected asset-id))))))
|
||||
(mf/deps @selected-assets)
|
||||
(fn [asset-type asset-id]
|
||||
(swap! selected-assets update asset-type
|
||||
(fn [selected]
|
||||
(if (contains? selected asset-id)
|
||||
(disj selected asset-id)
|
||||
(conj selected asset-id))))))
|
||||
|
||||
extend-selected-assets
|
||||
(mf/use-callback
|
||||
|
|
@ -1453,7 +1438,7 @@
|
|||
(get groups "" [])
|
||||
(reduce concat
|
||||
[]
|
||||
(->> (filter #(not (empty? (first %))) groups)
|
||||
(->> (filter #(seq (first %)) groups)
|
||||
(map second)
|
||||
(map flatten-groups)))))]
|
||||
(swap! selected-assets update asset-type
|
||||
|
|
@ -1504,17 +1489,16 @@
|
|||
(mf/use-callback
|
||||
(mf/deps @selected-assets)
|
||||
(fn []
|
||||
(do
|
||||
(st/emit! (dwu/start-undo-transaction))
|
||||
(apply st/emit! (map #(dwl/delete-component {:id %})
|
||||
(:components @selected-assets)))
|
||||
(apply st/emit! (map #(dwl/delete-media {:id %})
|
||||
(:graphics @selected-assets)))
|
||||
(apply st/emit! (map #(dwl/delete-color {:id %})
|
||||
(:colors @selected-assets)))
|
||||
(apply st/emit! (map #(dwl/delete-typography %)
|
||||
(:typographies @selected-assets)))
|
||||
(st/emit! (dwu/commit-undo-transaction)))))]
|
||||
(st/emit! (dwu/start-undo-transaction))
|
||||
(apply st/emit! (map #(dwl/delete-component {:id %})
|
||||
(:components @selected-assets)))
|
||||
(apply st/emit! (map #(dwl/delete-media {:id %})
|
||||
(:graphics @selected-assets)))
|
||||
(apply st/emit! (map #(dwl/delete-color {:id %})
|
||||
(:colors @selected-assets)))
|
||||
(apply st/emit! (map #(dwl/delete-typography %)
|
||||
(:typographies @selected-assets)))
|
||||
(st/emit! (dwu/commit-undo-transaction))))]
|
||||
|
||||
[:div.tool-window {:on-context-menu #(dom/prevent-default %)
|
||||
:on-click unselect-all}
|
||||
|
|
@ -1526,9 +1510,9 @@
|
|||
|
||||
(if local?
|
||||
[:*
|
||||
[:span (t locale "workspace.assets.file-library")]
|
||||
[:span (tr "workspace.assets.file-library")]
|
||||
(when shared?
|
||||
[:span.tool-badge (t locale "workspace.assets.shared")])]
|
||||
[:span.tool-badge (tr "workspace.assets.shared")])]
|
||||
[:*
|
||||
[:span (:name file)]
|
||||
[:span.tool-link.tooltip.tooltip-left {:alt "Open library file"}
|
||||
|
|
@ -1594,7 +1578,6 @@
|
|||
(when show-colors?
|
||||
[:& colors-box {:file-id (:id file)
|
||||
:local? local?
|
||||
:locale locale
|
||||
:colors colors
|
||||
:open? (open-box? :colors)
|
||||
:open-groups (open-groups :colors)
|
||||
|
|
@ -1607,7 +1590,6 @@
|
|||
[:& typographies-box {:file file
|
||||
:file-id (:id file)
|
||||
:local? local?
|
||||
:locale locale
|
||||
:typographies typographies
|
||||
:open? (open-box? :typographies)
|
||||
:open-groups (open-groups :typographies)
|
||||
|
|
@ -1618,7 +1600,7 @@
|
|||
|
||||
(when (and (not show-components?) (not show-graphics?) (not show-colors?))
|
||||
[:div.asset-section
|
||||
[:div.asset-title (t locale "workspace.assets.not-found")]])]))]))
|
||||
[:div.asset-title (tr "workspace.assets.not-found")]])]))]))
|
||||
|
||||
|
||||
(mf/defc assets-toolbox
|
||||
|
|
@ -1627,7 +1609,6 @@
|
|||
(vals)
|
||||
(remove :is-indirect))
|
||||
file (mf/deref refs/workspace-file)
|
||||
locale (mf/deref i18n/locale)
|
||||
team-id (mf/use-ctx ctx/current-team-id)
|
||||
filters (mf/use-state {:term "" :box :all})
|
||||
|
||||
|
|
@ -1641,7 +1622,7 @@
|
|||
on-search-clear-click
|
||||
(mf/use-callback
|
||||
(mf/deps team-id)
|
||||
(fn [event]
|
||||
(fn [_]
|
||||
(swap! filters assoc :term "")))
|
||||
|
||||
on-box-filter-change
|
||||
|
|
@ -1657,10 +1638,10 @@
|
|||
[:div.tool-window
|
||||
[:div.tool-window-content
|
||||
[:div.assets-bar-title
|
||||
(t locale "workspace.assets.assets")
|
||||
(tr "workspace.assets.assets")
|
||||
[:div.libraries-button {:on-click #(modal/show! :libraries-dialog {})}
|
||||
i/text-align-justify
|
||||
(t locale "workspace.assets.libraries")]]
|
||||
(tr "workspace.assets.libraries")]]
|
||||
|
||||
[:div.search-block
|
||||
[:input.search-input
|
||||
|
|
@ -1677,16 +1658,15 @@
|
|||
|
||||
[:select.input-select {:value (:box @filters)
|
||||
:on-change on-box-filter-change}
|
||||
[:option {:value ":all"} (t locale "workspace.assets.box-filter-all")]
|
||||
[:option {:value ":components"} (t locale "workspace.assets.components")]
|
||||
[:option {:value ":graphics"} (t locale "workspace.assets.graphics")]
|
||||
[:option {:value ":colors"} (t locale "workspace.assets.colors")]
|
||||
[:option {:value ":typographies"} (t locale "workspace.assets.typography")]]]]
|
||||
[:option {:value ":all"} (tr "workspace.assets.box-filter-all")]
|
||||
[:option {:value ":components"} (tr "workspace.assets.components")]
|
||||
[:option {:value ":graphics"} (tr "workspace.assets.graphics")]
|
||||
[:option {:value ":colors"} (tr "workspace.assets.colors")]
|
||||
[:option {:value ":typographies"} (tr "workspace.assets.typography")]]]]
|
||||
|
||||
[:div.libraries-wrapper
|
||||
[:& file-library
|
||||
{:file file
|
||||
:locale locale
|
||||
:local? true
|
||||
:default-open? true
|
||||
:filters @filters}]
|
||||
|
|
@ -1697,7 +1677,6 @@
|
|||
{:key (:id file)
|
||||
:file file
|
||||
:local? false
|
||||
:locale locale
|
||||
:default-open? false
|
||||
:filters @filters}])]]))
|
||||
|
||||
|
|
|
|||
|
|
@ -6,20 +6,15 @@
|
|||
|
||||
(ns app.main.ui.workspace.sidebar.history
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[cuerdas.core :as str]
|
||||
[app.common.data :as d]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.util.data :refer [read-string]]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :refer [t] :as i18n]
|
||||
[app.util.router :as r]
|
||||
[app.util.time :as dt]
|
||||
[cuerdas.core :as str]
|
||||
[okulary.core :as l]
|
||||
[app.main.store :as st]))
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(def workspace-undo
|
||||
(l/derived :workspace-undo st/state))
|
||||
|
|
@ -136,7 +131,7 @@
|
|||
i/layers))
|
||||
|
||||
(defn is-shape? [type]
|
||||
#{:shape :rect :circle :text :path :frame :group})
|
||||
(contains? #{:shape :rect :circle :text :path :frame :group} type))
|
||||
|
||||
(defn parse-entry [{:keys [redo-changes]}]
|
||||
(->> redo-changes
|
||||
|
|
@ -210,7 +205,7 @@
|
|||
:modify (->> candidates
|
||||
(filter #(= :modify (:operation %)))
|
||||
(group-by :id)
|
||||
(d/mapm (fn [k v] (->> v
|
||||
(d/mapm (fn [_ v] (->> v
|
||||
(mapcat :detail)
|
||||
(map (comp safe-name :attr))
|
||||
(remove nil?)
|
||||
|
|
@ -279,7 +274,7 @@
|
|||
(mf/defc history-toolbox []
|
||||
(let [locale (mf/deref i18n/locale)
|
||||
objects (mf/deref refs/workspace-page-objects)
|
||||
{:keys [items index transaction]} (mf/deref workspace-undo)
|
||||
{:keys [items index]} (mf/deref workspace-undo)
|
||||
entries (parse-entries items objects)]
|
||||
[:div.history-toolbox
|
||||
[:div.history-toolbox-title (t locale "workspace.undo.title")]
|
||||
|
|
|
|||
|
|
@ -16,12 +16,9 @@
|
|||
[app.main.ui.hooks :as hooks]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [t]]
|
||||
[app.util.keyboard :as kbd]
|
||||
[app.util.object :as obj]
|
||||
[app.util.perf :as perf]
|
||||
[app.util.timers :as ts]
|
||||
[beicon.core :as rx]
|
||||
[okulary.core :as l]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
|
|
@ -175,7 +172,7 @@
|
|||
(st/emit! (dw/select-shape id))))
|
||||
|
||||
on-drop
|
||||
(fn [side {:keys [id] :as data}]
|
||||
(fn [side _data]
|
||||
(if (= side :center)
|
||||
(st/emit! (dw/relocate-selected-shapes (:id item) 0))
|
||||
(let [to-index (if (= side :top) (inc index) index)
|
||||
|
|
|
|||
|
|
@ -6,13 +6,11 @@
|
|||
|
||||
(ns app.main.ui.workspace.sidebar.options
|
||||
(:require
|
||||
[app.common.spec :as us]
|
||||
[app.main.data.workspace :as udw]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.tab-container :refer [tab-container tab-element]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.sidebar.align :refer [align-options]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.exports :refer [exports-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.interactions :refer [interactions-menu]]
|
||||
|
|
@ -26,9 +24,8 @@
|
|||
[app.main.ui.workspace.sidebar.options.shapes.rect :as rect]
|
||||
[app.main.ui.workspace.sidebar.options.shapes.svg-raw :as svg-raw]
|
||||
[app.main.ui.workspace.sidebar.options.shapes.text :as text]
|
||||
[app.util.i18n :as i18n :refer [tr t]]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[app.util.object :as obj]
|
||||
[beicon.core :as rx]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
;; --- Options
|
||||
|
|
@ -52,32 +49,30 @@
|
|||
:page-id page-id
|
||||
:file-id file-id}]])
|
||||
|
||||
|
||||
(mf/defc options-content
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [selected section shapes shapes-with-children page-id file-id]}]
|
||||
(let [locale (mf/deref i18n/locale)]
|
||||
[:div.tool-window
|
||||
[:div.tool-window-content
|
||||
[:& tab-container {:on-change-tab #(st/emit! (udw/set-options-mode %))
|
||||
:selected section}
|
||||
[:& tab-element {:id :design
|
||||
:title (t locale "workspace.options.design")}
|
||||
[:div.element-options
|
||||
[:& align-options]
|
||||
(case (count selected)
|
||||
0 [:& page/options]
|
||||
1 [:& shape-options {:shape (first shapes)
|
||||
:page-id page-id
|
||||
:file-id file-id
|
||||
:shapes-with-children shapes-with-children}]
|
||||
[:& multiple/options {:shapes-with-children shapes-with-children
|
||||
:shapes shapes}])]]
|
||||
[:div.tool-window
|
||||
[:div.tool-window-content
|
||||
[:& tab-container {:on-change-tab #(st/emit! (udw/set-options-mode %))
|
||||
:selected section}
|
||||
[:& tab-element {:id :design
|
||||
:title (tr "workspace.options.design")}
|
||||
[:div.element-options
|
||||
[:& align-options]
|
||||
(case (count selected)
|
||||
0 [:& page/options]
|
||||
1 [:& shape-options {:shape (first shapes)
|
||||
:page-id page-id
|
||||
:file-id file-id
|
||||
:shapes-with-children shapes-with-children}]
|
||||
[:& multiple/options {:shapes-with-children shapes-with-children
|
||||
:shapes shapes}])]]
|
||||
|
||||
[:& tab-element {:id :prototype
|
||||
:title (t locale "workspace.options.prototype")}
|
||||
[:div.element-options
|
||||
[:& interactions-menu {:shape (first shapes)}]]]]]]))
|
||||
[:& tab-element {:id :prototype
|
||||
:title (tr "workspace.options.prototype")}
|
||||
[:div.element-options
|
||||
[:& interactions-menu {:shape (first shapes)}]]]]]])
|
||||
|
||||
|
||||
;; TODO: this need optimizations, selected-objects and
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue