3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-14 04:46:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Fix linter issues on frontend (part 6).

Browse source
This commit is contained in:
Andrey Antukh 2021-06-18 10:23:03 +02:00 • committed by Andrés Moya
parent 0f3e4c289c
commit e796c3dfba
55 changed files with 629 additions and 771 deletions
Download patch file Download diff file Expand all files Collapse all files

10
.clj-kondo/config.edn
View file

@ -7,14 +7,17 @@
:hooks :hooks
{:analyze-call {app.common.data/export hooks.export/export {:analyze-call {app.common.data/export hooks.export/export
potok.core/reify hooks.export/potok-reify}} potok.core/reify hooks.export/potok-reify
cljs.core/specify! hooks.export/clojure-specify}}
:output :output
{:exclude-files {:exclude-files
["data_readers.clj" ["data_readers.clj"
"app/util/perf.cljs" "app/util/perf.cljs"
"app/common/exceptions.cljc"
"app/util/import/.*" "app/util/import/.*"
"app/worker/.*" "app/worker/export.cljs"
"app/worker/import.cljs"
"app/libs/.*" "app/libs/.*"
"app/main/data/workspace/path/selection.cljs" "app/main/data/workspace/path/selection.cljs"
"app/main/data/workspace/transforms.cljs" "app/main/data/workspace/transforms.cljs"
@ -31,6 +34,9 @@
:single-key-in :single-key-in
{:level :warning} {:level :warning}
:redundant-do
{:level :off}
:unused-binding :unused-binding
{:exclude-destructured-as true {:exclude-destructured-as true
:exclude-destructured-keys-in-fn-args false :exclude-destructured-keys-in-fn-args false

9
.clj-kondo/hooks/export.clj
View file

@ -19,3 +19,12 @@
(api/vector-node [])] (api/vector-node [])]
other))] other))]
{:node result})) {:node result}))
(defn clojure-specify
[{:keys [:node]}]
(let [[rnode rtype & other] (:children node)
result (api/list-node
(into [(api/token-node (symbol "extend-type"))
(api/token-node (gensym (:string-value rtype)))]
other))]
{:node result}))

6
common/src/app/common/data.cljc
View file

@ -11,8 +11,8 @@
(:require-macros [app.common.data])) (:require-macros [app.common.data]))
(:require (:require
[app.common.math :as mth] [app.common.math :as mth]
[cljs.analyzer.api :as aapi]
[clojure.set :as set] [clojure.set :as set]
#?(:clj [cljs.analyzer.api :as aapi])
#?(:cljs [cljs.reader :as r] #?(:cljs [cljs.reader :as r]
:clj [clojure.edn :as r]) :clj [clojure.edn :as r])
#?(:cljs [cljs.core :as core] #?(:cljs [cljs.core :as core]
@ -275,7 +275,7 @@
;; Data Parsing / Conversion ;; Data Parsing / Conversion
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn- nan? (defn nan?
[v] [v]
(not= v v)) (not= v v))
@ -506,7 +506,7 @@
(defn- extract-numeric-suffix (defn- extract-numeric-suffix
[basename] [basename]
(if-let [[match p1 p2] (re-find #"(.*)-([0-9]+)$" basename)] (if-let [[_ p1 p2] (re-find #"(.*)-([0-9]+)$" basename)]
[p1 (+ 1 (parse-integer p2))] [p1 (+ 1 (parse-integer p2))]
[basename 1])) [basename 1]))

11
common/src/app/common/geom/matrix.cljc
View file

@ -31,7 +31,7 @@
(defn str->matrix (defn str->matrix
[matrix-str] [matrix-str]
(let [params (->> (re-seq number-regex matrix-str) (let [params (->> (re-seq number-regex matrix-str)
(filter #(-> % first empty? not)) (filter #(-> % first seq))
(map (comp d/parse-double first)))] (map (comp d/parse-double first)))]
(apply matrix params))) (apply matrix params)))
@ -52,12 +52,11 @@
"Given two TRANSLATE matrixes (only e and f have significative "Given two TRANSLATE matrixes (only e and f have significative
values), combine them. Quicker than multiplying them, for this values), combine them. Quicker than multiplying them, for this
precise case." precise case."
([{m1a :a m1b :b m1c :c m1d :d m1e :e m1f :f} ([{m1e :e m1f :f} {m2e :e m2f :f}]
{m2a :a m2b :b m2c :c m2d :d m2e :e m2f :f}]
(Matrix. (Matrix.
1 1
0 0
0 0
1 1
(+ m1e m2e) (+ m1e m2e)
(+ m1f m2f))) (+ m1f m2f)))

7
common/src/app/common/pages/changes.cljc
View file

@ -32,13 +32,10 @@
(when verify? (when verify?
(us/assert ::spec/changes items)) (us/assert ::spec/changes items))
(let [pages (into #{} (map :page-id) items) (let [result (reduce #(or (process-change %1 %2) %1) data items)]
result (->> items
(reduce #(or (process-change %1 %2) %1) data))]
;; Validate result shapes (only on the backend) ;; Validate result shapes (only on the backend)
#?(:clj #?(:clj
(doseq [page-id pages] (doseq [page-id (into #{} (map :page-id) items)]
(let [page (get-in result [:pages-index page-id])] (let [page (get-in result [:pages-index page-id])]
(doseq [[id shape] (:objects page)] (doseq [[id shape] (:objects page)]
(when-not (= shape (get-in data [:pages-index page-id :objects id])) (when-not (= shape (get-in data [:pages-index page-id :objects id]))

10
common/src/app/common/pages/spec.cljc
View file

@ -395,11 +395,11 @@
:internal.media-object/mtype])) :internal.media-object/mtype]))
(s/def ::media-object-update (s/def ::media-object-update
(s/keys :req-un [::id] (s/keys :req-un [::id]
:req-opt [::name :opt-un [::name
:internal.media-object/width :internal.media-object/width
:internal.media-object/height :internal.media-object/height
:internal.media-object/mtype])) :internal.media-object/mtype]))
(s/def :internal.file/colors (s/def :internal.file/colors
(s/map-of ::uuid ::color)) (s/map-of ::uuid ::color))

4
common/src/app/common/spec.cljc
View file

@ -15,11 +15,11 @@
;; NOTE: don't remove this, causes exception on advanced build ;; NOTE: don't remove this, causes exception on advanced build
;; because of some strange interaction with cljs.spec.alpha and ;; because of some strange interaction with cljs.spec.alpha and
;; modules spliting. ;; modules spliting.
[expound.alpha]
[app.common.exceptions :as ex] [app.common.exceptions :as ex]
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[cuerdas.core :as str])) [cuerdas.core :as str]
[expound.alpha]))
(s/check-asserts true) (s/check-asserts true)

2
common/src/app/common/uuid.cljc
View file

@ -7,7 +7,7 @@
(ns app.common.uuid (ns app.common.uuid
(:refer-clojure :exclude [next uuid zero?]) (:refer-clojure :exclude [next uuid zero?])
(:require (:require
[app.common.data :as d] #?(:clj [app.common.data :as d])
#?(:clj [clj-uuid :as impl]) #?(:clj [clj-uuid :as impl])
#?(:clj [clojure.core :as c]) #?(:clj [clojure.core :as c])
#?(:cljs [app.common.uuid-impl :as impl]) #?(:cljs [app.common.uuid-impl :as impl])

2
frontend/src/app/main/snap.cljs
View file

@ -45,7 +45,7 @@
(apply min-key first) (apply min-key first)
second))) second)))
(defn- snap-frame-id [shapes] (defn snap-frame-id [shapes]
(let [frames (into #{} (map :frame-id shapes))] (let [frames (into #{} (map :frame-id shapes))]
(cond (cond
;; Only shapes from one frame. The common is the only one ;; Only shapes from one frame. The common is the only one

30
frontend/src/app/main/ui.cljs
View file

@ -6,15 +6,12 @@
(ns app.main.ui (ns app.main.ui
(:require (:require
[app.config :as cf]
[app.common.data :as d]
[app.common.exceptions :as ex] [app.common.exceptions :as ex]
[app.common.spec :as us] [app.common.spec :as us]
[app.common.uuid :as uuid] [app.config :as cf]
[app.config :as cfg]
[app.main.data.users :as du]
[app.main.data.messages :as dm]
[app.main.data.events :as ev] [app.main.data.events :as ev]
[app.main.data.messages :as dm]
[app.main.data.users :as du]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.auth :refer [auth]] [app.main.ui.auth :refer [auth]]
@ -32,8 +29,6 @@
[app.main.ui.static :as static] [app.main.ui.static :as static]
[app.main.ui.viewer :refer [viewer-page]] [app.main.ui.viewer :refer [viewer-page]]
[app.main.ui.workspace :as workspace] [app.main.ui.workspace :as workspace]
[app.util.i18n :as i18n :refer [tr t]]
[app.util.router :as rt]
[app.util.timers :as ts] [app.util.timers :as ts]
[cljs.pprint :refer [pprint]] [cljs.pprint :refer [pprint]]
[cljs.spec.alpha :as s] [cljs.spec.alpha :as s]
@ -60,11 +55,11 @@
(def routes (def routes
[["/auth" [["/auth"
["/login" :auth-login] ["/login" :auth-login]
(when cfg/registration-enabled (when cf/registration-enabled
["/register" :auth-register]) ["/register" :auth-register])
(when cfg/registration-enabled (when cf/registration-enabled
["/register/validate" :auth-register-validate]) ["/register/validate" :auth-register-validate])
(when cfg/registration-enabled (when cf/registration-enabled
["/register/success" :auth-register-success]) ["/register/success" :auth-register-success])
["/recovery/request" :auth-recovery-request] ["/recovery/request" :auth-recovery-request]
["/recovery" :auth-recovery] ["/recovery" :auth-recovery]
@ -102,9 +97,8 @@
(mf/defc on-main-error (mf/defc on-main-error
[{:keys [error] :as props}] [{:keys [error] :as props}]
(let [data (ex-data error)] (mf/use-effect #(ptk/handle-error error))
(mf/use-effect #(ptk/handle-error error)) [:span "Internal application errror"])
[:span "Internal application errror"]))
(mf/defc main-page (mf/defc main-page
{::mf/wrap [#(mf/catch % {:fallback on-main-error})]} {::mf/wrap [#(mf/catch % {:fallback on-main-error})]}
@ -211,14 +205,14 @@
(derive :service-unavailable ::exceptional-state) (derive :service-unavailable ::exceptional-state)
(defmethod ptk/handle-error ::exceptional-state (defmethod ptk/handle-error ::exceptional-state
[{:keys [status] :as error}] [error]
(ts/schedule (ts/schedule
(st/emitf (dm/assign-exception error)))) (st/emitf (dm/assign-exception error))))
;; We receive a explicit authentication error; this explicitly clears ;; We receive a explicit authentication error; this explicitly clears
;; all profile data and redirect the user to the login page. ;; all profile data and redirect the user to the login page.
(defmethod ptk/handle-error :authentication (defmethod ptk/handle-error :authentication
[error] [_]
(ts/schedule (st/emitf (du/logout)))) (ts/schedule (st/emitf (du/logout))))
;; Error that happens on an active bussines model validation does not ;; Error that happens on an active bussines model validation does not
@ -245,7 +239,7 @@
;; Error on parsing an SVG ;; Error on parsing an SVG
(defmethod ptk/handle-error :svg-parser (defmethod ptk/handle-error :svg-parser
[error] [_]
(ts/schedule (ts/schedule
(st/emitf (st/emitf
(dm/show {:content "SVG is invalid or malformed" (dm/show {:content "SVG is invalid or malformed"
@ -261,7 +255,7 @@
context (str/fmt "ns: '%s'\nname: '%s'\nfile: '%s:%s'" context (str/fmt "ns: '%s'\nname: '%s'\nfile: '%s:%s'"
(:ns context) (:ns context)
(:name context) (:name context)
(str cfg/public-uri "js/cljs-runtime/" (:file context)) (str cf/public-uri "js/cljs-runtime/" (:file context))
(:line context))] (:line context))]
(ts/schedule (ts/schedule
(st/emitf (st/emitf

6
frontend/src/app/main/ui/auth/register.cljs
View file

@ -68,7 +68,7 @@
(st/emit! (dm/error (tr "errors.generic"))))) (st/emit! (dm/error (tr "errors.generic")))))
(defn- handle-prepare-register-success (defn- handle-prepare-register-success
[form {:keys [token] :as result}] [_form {:keys [token] :as result}]
(st/emit! (rt/nav :auth-register-validate {} {:token token}))) (st/emit! (rt/nav :auth-register-validate {} {:token token})))
(mf/defc register-form (mf/defc register-form
@ -163,7 +163,7 @@
(st/emit! (dm/error (tr "errors.generic")))))) (st/emit! (dm/error (tr "errors.generic"))))))
(defn- handle-register-success (defn- handle-register-success
[form data] [_form data]
(cond (cond
(some? (:invitation-token data)) (some? (:invitation-token data))
(let [token (:invitation-token data)] (let [token (:invitation-token data)]
@ -197,7 +197,7 @@
on-submit on-submit
(mf/use-callback (mf/use-callback
(fn [form event] (fn [form _event]
(reset! submitted? true) (reset! submitted? true)
(let [params (:clean-data @form)] (let [params (:clean-data @form)]
(->> (rp/mutation :register-profile params) (->> (rp/mutation :register-profile params)

10
frontend/src/app/main/ui/workspace/sidebar/options/common.cljs
View file

@ -6,14 +6,10 @@
(ns app.main.ui.workspace.sidebar.options.common (ns app.main.ui.workspace.sidebar.options.common
(:require (:require
[rumext.alpha :as mf] [rumext.alpha :as mf]))
[app.util.dom :as dom]))
(mf/defc advanced-options [{:keys [visible? on-close children]}] (mf/defc advanced-options [{:keys [visible? children]}]
(let [ref (mf/use-ref nil) (let [ref (mf/use-ref nil)]
handle-click (fn [event] (when on-close
(do (dom/stop-propagation event)
(on-close))))]
(mf/use-effect (mf/use-effect
(mf/deps visible?) (mf/deps visible?)
(fn [] (fn []

18
frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs
View file

@ -6,16 +6,13 @@
(ns app.main.ui.workspace.sidebar.options.menus.blur (ns app.main.ui.workspace.sidebar.options.menus.blur
(:require (:require
[rumext.alpha :as mf]
[app.common.data :as d]
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.main.data.workspace.common :as dwc]
[app.main.data.workspace.changes :as dch] [app.main.data.workspace.changes :as dch]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.rows.input-row :refer [input-row]] [app.main.ui.workspace.sidebar.options.rows.input-row :refer [input-row]]
[app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]]
[app.util.i18n :as i18n :refer [t]])) [rumext.alpha :as mf]))
(def blur-attrs [:blur]) (def blur-attrs [:blur])
@ -27,8 +24,7 @@
:hidden false})) :hidden false}))
(mf/defc blur-menu [{:keys [ids type values]}] (mf/defc blur-menu [{:keys [ids type values]}]
(let [locale (i18n/use-locale) (let [blur (:blur values)
blur (:blur values)
has-value? (not (nil? blur)) has-value? (not (nil? blur))
multiple? (= blur :multiple) multiple? (= blur :multiple)
@ -59,9 +55,9 @@
[:div.element-set-title [:div.element-set-title
[:span [:span
(case type (case type
:multiple (t locale "workspace.options.blur-options.title.multiple") :multiple (tr "workspace.options.blur-options.title.multiple")
:group (t locale "workspace.options.blur-options.title.group") :group (tr "workspace.options.blur-options.title.group")
(t locale "workspace.options.blur-options.title"))] (tr "workspace.options.blur-options.title"))]
[:div.element-set-title-actions [:div.element-set-title-actions
(when (and has-value? (not multiple?)) (when (and has-value? (not multiple?))
@ -78,5 +74,5 @@
:class "pixels" :class "pixels"
:min 0 :min 0
:value (:value blur) :value (:value blur)
:placeholder (t locale "settings.multiple") :placeholder (tr "settings.multiple")
:on-change handle-change}]])])) :on-change handle-change}]])]))

13
frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
View file

@ -6,20 +6,19 @@
(ns app.main.ui.workspace.sidebar.options.menus.component (ns app.main.ui.workspace.sidebar.options.menus.component
(:require (:require
[rumext.alpha :as mf]
[app.common.pages :as cp] [app.common.pages :as cp]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.data.workspace :as dw]
[app.main.data.workspace.libraries :as dwl]
[app.main.data.workspace.undo :as dwu]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.context-menu :refer [context-menu]]
[app.main.ui.context :as ctx] [app.main.ui.context :as ctx]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.components.context-menu :refer [context-menu]] [app.util.dom :as dom]
[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.util.i18n :as i18n :refer [t]] [app.util.i18n :as i18n :refer [t]]
[app.util.dom :as dom])) [rumext.alpha :as mf]))
(def component-attrs [:component-id :component-file :shape-ref]) (def component-attrs [:component-id :component-file :shape-ref])

24
frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
View file

@ -6,19 +6,16 @@
(ns app.main.ui.workspace.sidebar.options.menus.exports (ns app.main.ui.workspace.sidebar.options.menus.exports
(:require (:require
[cuerdas.core :as str]
[beicon.core :as rx]
[rumext.alpha :as mf]
[app.common.data :as d] [app.common.data :as d]
[app.main.repo :as rp]
[app.main.ui.icons :as i]
[app.main.data.messages :as dm] [app.main.data.messages :as dm]
[app.main.data.workspace :as udw] [app.main.data.workspace :as udw]
[app.main.repo :as rp]
[app.main.store :as st] [app.main.store :as st]
[app.util.object :as obj] [app.main.ui.icons :as i]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.http :as http] [app.util.i18n :as i18n :refer [tr]]
[app.util.i18n :as i18n :refer [tr t]])) [beicon.core :as rx]
[rumext.alpha :as mf]))
(defn request-export (defn request-export
[shape exports] [shape exports]
@ -31,8 +28,7 @@
(mf/defc exports-menu (mf/defc exports-menu
[{:keys [shape page-id file-id] :as props}] [{:keys [shape page-id file-id] :as props}]
(let [locale (mf/deref i18n/locale) (let [exports (:exports shape [])
exports (:exports shape [])
loading? (mf/use-state false) loading? (mf/use-state false)
filename (cond-> (:name shape) filename (cond-> (:name shape)
@ -50,7 +46,7 @@
(rx/subs (rx/subs
(fn [body] (fn [body]
(dom/trigger-download filename body)) (dom/trigger-download filename body))
(fn [error] (fn [_error]
(swap! loading? not) (swap! loading? not)
(st/emit! (dm/error (tr "errors.unexpected-error")))) (st/emit! (dm/error (tr "errors.unexpected-error"))))
(fn [] (fn []
@ -108,7 +104,7 @@
[:div.element-set.exports-options [:div.element-set.exports-options
[:div.element-set-title [:div.element-set-title
[:span (t locale "workspace.options.export")] [:span (tr "workspace.options.export")]
[:div.add-page {:on-click add-export} i/close]] [:div.add-page {:on-click add-export} i/close]]
(when (seq exports) (when (seq exports)
[:div.element-set-content [:div.element-set-content
@ -141,6 +137,6 @@
:btn-disabled @loading?) :btn-disabled @loading?)
:disabled @loading?} :disabled @loading?}
(if @loading? (if @loading?
(t locale "workspace.options.exporting-object") (tr "workspace.options.exporting-object")
(t locale "workspace.options.export-object"))]])])) (tr "workspace.options.export-object"))]])]))

29
frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
View file

@ -8,16 +8,12 @@
(:require (:require
[app.common.pages :as cp] [app.common.pages :as cp]
[app.main.data.workspace.colors :as dc] [app.main.data.workspace.colors :as dc]
[app.main.data.workspace.common :as dwc]
[app.main.data.workspace.undo :as dwu] [app.main.data.workspace.undo :as dwu]
[app.main.data.workspace.texts :as dwt]
[app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
[app.util.color :as uc] [app.util.color :as uc]
[app.util.i18n :as i18n :refer [tr t]] [app.util.i18n :as i18n :refer [tr]]
[app.util.object :as obj]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
(def fill-attrs (def fill-attrs
@ -30,14 +26,13 @@
(mf/defc fill-menu (mf/defc fill-menu
{::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values"]))]} {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values"]))]}
[{:keys [ids type values] :as props}] [{:keys [ids type values] :as props}]
(let [locale (mf/deref i18n/locale) (let [show? (or (not (nil? (:fill-color values)))
show? (or (not (nil? (:fill-color values))) (not (nil? (:fill-color-gradient values))))
(not (nil? (:fill-color-gradient values))))
label (case type label (case type
:multiple (t locale "workspace.options.selection-fill") :multiple (tr "workspace.options.selection-fill")
:group (t locale "workspace.options.group-fill") :group (tr "workspace.options.group-fill")
(t locale "workspace.options.fill")) (tr "workspace.options.fill"))
color {:color (:fill-color values) color {:color (:fill-color values)
:opacity (:fill-opacity values) :opacity (:fill-opacity values)
@ -48,21 +43,21 @@
on-add on-add
(mf/use-callback (mf/use-callback
(mf/deps ids) (mf/deps ids)
(fn [event] (fn [_]
(st/emit! (dc/change-fill ids {:color cp/default-color (st/emit! (dc/change-fill ids {:color cp/default-color
:opacity 1})))) :opacity 1}))))
on-delete on-delete
(mf/use-callback (mf/use-callback
(mf/deps ids) (mf/deps ids)
(fn [event] (fn [_]
(st/emit! (dc/change-fill ids (into {} uc/empty-color))))) (st/emit! (dc/change-fill ids (into {} uc/empty-color)))))
on-change on-change
(mf/use-callback (mf/use-callback
(mf/deps ids) (mf/deps ids)
(fn [color] (fn [color]
(let [remove-multiple (fn [[key value]] (not= value :multiple)) (let [remove-multiple (fn [[_ value]] (not= value :multiple))
color (into {} (filter remove-multiple) color)] color (into {} (filter remove-multiple) color)]
(st/emit! (dc/change-fill ids color))))) (st/emit! (dc/change-fill ids color)))))
@ -70,7 +65,7 @@
(mf/use-callback (mf/use-callback
(mf/deps ids) (mf/deps ids)
(fn [] (fn []
(let [remove-multiple (fn [[key value]] (not= value :multiple)) (let [remove-multiple (fn [[_ value]] (not= value :multiple))
color (-> (into {} (filter remove-multiple) color) color (-> (into {} (filter remove-multiple) color)
(assoc :id nil :file-id nil))] (assoc :id nil :file-id nil))]
(st/emit! (dc/change-fill ids color))))) (st/emit! (dc/change-fill ids color)))))
@ -78,13 +73,13 @@
on-open-picker on-open-picker
(mf/use-callback (mf/use-callback
(mf/deps ids) (mf/deps ids)
(fn [value opacity id file-id] (fn [_value _opacity _id _file-id]
(st/emit! (dwu/start-undo-transaction)))) (st/emit! (dwu/start-undo-transaction))))
on-close-picker on-close-picker
(mf/use-callback (mf/use-callback
(mf/deps ids) (mf/deps ids)
(fn [value opacity id file-id] (fn [_value _opacity _id _file-id]
(st/emit! (dwu/commit-undo-transaction))))] (st/emit! (dwu/commit-undo-transaction))))]
(if show? (if show?

81
frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
View file

@ -6,38 +6,34 @@
(ns app.main.ui.workspace.sidebar.options.menus.frame-grid (ns app.main.ui.workspace.sidebar.options.menus.frame-grid
(:require (:require
[rumext.alpha :as mf]
[okulary.core :as l]
[app.util.dom :as dom]
[app.util.data :as d]
[app.common.math :as mth] [app.common.math :as mth]
[app.common.data :refer [parse-integer]]
[app.main.store :as st]
[app.main.refs :as refs]
[app.main.data.workspace.grid :as dw] [app.main.data.workspace.grid :as dw]
[app.util.geom.grid :as gg] [app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.editable-select :refer [editable-select]]
[app.main.ui.components.numeric-input :refer [numeric-input]]
[app.main.ui.components.select :refer [select]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.common :refer [advanced-options]] [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
[app.main.ui.workspace.sidebar.options.rows.input-row :refer [input-row]] [app.main.ui.workspace.sidebar.options.rows.input-row :refer [input-row]]
[app.main.ui.components.numeric-input :refer [numeric-input]] [app.util.data :as d]
[app.main.ui.components.select :refer [select]] [app.util.geom.grid :as gg]
[app.main.ui.components.editable-select :refer [editable-select]] [app.util.i18n :as i18n :refer [tr]]
[app.main.ui.components.dropdown :refer [dropdown]] [okulary.core :as l]
[app.util.i18n :as i18n :refer [tr t]])) [rumext.alpha :as mf]))
(def workspace-saved-grids (def workspace-saved-grids
(l/derived :saved-grids refs/workspace-page-options)) (l/derived :saved-grids refs/workspace-page-options))
(defn- get-size-options [locale] (defn- get-size-options []
[{:value :auto :label (t locale "workspace.options.grid.auto")} [{:value :auto :label (tr "workspace.options.grid.auto")}
:separator :separator
18 12 10 8 6 4 3 2]) 18 12 10 8 6 4 3 2])
(mf/defc grid-options (mf/defc grid-options
[{:keys [grid frame default-grid-params on-change on-remove on-save-grid]}] [{:keys [grid frame default-grid-params on-change on-remove on-save-grid]}]
(let [locale (i18n/use-locale) (let [size-options (get-size-options)
size-options (get-size-options locale)
state (mf/use-state {:show-advanced-options false}) state (mf/use-state {:show-advanced-options false})
{:keys [type display params]} grid {:keys [type display params]} grid
@ -45,12 +41,12 @@
#(swap! state update :show-advanced-options not) #(swap! state update :show-advanced-options not)
handle-toggle-visibility handle-toggle-visibility
(fn [event] (fn [_]
(when on-change (when on-change
(on-change (update grid :display #(if (nil? %) false (not %)))))) (on-change (update grid :display #(if (nil? %) false (not %))))))
handle-remove-grid handle-remove-grid
(fn [event] (fn [_]
(when on-remove (on-remove))) (when on-remove (on-remove)))
handle-change-type handle-change-type
@ -82,7 +78,7 @@
handle-change-item-length handle-change-item-length
(fn [item-length] (fn [item-length]
(let [{:keys [margin gutter size]} (:params grid) (let [size (get-in grid [:params :size])
size (if (and (nil? item-length) (or (nil? size) (= :auto size))) 12 size)] size (if (and (nil? item-length) (or (nil? size) (= :auto size))) 12 size)]
(when on-change (when on-change
(on-change (-> grid (on-change (-> grid
@ -128,9 +124,9 @@
[:& select {:class "flex-grow" [:& select {:class "flex-grow"
:default-value type :default-value type
:options [{:value :square :label (t locale "workspace.options.grid.square")} :options [{:value :square :label (tr "workspace.options.grid.square")}
{:value :column :label (t locale "workspace.options.grid.column")} {:value :column :label (tr "workspace.options.grid.column")}
{:value :row :label (t locale "workspace.options.grid.row")}] {:value :row :label (tr "workspace.options.grid.row")}]
:on-change handle-change-type}] :on-change handle-change-type}]
(if (= type :square) (if (= type :square)
@ -154,14 +150,14 @@
:on-close toggle-advanced-options} :on-close toggle-advanced-options}
[:button.custom-button {:on-click toggle-advanced-options} i/actions] [:button.custom-button {:on-click toggle-advanced-options} i/actions]
(when (= :square type) (when (= :square type)
[:& input-row {:label (t locale "workspace.options.grid.params.size") [:& input-row {:label (tr "workspace.options.grid.params.size")
:class "pixels" :class "pixels"
:min 1 :min 1
:value (:size params) :value (:size params)
:on-change (handle-change :params :size)}]) :on-change (handle-change :params :size)}])
(when (= :row type) (when (= :row type)
[:& input-row {:label (t locale "workspace.options.grid.params.rows") [:& input-row {:label (tr "workspace.options.grid.params.rows")
:type :editable-select :type :editable-select
:options size-options :options size-options
:value (:size params) :value (:size params)
@ -170,7 +166,7 @@
:on-change handle-change-size}]) :on-change handle-change-size}])
(when (= :column type) (when (= :column type)
[:& input-row {:label (t locale "workspace.options.grid.params.columns") [:& input-row {:label (tr "workspace.options.grid.params.columns")
:type :editable-select :type :editable-select
:options size-options :options size-options
:value (:size params) :value (:size params)
@ -179,23 +175,23 @@
:on-change handle-change-size}]) :on-change handle-change-size}])
(when (#{:row :column} type) (when (#{:row :column} type)
[:& input-row {:label (t locale "workspace.options.grid.params.type") [:& input-row {:label (tr "workspace.options.grid.params.type")
:type :select :type :select
:options [{:value :stretch :label (t locale "workspace.options.grid.params.type.stretch")} :options [{:value :stretch :label (tr "workspace.options.grid.params.type.stretch")}
{:value :left :label (if (= type :row) {:value :left :label (if (= type :row)
(t locale "workspace.options.grid.params.type.top") (tr "workspace.options.grid.params.type.top")
(t locale "workspace.options.grid.params.type.left"))} (tr "workspace.options.grid.params.type.left"))}
{:value :center :label (t locale "workspace.options.grid.params.type.center")} {:value :center :label (tr "workspace.options.grid.params.type.center")}
{:value :right :label (if (= type :row) {:value :right :label (if (= type :row)
(t locale "workspace.options.grid.params.type.bottom") (tr "workspace.options.grid.params.type.bottom")
(t locale "workspace.options.grid.params.type.right"))}] (tr "workspace.options.grid.params.type.right"))}]
:value (:type params) :value (:type params)
:on-change (handle-change :params :type)}]) :on-change (handle-change :params :type)}])
(when (#{:row :column} type) (when (#{:row :column} type)
[:& input-row {:label (if (= :row type) [:& input-row {:label (if (= :row type)
(t locale "workspace.options.grid.params.height") (tr "workspace.options.grid.params.height")
(t locale "workspace.options.grid.params.width")) (tr "workspace.options.grid.params.width"))
:class "pixels" :class "pixels"
:placeholder "Auto" :placeholder "Auto"
:value (or (:item-length params) "") :value (or (:item-length params) "")
@ -203,13 +199,13 @@
(when (#{:row :column} type) (when (#{:row :column} type)
[:* [:*
[:& input-row {:label (t locale "workspace.options.grid.params.gutter") [:& input-row {:label (tr "workspace.options.grid.params.gutter")
:class "pixels" :class "pixels"
:value (:gutter params) :value (:gutter params)
:min 0 :min 0
:placeholder "0" :placeholder "0"
:on-change (handle-change :params :gutter)}] :on-change (handle-change :params :gutter)}]
[:& input-row {:label (t locale "workspace.options.grid.params.margin") [:& input-row {:label (tr "workspace.options.grid.params.margin")
:class "pixels" :class "pixels"
:min 0 :min 0
:placeholder "0" :placeholder "0"
@ -222,13 +218,12 @@
:on-detach handle-detach-color}] :on-detach handle-detach-color}]
[:div.row-flex [:div.row-flex
[:button.btn-options {:disabled is-default [:button.btn-options {:disabled is-default
:on-click handle-use-default} (t locale "workspace.options.grid.params.use-default")] :on-click handle-use-default} (tr "workspace.options.grid.params.use-default")]
[:button.btn-options {:disabled is-default [:button.btn-options {:disabled is-default
:on-click handle-set-as-default} (t locale "workspace.options.grid.params.set-default")]]]])) :on-click handle-set-as-default} (tr "workspace.options.grid.params.set-default")]]]]))
(mf/defc frame-grid [{:keys [shape]}] (mf/defc frame-grid [{:keys [shape]}]
(let [locale (i18n/use-locale) (let [id (:id shape)
id (:id shape)
default-grid-params (merge dw/default-grid-params (mf/deref workspace-saved-grids)) default-grid-params (merge dw/default-grid-params (mf/deref workspace-saved-grids))
handle-create-grid #(st/emit! (dw/add-frame-grid id)) handle-create-grid #(st/emit! (dw/add-frame-grid id))
handle-remove-grid (fn [index] #(st/emit! (dw/remove-frame-grid id index))) handle-remove-grid (fn [index] #(st/emit! (dw/remove-frame-grid id index)))
@ -236,10 +231,10 @@
handle-save-grid (fn [grid] (st/emit! (dw/set-default-grid (:type grid) (:params grid))))] handle-save-grid (fn [grid] (st/emit! (dw/set-default-grid (:type grid) (:params grid))))]
[:div.element-set [:div.element-set
[:div.element-set-title [:div.element-set-title
[:span (t locale "workspace.options.grid.title")] [:span (tr "workspace.options.grid.title")]
[:div.add-page {:on-click handle-create-grid} i/close]] [:div.add-page {:on-click handle-create-grid} i/close]]
(when (not (empty? (:grids shape))) (when (seq (:grids shape))
[:div.element-set-content [:div.element-set-content
(for [[index grid] (map-indexed vector (:grids shape))] (for [[index grid] (map-indexed vector (:grids shape))]
[:& grid-options {:key (str (:id shape) "-" index) [:& grid-options {:key (str (:id shape) "-" index)

18
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
View file

@ -6,7 +6,6 @@
(ns app.main.ui.workspace.sidebar.options.menus.interactions (ns app.main.ui.workspace.sidebar.options.menus.interactions
(:require (:require
[rumext.alpha :as mf]
[app.common.data :as d] [app.common.data :as d]
[app.common.pages :as cp] [app.common.pages :as cp]
[app.main.data.workspace :as dw] [app.main.data.workspace :as dw]
@ -14,13 +13,12 @@
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]]
[app.util.i18n :as i18n :refer [t]])) [rumext.alpha :as mf]))
(mf/defc interactions-menu (mf/defc interactions-menu
[{:keys [shape] :as props}] [{:keys [shape] :as props}]
(let [locale (mf/deref i18n/locale) (let [objects (deref refs/workspace-page-objects)
objects (deref refs/workspace-page-objects)
interaction (first (:interactions shape)) ; TODO: in the interaction (first (:interactions shape)) ; TODO: in the
; future we may ; future we may
; have several ; have several
@ -48,26 +46,26 @@
(if (not shape) (if (not shape)
[:* [:*
[:div.interactions-help-icon i/interaction] [:div.interactions-help-icon i/interaction]
[:div.interactions-help (t locale "workspace.options.select-a-shape")] [:div.interactions-help (tr "workspace.options.select-a-shape")]
[:div.interactions-help-icon i/play] [:div.interactions-help-icon i/play]
[:div.interactions-help (t locale "workspace.options.use-play-button")]] [:div.interactions-help (tr "workspace.options.use-play-button")]]
[:div.element-set {:on-blur on-set-blur} [:div.element-set {:on-blur on-set-blur}
[:div.element-set-title [:div.element-set-title
[:span (t locale "workspace.options.navigate-to")]] [:span (tr "workspace.options.navigate-to")]]
[:div.element-set-content [:div.element-set-content
[:div.row-flex [:div.row-flex
[:div.custom-select.flex-grow {:on-click #(reset! show-frames-dropdown? true)} [:div.custom-select.flex-grow {:on-click #(reset! show-frames-dropdown? true)}
(if destination (if destination
[:span (:name destination)] [:span (:name destination)]
[:span (t locale "workspace.options.select-artboard")]) [:span (tr "workspace.options.select-artboard")])
[:span.dropdown-button i/arrow-down] [:span.dropdown-button i/arrow-down]
[:& dropdown {:show @show-frames-dropdown? [:& dropdown {:show @show-frames-dropdown?
:on-close #(reset! show-frames-dropdown? false)} :on-close #(reset! show-frames-dropdown? false)}
[:ul.custom-select-dropdown [:ul.custom-select-dropdown
[:li.dropdown-separator [:li.dropdown-separator
{:on-click #(on-select-destination nil)} {:on-click #(on-select-destination nil)}
(t locale "workspace.options.none")] (tr "workspace.options.none")]
(for [frame frames] (for [frame frames]
(when (and (not= (:id frame) (:id shape)) ; A frame cannot navigate to itself (when (and (not= (:id frame) (:id shape)) ; A frame cannot navigate to itself

15
frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs
View file

@ -8,7 +8,6 @@
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.math :as mth] [app.common.math :as mth]
[app.main.data.workspace.common :as dwc]
[app.main.data.workspace.changes :as dch] [app.main.data.workspace.changes :as dch]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.components.numeric-input :refer [numeric-input]]
@ -54,25 +53,25 @@
handle-set-hidden handle-set-hidden
(mf/use-callback (mf/use-callback
(mf/deps change!) (mf/deps change!)
(fn [event] (fn [_]
(change! :hidden true))) (change! :hidden true)))
handle-set-visible handle-set-visible
(mf/use-callback (mf/use-callback
(mf/deps change!) (mf/deps change!)
(fn [event] (fn [_]
(change! :hidden false))) (change! :hidden false)))
handle-set-blocked handle-set-blocked
(mf/use-callback (mf/use-callback
(mf/deps change!) (mf/deps change!)
(fn [event] (fn [_]
(change! :blocked true))) (change! :blocked true)))
handle-set-unblocked handle-set-unblocked
(mf/use-callback (mf/use-callback
(mf/deps change!) (mf/deps change!)
(fn [event] (fn [_]
(change! :blocked false)))] (change! :blocked false)))]
[:div.element-set [:div.element-set
@ -92,7 +91,7 @@
[:option {:value "multiple"} "--"]) [:option {:value "multiple"} "--"])
[:option {:value "normal"} (tr "workspace.options.layer-options.blend-mode.normal")] [:option {:value "normal"} (tr "workspace.options.layer-options.blend-mode.normal")]
[:option {:value "darken"} (tr "workspace.options.layer-options.blend-mode.darken")] [:option {:value "darken"} (tr "workspace.options.layer-options.blend-mode.darken")]
[:option {:value "multiply"} (tr "workspace.options.layer-options.blend-mode.multiply")] [:option {:value "multiply"} (tr "workspace.options.layer-options.blend-mode.multiply")]
[:option {:value "color-burn"} (tr "workspace.options.layer-options.blend-mode.color-burn")] [:option {:value "color-burn"} (tr "workspace.options.layer-options.blend-mode.color-burn")]
@ -127,13 +126,13 @@
(cond (cond
(or (= :multiple (:hidden values)) (not (:hidden values))) (or (= :multiple (:hidden values)) (not (:hidden values)))
[:div.element-set-actions-button {:on-click handle-set-hidden} i/eye] [:div.element-set-actions-button {:on-click handle-set-hidden} i/eye]
:else :else
[:div.element-set-actions-button {:on-click handle-set-visible} i/eye-closed]) [:div.element-set-actions-button {:on-click handle-set-visible} i/eye-closed])
(cond (cond
(or (= :multiple (:blocked values)) (not (:blocked values))) (or (= :multiple (:blocked values)) (not (:blocked values)))
[:div.element-set-actions-button {:on-click handle-set-blocked} i/unlock] [:div.element-set-actions-button {:on-click handle-set-blocked} i/unlock]
:else :else
[:div.element-set-actions-button {:on-click handle-set-unblocked} i/lock])]]]])) [:div.element-set-actions-button {:on-click handle-set-unblocked} i/lock])]]]]))

393
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
View file

@ -6,24 +6,21 @@
(ns app.main.ui.workspace.sidebar.options.menus.measures (ns app.main.ui.workspace.sidebar.options.menus.measures
(:require (:require
[cuerdas.core :as str]
[rumext.alpha :as mf]
[app.main.ui.icons :as i]
[app.main.store :as st]
[app.main.refs :as refs]
[app.common.data :as d] [app.common.data :as d]
[app.util.dom :as dom]
[app.util.data :refer [classnames]]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.common.geom.point :as gpt] [app.common.math :as math]
[app.common.pages.spec :as spec] [app.common.pages.spec :as spec]
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.main.data.workspace :as udw] [app.main.data.workspace :as udw]
[app.main.data.workspace.common :as dwc]
[app.main.data.workspace.changes :as dch] [app.main.data.workspace.changes :as dch]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.components.numeric-input :refer [numeric-input]]
[app.common.math :as math] [app.main.ui.icons :as i]
[app.util.i18n :refer [tr] :as i18n])) [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[cuerdas.core :as str]
[rumext.alpha :as mf]))
(def measure-attrs [:proportion-lock (def measure-attrs [:proportion-lock
:width :height :width :height
@ -88,7 +85,7 @@
on-proportion-lock-change on-proportion-lock-change
(mf/use-callback (mf/use-callback
(mf/deps ids) (mf/deps ids)
(fn [event] (fn [_]
(let [new-lock (if (= proportion-lock :multiple) true (not proportion-lock))] (let [new-lock (if (= proportion-lock :multiple) true (not proportion-lock))]
(run! #(st/emit! (udw/set-shape-proportion-lock % new-lock)) ids)))) (run! #(st/emit! (udw/set-shape-proportion-lock % new-lock)) ids))))
@ -114,7 +111,7 @@
on-switch-to-radius-1 on-switch-to-radius-1
(mf/use-callback (mf/use-callback
(mf/deps ids) (mf/deps ids)
(fn [value] (fn [_value]
(let [radius-update (let [radius-update
(fn [shape] (fn [shape]
(cond-> shape (cond-> shape
@ -126,7 +123,7 @@
on-switch-to-radius-4 on-switch-to-radius-4
(mf/use-callback (mf/use-callback
(mf/deps ids) (mf/deps ids)
(fn [value] (fn [_value]
(let [radius-update (let [radius-update
(fn [shape] (fn [shape]
(cond-> shape (cond-> shape
@ -180,164 +177,162 @@
on-constraint-button-clicked on-constraint-button-clicked
(mf/use-callback (mf/use-callback
(mf/deps [ids values]) (mf/deps [ids values])
(fn [button] (fn [button]
(fn [event] (fn [_]
(let [constraints-h (get values :constraints-h :scale) (let [constraints-h (get values :constraints-h :scale)
constraints-v (get values :constraints-v :scale) constraints-v (get values :constraints-v :scale)
[constraint new-value] [constraint new-value]
(case button (case button
:top (case constraints-v :top (case constraints-v
:top [:constraints-v :scale] :top [:constraints-v :scale]
:topbottom [:constraints-v :bottom] :topbottom [:constraints-v :bottom]
:bottom [:constraints-v :topbottom] :bottom [:constraints-v :topbottom]
[:constraints-v :top]) [:constraints-v :top])
:bottom (case constraints-v :bottom (case constraints-v
:bottom [:constraints-v :scale] :bottom [:constraints-v :scale]
:topbottom [:constraints-v :top] :topbottom [:constraints-v :top]
:top [:constraints-v :topbottom] :top [:constraints-v :topbottom]
[:constraints-v :bottom]) [:constraints-v :bottom])
:left (case constraints-h :left (case constraints-h
:left [:constraints-h :scale] :left [:constraints-h :scale]
:leftright [:constraints-h :right] :leftright [:constraints-h :right]
:right [:constraints-h :leftright] :right [:constraints-h :leftright]
[:constraints-h :left]) [:constraints-h :left])
:right (case constraints-h :right (case constraints-h
:right [:constraints-h :scale] :right [:constraints-h :scale]
:leftright [:constraints-h :left] :leftright [:constraints-h :left]
:left [:constraints-h :leftright] :left [:constraints-h :leftright]
[:constraints-h :right]) [:constraints-h :right])
:centerv (case constraints-v :centerv (case constraints-v
:center [:constraints-v :scale] :center [:constraints-v :scale]
[:constraints-v :center]) [:constraints-v :center])
:centerh (case constraints-h :centerh (case constraints-h
:center [:constraints-h :scale] :center [:constraints-h :scale]
[:constraints-h :center]))] [:constraints-h :center]))]
(st/emit! (dch/update-shapes (st/emit! (dch/update-shapes
ids ids
#(assoc % constraint new-value))))))) #(assoc % constraint new-value)))))))
on-constraint-select-changed on-constraint-select-changed
(mf/use-callback (mf/use-callback
(mf/deps [ids values]) (mf/deps [ids values])
(fn [constraint] (fn [constraint]
(fn [event] (fn [event]
(let [value (-> (dom/get-target-val event) (keyword))] (let [value (-> (dom/get-target-val event) (keyword))]
(when-not (str/empty? value) (when-not (str/empty? value)
(st/emit! (dch/update-shapes (st/emit! (dch/update-shapes
ids ids
#(assoc % constraint value)))))))) #(assoc % constraint value))))))))
on-fixed-scroll-clicked on-fixed-scroll-clicked
(mf/use-callback (mf/use-callback
(mf/deps [ids values]) (mf/deps [ids values])
(fn [event] (fn [_]
(st/emit! (dch/update-shapes (st/emit! (dch/update-shapes ids #(update % :fixed-scroll not)))))]
ids
#(update % :fixed-scroll not)))))]
[:* [:*
[:div.element-set [:div.element-set
[:div.element-set-content [:div.element-set-content
;; WIDTH & HEIGHT ;; WIDTH & HEIGHT
(when (options :size) (when (options :size)
[:div.row-flex [:div.row-flex
[:span.element-set-subtitle (tr "workspace.options.size")] [:span.element-set-subtitle (tr "workspace.options.size")]
[:div.input-element.width [:div.input-element.width
[:> numeric-input {:min 1 [:> numeric-input {:min 1
:no-validate true :no-validate true
:placeholder "--" :placeholder "--"
:on-click select-all :on-click select-all
:on-change on-width-change :on-change on-width-change
:value (attr->string :width values)}]] :value (attr->string :width values)}]]
[:div.input-element.height [:div.input-element.height
[:> numeric-input {:min 1 [:> numeric-input {:min 1
:no-validate true :no-validate true
:placeholder "--" :placeholder "--"
:on-click select-all :on-click select-all
:on-change on-height-change :on-change on-height-change
:value (attr->string :height values)}]] :value (attr->string :height values)}]]
[:div.lock-size {:class (classnames [:div.lock-size {:class (dom/classnames
:selected (true? proportion-lock) :selected (true? proportion-lock)
:disabled (= proportion-lock :multiple)) :disabled (= proportion-lock :multiple))
:on-click on-proportion-lock-change} :on-click on-proportion-lock-change}
(if proportion-lock (if proportion-lock
i/lock i/lock
i/unlock)]]) i/unlock)]])
;; POSITION ;; POSITION
(when (options :position) (when (options :position)
[:div.row-flex [:div.row-flex
[:span.element-set-subtitle (tr "workspace.options.position")] [:span.element-set-subtitle (tr "workspace.options.position")]
[:div.input-element.Xaxis [:div.input-element.Xaxis
[:> numeric-input {:no-validate true [:> numeric-input {:no-validate true
:placeholder "--" :placeholder "--"
:on-click select-all :on-click select-all
:on-change on-pos-x-change :on-change on-pos-x-change
:value (attr->string :x values)}]] :value (attr->string :x values)}]]
[:div.input-element.Yaxis [:div.input-element.Yaxis
[:> numeric-input {:no-validate true [:> numeric-input {:no-validate true
:placeholder "--" :placeholder "--"
:on-click select-all :on-click select-all
:on-change on-pos-y-change :on-change on-pos-y-change
:value (attr->string :y values)}]]]) :value (attr->string :y values)}]]])
;; ROTATION ;; ROTATION
(when (options :rotation) (when (options :rotation)
[:div.row-flex [:div.row-flex
[:span.element-set-subtitle (tr "workspace.options.rotation")] [:span.element-set-subtitle (tr "workspace.options.rotation")]
[:div.input-element.degrees [:div.input-element.degrees
[:> numeric-input [:> numeric-input
{:no-validate true {:no-validate true
:min 0 :min 0
:max 359 :max 359
:data-wrap true :data-wrap true
:placeholder "--" :placeholder "--"
:on-click select-all :on-click select-all
:on-change on-rotation-change :on-change on-rotation-change
:value (attr->string :rotation values)}]] :value (attr->string :rotation values)}]]
#_[:input.slidebar #_[:input.slidebar
{:type "range" {:type "range"
:min "0" :min "0"
:max "359" :max "359"
:step "10" :step "10"
:no-validate true :no-validate true
:on-change on-rotation-change :on-change on-rotation-change
:value (attr->string :rotation values)}]]) :value (attr->string :rotation values)}]])
;; RADIUS ;; RADIUS
(let [radius-1? (some? (:rx values)) (let [radius-1? (some? (:rx values))
radius-4? (some? (:r1 values))] radius-4? (some? (:r1 values))]
(when (and (options :radius) (or radius-1? radius-4?)) (when (and (options :radius) (or radius-1? radius-4?))
[:div.row-flex [:div.row-flex
[:div.radius-options [:div.radius-options
[:div.radius-icon.tooltip.tooltip-bottom [:div.radius-icon.tooltip.tooltip-bottom
{:class (classnames {:class (dom/classnames
:selected :selected
(and radius-1? (not radius-4?))) (and radius-1? (not radius-4?)))
:alt (tr "workspace.options.radius.all-corners") :alt (tr "workspace.options.radius.all-corners")
:on-click on-switch-to-radius-1} :on-click on-switch-to-radius-1}
i/radius-1] i/radius-1]
[:div.radius-icon.tooltip.tooltip-bottom [:div.radius-icon.tooltip.tooltip-bottom
{:class (classnames {:class (dom/classnames
:selected :selected
(and radius-4? (not radius-1?))) (and radius-4? (not radius-1?)))
:alt (tr "workspace.options.radius.single-corners") :alt (tr "workspace.options.radius.single-corners")
:on-click on-switch-to-radius-4} :on-click on-switch-to-radius-4}
i/radius-4]] i/radius-4]]
(if radius-1? (if radius-1?
[:div.input-element.mini [:div.input-element.mini
[:> numeric-input [:> numeric-input
{:placeholder "--" {:placeholder "--"
:min 0 :min 0
:on-click select-all :on-click select-all
:on-change on-radius-1-change :on-change on-radius-1-change
:value (attr->string :rx values)}]] :value (attr->string :rx values)}]]
[:* [:*
[:div.input-element.mini [:div.input-element.mini
[:> numeric-input [:> numeric-input
{:placeholder "--" {:placeholder "--"
@ -367,66 +362,66 @@
:on-change on-radius-r4-change :on-change on-radius-r4-change
:value (attr->string :r4 values)}]]])]))]] :value (attr->string :r4 values)}]]])]))]]
;; CONSTRAINTS ;; CONSTRAINTS
(when in-frame? (when in-frame?
[:div.element-set [:div.element-set
[:div.element-set-title [:div.element-set-title
[:span (tr "workspace.options.constraints")]] [:span (tr "workspace.options.constraints")]]
[:div.element-set-content [:div.element-set-content
[:div.row-flex.align-top [:div.row-flex.align-top
[:div.constraints-widget [:div.constraints-widget
[:div.constraints-box] [:div.constraints-box]
[:div.constraint-button.top [:div.constraint-button.top
{:class (classnames :active (or (= constraints-v :top) {:class (dom/classnames :active (or (= constraints-v :top)
(= constraints-v :topbottom))) (= constraints-v :topbottom)))
:on-click (on-constraint-button-clicked :top)}] :on-click (on-constraint-button-clicked :top)}]
[:div.constraint-button.bottom [:div.constraint-button.bottom
{:class (classnames :active (or (= constraints-v :bottom) {:class (dom/classnames :active (or (= constraints-v :bottom)
(= constraints-v :topbottom))) (= constraints-v :topbottom)))
:on-click (on-constraint-button-clicked :bottom)}] :on-click (on-constraint-button-clicked :bottom)}]
[:div.constraint-button.left [:div.constraint-button.left
{:class (classnames :active (or (= constraints-h :left) {:class (dom/classnames :active (or (= constraints-h :left)
(= constraints-h :leftright))) (= constraints-h :leftright)))
:on-click (on-constraint-button-clicked :left)}] :on-click (on-constraint-button-clicked :left)}]
[:div.constraint-button.right [:div.constraint-button.right
{:class (classnames :active (or (= constraints-h :right) {:class (dom/classnames :active (or (= constraints-h :right)
(= constraints-h :leftright))) (= constraints-h :leftright)))
:on-click (on-constraint-button-clicked :right)}] :on-click (on-constraint-button-clicked :right)}]
[:div.constraint-button.centerv [:div.constraint-button.centerv
{:class (classnames :active (= constraints-v :center)) {:class (dom/classnames :active (= constraints-v :center))
:on-click (on-constraint-button-clicked :centerv)}] :on-click (on-constraint-button-clicked :centerv)}]
[:div.constraint-button.centerh [:div.constraint-button.centerh
{:class (classnames :active (= constraints-h :center)) {:class (dom/classnames :active (= constraints-h :center))
:on-click (on-constraint-button-clicked :centerh)}]] :on-click (on-constraint-button-clicked :centerh)}]]
[:div.constraints-form [:div.constraints-form
[:div.row-flex [:div.row-flex
[:span.left-right i/full-screen] [:span.left-right i/full-screen]
[:select.input-select {:on-change (on-constraint-select-changed :constraints-h) [:select.input-select {:on-change (on-constraint-select-changed :constraints-h)
:value (d/name constraints-h "scale")} :value (d/name constraints-h "scale")}
(when (= constraints-h :multiple) (when (= constraints-h :multiple)
[:option {:value ""} (tr "settings.multiple")]) [:option {:value ""} (tr "settings.multiple")])
[:option {:value "left"} (tr "workspace.options.constraints.left")] [:option {:value "left"} (tr "workspace.options.constraints.left")]
[:option {:value "right"} (tr "workspace.options.constraints.right")] [:option {:value "right"} (tr "workspace.options.constraints.right")]
[:option {:value "leftright"} (tr "workspace.options.constraints.leftright")] [:option {:value "leftright"} (tr "workspace.options.constraints.leftright")]
[:option {:value "center"} (tr "workspace.options.constraints.center")] [:option {:value "center"} (tr "workspace.options.constraints.center")]
[:option {:value "scale"} (tr "workspace.options.constraints.scale")]]] [:option {:value "scale"} (tr "workspace.options.constraints.scale")]]]
[:div.row-flex [:div.row-flex
[:span.top-bottom i/full-screen] [:span.top-bottom i/full-screen]
[:select.input-select {:on-change (on-constraint-select-changed :constraints-v) [:select.input-select {:on-change (on-constraint-select-changed :constraints-v)
:value (d/name constraints-v "scale")} :value (d/name constraints-v "scale")}
(when (= constraints-v :multiple) (when (= constraints-v :multiple)
[:option {:value ""} (tr "settings.multiple")]) [:option {:value ""} (tr "settings.multiple")])
[:option {:value "top"} (tr "workspace.options.constraints.top")] [:option {:value "top"} (tr "workspace.options.constraints.top")]
[:option {:value "bottom"} (tr "workspace.options.constraints.bottom")] [:option {:value "bottom"} (tr "workspace.options.constraints.bottom")]
[:option {:value "topbottom"} (tr "workspace.options.constraints.topbottom")] [:option {:value "topbottom"} (tr "workspace.options.constraints.topbottom")]
[:option {:value "center"} (tr "workspace.options.constraints.center")] [:option {:value "center"} (tr "workspace.options.constraints.center")]
[:option {:value "scale"} (tr "workspace.options.constraints.scale")]]] [:option {:value "scale"} (tr "workspace.options.constraints.scale")]]]
(when first-level? (when first-level?
[:div.row-flex [:div.row-flex
[:div.fix-when {:class (classnames :active (:fixed-scroll values)) [:div.fix-when {:class (dom/classnames :active (:fixed-scroll values))
:on-click on-fixed-scroll-clicked} :on-click on-fixed-scroll-clicked}
i/pin i/pin
[:span (tr "workspace.options.constraints.fix-when-scrolling")]]])]]]])])) [:span (tr "workspace.options.constraints.fix-when-scrolling")]]])]]]])]))

58
frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
View file

@ -6,19 +6,18 @@
(ns app.main.ui.workspace.sidebar.options.menus.shadow (ns app.main.ui.workspace.sidebar.options.menus.shadow
(:require (:require
[rumext.alpha :as mf]
[app.common.data :as d] [app.common.data :as d]
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.main.data.workspace.common :as dwc]
[app.main.data.workspace.changes :as dch] [app.main.data.workspace.changes :as dch]
[app.main.data.workspace.undo :as dwu] [app.main.data.workspace.undo :as dwu]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.icons :as i]
[app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.components.numeric-input :refer [numeric-input]]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.common :refer [advanced-options]] [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [t]])) [app.util.i18n :as i18n :refer [tr]]
[rumext.alpha :as mf]))
(def shadow-attrs [:shadow]) (def shadow-attrs [:shadow])
@ -38,8 +37,7 @@
(mf/defc shadow-entry (mf/defc shadow-entry
[{:keys [ids index value]}] [{:keys [ids index value]}]
(let [locale (i18n/use-locale) (let [open-shadow (mf/use-state false)
open-shadow (mf/use-state false)
basic-offset-x-ref (mf/use-ref nil) basic-offset-x-ref (mf/use-ref nil)
basic-offset-y-ref (mf/use-ref nil) basic-offset-y-ref (mf/use-ref nil)
@ -52,7 +50,7 @@
remove-shadow-by-index remove-shadow-by-index
(fn [values index] (->> (d/enumerate values) (fn [values index] (->> (d/enumerate values)
(filterv (fn [[idx s]] (not= idx index))) (filterv (fn [[idx _]] (not= idx index)))
(mapv second))) (mapv second)))
on-remove-shadow on-remove-shadow
@ -61,7 +59,7 @@
(st/emit! (dch/update-shapes ids #(update % :shadow remove-shadow-by-index index) )))) (st/emit! (dch/update-shapes ids #(update % :shadow remove-shadow-by-index index) ))))
select-text select-text
(fn [ref] (fn [event] (dom/select-text! (mf/ref-val ref)))) (fn [ref] (fn [_] (dom/select-text! (mf/ref-val ref))))
update-attr update-attr
(fn update-attr (fn update-attr
@ -86,12 +84,12 @@
detach-color detach-color
(fn [index] (fn [index]
(fn [color opacity] (fn [_color _opacity]
(if-not (string? (:color value)) (when-not (string? (:color value))
(st/emit! (dch/update-shapes (st/emit! (dch/update-shapes
ids ids
#(assoc-in % [:shadow index :color] #(assoc-in % [:shadow index :color]
(dissoc (:color value) :id :file-id))))))) (dissoc (:color value) :id :file-id)))))))
toggle-visibility toggle-visibility
(fn [index] (fn [index]
@ -122,8 +120,8 @@
:on-change (fn [event] :on-change (fn [event]
(let [value (-> event dom/get-target dom/get-value d/read-string)] (let [value (-> event dom/get-target dom/get-value d/read-string)]
(st/emit! (dch/update-shapes ids #(assoc-in % [:shadow index :style] value)))))} (st/emit! (dch/update-shapes ids #(assoc-in % [:shadow index :style] value)))))}
[:option {:value ":drop-shadow"} (t locale "workspace.options.shadow-options.drop-shadow")] [:option {:value ":drop-shadow"} (tr "workspace.options.shadow-options.drop-shadow")]
[:option {:value ":inner-shadow"} (t locale "workspace.options.shadow-options.inner-shadow")]] [:option {:value ":inner-shadow"} (tr "workspace.options.shadow-options.inner-shadow")]]
[:div.element-set-actions [:div.element-set-actions
[:div.element-set-actions-button {:on-click (toggle-visibility index)} [:div.element-set-actions-button {:on-click (toggle-visibility index)}
@ -142,8 +140,8 @@
:on-change (fn [event] :on-change (fn [event]
(let [value (-> event dom/get-target dom/get-value d/read-string)] (let [value (-> event dom/get-target dom/get-value d/read-string)]
(st/emit! (dch/update-shapes ids #(assoc-in % [:shadow index :style] value)))))} (st/emit! (dch/update-shapes ids #(assoc-in % [:shadow index :style] value)))))}
[:option {:value ":drop-shadow"} (t locale "workspace.options.shadow-options.drop-shadow")] [:option {:value ":drop-shadow"} (tr "workspace.options.shadow-options.drop-shadow")]
[:option {:value ":inner-shadow"} (t locale "workspace.options.shadow-options.inner-shadow")]]] [:option {:value ":inner-shadow"} (tr "workspace.options.shadow-options.inner-shadow")]]]
[:div.row-grid-2 [:div.row-grid-2
[:div.input-element [:div.input-element
@ -153,7 +151,7 @@
:on-click (select-text adv-offset-x-ref) :on-click (select-text adv-offset-x-ref)
:on-change (update-attr index :offset-x valid-number? basic-offset-x-ref) :on-change (update-attr index :offset-x valid-number? basic-offset-x-ref)
:value (:offset-x value)}] :value (:offset-x value)}]
[:span.after (t locale "workspace.options.shadow-options.offsetx")]] [:span.after (tr "workspace.options.shadow-options.offsetx")]]
[:div.input-element [:div.input-element
[:> numeric-input {:ref adv-offset-y-ref [:> numeric-input {:ref adv-offset-y-ref
@ -162,7 +160,7 @@
:on-click (select-text adv-offset-y-ref) :on-click (select-text adv-offset-y-ref)
:on-change (update-attr index :offset-y valid-number? basic-offset-y-ref) :on-change (update-attr index :offset-y valid-number? basic-offset-y-ref)
:value (:offset-y value)}] :value (:offset-y value)}]
[:span.after (t locale "workspace.options.shadow-options.offsety")]]] [:span.after (tr "workspace.options.shadow-options.offsety")]]]
[:div.row-grid-2 [:div.row-grid-2
[:div.input-element [:div.input-element
@ -173,7 +171,7 @@
:on-change (update-attr index :blur valid-number? basic-blur-ref) :on-change (update-attr index :blur valid-number? basic-blur-ref)
:min 0 :min 0
:value (:blur value)}] :value (:blur value)}]
[:span.after (t locale "workspace.options.shadow-options.blur")]] [:span.after (tr "workspace.options.shadow-options.blur")]]
[:div.input-element [:div.input-element
[:> numeric-input {:ref adv-spread-ref [:> numeric-input {:ref adv-spread-ref
@ -183,7 +181,7 @@
:on-change (update-attr index :spread valid-number?) :on-change (update-attr index :spread valid-number?)
:min 0 :min 0
:value (:spread value)}] :value (:spread value)}]
[:span.after (t locale "workspace.options.shadow-options.spread")]]] [:span.after (tr "workspace.options.shadow-options.spread")]]]
[:div.color-row-wrap [:div.color-row-wrap
[:& color-row {:color (if (string? (:color value)) [:& color-row {:color (if (string? (:color value))
@ -197,10 +195,8 @@
:on-close #(st/emit! (dwu/commit-undo-transaction))}]]]])) :on-close #(st/emit! (dwu/commit-undo-transaction))}]]]]))
(mf/defc shadow-menu (mf/defc shadow-menu
[{:keys [ids type values] :as props}] [{:keys [ids type values] :as props}]
(let [locale (i18n/use-locale) (let [on-remove-all-shadows
on-remove-all-shadows (fn [_] (st/emit! (dch/update-shapes ids #(dissoc % :shadow))))
(fn [event]
(st/emit! (dch/update-shapes ids #(dissoc % :shadow) )))
on-add-shadow on-add-shadow
(fn [] (fn []
@ -209,9 +205,9 @@
[:div.element-set-title [:div.element-set-title
[:span [:span
(case type (case type
:multiple (t locale "workspace.options.shadow-options.title.multiple") :multiple (tr "workspace.options.shadow-options.title.multiple")
:group (t locale "workspace.options.shadow-options.title.group") :group (tr "workspace.options.shadow-options.title.group")
(t locale "workspace.options.shadow-options.title"))] (tr "workspace.options.shadow-options.title"))]
(when-not (= :multiple (:shadow values)) (when-not (= :multiple (:shadow values))
[:div.add-page {:on-click on-add-shadow} i/close])] [:div.add-page {:on-click on-add-shadow} i/close])]
@ -220,14 +216,14 @@
(= :multiple (:shadow values)) (= :multiple (:shadow values))
[:div.element-set-content [:div.element-set-content
[:div.element-set-options-group [:div.element-set-options-group
[:div.element-set-label (t locale "settings.multiple")] [:div.element-set-label (tr "settings.multiple")]
[:div.element-set-actions [:div.element-set-actions
[:div.element-set-actions-button {:on-click on-remove-all-shadows} [:div.element-set-actions-button {:on-click on-remove-all-shadows}
i/minus]]]] i/minus]]]]
(not (empty? (:shadow values))) (seq (:shadow values))
[:div.element-set-content [:div.element-set-content
(for [[index {:keys [id] :as value}] (d/enumerate (:shadow values []))] (for [[index value] (d/enumerate (:shadow values []))]
[:& shadow-entry {:key (str "shadow-" index) [:& shadow-entry {:key (str "shadow-" index)
:ids ids :ids ids
:value value :value value

48
frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
View file

@ -6,21 +6,18 @@
(ns app.main.ui.workspace.sidebar.options.menus.stroke (ns app.main.ui.workspace.sidebar.options.menus.stroke
(:require (:require
[cuerdas.core :as str]
[rumext.alpha :as mf]
[app.common.data :as d] [app.common.data :as d]
[app.common.math :as math] [app.common.math :as math]
[app.main.data.workspace.common :as dwc]
[app.main.data.workspace.undo :as dwu]
[app.main.data.workspace.changes :as dch] [app.main.data.workspace.changes :as dch]
[app.main.data.workspace.colors :as dc] [app.main.data.workspace.colors :as dc]
[app.main.data.workspace.undo :as dwu]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
[app.util.data :refer [classnames]]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr t]] [app.util.i18n :as i18n :refer [tr]]
[app.util.object :as obj])) [cuerdas.core :as str]
[rumext.alpha :as mf]))
(def stroke-attrs (def stroke-attrs
[:stroke-style [:stroke-style
@ -47,11 +44,10 @@
(mf/defc stroke-menu (mf/defc stroke-menu
{::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type"]))]} {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type"]))]}
[{:keys [ids type values] :as props}] [{:keys [ids type values] :as props}]
(let [locale (i18n/use-locale) (let [label (case type
label (case type :multiple (tr "workspace.options.selection-stroke")
:multiple (t locale "workspace.options.selection-stroke") :group (tr "workspace.options.group-stroke")
:group (t locale "workspace.options.group-stroke") (tr "workspace.options.stroke"))
(t locale "workspace.options.stroke"))
show-options (not= (:stroke-style values :none) :none) show-options (not= (:stroke-style values :none) :none)
@ -65,7 +61,7 @@
(mf/use-callback (mf/use-callback
(mf/deps ids) (mf/deps ids)
(fn [color] (fn [color]
(let [remove-multiple (fn [[key value]] (not= value :multiple)) (let [remove-multiple (fn [[_ value]] (not= value :multiple))
color (into {} (filter remove-multiple) color)] color (into {} (filter remove-multiple) color)]
(st/emit! (dc/change-stroke ids color))))) (st/emit! (dc/change-stroke ids color)))))
@ -99,7 +95,7 @@
(st/emit! (dch/update-shapes ids #(assoc % :stroke-width value)))))) (st/emit! (dch/update-shapes ids #(assoc % :stroke-width value))))))
on-add-stroke on-add-stroke
(fn [event] (fn [_]
(st/emit! (dch/update-shapes ids #(assoc % (st/emit! (dch/update-shapes ids #(assoc %
:stroke-style :solid :stroke-style :solid
:stroke-color "#000000" :stroke-color "#000000"
@ -107,19 +103,19 @@
:stroke-width 1)))) :stroke-width 1))))
on-del-stroke on-del-stroke
(fn [event] (fn [_]
(st/emit! (dch/update-shapes ids #(assoc % :stroke-style :none)))) (st/emit! (dch/update-shapes ids #(assoc % :stroke-style :none))))
on-open-picker on-open-picker
(mf/use-callback (mf/use-callback
(mf/deps ids) (mf/deps ids)
(fn [value opacity id file-id] (fn [_value _opacity _id _file-id]
(st/emit! (dwu/start-undo-transaction)))) (st/emit! (dwu/start-undo-transaction))))
on-close-picker on-close-picker
(mf/use-callback (mf/use-callback
(mf/deps ids) (mf/deps ids)
(fn [value opacity id file-id] (fn [_value _opacity _id _file-id]
(st/emit! (dwu/commit-undo-transaction))))] (st/emit! (dwu/commit-undo-transaction))))]
(if show-options (if show-options
@ -139,29 +135,29 @@
;; Stroke Width, Alignment & Style ;; Stroke Width, Alignment & Style
[:div.row-flex [:div.row-flex
[:div.input-element [:div.input-element
{:class (classnames :pixels (not= (:stroke-width values) :multiple))} {:class (dom/classnames :pixels (not= (:stroke-width values) :multiple))}
[:input.input-text {:type "number" [:input.input-text {:type "number"
:min "0" :min "0"
:value (-> (:stroke-width values) width->string) :value (-> (:stroke-width values) width->string)
:placeholder (t locale "settings.multiple") :placeholder (tr "settings.multiple")
:on-change on-stroke-width-change}]] :on-change on-stroke-width-change}]]
[:select#style.input-select {:value (enum->string (:stroke-alignment values)) [:select#style.input-select {:value (enum->string (:stroke-alignment values))
:on-change on-stroke-alignment-change} :on-change on-stroke-alignment-change}
(when (= (:stroke-alignment values) :multiple) (when (= (:stroke-alignment values) :multiple)
[:option {:value ""} "--"]) [:option {:value ""} "--"])
[:option {:value ":center"} (t locale "workspace.options.stroke.center")] [:option {:value ":center"} (tr "workspace.options.stroke.center")]
[:option {:value ":inner"} (t locale "workspace.options.stroke.inner")] [:option {:value ":inner"} (tr "workspace.options.stroke.inner")]
[:option {:value ":outer"} (t locale "workspace.options.stroke.outer")]] [:option {:value ":outer"} (tr "workspace.options.stroke.outer")]]
[:select#style.input-select {:value (enum->string (:stroke-style values)) [:select#style.input-select {:value (enum->string (:stroke-style values))
:on-change on-stroke-style-change} :on-change on-stroke-style-change}
(when (= (:stroke-style values) :multiple) (when (= (:stroke-style values) :multiple)
[:option {:value ""} "--"]) [:option {:value ""} "--"])
[:option {:value ":solid"} (t locale "workspace.options.stroke.solid")] [:option {:value ":solid"} (tr "workspace.options.stroke.solid")]
[:option {:value ":dotted"} (t locale "workspace.options.stroke.dotted")] [:option {:value ":dotted"} (tr "workspace.options.stroke.dotted")]
[:option {:value ":dashed"} (t locale "workspace.options.stroke.dashed")] [:option {:value ":dashed"} (tr "workspace.options.stroke.dashed")]
[:option {:value ":mixed"} (t locale "workspace.options.stroke.mixed")]]]]] [:option {:value ":mixed"} (tr "workspace.options.stroke.mixed")]]]]]
;; NO STROKE ;; NO STROKE
[:div.element-set [:div.element-set

10
frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs
View file

@ -6,16 +6,14 @@
(ns app.main.ui.workspace.sidebar.options.menus.svg-attrs (ns app.main.ui.workspace.sidebar.options.menus.svg-attrs
(:require (:require
[cuerdas.core :as str]
[app.common.data :as d] [app.common.data :as d]
[app.main.data.workspace.common :as dwc]
[app.main.data.workspace.changes :as dch] [app.main.data.workspace.changes :as dch]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.rows.input-row :refer [input-row]] [app.main.ui.workspace.sidebar.options.rows.input-row :refer [input-row]]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
[rumext.alpha :as mf] [rumext.alpha :as mf]))
[app.main.ui.icons :as i]))
(mf/defc attribute-value [{:keys [attr value on-change on-delete] :as props}] (mf/defc attribute-value [{:keys [attr value on-change on-delete] :as props}]
(let [handle-change (let [handle-change
@ -55,7 +53,7 @@
:on-change on-change :on-change on-change
:on-delete on-delete}])])])) :on-delete on-delete}])])]))
(mf/defc svg-attrs-menu [{:keys [ids type values]}] (mf/defc svg-attrs-menu [{:keys [ids values]}]
(let [handle-change (let [handle-change
(mf/use-callback (mf/use-callback
(mf/deps ids) (mf/deps ids)
@ -86,7 +84,7 @@
[:div.element-set-title [:div.element-set-title
[:span (tr "workspace.sidebar.options.svg-attrs.title")]] [:span (tr "workspace.sidebar.options.svg-attrs.title")]]
(for [[index [attr-key attr-value]] (d/enumerate (:svg-attrs values))] (for [[attr-key attr-value] (:svg-attrs values)]
[:& attribute-value {:key attr-key [:& attribute-value {:key attr-key
:attr [attr-key] :attr [attr-key]
:value attr-value :value attr-value

43
frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs
View file

@ -7,9 +7,8 @@
(ns app.main.ui.workspace.sidebar.options.menus.text (ns app.main.ui.workspace.sidebar.options.menus.text
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.uuid :as uuid]
[app.common.text :as txt] [app.common.text :as txt]
[app.main.data.workspace.common :as dwc] [app.common.uuid :as uuid]
[app.main.data.workspace.changes :as dch] [app.main.data.workspace.changes :as dch]
[app.main.data.workspace.libraries :as dwl] [app.main.data.workspace.libraries :as dwl]
[app.main.data.workspace.texts :as dwt] [app.main.data.workspace.texts :as dwt]
@ -81,10 +80,10 @@
(def attrs (d/concat #{} shape-attrs root-attrs paragraph-attrs text-attrs)) (def attrs (d/concat #{} shape-attrs root-attrs paragraph-attrs text-attrs))
(mf/defc text-align-options (mf/defc text-align-options
[{:keys [ids values on-change] :as props}] [{:keys [values on-change] :as props}]
(let [{:keys [text-align]} values (let [{:keys [text-align]} values
handle-change handle-change
(fn [event new-align] (fn [_ new-align]
(on-change {:text-align new-align}))] (on-change {:text-align new-align}))]
;; --- Align ;; --- Align
@ -111,9 +110,9 @@
i/text-align-justify]])) i/text-align-justify]]))
(mf/defc text-direction-options (mf/defc text-direction-options
[{:keys [ids values on-change] :as props}] [{:keys [values on-change] :as props}]
(let [direction (:text-direction values) (let [direction (:text-direction values)
handle-change (fn [event val] handle-change (fn [_ val]
(on-change {:text-direction val}))] (on-change {:text-direction val}))]
;; --- Align ;; --- Align
[:div.align-icons [:div.align-icons
@ -129,11 +128,11 @@
i/text-direction-rtl]])) i/text-direction-rtl]]))
(mf/defc vertical-align (mf/defc vertical-align
[{:keys [shapes ids values on-change] :as props}] [{:keys [values on-change] :as props}]
(let [{:keys [vertical-align]} values (let [{:keys [vertical-align]} values
vertical-align (or vertical-align "top") vertical-align (or vertical-align "top")
handle-change handle-change
(fn [event new-align] (fn [_ new-align]
(on-change {:vertical-align new-align}))] (on-change {:vertical-align new-align}))]
[:div.align-icons [:div.align-icons
@ -154,11 +153,10 @@
i/align-bottom]])) i/align-bottom]]))
(mf/defc grow-options (mf/defc grow-options
[{:keys [ids values on-change] :as props}] [{:keys [ids values] :as props}]
(let [to-single-value (fn [coll] (if (> (count coll) 1) nil (first coll))) (let [grow-type (:grow-type values)
grow-type (->> values :grow-type)
handle-change-grow handle-change-grow
(fn [event grow-type] (fn [_ grow-type]
(st/emit! (dch/update-shapes ids #(assoc % :grow-type grow-type))))] (st/emit! (dch/update-shapes ids #(assoc % :grow-type grow-type))))]
[:div.align-icons [:div.align-icons
@ -179,13 +177,10 @@
i/auto-height]])) i/auto-height]]))
(mf/defc text-decoration-options (mf/defc text-decoration-options
[{:keys [ids values on-change] :as props}] [{:keys [values on-change] :as props}]
(let [{:keys [text-decoration]} values (let [text-decoration (or (:text-decoration values) "none")
text-decoration (or text-decoration "none")
handle-change handle-change
(fn [event type] (fn [_ type]
(on-change {:text-decoration type}))] (on-change {:text-decoration type}))]
[:div.align-icons [:div.align-icons
[:span.tooltip.tooltip-bottom [:span.tooltip.tooltip-bottom
@ -262,18 +257,18 @@
(get typographies (:typography-ref-id values))))) (get typographies (:typography-ref-id values)))))
on-convert-to-typography on-convert-to-typography
(fn [event] (fn [_]
(let [setted-values (-> (d/without-nils values) (let [setted-values (-> (d/without-nils values)
(select-keys (select-keys
(d/concat text-font-attrs (d/concat text-font-attrs
text-spacing-attrs text-spacing-attrs
text-transform-attrs))) text-transform-attrs)))
typography (merge txt/default-typography setted-values) typography (merge txt/default-typography setted-values)
typography (generate-typography-name typography)] typography (generate-typography-name typography)
(let [id (uuid/next)] id (uuid/next)]
(st/emit! (dwl/add-typography (assoc typography :id id) false)) (st/emit! (dwl/add-typography (assoc typography :id id) false))
(run! #(emit-update! % {:typography-ref-id id (run! #(emit-update! % {:typography-ref-id id
:typography-ref-file file-id}) ids)))) :typography-ref-file file-id}) ids)))
handle-detach-typography handle-detach-typography
(mf/use-callback (mf/use-callback

53
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
View file

@ -7,30 +7,24 @@
(ns app.main.ui.workspace.sidebar.options.menus.typography (ns app.main.ui.workspace.sidebar.options.menus.typography
(:require (:require
["react-virtualized" :as rvt] ["react-virtualized" :as rvt]
[app.common.exceptions :as ex]
[app.common.data :as d] [app.common.data :as d]
[app.common.exceptions :as ex]
[app.common.pages :as cp] [app.common.pages :as cp]
[app.common.text :as txt] [app.common.text :as txt]
[app.main.data.workspace.texts :as dwt]
[app.main.data.shortcuts :as dsc] [app.main.data.shortcuts :as dsc]
[app.main.data.fonts :as df]
[app.main.data.workspace :as dw]
[app.main.fonts :as fonts] [app.main.fonts :as fonts]
[app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.components.editable-select :refer [editable-select]] [app.main.ui.components.editable-select :refer [editable-select]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.common :refer [advanced-options]] [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.object :as obj]
[app.util.timers :as tm]
[app.util.keyboard :as kbd]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd]
[app.util.object :as obj]
[app.util.router :as rt] [app.util.router :as rt]
[app.util.timers :as ts] [app.util.timers :as tm]
[goog.events :as events]
[cuerdas.core :as str] [cuerdas.core :as str]
[goog.events :as events]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
(defn- attr->string [value] (defn- attr->string [value]
@ -88,11 +82,11 @@
(comp (filter #(contains? backends (:backend %)))))] (comp (filter #(contains? backends (:backend %)))))]
(into [] xform fonts))) (into [] xform fonts)))
(defn- toggle-backend ;; (defn- toggle-backend
[backends id] ;; [backends id]
(if (contains? backends id) ;; (if (contains? backends id)
(disj backends id) ;; (disj backends id)
(conj backends id))) ;; (conj backends id)))
(mf/defc font-selector (mf/defc font-selector
[{:keys [on-select on-close current-font] :as props}] [{:keys [on-select on-close current-font] :as props}]
@ -101,7 +95,6 @@
flist (mf/use-ref) flist (mf/use-ref)
input (mf/use-ref) input (mf/use-ref)
ddown (mf/use-ref)
fonts (mf/use-memo (mf/deps @state) #(filter-fonts @state @fonts/fonts)) fonts (mf/use-memo (mf/deps @state) #(filter-fonts @state @fonts/fonts))
@ -237,7 +230,7 @@
:current? (= (:id font) (:id selected))}]))) :current? (= (:id font) (:id selected))}])))
(mf/defc font-options (mf/defc font-options
[{:keys [editor ids values on-change] :as props}] [{:keys [values on-change] :as props}]
(let [{:keys [font-id font-size font-variant-id]} values (let [{:keys [font-id font-size font-variant-id]} values
font-id (or font-id (:font-id txt/default-text-attrs)) font-id (or font-id (:font-id txt/default-text-attrs))
@ -261,15 +254,6 @@
:font-weight weight :font-weight weight
:font-style style})))) :font-style style}))))
on-font-family-change
(mf/use-callback
(mf/deps fonts change-font)
(fn [event]
(let [new-font-id (dom/get-target-val event)]
(when-not (str/empty? new-font-id)
(let [font (get fonts new-font-id)]
(fonts/ensure-loaded! new-font-id (partial change-font new-font-id)))))))
on-font-size-change on-font-size-change
(mf/use-callback (mf/use-callback
(mf/deps on-change) (mf/deps on-change)
@ -345,7 +329,7 @@
(mf/defc spacing-options (mf/defc spacing-options
[{:keys [editor ids values on-change] :as props}] [{:keys [values on-change] :as props}]
(let [{:keys [line-height (let [{:keys [line-height
letter-spacing]} values letter-spacing]} values
@ -385,13 +369,10 @@
:on-change #(handle-change % :letter-spacing)}]]])) :on-change #(handle-change % :letter-spacing)}]]]))
(mf/defc text-transform-options (mf/defc text-transform-options
[{:keys [editor ids values on-change] :as props}] [{:keys [values on-change] :as props}]
(let [{:keys [text-transform]} values (let [text-transform (or (:text-transform values) "none")
text-transform (or text-transform "none")
handle-change handle-change
(fn [event type] (fn [_ type]
(on-change {:text-transform type}))] (on-change {:text-transform type}))]
[:div.align-icons [:div.align-icons
[:span.tooltip.tooltip-bottom [:span.tooltip.tooltip-bottom
@ -461,7 +442,7 @@
(mf/deps focus-name?) (mf/deps focus-name?)
(fn [] (fn []
(when focus-name? (when focus-name?
(ts/schedule (tm/schedule
#(when-let [node (mf/ref-val name-input-ref)] #(when-let [node (mf/ref-val name-input-ref)]
(dom/focus! node) (dom/focus! node)
(dom/select-text! node)))))) (dom/select-text! node))))))
@ -539,7 +520,7 @@
:ref name-input-ref :ref name-input-ref
:default-value (cp/merge-path-item (:path typography) (:name typography)) :default-value (cp/merge-path-item (:path typography) (:name typography))
:on-blur on-name-blur}] :on-blur on-name-blur}]
[:div.element-set-actions-button [:div.element-set-actions-button
{:on-click #(reset! open? false)} {:on-click #(reset! open? false)}
i/actions]]] i/actions]]]

6
frontend/src/app/main/ui/workspace/sidebar/options/rows/input_row.cljs
View file

@ -6,12 +6,10 @@
(ns app.main.ui.workspace.sidebar.options.rows.input-row (ns app.main.ui.workspace.sidebar.options.rows.input-row
(:require (:require
[rumext.alpha :as mf] [app.main.ui.components.editable-select :refer [editable-select]]
[app.common.data :as d]
[app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.components.numeric-input :refer [numeric-input]]
[app.main.ui.components.select :refer [select]] [app.main.ui.components.select :refer [select]]
[app.main.ui.components.editable-select :refer [editable-select]] [rumext.alpha :as mf]))
[app.util.dom :as dom]))
(mf/defc input-row [{:keys [label options value class min max on-change type placeholder]}] (mf/defc input-row [{:keys [label options value class min max on-change type placeholder]}]
[:div.row-flex.input-row [:div.row-flex.input-row

12
frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs
View file

@ -6,14 +6,14 @@
(ns app.main.ui.workspace.sidebar.options.shapes.circle (ns app.main.ui.workspace.sidebar.options.shapes.circle
(:require (:require
[rumext.alpha :as mf]
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]]
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]]
[app.main.ui.workspace.sidebar.options.menus.svg-attrs :refer [svg-attrs-menu]] [app.main.ui.workspace.sidebar.options.menus.svg-attrs :refer [svg-attrs-menu]]
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]])) [rumext.alpha :as mf]))
(mf/defc options (mf/defc options
[{:keys [shape] :as props}] [{:keys [shape] :as props}]

27
frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs
View file

@ -6,23 +6,22 @@
(ns app.main.ui.workspace.sidebar.options.shapes.frame (ns app.main.ui.workspace.sidebar.options.shapes.frame
(:require (:require
[rumext.alpha :as mf]
[app.common.data :as d] [app.common.data :as d]
[app.util.dom :as dom]
[app.common.geom.point :as gpt]
[app.util.i18n :refer [tr]]
[app.common.math :as math] [app.common.math :as math]
[app.main.store :as st]
[app.main.data.workspace :as udw] [app.main.data.workspace :as udw]
[app.main.ui.icons :as i] [app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.components.numeric-input :refer [numeric-input]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]] [app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]]
[app.main.ui.workspace.sidebar.options.menus.frame-grid :refer [frame-grid]]
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]])) [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.menus.frame-grid :refer [frame-grid]]
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]]
[rumext.alpha :as mf]))
(declare +size-presets+) (declare +size-presets+)
@ -50,7 +49,7 @@
(st/emit! (udw/update-dimensions [(:id shape)] attr value))) (st/emit! (udw/update-dimensions [(:id shape)] attr value)))
on-proportion-lock-change on-proportion-lock-change
(fn [event] (fn [_]
(st/emit! (udw/set-shape-proportion-lock (:id shape) (not (:proportion-lock shape))))) (st/emit! (udw/set-shape-proportion-lock (:id shape) (not (:proportion-lock shape)))))
on-position-change on-position-change
@ -82,8 +81,8 @@
:on-click #(on-preset-selected (:width size-preset) (:height size-preset))} :on-click #(on-preset-selected (:width size-preset) (:height size-preset))}
(:name size-preset) (:name size-preset)
[:span (:width size-preset) " x " (:height size-preset)]]))]]] [:span (:width size-preset) " x " (:height size-preset)]]))]]]
[:span.orientation-icon {on-click #(on-orientation-clicked :vert)} i/size-vert] [:span.orientation-icon {:on-click #(on-orientation-clicked :vert)} i/size-vert]
[:span.orientation-icon {on-click #(on-orientation-clicked :horiz)} i/size-horiz]] [:span.orientation-icon {:on-click #(on-orientation-clicked :horiz)} i/size-horiz]]
;; WIDTH & HEIGHT ;; WIDTH & HEIGHT
[:div.row-flex [:div.row-flex

12
frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs
View file

@ -6,18 +6,18 @@
(ns app.main.ui.workspace.sidebar.options.shapes.group (ns app.main.ui.workspace.sidebar.options.shapes.group
(:require (:require
[rumext.alpha :as mf]
[app.common.data :as d] [app.common.data :as d]
[app.main.ui.workspace.sidebar.options.shapes.multiple :refer [get-attrs]] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measures-menu]]
[app.main.ui.workspace.sidebar.options.menus.component :refer [component-attrs component-menu]] [app.main.ui.workspace.sidebar.options.menus.component :refer [component-attrs component-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-menu]] [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-menu]]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]] [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-menu]]
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measures-menu]]
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-menu]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-menu]]
[app.main.ui.workspace.sidebar.options.menus.text :as ot]
[app.main.ui.workspace.sidebar.options.menus.svg-attrs :refer [svg-attrs-menu]] [app.main.ui.workspace.sidebar.options.menus.svg-attrs :refer [svg-attrs-menu]]
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]])) [app.main.ui.workspace.sidebar.options.menus.text :as ot]
[app.main.ui.workspace.sidebar.options.shapes.multiple :refer [get-attrs]]
[rumext.alpha :as mf]))
(mf/defc options (mf/defc options
{::mf/wrap [mf/memo] {::mf/wrap [mf/memo]

6
frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs
View file

@ -6,11 +6,11 @@
(ns app.main.ui.workspace.sidebar.options.shapes.image (ns app.main.ui.workspace.sidebar.options.shapes.image
(:require (:require
[rumext.alpha :as mf] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]] [rumext.alpha :as mf]))
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]))
(mf/defc options (mf/defc options
[{:keys [shape] :as props}] [{:keys [shape] :as props}]

2
frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs
View file

@ -147,7 +147,7 @@
:else (attrs/get-attrs-multi [v1 v2] attrs))) :else (attrs/get-attrs-multi [v1 v2] attrs)))
extract-attrs extract-attrs
(fn [[ids values] {:keys [id type shapes content] :as shape}] (fn [[ids values] {:keys [id type content] :as shape}]
(let [props (get-in type->props [type attr-type])] (let [props (get-in type->props [type attr-type])]
(case props (case props
:ignore [ids values] :ignore [ids values]

13
frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs
View file

@ -6,15 +6,14 @@
(ns app.main.ui.workspace.sidebar.options.shapes.path (ns app.main.ui.workspace.sidebar.options.shapes.path
(:require (:require
[rumext.alpha :as mf]
[app.common.data :as d]
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]]
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]]
[app.main.ui.workspace.sidebar.options.menus.svg-attrs :refer [svg-attrs-menu]] [app.main.ui.workspace.sidebar.options.menus.svg-attrs :refer [svg-attrs-menu]]
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]])) [rumext.alpha :as mf]))
(mf/defc options (mf/defc options
[{:keys [shape] :as props}] [{:keys [shape] :as props}]

12
frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs
View file

@ -6,14 +6,14 @@
(ns app.main.ui.workspace.sidebar.options.shapes.rect (ns app.main.ui.workspace.sidebar.options.shapes.rect
(:require (:require
[rumext.alpha :as mf]
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]]
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]]
[app.main.ui.workspace.sidebar.options.menus.svg-attrs :refer [svg-attrs-menu]] [app.main.ui.workspace.sidebar.options.menus.svg-attrs :refer [svg-attrs-menu]]
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]])) [rumext.alpha :as mf]))
(mf/defc options (mf/defc options
{::mf/wrap [mf/memo]} {::mf/wrap [mf/memo]}

39
frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs
View file

@ -6,22 +6,23 @@
(ns app.main.ui.workspace.sidebar.options.shapes.svg-raw (ns app.main.ui.workspace.sidebar.options.shapes.svg-raw
(:require (:require
[rumext.alpha :as mf]
[cuerdas.core :as str]
[app.util.data :as d]
[app.util.color :as uc]
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]]
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.svg-attrs :refer [svg-attrs-menu]])) [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]]
[app.main.ui.workspace.sidebar.options.menus.svg-attrs :refer [svg-attrs-menu]]
[app.util.color :as uc]
[app.util.data :as d]
[cuerdas.core :as str]
[rumext.alpha :as mf]))
;; This is a list of svg tags that can be grouped in shape-container ;; This is a list of svg tags that can be grouped in shape-container
;; this allows them to have gradients, shadows and masks ;; this allows them to have gradients, shadows and masks
(def svg-elements #{:svg :g :circle :ellipse :image :line :path :polygon :polyline :rect :symbol :text :textPath}) (def svg-elements #{:svg :g :circle :ellipse :image :line :path :polygon :polyline :rect :symbol :text :textPath})
(defn hex->number [hex] 1) (defn hex->number [_] 1)
(defn shorthex->longhex [hex] (defn shorthex->longhex [hex]
(let [[_ r g b] hex] (let [[_ r g b] hex]
(str "#" r r g g b b))) (str "#" r r g g b b)))
@ -45,10 +46,10 @@
(defn get-fill-values [shape] (defn get-fill-values [shape]
(let [fill-values (or (select-keys shape fill-attrs)) (let [fill-values (select-keys shape fill-attrs)
color (-> (or (get-in shape [:content :attrs :fill]) color (-> (or (get-in shape [:content :attrs :fill])
(get-in shape [:content :attrs :style :fill])) (get-in shape [:content :attrs :style :fill]))
(parse-color)) (parse-color))
fill-values (if (and (empty? fill-values) color) fill-values (if (and (empty? fill-values) color)
{:fill-color (:color color) {:fill-color (:color color)
@ -57,10 +58,10 @@
fill-values)) fill-values))
(defn get-stroke-values [shape] (defn get-stroke-values [shape]
(let [stroke-values (or (select-keys shape stroke-attrs)) (let [stroke-values (select-keys shape stroke-attrs)
color (-> (or (get-in shape [:content :attrs :stroke]) color (-> (or (get-in shape [:content :attrs :stroke])
(get-in shape [:content :attrs :style :stroke])) (get-in shape [:content :attrs :style :stroke]))
(parse-color)) (parse-color))
stroke-color (:color color "#000000") stroke-color (:color color "#000000")
stroke-opacity (:opacity color 1) stroke-opacity (:opacity color 1)
@ -90,7 +91,7 @@
(let [ids [(:id shape)] (let [ids [(:id shape)]
type (:type shape) type (:type shape)
{:keys [tag attrs] :as content} (:content shape) {:keys [tag] :as content} (:content shape)
measure-values (select-keys shape measure-attrs) measure-values (select-keys shape measure-attrs)
fill-values (get-fill-values shape) fill-values (get-fill-values shape)
stroke-values (get-stroke-values shape)] stroke-values (get-stroke-values shape)]

10
frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
View file

@ -18,8 +18,6 @@
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd] [app.util.keyboard :as kbd]
[app.util.router :as rt]
[cuerdas.core :as str]
[okulary.core :as l] [okulary.core :as l]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
@ -86,12 +84,12 @@
on-drop on-drop
(mf/use-callback (mf/use-callback
(mf/deps id) (mf/deps id)
(fn [side {:keys [id name] :as data}] (fn [side {:keys [id] :as data}]
(let [index (if (= :bot side) (inc index) index)] (let [index (if (= :bot side) (inc index) index)]
(st/emit! (dw/relocate-page id index))))) (st/emit! (dw/relocate-page id index)))))
on-duplicate on-duplicate
(fn [event] (fn [_]
(st/emit! (dw/duplicate-page id))) (st/emit! (dw/duplicate-page id)))
[dprops dref] [dprops dref]
@ -169,7 +167,7 @@
st/state =)) st/state =))
(mf/defc page-item-wrapper (mf/defc page-item-wrapper
[{:keys [file-id page-id index deletable? selected?] :as props}] [{:keys [page-id index deletable? selected?] :as props}]
(let [page-ref (mf/use-memo (mf/deps page-id) #(make-page-ref page-id)) (let [page-ref (mf/use-memo (mf/deps page-id) #(make-page-ref page-id))
page (mf/deref page-ref)] page (mf/deref page-ref)]
[:& page-item {:page page [:& page-item {:page page
@ -197,7 +195,7 @@
;; --- Sitemap Toolbox ;; --- Sitemap Toolbox
(mf/defc sitemap (mf/defc sitemap
[{:keys [layout] :as props}] []
(let [file (mf/deref refs/workspace-file) (let [file (mf/deref refs/workspace-file)
create (mf/use-callback create (mf/use-callback
(mf/deps file) (mf/deps file)

7
frontend/src/app/main/ui/workspace/viewport.cljs
View file

@ -7,11 +7,9 @@
(ns app.main.ui.workspace.viewport (ns app.main.ui.workspace.viewport
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.geom.shapes :as gsh]
[app.common.pages :as cp] [app.common.pages :as cp]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.ui.context :as ctx] [app.main.ui.context :as ctx]
[app.main.ui.context :as muc]
[app.main.ui.measurements :as msr] [app.main.ui.measurements :as msr]
[app.main.ui.shapes.embed :as embed] [app.main.ui.shapes.embed :as embed]
[app.main.ui.shapes.export :as use] [app.main.ui.shapes.export :as use]
@ -79,7 +77,6 @@
;; REFS ;; REFS
viewport-ref (mf/use-ref nil) viewport-ref (mf/use-ref nil)
zoom-view-ref (mf/use-ref nil)
render-ref (mf/use-ref nil) render-ref (mf/use-ref nil)
;; VARS ;; VARS
@ -139,7 +136,9 @@
show-presence? page-id show-presence? page-id
show-prototypes? (= options-mode :prototype) show-prototypes? (= options-mode :prototype)
show-selection-handlers? (seq selected) show-selection-handlers? (seq selected)
show-snap-distance? (and (contains? layout :dynamic-alignment) (= transform :move) (not (empty? selected))) show-snap-distance? (and (contains? layout :dynamic-alignment)
(= transform :move)
(seq selected))
show-snap-points? (and (or (contains? layout :dynamic-alignment) show-snap-points? (and (or (contains? layout :dynamic-alignment)
(contains? layout :snap-grid)) (contains? layout :snap-grid))
(or drawing-obj transform)) (or drawing-obj transform))

7
frontend/src/app/main/ui/workspace/viewport/actions.cljs
View file

@ -12,10 +12,10 @@
[app.main.data.workspace :as dw] [app.main.data.workspace :as dw]
[app.main.data.workspace.drawing :as dd] [app.main.data.workspace.drawing :as dd]
[app.main.data.workspace.libraries :as dwl] [app.main.data.workspace.libraries :as dwl]
[app.main.data.workspace.path :as dwdp]
[app.main.store :as st] [app.main.store :as st]
[app.main.streams :as ms] [app.main.streams :as ms]
[app.main.ui.workspace.viewport.utils :as utils] [app.main.ui.workspace.viewport.utils :as utils]
[app.main.data.workspace.path :as dwdp]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.dom.dnd :as dnd] [app.util.dom.dnd :as dnd]
[app.util.keyboard :as kbd] [app.util.keyboard :as kbd]
@ -290,8 +290,7 @@
(st/emit! (ms/->KeyboardEvent :up key shift? ctrl? alt? meta?)))))) (st/emit! (ms/->KeyboardEvent :up key shift? ctrl? alt? meta?))))))
(defn on-mouse-move [viewport-ref zoom] (defn on-mouse-move [viewport-ref zoom]
(let [last-position (mf/use-var nil) (let [last-position (mf/use-var nil)]
viewport (mf/ref-val viewport-ref)]
(mf/use-callback (mf/use-callback
(mf/deps zoom) (mf/deps zoom)
(fn [event] (fn [event]
@ -477,7 +476,7 @@
(defn on-resize [viewport-ref] (defn on-resize [viewport-ref]
(mf/use-callback (mf/use-callback
(fn [event] (fn [_]
(let [node (mf/ref-val viewport-ref) (let [node (mf/ref-val viewport-ref)
prnt (dom/get-parent node) prnt (dom/get-parent node)
size (dom/get-client-size prnt)] size (dom/get-client-size prnt)]

19
frontend/src/app/main/ui/workspace/viewport/drawarea.cljs
View file

@ -7,17 +7,12 @@
(ns app.main.ui.workspace.viewport.drawarea (ns app.main.ui.workspace.viewport.drawarea
"Drawing components." "Drawing components."
(:require (:require
[rumext.alpha :as mf]
[app.main.data.workspace :as dw]
[app.main.data.workspace.drawing :as dd]
[app.main.store :as st]
[app.main.ui.workspace.shapes :as shapes]
[app.main.ui.shapes.path :refer [path-shape]]
[app.main.ui.workspace.shapes.path.editor :refer [path-editor]]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.common.data :as d] [app.common.math :as mth]
[app.util.dom :as dom] [app.main.ui.shapes.path :refer [path-shape]]
[app.util.i18n :as i18n :refer [t]])) [app.main.ui.workspace.shapes :as shapes]
[app.main.ui.workspace.shapes.path.editor :refer [path-editor]]
[rumext.alpha :as mf]))
(declare generic-draw-area) (declare generic-draw-area)
(declare path-draw-area) (declare path-draw-area)
@ -38,8 +33,8 @@
[{:keys [shape zoom]}] [{:keys [shape zoom]}]
(let [{:keys [x y width height]} (:selrect (gsh/transform-shape shape))] (let [{:keys [x y width height]} (:selrect (gsh/transform-shape shape))]
(when (and x y (when (and x y
(not (d/nan? x)) (not (mth/nan? x))
(not (d/nan? y))) (not (mth/nan? y)))
[:rect.main {:x x :y y [:rect.main {:x x :y y
:width width :width width

15
frontend/src/app/main/ui/workspace/viewport/frame_grid.cljs
View file

@ -6,18 +6,17 @@
(ns app.main.ui.workspace.viewport.frame-grid (ns app.main.ui.workspace.viewport.frame-grid
(:require (:require
[rumext.alpha :as mf]
[okulary.core :as l]
[app.main.refs :as refs]
[app.common.math :as mth]
[app.common.pages :as cp]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.common.math :as mth]
[app.common.uuid :as uuid]
[app.main.refs :as refs]
[app.util.geom.grid :as gg] [app.util.geom.grid :as gg]
[app.common.uuid :as uuid])) [okulary.core :as l]
[rumext.alpha :as mf]))
(mf/defc square-grid [{:keys [frame zoom grid] :as props}] (mf/defc square-grid [{:keys [frame zoom grid] :as props}]
(let [grid-id (mf/use-memo #(uuid/next)) (let [grid-id (mf/use-memo #(uuid/next))
{:keys [color size] :as params} (-> grid :params) {:keys [size] :as params} (-> grid :params)
{color-value :color color-opacity :opacity} (-> grid :params :color) {color-value :color color-opacity :opacity} (-> grid :params :color)
;; Support for old color format ;; Support for old color format
color-value (or color-value (:value (get-in grid [:params :color :value])))] color-value (or color-value (:value (get-in grid [:params :color :value])))]
@ -43,7 +42,7 @@
:height (:height frame) :height (:height frame)
:fill (str "url(#" grid-id ")")}]])) :fill (str "url(#" grid-id ")")}]]))
(mf/defc layout-grid [{:keys [key frame zoom grid]}] (mf/defc layout-grid [{:keys [key frame grid]}]
(let [{color-value :color color-opacity :opacity} (-> grid :params :color) (let [{color-value :color color-opacity :opacity} (-> grid :params :color)
;; Support for old color format ;; Support for old color format
color-value (or color-value (:value (get-in grid [:params :color :value]))) color-value (or color-value (:value (get-in grid [:params :color :value])))

30
frontend/src/app/main/ui/workspace/viewport/gradients.cljs
View file

@ -7,21 +7,19 @@
(ns app.main.ui.workspace.viewport.gradients (ns app.main.ui.workspace.viewport.gradients
"Gradients handlers and renders" "Gradients handlers and renders"
(:require (:require
[rumext.alpha :as mf]
[cuerdas.core :as str]
[beicon.core :as rx]
[okulary.core :as l]
[app.common.math :as mth]
[app.common.geom.shapes :as gsh]
[app.common.geom.point :as gpt]
[app.common.geom.matrix :as gmt] [app.common.geom.matrix :as gmt]
[app.util.dom :as dom] [app.common.geom.point :as gpt]
[app.main.store :as st] [app.common.geom.shapes :as gsh]
[app.common.math :as mth]
[app.main.data.workspace.colors :as dc]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st]
[app.main.streams :as ms] [app.main.streams :as ms]
[app.main.data.modal :as modal] [app.util.dom :as dom]
[app.main.data.workspace.common :as dwc] [beicon.core :as rx]
[app.main.data.workspace.colors :as dc])) [cuerdas.core :as str]
[okulary.core :as l]
[rumext.alpha :as mf]))
(def gradient-line-stroke-width 2) (def gradient-line-stroke-width 2)
(def gradient-line-stroke-color "white") (def gradient-line-stroke-color "white")
@ -94,7 +92,7 @@
on-click on-mouse-down on-mouse-up]}] on-click on-mouse-down on-mouse-up]}]
[:g {:filter (str/fmt "url(#%s)" filter-id) [:g {:filter (str/fmt "url(#%s)" filter-id)
:transform (gmt/rotate-matrix angle point)} :transform (gmt/rotate-matrix angle point)}
[:image {:href checkboard [:image {:href checkboard
:x (- (:x point) (/ gradient-square-width 2 zoom)) :x (- (:x point) (/ gradient-square-width 2 zoom))
:y (- (:y point) (/ gradient-square-width 2 zoom)) :y (- (:y point) (/ gradient-square-width 2 zoom))
@ -127,7 +125,7 @@
(mf/defc gradient-handler-transformed (mf/defc gradient-handler-transformed
[{:keys [from-p to-p width-p from-color to-color zoom editing [{:keys [from-p to-p width-p from-color to-color zoom editing
on-change-start on-change-finish on-change-width on-change-stop-color]}] on-change-start on-change-finish on-change-width]}]
(let [moving-point (mf/use-var nil) (let [moving-point (mf/use-var nil)
angle (+ 90 (gpt/angle from-p to-p)) angle (+ 90 (gpt/angle from-p to-p))
@ -138,7 +136,7 @@
(st/emit! (dc/select-gradient-stop (case position (st/emit! (dc/select-gradient-stop (case position
:from-p 0 :from-p 0
:to-p 1))))) :to-p 1)))))
on-mouse-down (fn [position event] on-mouse-down (fn [position event]
(dom/stop-propagation event) (dom/stop-propagation event)
(dom/prevent-default event) (dom/prevent-default event)
@ -148,7 +146,7 @@
:from-p 0 :from-p 0
:to-p 1))))) :to-p 1)))))
on-mouse-up (fn [position event] on-mouse-up (fn [_position event]
(dom/stop-propagation event) (dom/stop-propagation event)
(dom/prevent-default event) (dom/prevent-default event)
(reset! moving-point nil))] (reset! moving-point nil))]

12
frontend/src/app/main/ui/workspace/viewport/hooks.cljs
View file

@ -37,8 +37,6 @@
(mf/deps on-key-down on-key-up on-mouse-move on-mouse-wheel on-resize on-paste) (mf/deps on-key-down on-key-up on-mouse-move on-mouse-wheel on-resize on-paste)
(fn [] (fn []
(let [node (mf/ref-val viewport-ref) (let [node (mf/ref-val viewport-ref)
prnt (dom/get-parent node)
keys [(events/listen js/document EventType.KEYDOWN on-key-down) keys [(events/listen js/document EventType.KEYDOWN on-key-down)
(events/listen js/document EventType.KEYUP on-key-up) (events/listen js/document EventType.KEYUP on-key-up)
(events/listen node EventType.MOUSEMOVE on-mouse-move) (events/listen node EventType.MOUSEMOVE on-mouse-move)
@ -90,7 +88,8 @@
(hooks/use-stream ms/keyboard-alt #(reset! alt? %)) (hooks/use-stream ms/keyboard-alt #(reset! alt? %))
(hooks/use-stream ms/keyboard-ctrl #(reset! ctrl? %))) (hooks/use-stream ms/keyboard-ctrl #(reset! ctrl? %)))
(defn setup-hover-shapes [page-id move-stream selected objects transform selected ctrl? hover hover-ids zoom] ;; TODO: revisit the arguments, looks like `selected` is not necessary here
(defn setup-hover-shapes [page-id move-stream _selected objects transform selected ctrl? hover hover-ids zoom]
(let [query-point (let [query-point
(mf/use-callback (mf/use-callback
(mf/deps page-id) (mf/deps page-id)
@ -111,12 +110,7 @@
;; When transforming shapes we stop querying the worker ;; When transforming shapes we stop querying the worker
(rx/filter #(not (some? (mf/ref-val transform-ref)))) (rx/filter #(not (some? (mf/ref-val transform-ref))))
(rx/switch-map query-point)) (rx/switch-map query-point))
]
roots (mf/use-memo
(mf/deps selected objects)
(fn []
(let [roots-ids (cp/clean-loops objects selected)]
(->> roots-ids (mapv #(get objects %))))))]
(mf/use-effect (mf/use-effect
(mf/deps transform) (mf/deps transform)

25
frontend/src/app/main/ui/workspace/viewport/interactions.cljs
View file

@ -7,15 +7,11 @@
(ns app.main.ui.workspace.viewport.interactions (ns app.main.ui.workspace.viewport.interactions
"Visually show shape interactions in workspace" "Visually show shape interactions in workspace"
(:require (:require
[app.common.geom.point :as gpt]
[app.common.geom.shapes :as geom]
[app.main.data.workspace :as dw] [app.main.data.workspace :as dw]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.workspace.viewport.outline :refer [outline]] [app.main.ui.workspace.viewport.outline :refer [outline]]
[app.util.data :as dt]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.keyboard :as kbd]
[cuerdas.core :as str] [cuerdas.core :as str]
[rumext.alpha :as mf] [rumext.alpha :as mf]
)) ))
@ -24,14 +20,11 @@
[shape] [shape]
(first (filter #(= (:event-type %) :click) (:interactions shape)))) (first (filter #(= (:event-type %) :click) (:interactions shape))))
(defn- on-mouse-down (defn- on-mouse-down
[event {:keys [id type] :as shape} selected] [event {:keys [id] :as shape}]
(do (dom/stop-propagation event)
(dom/stop-propagation event) (st/emit! (dw/select-shape id))
(st/emit! (dw/select-shape id)) (st/emit! (dw/start-create-interaction)))
(st/emit! (dw/start-create-interaction))))
(defn connect-to-shape (defn connect-to-shape
"Calculate the best position to draw an interaction line "Calculate the best position to draw an interaction line
@ -118,7 +111,7 @@
(mf/defc interaction-path (mf/defc interaction-path
[{:keys [orig-shape dest-shape dest-point selected selected? zoom] :as props}] [{:keys [orig-shape dest-shape dest-point selected? zoom] :as props}]
(let [[orig-pos orig-x orig-y dest-pos dest-x dest-y] (let [[orig-pos orig-x orig-y dest-pos dest-x dest-y]
(if dest-shape (if dest-shape
(connect-to-shape orig-shape dest-shape) (connect-to-shape orig-shape dest-shape)
@ -138,9 +131,9 @@
:pointer-events "visible" :pointer-events "visible"
:stroke-width (/ 2 zoom) :stroke-width (/ 2 zoom)
:d pdata :d pdata
:on-mouse-down #(on-mouse-down % orig-shape selected)}] :on-mouse-down #(on-mouse-down % orig-shape)}]
[:g {:on-mouse-down #(on-mouse-down % orig-shape selected)} [:g {:on-mouse-down #(on-mouse-down % orig-shape)}
[:path {:stroke "#31EFB8" [:path {:stroke "#31EFB8"
:fill "none" :fill "none"
:pointer-events "visible" :pointer-events "visible"
@ -161,11 +154,11 @@
(mf/defc interaction-handle (mf/defc interaction-handle
[{:keys [shape selected zoom] :as props}] [{:keys [shape zoom] :as props}]
(let [shape-rect (:selrect shape) (let [shape-rect (:selrect shape)
handle-x (+ (:x shape-rect) (:width shape-rect)) handle-x (+ (:x shape-rect) (:width shape-rect))
handle-y (+ (:y shape-rect) (/ (:height shape-rect) 2))] handle-y (+ (:y shape-rect) (/ (:height shape-rect) 2))]
[:g {:on-mouse-down #(on-mouse-down % shape selected)} [:g {:on-mouse-down #(on-mouse-down % shape)}
[:& interaction-marker {:x handle-x [:& interaction-marker {:x handle-x
:y handle-y :y handle-y
:arrow-dir :right :arrow-dir :right

4
frontend/src/app/main/ui/workspace/viewport/outline.cljs
View file

@ -9,8 +9,8 @@
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.common.pages :as cp] [app.common.pages :as cp]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.util.path.format :as upf]
[app.util.object :as obj] [app.util.object :as obj]
[app.util.path.format :as upf]
[clojure.set :as set] [clojure.set :as set]
[rumext.alpha :as mf] [rumext.alpha :as mf]
[rumext.util :refer [map->obj]])) [rumext.util :refer [map->obj]]))
@ -29,7 +29,7 @@
(mf/deps shape) (mf/deps shape)
#(when path? (upf/format-path (:content shape)))) #(when path? (upf/format-path (:content shape))))
{:keys [id x y width height selrect]} shape {:keys [x y width height selrect]} shape
outline-type (case (:type shape) outline-type (case (:type shape)
:circle "ellipse" :circle "ellipse"

45
frontend/src/app/main/ui/workspace/viewport/path_actions.cljs
View file

@ -7,9 +7,7 @@
(ns app.main.ui.workspace.viewport.path-actions (ns app.main.ui.workspace.viewport.path-actions
(:require (:require
[app.main.data.workspace.path :as drp] [app.main.data.workspace.path :as drp]
[app.main.data.workspace.path.helpers :as wph]
[app.main.data.workspace.path.shortcuts :as sc] [app.main.data.workspace.path.shortcuts :as sc]
[app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.shapes.path.common :as pc] [app.main.ui.workspace.shapes.path.common :as pc]
@ -20,8 +18,8 @@
(defn check-enabled [content selected-points] (defn check-enabled [content selected-points]
(let [segments (upt/get-segments content selected-points) (let [segments (upt/get-segments content selected-points)
num-points (count selected-points) num-points (count selected-points)
points-selected? (not (empty? selected-points)) points-selected? (seq selected-points)
segments-selected? (not (empty? segments))] segments-selected? (seq segments)]
{:make-corner points-selected? {:make-corner points-selected?
:make-curve points-selected? :make-curve points-selected?
:add-node segments-selected? :add-node segments-selected?
@ -31,8 +29,7 @@
:separate-nodes segments-selected?})) :separate-nodes segments-selected?}))
(mf/defc path-actions [{:keys [shape]}] (mf/defc path-actions [{:keys [shape]}]
(let [id (mf/deref refs/selected-edition) (let [{:keys [edit-mode selected-points snap-toggled] :as all} (mf/deref pc/current-edit-path-ref)
{:keys [edit-mode selected-points snap-toggled] :as all} (mf/deref pc/current-edit-path-ref)
content (:content shape) content (:content shape)
enabled-buttons enabled-buttons
@ -42,66 +39,66 @@
on-select-draw-mode on-select-draw-mode
(mf/use-callback (mf/use-callback
(fn [event] (fn [_]
(st/emit! (drp/change-edit-mode :draw)))) (st/emit! (drp/change-edit-mode :draw))))
on-select-edit-mode on-select-edit-mode
(mf/use-callback (mf/use-callback
(fn [event] (fn [_]
(st/emit! (drp/change-edit-mode :move)))) (st/emit! (drp/change-edit-mode :move))))
on-add-node on-add-node
(mf/use-callback (mf/use-callback
(mf/deps (:add-node enabled-buttons)) (mf/deps (:add-node enabled-buttons))
(fn [event] (fn [_]
(when (:add-node enabled-buttons) (when (:add-node enabled-buttons)
(st/emit! (drp/add-node))))) (st/emit! (drp/add-node)))))
on-remove-node on-remove-node
(mf/use-callback (mf/use-callback
(mf/deps (:remove-node enabled-buttons)) (mf/deps (:remove-node enabled-buttons))
(fn [event] (fn [_]
(when (:remove-node enabled-buttons) (when (:remove-node enabled-buttons)
(st/emit! (drp/remove-node))))) (st/emit! (drp/remove-node)))))
on-merge-nodes on-merge-nodes
(mf/use-callback (mf/use-callback
(mf/deps (:merge-nodes enabled-buttons)) (mf/deps (:merge-nodes enabled-buttons))
(fn [event] (fn [_]
(when (:merge-nodes enabled-buttons) (when (:merge-nodes enabled-buttons)
(st/emit! (drp/merge-nodes))))) (st/emit! (drp/merge-nodes)))))
on-join-nodes on-join-nodes
(mf/use-callback (mf/use-callback
(mf/deps (:join-nodes enabled-buttons)) (mf/deps (:join-nodes enabled-buttons))
(fn [event] (fn [_]
(when (:join-nodes enabled-buttons) (when (:join-nodes enabled-buttons)
(st/emit! (drp/join-nodes))))) (st/emit! (drp/join-nodes)))))
on-separate-nodes on-separate-nodes
(mf/use-callback (mf/use-callback
(mf/deps (:separate-nodes enabled-buttons)) (mf/deps (:separate-nodes enabled-buttons))
(fn [event] (fn [_]
(when (:separate-nodes enabled-buttons) (when (:separate-nodes enabled-buttons)
(st/emit! (drp/separate-nodes))))) (st/emit! (drp/separate-nodes)))))
on-make-corner on-make-corner
(mf/use-callback (mf/use-callback
(mf/deps (:make-corner enabled-buttons)) (mf/deps (:make-corner enabled-buttons))
(fn [event] (fn [_]
(when (:make-corner enabled-buttons) (when (:make-corner enabled-buttons)
(st/emit! (drp/make-corner))))) (st/emit! (drp/make-corner)))))
on-make-curve on-make-curve
(mf/use-callback (mf/use-callback
(mf/deps (:make-curve enabled-buttons)) (mf/deps (:make-curve enabled-buttons))
(fn [event] (fn [_]
(when (:make-curve enabled-buttons) (when (:make-curve enabled-buttons)
(st/emit! (drp/make-curve))))) (st/emit! (drp/make-curve)))))
on-toggle-snap on-toggle-snap
(mf/use-callback (mf/use-callback
(fn [event] (fn [_]
(st/emit! (drp/toggle-snap)))) (st/emit! (drp/toggle-snap))))
] ]
@ -121,7 +118,7 @@
:alt (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes)) :alt (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes))
:on-click on-select-edit-mode} :on-click on-select-edit-mode}
i/pointer-inner]] i/pointer-inner]]
[:div.viewport-actions-group [:div.viewport-actions-group
;; Add Node ;; Add Node
[:div.viewport-actions-entry.tooltip.tooltip-bottom [:div.viewport-actions-entry.tooltip.tooltip-bottom

18
frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs
View file

@ -7,21 +7,18 @@
(ns app.main.ui.workspace.viewport.pixel-overlay (ns app.main.ui.workspace.viewport.pixel-overlay
(:require (:require
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.main.data.workspace.colors :as dwc]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.data.workspace.colors :as dwc]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.context :as muc]
[app.main.ui.cursors :as cur] [app.main.ui.cursors :as cur]
[app.main.ui.workspace.shapes :refer [shape-wrapper frame-wrapper]] [app.main.ui.workspace.shapes :refer [shape-wrapper frame-wrapper]]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.keyboard :as kbd] [app.util.keyboard :as kbd]
[app.util.object :as obj] [app.util.object :as obj]
[app.util.timers :as timers]
[beicon.core :as rx] [beicon.core :as rx]
[cuerdas.core :as str] [cuerdas.core :as str]
[goog.events :as events] [goog.events :as events]
[okulary.core :as l]
[promesa.core :as p] [promesa.core :as p]
[rumext.alpha :as mf]) [rumext.alpha :as mf])
(:import goog.events.EventType)) (:import goog.events.EventType))
@ -54,11 +51,8 @@
{::mf/wrap-props false} {::mf/wrap-props false}
[props] [props]
(let [vport (unchecked-get props "vport") (let [vport (unchecked-get props "vport")
vbox (unchecked-get props "vbox")
viewport-ref (unchecked-get props "viewport-ref") viewport-ref (unchecked-get props "viewport-ref")
viewport-node (mf/ref-val viewport-ref) viewport-node (mf/ref-val viewport-ref)
options (unchecked-get props "options")
svg-ref (mf/use-ref nil)
canvas-ref (mf/use-ref nil) canvas-ref (mf/use-ref nil)
img-ref (mf/use-ref nil) img-ref (mf/use-ref nil)
@ -67,11 +61,11 @@
handle-keydown handle-keydown
(mf/use-callback (mf/use-callback
(fn [event] (fn [event]
(when (and (kbd/esc? event)) (when (kbd/esc? event)
(do (dom/stop-propagation event) (dom/stop-propagation event)
(dom/prevent-default event) (dom/prevent-default event)
(st/emit! (dwc/stop-picker)) (st/emit! (dwc/stop-picker))
(modal/disallow-click-outside!))))) (modal/disallow-click-outside!))))
handle-mouse-move-picker handle-mouse-move-picker
(mf/use-callback (mf/use-callback

45
frontend/src/app/main/ui/workspace/viewport/selection.cljs
View file

@ -10,23 +10,15 @@
[app.common.geom.matrix :as gmt] [app.common.geom.matrix :as gmt]
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.geom.shapes :as geom] [app.common.geom.shapes :as geom]
[app.common.math :as mth]
[app.common.uuid :as uuid]
[app.main.data.workspace :as dw] [app.main.data.workspace :as dw]
[app.main.data.workspace.common :as dwc]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.streams :as ms]
[app.main.ui.cursors :as cur] [app.main.ui.cursors :as cur]
[app.main.ui.hooks :as hooks]
[app.main.ui.workspace.shapes.path.editor :refer [path-editor]] [app.main.ui.workspace.shapes.path.editor :refer [path-editor]]
[app.util.data :as d]
[app.util.debug :refer [debug?]] [app.util.debug :refer [debug?]]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.object :as obj] [app.util.object :as obj]
[beicon.core :as rx]
[cuerdas.core :as str] [cuerdas.core :as str]
[potok.core :as ptk]
[rumext.alpha :as mf] [rumext.alpha :as mf]
[rumext.util :refer [map->obj]])) [rumext.util :refer [map->obj]]))
@ -178,17 +170,12 @@
:cursor cursor} :cursor cursor}
:on-mouse-down #(on-resize {:x cx' :y cy'} %)}]) :on-mouse-down #(on-resize {:x cx' :y cy'} %)}])
(let [rot-square (case position [:circle {:on-mouse-down #(on-resize {:x cx' :y cy'} %)
:top-left 0 :r (/ resize-point-circle-radius zoom)
:top-right 90 :cx cx'
:bottom-right 180 :cy cy'
:bottom-left 270)] :style {:fill (if (debug? :resize-handler) "red" "none")
[:circle {:on-mouse-down #(on-resize {:x cx' :y cy'} %) :cursor cursor}}]
:r (/ resize-point-circle-radius zoom)
:cx cx'
:cy cy'
:style {:fill (if (debug? :resize-handler) "red" "none")
:cursor cursor}}])
)])) )]))
(mf/defc resize-side-handler (mf/defc resize-side-handler
@ -232,7 +219,7 @@
(mf/defc controls (mf/defc controls
{::mf/wrap-props false} {::mf/wrap-props false}
[props] [props]
(let [{:keys [overflow-text type] :as shape} (obj/get props "shape") (let [{:keys [overflow-text] :as shape} (obj/get props "shape")
zoom (obj/get props "zoom") zoom (obj/get props "zoom")
color (obj/get props "color") color (obj/get props "color")
on-move-selected (obj/get props "on-move-selected") on-move-selected (obj/get props "on-move-selected")
@ -275,7 +262,7 @@
;; TODO: add specs for clarity ;; TODO: add specs for clarity
(mf/defc text-edition-selection-handlers (mf/defc text-edition-selection-handlers
[{:keys [shape zoom color] :as props}] [{:keys [shape color] :as props}]
(let [{:keys [x y width height]} shape] (let [{:keys [x y width height]} shape]
[:g.controls [:g.controls
[:rect.main {:x x :y y [:rect.main {:x x :y y
@ -299,12 +286,6 @@
shape-center (geom/center-shape shape) shape-center (geom/center-shape shape)
hover-id (-> (mf/deref refs/current-hover) first)
hover-id (when-not (d/seek #(= hover-id (:id %)) shapes) hover-id)
hover-shape (mf/deref (refs/object-by-id hover-id))
vbox (mf/deref refs/vbox)
on-resize (fn [current-position initial-position event] on-resize (fn [current-position initial-position event]
(dom/stop-propagation event) (dom/stop-propagation event)
(st/emit! (dw/start-resize current-position initial-position selected shape))) (st/emit! (dw/start-resize current-position initial-position selected shape)))
@ -329,14 +310,6 @@
(let [shape-id (:id shape) (let [shape-id (:id shape)
shape (geom/transform-shape shape {:round-coords? false}) shape (geom/transform-shape shape {:round-coords? false})
frame (mf/deref (refs/object-by-id (:frame-id shape)))
frame (when-not (= (:id frame) uuid/zero) frame)
vbox (mf/deref refs/vbox)
hover-id (-> (mf/deref refs/current-hover) first)
hover-id (when-not (= shape-id hover-id) hover-id)
hover-shape (mf/deref (refs/object-by-id hover-id))
shape' (if (debug? :simple-selection) (geom/setup {:type :rect} (geom/selection-rect [shape])) shape) shape' (if (debug? :simple-selection) (geom/setup {:type :rect} (geom/selection-rect [shape])) shape)
on-resize (fn [current-position initial-position event] on-resize (fn [current-position initial-position event]
(dom/stop-propagation event) (dom/stop-propagation event)
@ -357,7 +330,7 @@
{::mf/wrap [mf/memo]} {::mf/wrap [mf/memo]}
[{:keys [shapes selected edition zoom disable-handlers on-move-selected] :as props}] [{:keys [shapes selected edition zoom disable-handlers on-move-selected] :as props}]
(let [num (count shapes) (let [num (count shapes)
{:keys [id type] :as shape} (first shapes) {:keys [type] :as shape} (first shapes)
color (if (or (> num 1) (nil? (:shape-ref shape))) color (if (or (> num 1) (nil? (:shape-ref shape)))
selection-rect-color-normal selection-rect-color-normal

39
frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs
View file

@ -7,15 +7,11 @@
(ns app.main.ui.workspace.viewport.snap-distances (ns app.main.ui.workspace.viewport.snap-distances
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.geom.point :as gpt]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.common.math :as mth] [app.common.math :as mth]
[app.common.pages :as cp] [app.common.pages :as cp]
[app.common.uuid :as uuid]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.snap :as snap]
[app.main.worker :as uw] [app.main.worker :as uw]
[app.util.geom.snap-points :as sp]
[beicon.core :as rx] [beicon.core :as rx]
[clojure.set :as set] [clojure.set :as set]
[cuerdas.core :as str] [cuerdas.core :as str]
@ -275,21 +271,20 @@
update-shape (fn [shape] (-> shape update-shape (fn [shape] (-> shape
(update :modifiers merge (:modifiers local)) (update :modifiers merge (:modifiers local))
gsh/transform-shape))] gsh/transform-shape))
(let [selrect (->> selected-shapes (map update-shape) gsh/selection-rect) selrect (->> selected-shapes (map update-shape) gsh/selection-rect)]
key (->> selected (map str) (str/join "-"))] [:g.distance
[:g.distance [:& shape-distance
[:& shape-distance {:selrect selrect
{:selrect selrect :page-id page-id
:page-id page-id :frame frame
:frame frame :zoom zoom
:zoom zoom :coord :x
:coord :x :selected selected}]
:selected selected}] [:& shape-distance
[:& shape-distance {:selrect selrect
{:selrect selrect :page-id page-id
:page-id page-id :frame frame
:frame frame :zoom zoom
:zoom zoom :coord :y
:coord :y :selected selected}]]))
:selected selected}]])))

8
frontend/src/app/main/ui/workspace/viewport/snap_points.cljs
View file

@ -6,12 +6,10 @@
(ns app.main.ui.workspace.viewport.snap-points (ns app.main.ui.workspace.viewport.snap-points
(:require (:require
[app.common.pages :as cp]
[app.common.math :as mth]
[app.common.data :as d] [app.common.data :as d]
[app.common.geom.point :as gpt]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.main.refs :as refs] [app.common.math :as mth]
[app.common.pages :as cp]
[app.main.snap :as snap] [app.main.snap :as snap]
[app.util.geom.snap-points :as sp] [app.util.geom.snap-points :as sp]
[beicon.core :as rx] [beicon.core :as rx]
@ -106,7 +104,7 @@
(hash-map coord fixedv (flip coord) maxv)])))) (hash-map coord fixedv (flip coord) maxv)]))))
(mf/defc snap-feedback (mf/defc snap-feedback
[{:keys [shapes page-id filter-shapes zoom modifiers] :as props}] [{:keys [shapes filter-shapes zoom modifiers] :as props}]
(let [state (mf/use-state []) (let [state (mf/use-state [])
subject (mf/use-memo #(rx/subject)) subject (mf/use-memo #(rx/subject))

13
frontend/src/app/main/ui/workspace/viewport/utils.cljs
View file

@ -6,14 +6,14 @@
(ns app.main.ui.workspace.viewport.utils (ns app.main.ui.workspace.viewport.utils
(:require (:require
[app.util.dom :as dom]
[app.common.geom.point :as gpt]
[cuerdas.core :as str]
[app.common.data :as d] [app.common.data :as d]
[app.common.geom.point :as gpt]
[app.main.ui.cursors :as cur] [app.main.ui.cursors :as cur]
)) [app.util.dom :as dom]
[cuerdas.core :as str]))
(defn update-transform [node shapes modifiers] ;; TODO: looks like first argument is not necessary.
(defn update-transform [_node shapes modifiers]
(doseq [{:keys [id type]} shapes] (doseq [{:keys [id type]} shapes]
(let [shape-node (dom/get-element (str "shape-" id)) (let [shape-node (dom/get-element (str "shape-" id))
@ -30,7 +30,8 @@
shape-node)] shape-node)]
(dom/set-attribute node "transform" (str (:displacement modifiers))))))) (dom/set-attribute node "transform" (str (:displacement modifiers)))))))
(defn remove-transform [node shapes] ;; TODO: looks like first argument is not necessary.
(defn remove-transform [_node shapes]
(doseq [{:keys [id type]} shapes] (doseq [{:keys [id type]} shapes]
(when-let [node (dom/get-element (str "shape-" id))] (when-let [node (dom/get-element (str "shape-" id))]
(let [node (if (= :frame type) (.-parentNode node) node)] (let [node (if (= :frame type) (.-parentNode node) node)]

5
frontend/src/app/main/ui/workspace/viewport/widgets.cljs
View file

@ -16,7 +16,6 @@
[app.main.ui.hooks :as hooks] [app.main.ui.hooks :as hooks]
[app.main.ui.workspace.viewport.path-actions :refer [path-actions]] [app.main.ui.workspace.viewport.path-actions :refer [path-actions]]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.object :as obj]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
(mf/defc pixel-grid (mf/defc pixel-grid
@ -110,13 +109,13 @@
on-pointer-enter on-pointer-enter
(mf/use-callback (mf/use-callback
(mf/deps (:id frame) on-frame-enter) (mf/deps (:id frame) on-frame-enter)
(fn [event] (fn [_]
(on-frame-enter (:id frame)))) (on-frame-enter (:id frame))))
on-pointer-leave on-pointer-leave
(mf/use-callback (mf/use-callback
(mf/deps (:id frame) on-frame-leave) (mf/deps (:id frame) on-frame-leave)
(fn [event] (fn [_]
(on-frame-leave (:id frame))))] (on-frame-leave (:id frame))))]
[:text {:x 0 [:text {:x 0

1
frontend/src/app/util/import/parser.cljc
View file

@ -8,7 +8,6 @@
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.geom.matrix :as gmt] [app.common.geom.matrix :as gmt]
[app.common.geom.shapes :as gsh]
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.util.color :as uc] [app.util.color :as uc]

1
frontend/src/app/worker/impl.cljs
View file

@ -7,7 +7,6 @@
(ns app.worker.impl (ns app.worker.impl
(:require (:require
[app.common.pages.changes :as ch] [app.common.pages.changes :as ch]
[app.common.transit :as t]
[okulary.core :as l])) [okulary.core :as l]))
(enable-console-print!) (enable-console-print!)

21
frontend/src/app/worker/selection.cljs
View file

@ -6,17 +6,14 @@
(ns app.worker.selection (ns app.worker.selection
(:require (:require
[cljs.spec.alpha :as s]
[okulary.core :as l]
[app.common.data :as d] [app.common.data :as d]
[app.common.exceptions :as ex]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.common.pages :as cp] [app.common.pages :as cp]
[app.common.spec :as us]
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.util.quadtree :as qdt] [app.util.quadtree :as qdt]
[app.worker.impl :as impl] [app.worker.impl :as impl]
[clojure.set :as set])) [clojure.set :as set]
[okulary.core :as l]))
(defonce state (l/atom {})) (defonce state (l/atom {}))
@ -66,8 +63,8 @@
changed-ids (into #{} changed-ids (into #{}
(comp (filter changes?) (comp (filter changes?)
(filter #(not= % uuid/zero))) (filter #(not= % uuid/zero)))
(set/union (keys old-objects) (set/union (set (keys old-objects))
(keys new-objects))) (set (keys new-objects))))
shapes (->> changed-ids (mapv #(get new-objects %)) (filterv (comp not nil?))) shapes (->> changed-ids (mapv #(get new-objects %)) (filterv (comp not nil?)))
parents-index (cp/generate-child-all-parents-index new-objects shapes) parents-index (cp/generate-child-all-parents-index new-objects shapes)
@ -87,7 +84,7 @@
(create-index new-objects))) (create-index new-objects)))
(defn- query-index (defn- query-index
[{index :index z-index :z-index} rect frame-id include-frames? include-groups? disabled-masks reverse?] [{index :index z-index :z-index} rect frame-id include-frames? include-groups? reverse?]
(let [result (-> (qdt/search index (clj->js rect)) (let [result (-> (qdt/search index (clj->js rect))
(es6-iterator-seq)) (es6-iterator-seq))
@ -137,7 +134,7 @@
(defmethod impl/handler :selection/initialize-index (defmethod impl/handler :selection/initialize-index
[{:keys [file-id data] :as message}] [{:keys [data] :as message}]
(letfn [(index-page [state page] (letfn [(index-page [state page]
(let [id (:id page) (let [id (:id page)
objects (:objects page)] objects (:objects page)]
@ -154,10 +151,10 @@
nil) nil)
(defmethod impl/handler :selection/query (defmethod impl/handler :selection/query
[{:keys [page-id rect frame-id include-frames? include-groups? disabled-masks reverse?] [{:keys [page-id rect frame-id include-frames? include-groups? reverse?]
:or {include-groups? true disabled-masks #{} reverse? false} :as message}] :or {include-groups? true reverse? false} :as message}]
(when-let [index (get @state page-id)] (when-let [index (get @state page-id)]
(query-index index rect frame-id include-frames? include-groups? disabled-masks reverse?))) (query-index index rect frame-id include-frames? include-groups? reverse?)))
(defmethod impl/handler :selection/query-z-index (defmethod impl/handler :selection/query-z-index
[{:keys [page-id objects ids]}] [{:keys [page-id objects ids]}]

25
frontend/src/app/worker/snaps.cljs
View file

@ -7,7 +7,6 @@
(ns app.worker.snaps (ns app.worker.snaps
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.pages :as cp]
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.util.geom.grid :as gg] [app.util.geom.grid :as gg]
[app.util.geom.snap-points :as snap] [app.util.geom.snap-points :as snap]
@ -99,7 +98,8 @@
changed-ids (into #{} changed-ids (into #{}
(filter changed?) (filter changed?)
(set/union (keys old-objects) (keys new-objects))) (set/union (set (keys old-objects))
(set (keys new-objects))))
to-delete (aggregate-data old-objects changed-ids) to-delete (aggregate-data old-objects changed-ids)
to-add (aggregate-data new-objects changed-ids) to-add (aggregate-data new-objects changed-ids)
@ -134,30 +134,25 @@
(reduce add-data $ to-add) (reduce add-data $ to-add)
(reduce delete-frames $ frames-to-delete)))) (reduce delete-frames $ frames-to-delete))))
(defn- log-state ;; (defn- log-state
"Helper function to print a friendly version of the snap tree. Debugging purposes" ;; "Helper function to print a friendly version of the snap tree. Debugging purposes"
[] ;; []
(let [process-frame-data #(d/mapm rt/as-map %) ;; (let [process-frame-data #(d/mapm rt/as-map %)
process-page-data #(d/mapm process-frame-data %)] ;; process-page-data #(d/mapm process-frame-data %)]
(js/console.log "STATE" (clj->js (d/mapm process-page-data @state))))) ;; (js/console.log "STATE" (clj->js (d/mapm process-page-data @state)))))
(defn- index-page [state page-id objects] (defn- index-page [state page-id objects]
(let [snap-data (initialize-snap-data objects)] (let [snap-data (initialize-snap-data objects)]
(assoc state page-id snap-data))) (assoc state page-id snap-data)))
(defn- update-page [state page-id old-objects new-objects] (defn- update-page [state page-id old-objects new-objects]
(let [changed? #(not= (get old-objects %) (get new-objects %)) (let [snap-data (get state page-id)
changed-ids (into #{}
(filter changed?)
(set/union (keys old-objects) (keys new-objects)))
snap-data (get state page-id)
snap-data (update-snap-data snap-data old-objects new-objects)] snap-data (update-snap-data snap-data old-objects new-objects)]
(assoc state page-id snap-data))) (assoc state page-id snap-data)))
;; Public API ;; Public API
(defmethod impl/handler :snaps/initialize-index (defmethod impl/handler :snaps/initialize-index
[{:keys [file-id data] :as message}] [{:keys [data] :as message}]
;; Create the index ;; Create the index
(letfn [(process-page [state page] (letfn [(process-page [state page]
(let [id (:id page) (let [id (:id page)

11
frontend/src/app/worker/thumbnails.cljs
View file

@ -6,14 +6,13 @@
(ns app.worker.thumbnails (ns app.worker.thumbnails
(:require (:require
[rumext.alpha :as mf] ["react-dom/server" :as rds]
[beicon.core :as rx]
[promesa.core :as p]
[app.main.fonts :as fonts]
[app.main.exports :as exports] [app.main.exports :as exports]
[app.worker.impl :as impl] [app.main.fonts :as fonts]
[app.util.http :as http] [app.util.http :as http]
["react-dom/server" :as rds])) [app.worker.impl :as impl]
[beicon.core :as rx]
[rumext.alpha :as mf]))
(defn- handle-response (defn- handle-response
[response] [response]