Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-26 16:56:11 -05:00
Code Issues Activity

✨ Enable edition without edition mode.

Browse source
This commit is contained in:
Andrey Antukh 2020-04-24 15:32:21 +02:00
parent 3d4cbe28f2
commit 0435954f32
3 changed files with 80 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
frontend/src/uxbox/main/data/workspace/texts.cljs
View file

@ -15,6 +15,7 @@
[goog.events :as events] [goog.events :as events]
[goog.object :as gobj] [goog.object :as gobj]
[potok.core :as ptk] [potok.core :as ptk]
[uxbox.util.object :as obj]
[uxbox.main.fonts :as fonts] [uxbox.main.fonts :as fonts]
["slate" :as slate :refer [Editor Transforms Text]])) ["slate" :as slate :refer [Editor Transforms Text]]))
@ -29,10 +30,22 @@
;; --- Helpers ;; --- Helpers
(defn- calculate-full-selection
[editor]
(let [children (obj/get editor "children")
paragraphs (obj/get-in children [0 "children" 0 "children"])]
#js {:anchor #js {:path #js [0 0 0]
:offset 0}
:focus #js {:path #js [0 0 (dec (alength paragraphs))]
:offset 1}}))
(defn set-nodes! (defn set-nodes!
([editor props] ([editor props]
(set-nodes! editor props #js {})) (set-nodes! editor props #js {}))
([editor props options] ([editor props options]
(when (and (nil? (obj/get editor "selection"))
(nil? (obj/get options "at")))
(obj/assoc! options "at" (calculate-full-selection editor)))
(.setNodes Transforms editor props options) (.setNodes Transforms editor props options)
editor)) editor))
@ -57,28 +70,28 @@
[editor type] [editor type]
(enabled? editor true (enabled? editor true
(fn [v] (fn [v]
(let [val (unchecked-get v "textDecoration")] (let [val (obj/get v "textDecoration")]
(identical? type val))))) (identical? type val)))))
(defn text-transform-enabled? (defn text-transform-enabled?
[editor type] [editor type]
(enabled? editor true (enabled? editor true
(fn [v] (fn [v]
(let [val (unchecked-get v "textTransform")] (let [val (obj/get v "textTransform")]
(identical? type val))))) (identical? type val)))))
(defn text-align-enabled? (defn text-align-enabled?
[editor type] [editor type]
(enabled? editor false (enabled? editor false
(fn [v] (fn [v]
(let [val (unchecked-get v "textAlign")] (let [val (obj/get v "textAlign")]
(identical? type val))))) (identical? type val)))))
(defn vertical-align-enabled? (defn vertical-align-enabled?
[editor type] [editor type]
(enabled? editor false (enabled? editor false
(fn [v] (fn [v]
(let [val (unchecked-get v "verticalAlign")] (let [val (obj/get v "verticalAlign")]
(identical? type val))))) (identical? type val)))))
;; --- Getters ;; --- Getters
@ -90,20 +103,18 @@
at] at]
:as opts}] :as opts}]
(when editor (when editor
(let [options #js {:match pred :universal universal?} (let [options #js {:match pred :universal universal?}]
default-loc #js {:path #js [0 0] :offset 0}]
(cond (cond
(object? at) (object? at)
(unchecked-set options "at" at) (obj/assoc! options "at" at)
(nil? (unchecked-get editor "selection")) (nil? (obj/get editor "selection"))
(unchecked-set options "at" default-loc)) (obj/assoc! options "at" (calculate-full-selection editor)))
(let [result (.nodes Editor editor options) (let [result (.nodes Editor editor options)
match (ffirst (es6-iterator-seq result))] match (ffirst (es6-iterator-seq result))]
(when (object? match) (when (object? match)
(unchecked-get match attr)))))) (obj/get match attr))))))
(defn current-line-height (defn current-line-height
[editor {:keys [at default]}] [editor {:keys [at default]}]
@ -168,7 +179,6 @@
;; --- Setters ;; --- Setters
(defn set-text-decoration! (defn set-text-decoration!
[editor type] [editor type]
(set-nodes! editor (set-nodes! editor
@ -194,7 +204,7 @@
(set-nodes! editor (set-nodes! editor
#js {:verticalAlign type} #js {:verticalAlign type}
#js {:match (fn [item] #js {:match (fn [item]
(= "text-box" (unchecked-get item "type")))})) (= "text-box" (obj/get item "type")))}))
(defn set-line-height! (defn set-line-height!
[editor val at] [editor val at]

112
frontend/src/uxbox/main/ui/shapes/text.cljs
View file

@ -22,6 +22,7 @@
[uxbox.util.color :as color] [uxbox.util.color :as color]
[uxbox.util.dom :as dom] [uxbox.util.dom :as dom]
[uxbox.util.geom.shapes :as geom] [uxbox.util.geom.shapes :as geom]
[uxbox.util.object :as obj]
[uxbox.util.geom.matrix :as gmt] [uxbox.util.geom.matrix :as gmt]
["slate" :as slate] ["slate" :as slate]
["slate-react" :as rslate]) ["slate-react" :as rslate])
@ -72,38 +73,33 @@
;; --- Text Rendering ;; --- Text Rendering
(defn obj-assoc!
[obj attr value]
(unchecked-set obj attr value)
obj)
(defn- generate-text-box-styles (defn- generate-text-box-styles
[data] [data]
(let [valign (unchecked-get data "verticalAlign") (let [valign (obj/get data "verticalAlign")
base #js {:height "100%" base #js {:height "100%"
:width "100%" :width "100%"
:display "flex"}] :display "flex"}]
(cond-> base (cond-> base
(= valign "top") (obj-assoc! "alignItems" "flex-start") (= valign "top") (obj/assoc! "alignItems" "flex-start")
(= valign "center") (obj-assoc! "alignItems" "center") (= valign "center") (obj/assoc! "alignItems" "center")
(= valign "bottom") (obj-assoc! "alignItems" "flex-end")))) (= valign "bottom") (obj/assoc! "alignItems" "flex-end"))))
(mf/defc rt-text-box (mf/defc rt-text-box
{::mf/wrap-props false {::mf/wrap-props false
::mf/wrap [mf/memo]} ::mf/wrap [mf/memo]}
[props] [props]
(let [attrs (unchecked-get props "attributes") (let [attrs (obj/get props "attributes")
childs (unchecked-get props "children") childs (obj/get props "children")
data (unchecked-get props "element") data (obj/get props "element")
type (unchecked-get data "type") type (obj/get data "type")
style (generate-text-box-styles data) style (generate-text-box-styles data)
attrs (obj-assoc! attrs "style" style) attrs (obj/assoc! attrs "style" style)
attrs (obj-assoc! attrs "className" type)] attrs (obj/assoc! attrs "className" type)]
[:> :div attrs childs])) [:> :div attrs childs]))
(defn- generate-text-styles (defn- generate-text-styles
[data] [data]
(let [valign (unchecked-get data "verticalAlign") (let [valign (obj/get data "verticalAlign")
base #js {:display "inline-block" base #js {:display "inline-block"
:width "100%"}] :width "100%"}]
base)) base))
@ -112,13 +108,13 @@
{::mf/wrap-props false {::mf/wrap-props false
::mf/wrap [mf/memo]} ::mf/wrap [mf/memo]}
[props] [props]
(let [attrs (unchecked-get props "attributes") (let [attrs (obj/get props "attributes")
childs (unchecked-get props "children") childs (obj/get props "children")
data (unchecked-get props "element") data (obj/get props "element")
type (unchecked-get data "type") type (obj/get data "type")
style (generate-text-styles data) style (generate-text-styles data)
attrs (obj-assoc! attrs "style" style) attrs (obj/assoc! attrs "style" style)
attrs (obj-assoc! attrs "className" type)] attrs (obj/assoc! attrs "className" type)]
[:> :div attrs childs])) [:> :div attrs childs]))
(defn- generate-paragraph-styles (defn- generate-paragraph-styles
@ -126,36 +122,36 @@
(let [base #js {:fontSize "14px" (let [base #js {:fontSize "14px"
:margin "inherit" :margin "inherit"
:lineHeight "1.2"} :lineHeight "1.2"}
lh (unchecked-get data "lineHeight") lh (obj/get data "lineHeight")
ta (unchecked-get data "textAlign")] ta (obj/get data "textAlign")]
(cond-> base (cond-> base
ta (obj-assoc! "textAlign" ta) ta (obj/assoc! "textAlign" ta)
lh (obj-assoc! "lineHeight" lh)))) lh (obj/assoc! "lineHeight" lh))))
(mf/defc rt-pharagraph (mf/defc rt-pharagraph
{::mf/wrap-props false {::mf/wrap-props false
::mf/wrap [mf/memo]} ::mf/wrap [mf/memo]}
[props] [props]
(let [attrs (unchecked-get props "attributes") (let [attrs (obj/get props "attributes")
childs (unchecked-get props "children") childs (obj/get props "children")
data (unchecked-get props "element") data (obj/get props "element")
style (generate-paragraph-styles data) style (generate-paragraph-styles data)
attrs (obj-assoc! attrs "style" style)] attrs (obj/assoc! attrs "style" style)]
[:> :p attrs childs])) [:> :p attrs childs]))
(defn- generate-leaf-styles (defn- generate-leaf-styles
[data] [data]
(let [letter-spacing (unchecked-get data "letterSpacing") (let [letter-spacing (obj/get data "letterSpacing")
text-decoration (unchecked-get data "textDecoration") text-decoration (obj/get data "textDecoration")
text-transform (unchecked-get data "textTransform") text-transform (obj/get data "textTransform")
font-id (unchecked-get data "fontId") font-id (obj/get data "fontId")
font-variant-id (unchecked-get data "fontVariantId") font-variant-id (obj/get data "fontVariantId")
font-family (unchecked-get data "fontFamily") font-family (obj/get data "fontFamily")
font-size (unchecked-get data "fontSize") font-size (obj/get data "fontSize")
fill (unchecked-get data "fill") fill (obj/get data "fill")
opacity (unchecked-get data "opacity") opacity (obj/get data "opacity")
fontsdb (mf/deref fonts/fontsdb) fontsdb (mf/deref fonts/fontsdb)
@ -166,27 +162,27 @@
(when (and (string? letter-spacing) (when (and (string? letter-spacing)
(pos? (alength letter-spacing))) (pos? (alength letter-spacing)))
(obj-assoc! base "letterSpacing" (str letter-spacing "px"))) (obj/assoc! base "letterSpacing" (str letter-spacing "px")))
(when (and (string? font-size) (when (and (string? font-size)
(pos? (alength font-size))) (pos? (alength font-size)))
(obj-assoc! base "fontSize" (str font-size "px"))) (obj/assoc! base "fontSize" (str font-size "px")))
(when (and (string? font-id) (when (and (string? font-id)
(pos? (alength font-id))) (pos? (alength font-id)))
(let [font (get fontsdb font-id)] (let [font (get fontsdb font-id)]
(fonts/ensure-loaded! font-id) (fonts/ensure-loaded! font-id)
(let [font-family (or (:family font) (let [font-family (or (:family font)
(unchecked-get data "fontFamily")) (obj/get data "fontFamily"))
font-variant (d/seek #(= font-variant-id (:name %)) font-variant (d/seek #(= font-variant-id (:name %))
(:variants font)) (:variants font))
font-style (or (:style font-variant) font-style (or (:style font-variant)
(unchecked-get data "fontStyle")) (obj/get data "fontStyle"))
font-weight (or (:weight font-variant) font-weight (or (:weight font-variant)
(unchecked-get data "fontWeight"))] (obj/get data "fontWeight"))]
(obj-assoc! base "fontFamily" font-family) (obj/assoc! base "fontFamily" font-family)
(obj-assoc! base "fontStyle" font-style) (obj/assoc! base "fontStyle" font-style)
(obj-assoc! base "fontWeight" font-weight)))) (obj/assoc! base "fontWeight" font-weight))))
base)) base))
@ -194,18 +190,18 @@
{::mf/wrap-props false {::mf/wrap-props false
::mf/wrap [mf/memo]} ::mf/wrap [mf/memo]}
[props] [props]
(let [attrs (unchecked-get props "attributes") (let [attrs (obj/get props "attributes")
childs (unchecked-get props "children") childs (obj/get props "children")
data (unchecked-get props "leaf") data (obj/get props "leaf")
style (generate-leaf-styles data) style (generate-leaf-styles data)
attrs (obj-assoc! attrs "style" style)] attrs (obj/assoc! attrs "style" style)]
[:> :span attrs childs])) [:> :span attrs childs]))
(defn- render-element (defn- render-element
[props] [props]
(mf/html (mf/html
(let [element (unchecked-get props "element")] (let [element (obj/get props "element")]
(case (unchecked-get element "type") (case (obj/get element "type")
"text-box" [:> rt-text-box props] "text-box" [:> rt-text-box props]
"text" [:> rt-text props] "text" [:> rt-text props]
"paragraph" [:> rt-pharagraph props] "paragraph" [:> rt-pharagraph props]
@ -302,7 +298,7 @@
(dom/prevent-default event) (dom/prevent-default event)
(dom/stop-propagation event) (dom/stop-propagation event)
;; WARN: monky patch ;; WARN: monky patch
(unchecked-set slate/Transforms "deselect" (constantly nil))) (obj/assoc! slate/Transforms "deselect" (constantly nil)))
:placeholder "Type some text here..."}]]])) :placeholder "Type some text here..."}]]]))
;; --- Text Shape Wrapper ;; --- Text Shape Wrapper
@ -325,6 +321,12 @@
(st/emit! (dwt/assign-editor editor)) (st/emit! (dwt/assign-editor editor))
#(st/emit! (dwt/assign-editor nil)))) #(st/emit! (dwt/assign-editor nil))))
on-change
(mf/use-callback
(fn [val]
(let [content (js->clj val)]
(st/emit! (dw/update-shape id {:content content})))))
render-element (mf/use-callback render-element) render-element (mf/use-callback render-element)
render-leaf (mf/use-callback render-leaf)] render-leaf (mf/use-callback render-leaf)]
@ -339,7 +341,7 @@
[:> rslate/Slate {:editor editor [:> rslate/Slate {:editor editor
:value content :value content
:on-change (constantly nil)} :on-change on-change}
[:> rslate/Editable {:auto-focus "false" [:> rslate/Editable {:auto-focus "false"
:read-only "true" :read-only "true"

1
frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs
View file

@ -378,7 +378,6 @@
(let [id (:id shape) (let [id (:id shape)
editor (:editor (mf/deref refs/workspace-local)) editor (:editor (mf/deref refs/workspace-local))
locale (i18n/use-locale)] locale (i18n/use-locale)]
[:* [:*
[:div.element-set [:div.element-set
[:div.element-set-title (t locale "workspace.options.fill")] [:div.element-set-title (t locale "workspace.options.fill")]