mirror of
https://github.com/penpot/penpot.git
synced 2025-05-03 20:36:04 +02:00
feat(frontend): initial work on react and rumext upgrade
This commit is contained in:
Andrey Antukh
parent
ff00bdb3eb
commit
88f45fb618
33 changed files with 184 additions and 144 deletions
|
|
@ -1,13 +1,20 @@
|
|||
{:deps {org.clojure/clojurescript {:mvn/version "1.10.516"}
|
||||
org.clojure/clojure {:mvn/version "1.10.0"}
|
||||
funcool/rumext {:mvn/version "1.0.0"}
|
||||
org.clojure/clojure {:mvn/version "1.10.1"}
|
||||
;; funcool/rumext {:mvn/version "1.0.0"}
|
||||
funcool/promesa {:mvn/version "2.0.0"}
|
||||
com.cognitect/transit-cljs {:mvn/version "0.8.239"}
|
||||
rum/rum {:mvn/version "0.10.8" :exclusions [cljsjs/react cljsjs/react-dom]}
|
||||
;; rum/rum {:mvn/version "0.11.3" :exclusions [cljsjs/react cljsjs/react-dom]}
|
||||
|
||||
funcool/rumext {:git/url "https://github.com/funcool/rumext.git",
|
||||
:sha "3d598e749ba429eae6544e532fc9f81369b307f5"}
|
||||
|
||||
;; cljsjs/react {:mvn/version "15.5.0-0"}
|
||||
;; cljsjs/react-dom {:mvn/version "15.5.0-0"}
|
||||
;; cljsjs/react-dom-server {:mvn/version "15.5.0-0"}
|
||||
cljsjs/react {:mvn/version "16.8.6-0"}
|
||||
cljsjs/react-dom {:mvn/version "16.8.6-0"}
|
||||
cljsjs/react-dom-server {:mvn/version "16.8.6-0"}
|
||||
|
||||
cljsjs/react {:mvn/version "15.5.0-0"}
|
||||
cljsjs/react-dom {:mvn/version "15.5.0-0"}
|
||||
cljsjs/react-dom-server {:mvn/version "15.5.0-0"}
|
||||
environ/environ {:mvn/version "1.1.0"}
|
||||
|
||||
funcool/beicon {:mvn/version "3.2.0"}
|
||||
|
|
@ -21,10 +28,13 @@
|
|||
{:dev
|
||||
{:extra-deps {com.bhauman/rebel-readline-cljs {:mvn/version "0.1.4"}
|
||||
com.bhauman/rebel-readline {:mvn/version "0.1.4"}
|
||||
com.bhauman/figwheel-main {:mvn/version "0.2.0"}
|
||||
com.bhauman/figwheel-main {:mvn/version "0.2.1-SNAPSHOT"}
|
||||
org.clojure/tools.namespace {:mvn/version "0.2.11"}
|
||||
}
|
||||
|
||||
:extra-paths ["test" "resources"]}
|
||||
|
||||
:repl {:main-opts ["-m" "rebel-readline.main"]
|
||||
:extra-deps {com.bhauman/rebel-readline {:mvn/version "0.1.4"}}}
|
||||
}}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,8 +5,7 @@
|
|||
;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
|
||||
|
||||
(ns uxbox.main.data.undo
|
||||
(:require #_[cljs.pprint :as pp]
|
||||
[beicon.core :as rx]
|
||||
(:require [beicon.core :as rx]
|
||||
[potok.core :as ptk]
|
||||
[uxbox.main.data.pages :as udp]
|
||||
[uxbox.main.store :as st]))
|
||||
|
|
|
|||
|
|
@ -376,11 +376,6 @@
|
|||
(vreset! last-point point)
|
||||
(st/emit! (insert-drawing-path-point point)))
|
||||
|
||||
(on-draw [[point ctrl? counter]]
|
||||
(if ctrl?
|
||||
(on-assisted-draw point counter)
|
||||
(on-generic-draw point counter)))
|
||||
|
||||
(on-generic-draw [point counter]
|
||||
(st/emit! (update-drawing-path-point counter point)))
|
||||
|
||||
|
|
@ -391,6 +386,11 @@
|
|||
(gpt/add $ @last-point))]
|
||||
(st/emit! (update-drawing-path-point counter point))))
|
||||
|
||||
(on-draw [[point ctrl? counter]]
|
||||
(if ctrl?
|
||||
(on-assisted-draw point counter)
|
||||
(on-generic-draw point counter)))
|
||||
|
||||
(on-finish []
|
||||
(st/emit! (finish-path-drawing)
|
||||
(finish-drawing)))]
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
(defmethod request :fetch/token
|
||||
[type data]
|
||||
(let [url (str url "/auth/token")]
|
||||
(let [url (str url "/auth/login")]
|
||||
(send! {:url url
|
||||
:method :post
|
||||
:auth false
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
(ns uxbox.main.repo.impl
|
||||
(:require [clojure.walk :as walk]
|
||||
[beicon.core :as rx]
|
||||
[cuerdas.core :as str]
|
||||
[uxbox.config :refer (url)]
|
||||
[uxbox.util.http :as http]
|
||||
[uxbox.util.storage :refer (storage)]
|
||||
|
|
@ -15,9 +16,10 @@
|
|||
|
||||
(defn- conditional-decode
|
||||
[{:keys [body headers] :as response}]
|
||||
(if (= (get headers "content-type") "application/transit+json")
|
||||
(let [contentype (get headers "content-type")]
|
||||
(if (str/starts-with? contentype "application/transit+json")
|
||||
(assoc response :body (t/decode body))
|
||||
response))
|
||||
response)))
|
||||
|
||||
(defn- handle-http-status
|
||||
[{:keys [body status] :as response}]
|
||||
|
|
@ -28,11 +30,6 @@
|
|||
(def ^:private +headers+
|
||||
{"content-type" "application/transit+json"})
|
||||
|
||||
(defn- auth-headers
|
||||
[]
|
||||
(when-let [auth (:auth storage)]
|
||||
{"authorization" (str "Token " (:token auth "no-token"))}))
|
||||
|
||||
(defn- encode-query
|
||||
[params]
|
||||
(let [data (QueryData.)]
|
||||
|
|
@ -42,16 +39,16 @@
|
|||
(defn send!
|
||||
[{:keys [body headers auth method query url response-type]
|
||||
:or {auth true response-type :text}}]
|
||||
(let [headers (merge {}
|
||||
(let [headers (merge {"accept" "application/transit+json,*/*"}
|
||||
(when (map? body) +headers+)
|
||||
headers
|
||||
(when auth (auth-headers)))
|
||||
headers)
|
||||
request {:method method
|
||||
:url url
|
||||
:headers headers
|
||||
:query-string (when query (encode-query query))
|
||||
:body (if (map? body) (t/encode body) body)}
|
||||
options {:response-type response-type}]
|
||||
options {:response-type response-type
|
||||
:credentials? true}]
|
||||
(->> (http/send! request options)
|
||||
(rx/map conditional-decode)
|
||||
(rx/mapcat handle-http-status))))
|
||||
|
|
|
|||
|
|
@ -19,8 +19,9 @@
|
|||
|
||||
(defmethod request :fetch/pages-by-project
|
||||
[type {:keys [project] :as params}]
|
||||
(let [url (str url "/projects/" project "/pages")]
|
||||
(send! {:method :get :url url})))
|
||||
(let [url (str url "/pages")
|
||||
params {:project project}]
|
||||
(send! {:method :get :url url :query params})))
|
||||
|
||||
(defmethod request :fetch/page-history
|
||||
[type {:keys [page] :as params}]
|
||||
|
|
|
|||
|
|
@ -138,8 +138,9 @@
|
|||
(when own?
|
||||
[:li {}
|
||||
[:a.btn-primary {:on-click #(st/emit! (dc/create-collection))} (tr "ds.colors-collection.new")]])
|
||||
(mx/doseq [{:keys [id] :as coll} colls]
|
||||
(let [selected? (= (:id coll) selected)]
|
||||
(for [coll colls]
|
||||
(let [id (:id coll)
|
||||
selected? (= id selected)]
|
||||
(-> (nav-item coll selected?)
|
||||
(mx/with-key id))))]))
|
||||
|
||||
|
|
@ -191,7 +192,7 @@
|
|||
(on-select id))]
|
||||
[:ul.move-list {}
|
||||
[:li.title {} title]
|
||||
(mx/doseq [{:keys [id name] :as coll} colls]
|
||||
(for [{:keys [id name] :as coll} colls]
|
||||
[:li {:key (str id)}
|
||||
[:a {:on-click #(on-select % id)} name]])]))
|
||||
|
||||
|
|
@ -281,7 +282,7 @@
|
|||
[:div.dashboard-grid-content {}
|
||||
[:div.dashboard-grid-row {}
|
||||
(when editable? (grid-form id))
|
||||
(mx/doseq [color colors]
|
||||
(for [color colors]
|
||||
(let [selected? (contains? selected color)]
|
||||
(-> (grid-item color selected?)
|
||||
(mx/with-key (str color)))))]]))
|
||||
|
|
|
|||
|
|
@ -58,11 +58,11 @@
|
|||
(-> (l/in [:dashboard :icons])
|
||||
(l/derive st/state)))
|
||||
|
||||
(def ^:private collections-ref
|
||||
(def collections-ref
|
||||
(-> (l/key :icons-collections)
|
||||
(l/derive st/state)))
|
||||
|
||||
(def ^:private icons-ref
|
||||
(def icons-ref
|
||||
(-> (l/key :icons)
|
||||
(l/derive st/state)))
|
||||
|
||||
|
|
@ -184,7 +184,7 @@
|
|||
(tr "ds.icons-collection.new")]])
|
||||
(when own?
|
||||
(nav-item nil (nil? selected)))
|
||||
(mx/doseq [coll colls]
|
||||
(for [coll colls]
|
||||
(let [selected? (= (:id coll) selected)]
|
||||
(-> (nav-item coll selected?)
|
||||
(mx/with-key (:id coll)))))]))
|
||||
|
|
@ -253,7 +253,7 @@
|
|||
[:li.title {} title]
|
||||
[:li {}
|
||||
[:a {:href "#" :on-click #(on-select % nil)} "Storage"]]
|
||||
(mx/doseq [{:keys [id name] :as coll} colls]
|
||||
(for [{:keys [id name] :as coll} colls]
|
||||
[:li {:key (str id)}
|
||||
[:a {:on-click #(on-select % id)} name]])]))
|
||||
|
||||
|
|
@ -333,14 +333,14 @@
|
|||
(toggle-selection-shifted [event]
|
||||
(when (kbd/shift? event)
|
||||
(toggle-selection event)))
|
||||
(on-key-down [event]
|
||||
(when (kbd/enter? event)
|
||||
(on-blur event)))
|
||||
(on-blur [event]
|
||||
(let [target (dom/event->target event)
|
||||
name (dom/get-value target)]
|
||||
(st/emit! (di/update-opts :edition false)
|
||||
(di/rename-icon id name))))
|
||||
(on-key-down [event]
|
||||
(when (kbd/enter? event)
|
||||
(on-blur event)))
|
||||
(ignore-click [event]
|
||||
(dom/stop-propagation event)
|
||||
(dom/prevent-default event))
|
||||
|
|
@ -386,7 +386,7 @@
|
|||
[:div.dashboard-grid-content {}
|
||||
[:div.dashboard-grid-row {}
|
||||
(when editable? (grid-form id))
|
||||
(mx/doseq [{:keys [id] :as icon} icons]
|
||||
(for [{:keys [id] :as icon} icons]
|
||||
(let [edition? (= edition id)
|
||||
selected? (contains? selected id)]
|
||||
(-> (grid-item icon selected? edition?)
|
||||
|
|
@ -431,7 +431,7 @@
|
|||
[:select.input-select
|
||||
{:on-change on-ordering-change
|
||||
:value (pr-str ordering)}
|
||||
(mx/doseq [[key value] (seq +ordering-options+)]
|
||||
(for [[key value] (seq +ordering-options+)]
|
||||
(let [key (pr-str key)]
|
||||
[:option {:key key :value key} (tr value)]))]]
|
||||
;; Search
|
||||
|
|
|
|||
|
|
@ -179,7 +179,7 @@
|
|||
(tr "ds.images-collection.new")]])
|
||||
(when own?
|
||||
(nav-item nil (nil? selected)))
|
||||
(mx/doseq [coll collections]
|
||||
(for [coll collections]
|
||||
(let [selected? (= (:id coll) selected)
|
||||
key (str (:id coll))]
|
||||
(-> (nav-item coll selected?)
|
||||
|
|
@ -256,7 +256,7 @@
|
|||
[:li.title {} title]
|
||||
[:li {}
|
||||
[:a {:href "#" :on-click #(on-select % nil)} "Storage"]]
|
||||
(mx/doseq [{:keys [id name] :as coll} colls]
|
||||
(for [{:keys [id name] :as coll} colls]
|
||||
[:li {:key (str id)}
|
||||
[:a {:on-click #(on-select % id)} name]])]))
|
||||
|
||||
|
|
@ -378,7 +378,7 @@
|
|||
[:div.dashboard-grid-row {}
|
||||
(when editable?
|
||||
(grid-form id))
|
||||
(mx/doseq [{:keys [id] :as image} images]
|
||||
(for [{:keys [id] :as image} images]
|
||||
(let [edition? (= edition id)
|
||||
selected? (contains? selected id)]
|
||||
(-> (grid-item image selected? edition?)
|
||||
|
|
@ -423,7 +423,7 @@
|
|||
[:span {} (tr "ds.ordering")]
|
||||
[:select.input-select {:on-change on-ordering-change
|
||||
:value (pr-str ordering)}
|
||||
(mx/doseq [[key value] (seq +ordering-options+)]
|
||||
(for [[key value] (seq +ordering-options+)]
|
||||
(let [key (pr-str key)
|
||||
label (tr value)]
|
||||
[:option {:key key :value key} label]))]]
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@
|
|||
[:select.input-select
|
||||
{:on-change on-ordering-change
|
||||
:value (pr-str ordering)}
|
||||
(mx/doseq [[key value] (seq +ordering-options+)]
|
||||
(for [[key value] (seq +ordering-options+)]
|
||||
(let [key (pr-str key)]
|
||||
[:option {:key key :value key} (tr value)]))]]
|
||||
;; Search
|
||||
|
|
@ -222,7 +222,7 @@
|
|||
[:div.grid-item.add-project
|
||||
{:on-click on-click}
|
||||
[:span {} (tr "ds.project-new")]]
|
||||
(mx/doseq [item projects]
|
||||
(for [item projects]
|
||||
(-> (grid-item item)
|
||||
(mx/with-key (:id item))))]]])))
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
(assoc :stroke-dasharray (stroke-type->dasharray stroke-style))
|
||||
(dissoc :stroke-style))))
|
||||
|
||||
(defn- extract-style-attrs
|
||||
(defn extract-style-attrs
|
||||
"Extract predefinet attrs from shapes."
|
||||
[shape]
|
||||
(-> (select-keys shape shape-style-attrs)
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
[uxbox.main.geom :as geom]
|
||||
[uxbox.main.ui.shapes.common :as common]
|
||||
[uxbox.main.ui.shapes.attrs :as attrs]
|
||||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.data :refer [classnames normalize-props]]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
|
@ -58,4 +58,4 @@
|
|||
attrs (merge props
|
||||
(attrs/extract-style-attrs shape)
|
||||
(select-keys shape [:cx :cy :rx :ry]))]
|
||||
[:ellipse attrs]))
|
||||
[:> :ellipse (normalize-props attrs)]))
|
||||
|
|
|
|||
|
|
@ -76,13 +76,11 @@
|
|||
resize (gmt/multiply resize)
|
||||
displacement (gmt/multiply displacement))
|
||||
|
||||
moving? (boolean displacement)
|
||||
attrs {:id (str "shape-" id)
|
||||
moving? (boolean displacement)]
|
||||
[:g {:id (str "shape-" id)
|
||||
:class (classnames :move-cursor moving?)
|
||||
:transform (str xfmt)}]
|
||||
[:g attrs
|
||||
(for [item (reverse items)
|
||||
:let [key (str item)]]
|
||||
:transform (str xfmt)}
|
||||
(for [item (reverse items)]
|
||||
(-> (factory item)
|
||||
(mx/with-key key)))]))
|
||||
(mx/with-key (str item))))]))
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.ui.shapes.common :as common]
|
||||
[uxbox.main.ui.shapes.attrs :as attrs]
|
||||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.data :refer [classnames normalize-props]]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
|
@ -81,4 +81,4 @@
|
|||
props {:view-box view-box
|
||||
:id (str "shape-" id)
|
||||
:dangerouslySetInnerHTML {:__html content}}]
|
||||
[:svg props]))
|
||||
[:> :svg (normalize-props props)]))
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
[uxbox.main.ui.shapes.common :as common]
|
||||
[uxbox.main.ui.shapes.attrs :as attrs]
|
||||
[uxbox.main.data.images :as udi]
|
||||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.data :refer [classnames normalize-props]]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
||||
|
|
@ -73,4 +73,4 @@
|
|||
:width width
|
||||
:height height}
|
||||
attrs (merge props (attrs/extract-style-attrs shape))]
|
||||
[:image attrs]))
|
||||
[:> :image (normalize-props attrs)]))
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
[uxbox.main.data.shapes :as uds]
|
||||
[uxbox.main.ui.shapes.common :as common]
|
||||
[uxbox.main.ui.shapes.attrs :as attrs]
|
||||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.data :refer [classnames normalize-props]]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
|
@ -84,5 +84,5 @@
|
|||
:fill "transparent"
|
||||
:stroke-width "20px"
|
||||
:d pdata}]
|
||||
[:path attrs]]
|
||||
[:path attrs])))
|
||||
[:> :path (normalize-props attrs)]]
|
||||
[:> :path (normalize-props attrs)])))
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.data :refer [classnames normalize-props]]
|
||||
[uxbox.util.dom :as dom]))
|
||||
|
||||
;; --- Rect Component
|
||||
|
|
@ -58,9 +58,9 @@
|
|||
|
||||
props {:x x1 :y y1
|
||||
:id (str "shape-" id)
|
||||
:class (classnames :move-cursor moving?)
|
||||
:class-name (classnames :move-cursor moving?)
|
||||
:width width
|
||||
:height height
|
||||
:transform (str xfmt)}
|
||||
attrs (merge (attrs/extract-style-attrs shape) props)]
|
||||
[:rect attrs]))
|
||||
[:> :rect (normalize-props attrs)]))
|
||||
|
|
|
|||
|
|
@ -106,6 +106,19 @@
|
|||
control pointer radius from 4 to 6."
|
||||
60)
|
||||
|
||||
(mx/defc control-item
|
||||
[{:keys [class on-mouse-down r cy cx]}]
|
||||
[:circle {:class-name class
|
||||
:on-mouse-down on-mouse-down
|
||||
:r r
|
||||
:style {:fillOpacity "1"
|
||||
:strokeWidth "1px"
|
||||
:vectorEffect "non-scaling-stroke"}
|
||||
:fill "#31e6e0"
|
||||
:stroke "#28c4d4"
|
||||
:cx cx
|
||||
:cy cy}])
|
||||
|
||||
(mx/defc controls
|
||||
{:mixins [mx/static]}
|
||||
[{:keys [x1 y1 width height] :as shape} zoom on-mouse-down]
|
||||
|
|
@ -117,54 +130,51 @@
|
|||
:stroke-dasharray (str (/ 5.0 zoom) "," (/ 5 zoom))
|
||||
:style {:stroke "#333" :fill "transparent"
|
||||
:stroke-opacity "1"}}]
|
||||
[:circle.top
|
||||
(merge +circle-props+
|
||||
{:on-mouse-down #(on-mouse-down :top %)
|
||||
|
||||
(control-item {:class "top"
|
||||
:on-mouse-down #(on-mouse-down :top %)
|
||||
:r (/ radius zoom)
|
||||
:cx (+ x1 (/ width 2))
|
||||
:cy (- y1 2)})]
|
||||
[:circle.right
|
||||
(merge +circle-props+
|
||||
{:on-mouse-down #(on-mouse-down :right %)
|
||||
:cy (- y1 2)})
|
||||
(control-item {:on-mouse-down #(on-mouse-down :right %)
|
||||
:r (/ radius zoom)
|
||||
:cy (+ y1 (/ height 2))
|
||||
:cx (+ x1 width 1)})]
|
||||
[:circle.bottom
|
||||
(merge +circle-props+
|
||||
{:on-mouse-down #(on-mouse-down :bottom %)
|
||||
:cx (+ x1 width 1)
|
||||
:class "right"})
|
||||
|
||||
(control-item {:on-mouse-down #(on-mouse-down :bottom %)
|
||||
:r (/ radius zoom)
|
||||
:cx (+ x1 (/ width 2))
|
||||
:cy (+ y1 height 2)})]
|
||||
[:circle.left
|
||||
(merge +circle-props+
|
||||
{:on-mouse-down #(on-mouse-down :left %)
|
||||
:cy (+ y1 height 2)
|
||||
:class "bottom"})
|
||||
|
||||
(control-item {:on-mouse-down #(on-mouse-down :left %)
|
||||
:r (/ radius zoom)
|
||||
:cy (+ y1 (/ height 2))
|
||||
:cx (- x1 3)})]
|
||||
[:circle.top-left
|
||||
(merge +circle-props+
|
||||
{:on-mouse-down #(on-mouse-down :top-left %)
|
||||
:cx (- x1 3)
|
||||
:class "left"})
|
||||
|
||||
(control-item {:on-mouse-down #(on-mouse-down :top-left %)
|
||||
:r (/ radius zoom)
|
||||
:cx x1
|
||||
:cy y1})]
|
||||
[:circle.top-right
|
||||
(merge +circle-props+
|
||||
{:on-mouse-down #(on-mouse-down :top-right %)
|
||||
:cy y1
|
||||
:class "top-left"})
|
||||
|
||||
(control-item {:on-mouse-down #(on-mouse-down :top-right %)
|
||||
:r (/ radius zoom)
|
||||
:cx (+ x1 width)
|
||||
:cy y1})]
|
||||
[:circle.bottom-left
|
||||
(merge +circle-props+
|
||||
{:on-mouse-down #(on-mouse-down :bottom-left %)
|
||||
:cy y1
|
||||
:class "top-right"})
|
||||
(control-item {:on-mouse-down #(on-mouse-down :bottom-left %)
|
||||
:r (/ radius zoom)
|
||||
:cx x1
|
||||
:cy (+ y1 height)})]
|
||||
[:circle.bottom-right
|
||||
(merge +circle-props+
|
||||
{:on-mouse-down #(on-mouse-down :bottom-right %)
|
||||
:cy (+ y1 height)
|
||||
:class "bottom-left"})
|
||||
(control-item {:on-mouse-down #(on-mouse-down :bottom-right %)
|
||||
:r (/ radius zoom)
|
||||
:cx (+ x1 width)
|
||||
:cy (+ y1 height)})]]))
|
||||
:cy (+ y1 height)
|
||||
:class "bottom-right"})]))
|
||||
|
||||
;; --- Selection Handlers (Component)
|
||||
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@
|
|||
(let [content (dom/event->inner-text ev)]
|
||||
(st/emit! (uds/update-text id content))))]
|
||||
[:foreignObject props
|
||||
[:div {:style style
|
||||
[:div {:style (normalize-props style)
|
||||
:ref "container"
|
||||
:on-input on-input
|
||||
:contentEditable true}]])))
|
||||
|
|
@ -167,15 +167,14 @@
|
|||
|
||||
{:keys [x1 y1 width height] :as shape} (-> (geom/transform shape xfmt)
|
||||
(geom/size))
|
||||
moving? (boolean displacement)
|
||||
props {:x x1
|
||||
moving? (boolean displacement)]
|
||||
[:foreignObject {:x x1
|
||||
:y y1
|
||||
:class (classnames :move-cursor moving?)
|
||||
:id (str id)
|
||||
:ref "fobject"
|
||||
:width width
|
||||
:height height}]
|
||||
[:foreignObject props]))
|
||||
:height height}]))
|
||||
|
||||
;; --- Text Shape Html
|
||||
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@
|
|||
(background metadata)
|
||||
[:svg.page-layout {}
|
||||
[:g.main {}
|
||||
(mx/doseq [item (reverse (:shapes page))]
|
||||
(for [item (reverse (:shapes page))]
|
||||
(-> (uus/shape item)
|
||||
(mx/with-key (str item))))
|
||||
(selection-handlers)
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
(udl/close!))]
|
||||
[:div.lightbox-body.clipboard {}
|
||||
[:div.clipboard-list {}
|
||||
(mx/doseq [item (mx/react clipboard-ref)]
|
||||
(for [item (mx/react clipboard-ref)]
|
||||
[:div.clipboard-item
|
||||
{:key (str (:id item))
|
||||
:on-click (partial on-paste item)}
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
[:div.color-palette-actions
|
||||
[:select.input-select {:on-change select-collection
|
||||
:value (pr-str (:id selected-coll))}
|
||||
(mx/doseq [collection collections]
|
||||
(for [collection collections]
|
||||
[:option {:key (str (:id collection))
|
||||
:value (pr-str (:id collection))}
|
||||
(:name collection)])]
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
:ref "color-palette-inside"
|
||||
:style {:position "relative"
|
||||
:right (str (* 86 offset) "px")}}
|
||||
(mx/doseq [color colors]
|
||||
(for [color colors]
|
||||
(-> (palette-item color)
|
||||
(mx/with-key color)))]]
|
||||
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@
|
|||
[:span.title {} "Download page"]
|
||||
[:p.info {} "Download a single page of your project in SVG."]
|
||||
[:select.input-select {:ref "page" :default-value (pr-str current)}
|
||||
(mx/doseq [{:keys [id name]} pages]
|
||||
(for [{:keys [id name]} pages]
|
||||
[:option {:value (pr-str id)} name])]
|
||||
[:a.btn-primary {:href "#" :on-click download-page} "Download page"]]
|
||||
[:div.content-col {}
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@
|
|||
{:mixins [mx/static]}
|
||||
[images]
|
||||
[:div.library-content {}
|
||||
(mx/doseq [image images]
|
||||
(for [image images]
|
||||
(-> (image-item image)
|
||||
(mx/with-key (str (:id image)))))])
|
||||
|
||||
|
|
@ -171,7 +171,7 @@
|
|||
[:select.input-select {:on-change on-coll-change}
|
||||
(when own?
|
||||
[:option {:value (pr-str nil)} "Storage"])
|
||||
(doseq [coll colls]
|
||||
(for [coll colls]
|
||||
(let [id (:id coll)
|
||||
name (:name coll)]
|
||||
[:option {:key (str id) :value (pr-str id)} name]))]]
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
[:span.color-th {:style {:background-color color}
|
||||
:key color
|
||||
:on-click (partial callback color)}])
|
||||
(mx/doseq [i (range (- 5 (count colors)))]
|
||||
(for [i (range (- 5 (count colors)))]
|
||||
[:span.color-th {:key (str "empty" i)}])
|
||||
[:span.color-th.palette-th {} i/picker]]]))
|
||||
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@
|
|||
[:span {} (tr "ds.draw-tools")]
|
||||
[:div.tool-window-close {:on-click close} i/close]]
|
||||
[:div.tool-window-content {}
|
||||
(mx/doseq [[i props] (map-indexed vector tools)]
|
||||
(for [[i props] (map-indexed vector tools)]
|
||||
(let [selected? (= drawing-tool (:shape props))]
|
||||
[:div.tool-btn.tooltip.tooltip-hover
|
||||
{:alt (tr (:help props))
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
show-more? (pos? min-version)
|
||||
load-more #(st/emit! (udh/load-more))]
|
||||
[:ul.history-content {}
|
||||
(mx/doseq [item items]
|
||||
(for [item items]
|
||||
(let [current? (= (:version item) (:version page))]
|
||||
(-> (history-item item selected current?)
|
||||
(mx/with-key (str (:id item))))))
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
{:mixins [mx/static]}
|
||||
[{:keys [pinned selected] :as history}]
|
||||
[:ul.history-content {}
|
||||
(mx/doseq [item (reverse (sort-by :version pinned))]
|
||||
(for [item (reverse (sort-by :version pinned))]
|
||||
(let [selected? (= (:version item) selected)]
|
||||
(-> (history-item item selected?)
|
||||
(mx/with-key (str (:id item))))))])
|
||||
|
|
|
|||
|
|
@ -275,7 +275,7 @@
|
|||
i/arrow-slide]]
|
||||
(if-not collapsed?
|
||||
[:ul {}
|
||||
(mx/doseq [{:keys [id] :as shape} (map #(get shapes-map %) (:items item))]
|
||||
(for [{:keys [id] :as shape} (map #(get shapes-map %) (:items item))]
|
||||
(if (= (:type shape) :group)
|
||||
(-> (layer-group shape selected)
|
||||
(mx/with-key id))
|
||||
|
|
@ -356,7 +356,7 @@
|
|||
[:div.tool-window-close {:on-click close} i/close]]
|
||||
[:div.tool-window-content {}
|
||||
[:ul.element-list {}
|
||||
(mx/doseq [{:keys [id] :as shape} (map #(get shapes-map %) (:shapes page))]
|
||||
(for [{:keys [id] :as shape} (map #(get shapes-map %) (:shapes page))]
|
||||
(if (= (:type shape) :group)
|
||||
(-> (layer-group shape selected)
|
||||
(mx/with-key id))
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
[:div {}
|
||||
(when (> (count menus) 1)
|
||||
[:ul.element-icons {}
|
||||
(mx/doseq [menu-id (get +menus-map+ (:type shape ::page))]
|
||||
(for [menu-id (get +menus-map+ (:type shape ::page))]
|
||||
(let [menu (get +menus-by-id+ menu-id)
|
||||
selected? (= active menu-id)]
|
||||
[:li#e-info {:on-click #(swap! local assoc :menu menu-id)
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@
|
|||
[:span {} (:name project)]
|
||||
[:div.add-page {:on-click create} i/close]]
|
||||
[:ul.element-list {}
|
||||
(mx/doseq [page pages]
|
||||
(for [page pages]
|
||||
(let [active? (= (:id page) current)]
|
||||
(-> (page-item page (count pages) active?)
|
||||
(mx/with-key (:id page)))))]]]))
|
||||
|
|
|
|||
|
|
@ -154,6 +154,31 @@
|
|||
[]
|
||||
(partition 2 params))))
|
||||
|
||||
;; (defn normalize-attrs
|
||||
;; [m]
|
||||
;; (letfn [(transform [[k v]]
|
||||
;; (cond
|
||||
;; (or (= k :class) (= k :class-name))
|
||||
;; ["className" v]
|
||||
|
||||
;; (or (keyword? k) (string? k))
|
||||
;; [(str/camel (name k)) v]
|
||||
|
||||
;; :else
|
||||
;; [k v]))
|
||||
;; (walker [x]
|
||||
;; (if (map? x)
|
||||
;; (into {} (map tf) x)
|
||||
;; x))]
|
||||
;; (walk/postwalk walker m)))
|
||||
|
||||
(defn normalize-props
|
||||
[props]
|
||||
(clj->js props :keyword-fn (fn [key]
|
||||
(if (or (= key :class) (= key :class-name))
|
||||
"className"
|
||||
(str/camel (name key))))))
|
||||
|
||||
|
||||
;; (defmacro mirror-map [& fields]
|
||||
;; (let [keys# (map #(keyword (name %)) fields)
|
||||
|
|
|
|||
|
|
@ -59,10 +59,10 @@
|
|||
(.toString uri)))
|
||||
|
||||
(defn- fetch
|
||||
[{:keys [method url query-string query-params headers body] :as request}
|
||||
[{:keys [method url query-string query headers body] :as request}
|
||||
{:keys [timeout credentials? response-type]
|
||||
:or {timeout 0 credentials? false response-type :text}}]
|
||||
(let [uri (create-url url query-string query-params)
|
||||
(let [uri (create-url url query-string query)
|
||||
headers (if headers (clj->js headers) #js {})
|
||||
method (translate-method method)
|
||||
xhr (doto (XhrIo.)
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
:language-out :ecmascript5
|
||||
:closure-defines closure-defines
|
||||
:optimizations :none
|
||||
:verbose true
|
||||
:verbose false
|
||||
:static-fns false
|
||||
:pretty-print true
|
||||
:elide-asserts false})
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue