mirror of
https://github.com/penpot/penpot.git
synced 2025-03-13 16:21:57 -05:00
✨ Improved code generation
This commit is contained in:
alonso.torres
parent
4b8783c104
commit
600b1a6d8d
18 changed files with 651 additions and 199 deletions
|
|
@ -464,8 +464,13 @@
|
|||
column-add-auto (/ free-column-space column-autos)
|
||||
row-add-auto (/ free-row-space row-autos)
|
||||
|
||||
column-tracks (add-auto-size column-tracks column-add-auto)
|
||||
row-tracks (add-auto-size row-tracks row-add-auto)
|
||||
column-tracks (cond-> column-tracks
|
||||
(= :stretch (:layout-align-content parent))
|
||||
(add-auto-size column-add-auto))
|
||||
|
||||
row-tracks (cond-> row-tracks
|
||||
(= :stretch (:layout-justify-content parent))
|
||||
(add-auto-size row-add-auto))
|
||||
|
||||
column-total-size (tracks-total-size column-tracks)
|
||||
row-total-size (tracks-total-size row-tracks)
|
||||
|
|
@ -556,8 +561,7 @@
|
|||
:column-total-size column-total-size
|
||||
:column-total-gap column-total-gap
|
||||
:row-total-size row-total-size
|
||||
:row-total-gap row-total-gap
|
||||
}))
|
||||
:row-total-gap row-total-gap}))
|
||||
|
||||
(defn get-cell-data
|
||||
[{:keys [origin row-tracks column-tracks shape-cells]} _transformed-parent-bounds [_ child]]
|
||||
|
|
|
|||
|
|
@ -106,9 +106,6 @@ $width-settings-bar: 256px;
|
|||
.settings-bar {
|
||||
transition: width 0.2s;
|
||||
width: $width-settings-bar;
|
||||
&.expanded {
|
||||
width: $width-settings-bar * 3;
|
||||
}
|
||||
|
||||
&.settings-bar-right,
|
||||
&.settings-bar-left {
|
||||
|
|
|
|||
|
|
@ -328,6 +328,7 @@
|
|||
}
|
||||
|
||||
.code-block {
|
||||
position: relative;
|
||||
margin-top: 0.5rem;
|
||||
border-top: 1px solid $color-gray-60;
|
||||
|
||||
|
|
@ -353,17 +354,86 @@
|
|||
.copy-button {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.custom-select {
|
||||
border: 1px solid $color-gray-40;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem 1.5rem 0.25rem 0.25rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.dropdown-button {
|
||||
position: absolute;
|
||||
right: 0.25rem;
|
||||
top: 7px;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-40;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-select-dropdown {
|
||||
background-color: $color-white;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
|
||||
left: 0;
|
||||
max-height: 30rem;
|
||||
min-width: 7rem;
|
||||
position: absolute;
|
||||
overflow-y: auto;
|
||||
top: 30px;
|
||||
z-index: 12;
|
||||
|
||||
li {
|
||||
color: $color-gray-60;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
display: flex;
|
||||
gap: 0 10px;
|
||||
justify-content: flex-start;
|
||||
padding: 0.5rem;
|
||||
|
||||
.checked-element {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
visibility: hidden;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: none;
|
||||
margin: 0.25rem;
|
||||
fill: $color-black;
|
||||
}
|
||||
|
||||
.is-selected svg {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.code-row-display {
|
||||
line-height: 1;
|
||||
margin: 0.5rem;
|
||||
font-size: $fs14;
|
||||
max-height: var(--code-height, 400px);
|
||||
overflow: auto;
|
||||
|
||||
.code-display {
|
||||
font-family: monospace;
|
||||
border-radius: $br4;
|
||||
padding: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
overflow: hidden;
|
||||
white-space: pre-wrap;
|
||||
white-space: pre;
|
||||
min-width: fit-content;
|
||||
background: $color-gray-60;
|
||||
user-select: text;
|
||||
|
||||
|
|
@ -378,6 +448,15 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.resize-area {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
left: 0;
|
||||
height: 18px;
|
||||
z-index: 1;
|
||||
cursor: ns-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.element-options > :first-child {
|
||||
|
|
|
|||
|
|
@ -35,6 +35,10 @@
|
|||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.inspect .tab-container-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tab-element,
|
||||
.tab-element-content {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -48,14 +48,11 @@ $height-palette-max: 80px;
|
|||
}
|
||||
|
||||
.settings-bar.settings-bar-right {
|
||||
transition: width 0.2s;
|
||||
min-width: $width-settings-bar;
|
||||
max-width: $width-settings-bar * 3;
|
||||
width: $width-settings-bar;
|
||||
width: var(--width, $width-settings-bar);
|
||||
grid-area: right-sidebar;
|
||||
|
||||
&.expanded {
|
||||
width: $width-settings-bar * 3;
|
||||
&.not-expand {
|
||||
max-width: $width-settings-bar;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -88,9 +88,9 @@
|
|||
|
||||
(defn ^:export reinit
|
||||
[]
|
||||
(mf/unmount (dom/get-element "app"))
|
||||
(mf/unmount (dom/get-element "modal"))
|
||||
(st/emit! (ev/initialize))
|
||||
#_(mf/unmount (dom/get-element "app"))
|
||||
#_(mf/unmount (dom/get-element "modal"))
|
||||
#_(st/emit! (ev/initialize))
|
||||
(init-ui))
|
||||
|
||||
(defn ^:dev/after-load after-load
|
||||
|
|
|
|||
|
|
@ -2160,20 +2160,6 @@
|
|||
(let [orphans (set (into [] (keys (wsh/find-orphan-shapes state))))]
|
||||
(rx/of (relocate-shapes orphans uuid/zero 0 true))))))
|
||||
|
||||
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Inspect
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
|
||||
(defn set-inspect-expanded
|
||||
[expanded?]
|
||||
(ptk/reify ::set-inspect-expanded
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(assoc-in state [:workspace-local :inspect-expanded] expanded?))))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Sitemap
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
|
|||
|
|
@ -59,9 +59,9 @@
|
|||
:layout-gap-type :multiple
|
||||
:layout-gap {:row-gap 0 :column-gap 0}
|
||||
:layout-align-items :start
|
||||
:layout-align-content :start
|
||||
:layout-justify-items :start
|
||||
:layout-justify-content :start
|
||||
:layout-align-content :stretch
|
||||
:layout-justify-content :stretch
|
||||
:layout-padding-type :simple
|
||||
:layout-padding {:p1 0 :p2 0 :p3 0 :p4 0}
|
||||
:layout-grid-cells {}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
[app.common.data.macros :as dm]
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.logging :as log]
|
||||
[app.common.math :as mth]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
[app.util.dom :as dom]
|
||||
|
|
@ -65,11 +66,19 @@
|
|||
start-size (mf/ref-val start-size-ref)
|
||||
new-size (-> (+ start-size delta) (max min-val) (min max-val))]
|
||||
(reset! size-state new-size)
|
||||
(swap! storage assoc-in [::saved-resize current-file-id key] new-size)))))]
|
||||
(swap! storage assoc-in [::saved-resize current-file-id key] new-size)))))
|
||||
|
||||
set-size
|
||||
(mf/use-callback
|
||||
(fn [new-size]
|
||||
(let [new-size (mth/clamp new-size min-val max-val)]
|
||||
(reset! size-state new-size)
|
||||
(swap! storage assoc-in [::saved-resize current-file-id key] new-size))))]
|
||||
{:on-pointer-down on-pointer-down
|
||||
:on-lost-pointer-capture on-lost-pointer-capture
|
||||
:on-pointer-move on-pointer-move
|
||||
:parent-ref parent-ref
|
||||
:set-size set-size
|
||||
:size @size-state}))
|
||||
|
||||
(defn use-resize-observer
|
||||
|
|
|
|||
|
|
@ -48,6 +48,18 @@
|
|||
|
||||
(mf/ref-val fonts-css-ref)))
|
||||
|
||||
(mf/defc fontfaces-style-html
|
||||
{::mf/wrap-props false
|
||||
::mf/wrap [#(mf/memo' % (mf/check-props ["fonts"]))]}
|
||||
[props]
|
||||
|
||||
(let [fonts (obj/get props "fonts")
|
||||
|
||||
;; Fetch its CSS fontfaces
|
||||
fonts-css (use-fonts-css fonts)]
|
||||
|
||||
[:style fonts-css]))
|
||||
|
||||
(mf/defc fontfaces-style-render
|
||||
{::mf/wrap-props false
|
||||
::mf/wrap [#(mf/memo' % (mf/check-props ["fonts"]))]}
|
||||
|
|
@ -63,7 +75,6 @@
|
|||
(mf/deps fonts-css)
|
||||
#(fonts/extract-fontface-urls fonts-css))
|
||||
|
||||
|
||||
;; Calculate the data-uris for these fonts
|
||||
fonts-embed (embed/use-data-uris fonts-urls)
|
||||
|
||||
|
|
|
|||
|
|
@ -83,19 +83,24 @@
|
|||
[props ref]
|
||||
(let [shape (obj/get props "shape")
|
||||
grow-type (obj/get props "grow-type")
|
||||
{:keys [id x y width height content]} shape]
|
||||
code? (obj/get props "code?")
|
||||
{:keys [id x y width height content]} shape
|
||||
|
||||
style
|
||||
(when-not code?
|
||||
#js {:position "fixed"
|
||||
:left 0
|
||||
:top 0
|
||||
:background "white"
|
||||
:width (if (#{:auto-width} grow-type) 100000 width)
|
||||
:height (if (#{:auto-height :auto-width} grow-type) 100000 height)})]
|
||||
|
||||
[:div.text-node-html
|
||||
{:id (dm/str "html-text-node-" id)
|
||||
:ref ref
|
||||
:data-x x
|
||||
:data-y y
|
||||
:style {:position "fixed"
|
||||
:left 0
|
||||
:top 0
|
||||
:background "white"
|
||||
:width (if (#{:auto-width} grow-type) 100000 width)
|
||||
:height (if (#{:auto-height :auto-width} grow-type) 100000 height)}}
|
||||
:style style}
|
||||
;; We use a class here because react has a bug that won't use the appropriate selector for
|
||||
;; `background-clip`
|
||||
[:style ".text-node { background-clip: text;
|
||||
|
|
|
|||
|
|
@ -48,7 +48,8 @@
|
|||
[_shape data]
|
||||
(let [line-height (:line-height data 1.2)
|
||||
text-align (:text-align data "start")
|
||||
base #js {:fontSize (str (:font-size data (:font-size txt/default-text-attrs)) "px")
|
||||
base #js {;; Fix a problem when exporting HTML
|
||||
:fontSize 0 ;;(str (:font-size data (:font-size txt/default-text-attrs)) "px")
|
||||
:lineHeight (:line-height data (:line-height txt/default-text-attrs))
|
||||
:margin 0}]
|
||||
(cond-> base
|
||||
|
|
|
|||
|
|
@ -7,41 +7,36 @@
|
|||
(ns app.main.ui.viewer.inspect.code
|
||||
(:require
|
||||
["js-beautify" :as beautify]
|
||||
["react-dom/server" :as rds]
|
||||
[app.common.data :as d]
|
||||
[app.common.data.macros :as dm]
|
||||
[app.common.geom.shapes :as gsh]
|
||||
[app.common.pages.helpers :as cph]
|
||||
[app.common.types.shape-tree :as ctst]
|
||||
[app.config :as cfg]
|
||||
[app.main.data.events :as ev]
|
||||
[app.main.fonts :as fonts]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.render :as render]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.code-block :refer [code-block]]
|
||||
[app.main.ui.components.copy-button :refer [copy-button]]
|
||||
[app.main.ui.components.select :refer [select]]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
[app.main.ui.hooks.resize :refer [use-resize-hook]]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.shapes.text.fontfaces :refer [shapes->fonts]]
|
||||
[app.util.code-gen :as cg]
|
||||
[app.util.http :as http]
|
||||
[beicon.core :as rx]
|
||||
[cuerdas.core :as str]
|
||||
[potok.core :as ptk]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(defn generate-markup-code [objects shapes]
|
||||
;; Here we can render specific HTML code
|
||||
(->> shapes
|
||||
(map (fn [shape]
|
||||
(dm/str
|
||||
"<!-- Shape: " (:name shape) " -->"
|
||||
(rds/renderToStaticMarkup
|
||||
(mf/element
|
||||
render/object-svg
|
||||
#js {:objects objects
|
||||
:object-id (-> shape :id)})))))
|
||||
(str/join "\n\n")))
|
||||
|
||||
(defn format-code [code type]
|
||||
(let [code (-> code
|
||||
(str/replace "<defs></defs>" "")
|
||||
(str/replace "><" ">\n<"))]
|
||||
(cond-> code
|
||||
(= type "svg") (beautify/html #js {"indent_size" 2}))))
|
||||
(or (= type "svg") (= type "html")) (beautify/html #js {"indent_size" 2}))))
|
||||
|
||||
(defn get-flex-elements [page-id shapes from]
|
||||
(let [ids (mapv :id shapes)
|
||||
|
|
@ -62,46 +57,139 @@
|
|||
(refs/get-viewer-objects))))]
|
||||
(mf/deref page-objects-ref)))
|
||||
|
||||
(defn shapes->images
|
||||
[shapes]
|
||||
(->> shapes
|
||||
(keep
|
||||
(fn [shape]
|
||||
(when-let [data (or (:metadata shape) (:fill-image shape))]
|
||||
[(:id shape) (cfg/resolve-file-media data)])))))
|
||||
|
||||
(defn replace-map
|
||||
[value map]
|
||||
(reduce
|
||||
(fn [value [old new]]
|
||||
(str/replace value old new))
|
||||
value map))
|
||||
|
||||
(mf/defc code
|
||||
[{:keys [shapes frame on-expand from]}]
|
||||
(let [style-type (mf/use-state "css")
|
||||
markup-type (mf/use-state "svg")
|
||||
(let [style-type* (mf/use-state "css")
|
||||
markup-type* (mf/use-state "html")
|
||||
fontfaces-css* (mf/use-state nil)
|
||||
images-data* (mf/use-state nil)
|
||||
|
||||
style-type (deref style-type*)
|
||||
markup-type (deref markup-type*)
|
||||
fontfaces-css (deref fontfaces-css*)
|
||||
images-data (deref images-data*)
|
||||
|
||||
shapes (->> shapes
|
||||
(map #(gsh/translate-to-frame % frame)))
|
||||
|
||||
route (mf/deref refs/route)
|
||||
page-id (:page-id (:query-params route))
|
||||
flex-items (get-flex-elements page-id shapes from)
|
||||
objects (get-objects from)
|
||||
|
||||
;; TODO REMOVE THIS
|
||||
shapes (->> shapes
|
||||
(map #(assoc % :parent (get objects (:parent-id %))))
|
||||
(map #(assoc % :flex-items flex-items)))
|
||||
style-code (-> (cg/generate-style-code @style-type shapes)
|
||||
(format-code "css"))
|
||||
|
||||
all-children (->> shapes
|
||||
(map :id)
|
||||
(cph/selected-with-children objects)
|
||||
(ctst/sort-z-index objects)
|
||||
(map (d/getf objects)))
|
||||
|
||||
|
||||
shapes (hooks/use-equal-memo shapes)
|
||||
all-children (hooks/use-equal-memo all-children)
|
||||
|
||||
fonts (-> (shapes->fonts all-children)
|
||||
(hooks/use-equal-memo))
|
||||
|
||||
images-urls (-> (shapes->images all-children)
|
||||
(hooks/use-equal-memo))
|
||||
|
||||
style-code
|
||||
(mf/use-memo
|
||||
(mf/deps fontfaces-css style-type all-children)
|
||||
(fn []
|
||||
(dm/str
|
||||
fontfaces-css "\n"
|
||||
(-> (cg/generate-style-code objects style-type all-children)
|
||||
(format-code style-type)))))
|
||||
|
||||
markup-code
|
||||
(-> (mf/use-memo (mf/deps shapes) #(generate-markup-code objects shapes))
|
||||
(format-code "svg"))
|
||||
(mf/use-memo
|
||||
(mf/deps markup-type shapes images-data)
|
||||
(fn []
|
||||
(-> (cg/generate-markup-code objects markup-type (map :id shapes))
|
||||
(format-code markup-type))))
|
||||
|
||||
on-markup-copied
|
||||
(mf/use-callback
|
||||
(mf/deps @markup-type)
|
||||
(mf/deps markup-type)
|
||||
(fn []
|
||||
(st/emit! (ptk/event ::ev/event
|
||||
{::ev/name "copy-inspect-code"
|
||||
:type @markup-type}))))
|
||||
:type markup-type}))))
|
||||
|
||||
on-style-copied
|
||||
(mf/use-callback
|
||||
(mf/deps @style-type)
|
||||
(mf/deps style-type)
|
||||
(fn []
|
||||
(st/emit! (ptk/event ::ev/event
|
||||
{::ev/name "copy-inspect-style"
|
||||
:type @style-type}))))]
|
||||
:type style-type}))))
|
||||
|
||||
{on-code-pointer-down :on-pointer-down
|
||||
on-code-lost-pointer-capture :on-lost-pointer-capture
|
||||
on-code-pointer-move :on-pointer-move
|
||||
code-size :size}
|
||||
(use-resize-hook :code 400 100 800 :y false :bottom)
|
||||
|
||||
set-style
|
||||
(mf/use-callback
|
||||
(fn [value]
|
||||
(reset! style-type* value)))
|
||||
|
||||
set-markup
|
||||
(mf/use-callback
|
||||
(fn [value]
|
||||
(reset! markup-type* value)))]
|
||||
|
||||
(mf/use-effect
|
||||
(mf/deps fonts)
|
||||
#(->> (rx/from fonts)
|
||||
(rx/merge-map fonts/fetch-font-css)
|
||||
(rx/reduce conj [])
|
||||
(rx/subs
|
||||
(fn [result]
|
||||
(let [css (str/join "\n" result)]
|
||||
(reset! fontfaces-css* css))))))
|
||||
|
||||
(mf/use-effect
|
||||
(mf/deps images-urls)
|
||||
#(->> (rx/from images-urls)
|
||||
(rx/merge-map
|
||||
(fn [[_ uri]]
|
||||
(->> (http/fetch-data-uri uri true)
|
||||
(rx/catch (fn [_] (rx/of (hash-map uri uri)))))))
|
||||
(rx/reduce conj {})
|
||||
(rx/subs
|
||||
(fn [result]
|
||||
(reset! images-data* result)))))
|
||||
|
||||
[:div.element-options
|
||||
[:div.code-block
|
||||
[:div.code-row-lang "CSS"
|
||||
|
||||
[:div.code-row-lang
|
||||
[:& select {:default-value style-type
|
||||
:class "custom-select"
|
||||
:options [{:label "CSS" :value "css"}]
|
||||
:on-change set-style}]
|
||||
[:button.expand-button
|
||||
{:on-click on-expand}
|
||||
i/full-screen]
|
||||
|
|
@ -109,19 +197,31 @@
|
|||
[:& copy-button {:data style-code
|
||||
:on-copied on-style-copied}]]
|
||||
|
||||
[:div.code-row-display
|
||||
[:& code-block {:type @style-type
|
||||
:code style-code}]]]
|
||||
[:div.code-row-display {:style #js {"--code-height" (str (or code-size 400) "px")}}
|
||||
[:& code-block {:type style-type
|
||||
:code style-code}]]
|
||||
|
||||
[:div.resize-area {:on-pointer-down on-code-pointer-down
|
||||
:on-lost-pointer-capture on-code-lost-pointer-capture
|
||||
:on-pointer-move on-code-pointer-move}]]
|
||||
|
||||
|
||||
[:div.code-block
|
||||
[:div.code-row-lang "SVG"
|
||||
[:div.code-row-lang
|
||||
[:& select {:default-value markup-type
|
||||
:class "input-option"
|
||||
:options [{:label "HTML" :value "html"}
|
||||
{:label "SVG" :value "svg"}]
|
||||
:on-change set-markup}]
|
||||
|
||||
[:button.expand-button
|
||||
{:on-click on-expand}
|
||||
i/full-screen]
|
||||
|
||||
[:& copy-button {:data markup-code
|
||||
[:& copy-button {:data (replace-map markup-code images-data)
|
||||
:on-copied on-markup-copied}]]
|
||||
|
||||
|
||||
[:div.code-row-display
|
||||
[:& code-block {:type @markup-type
|
||||
[:& code-block {:type markup-type
|
||||
:code markup-code}]]]]))
|
||||
|
|
|
|||
|
|
@ -6,9 +6,7 @@
|
|||
|
||||
(ns app.main.ui.viewer.inspect.right-sidebar
|
||||
(:require
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.shape-icon :as si]
|
||||
[app.main.ui.components.tabs-container :refer [tabs-container tabs-element]]
|
||||
[app.main.ui.icons :as i]
|
||||
|
|
@ -38,10 +36,9 @@
|
|||
:data local})))))
|
||||
|
||||
(mf/defc right-sidebar
|
||||
[{:keys [frame page file selected shapes page-id file-id share-id from]
|
||||
[{:keys [frame page file selected shapes page-id file-id share-id from on-change-section on-expand]
|
||||
:or {from :inspect}}]
|
||||
(let [expanded (mf/use-state false)
|
||||
section (mf/use-state :info #_:code)
|
||||
(let [section (mf/use-state :info #_:code)
|
||||
shapes (or shapes
|
||||
(resolve-shapes (:objects page) selected))
|
||||
|
||||
|
|
@ -49,9 +46,29 @@
|
|||
page-id (or page-id (:id page))
|
||||
file-id (or file-id (:id file))
|
||||
|
||||
libraries (get-libraries from)]
|
||||
libraries (get-libraries from)
|
||||
|
||||
[:aside.settings-bar.settings-bar-right {:class (when @expanded "expanded")}
|
||||
handle-change-tab
|
||||
(mf/use-callback
|
||||
(mf/deps from on-change-section)
|
||||
(fn [new-section]
|
||||
(reset! section new-section)
|
||||
(when on-change-section
|
||||
(on-change-section new-section))))
|
||||
|
||||
handle-expand
|
||||
(mf/use-callback
|
||||
(mf/deps on-expand)
|
||||
(fn []
|
||||
(when on-expand (on-expand))))]
|
||||
|
||||
(mf/use-effect
|
||||
(mf/deps shapes handle-change-tab)
|
||||
(fn []
|
||||
(when-not (seq shapes)
|
||||
(handle-change-tab :info))))
|
||||
|
||||
[:aside.settings-bar.settings-bar-right
|
||||
[:div.settings-bar-inside
|
||||
(if (seq shapes)
|
||||
[:div.tool-window
|
||||
|
|
@ -77,12 +94,8 @@
|
|||
;; inspect.tabs.code.selected.text
|
||||
[:span.tool-window-bar-title (:name first-shape)]])]
|
||||
[:div.tool-window-content.inspect
|
||||
[:& tabs-container {:on-change-tab #(do
|
||||
(reset! expanded false)
|
||||
(reset! section %)
|
||||
(when (= from :workspace)
|
||||
(st/emit! (dw/set-inspect-expanded false))))
|
||||
:selected @section}
|
||||
[:& tabs-container {:on-change-tab handle-change-tab
|
||||
:selected @section}
|
||||
[:& tabs-element {:id :info :title (tr "inspect.tabs.info")}
|
||||
[:& attributes {:page-id page-id
|
||||
:file-id file-id
|
||||
|
|
@ -95,10 +108,7 @@
|
|||
[:& tabs-element {:id :code :title (tr "inspect.tabs.code")}
|
||||
[:& code {:frame frame
|
||||
:shapes shapes
|
||||
:on-expand (fn []
|
||||
(when (= from :workspace)
|
||||
(st/emit! (dw/set-inspect-expanded (not @expanded))))
|
||||
(swap! expanded not))
|
||||
:on-expand handle-expand
|
||||
:from from}]]]]]
|
||||
[:div.empty
|
||||
[:span.tool-window-bar-icon i/code]
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
[app.main.ui.workspace.sidebar.sitemap :refer [sitemap]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :refer [tr]]
|
||||
[app.util.object :as obj]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
;; --- Left Sidebar (Component)
|
||||
|
|
@ -134,16 +135,45 @@
|
|||
is-history? (contains? layout :document-history)
|
||||
is-inspect? (= section :inspect)
|
||||
|
||||
expanded? (mf/deref refs/inspect-expanded)
|
||||
;;expanded? (mf/deref refs/inspect-expanded)
|
||||
;;prev-expanded? (hooks/use-previous expanded?)
|
||||
|
||||
current-section* (mf/use-state :info)
|
||||
current-section (deref current-section*)
|
||||
|
||||
can-be-expanded? (and (not is-comments?)
|
||||
(not is-history?)
|
||||
is-inspect?)]
|
||||
is-inspect?
|
||||
(= current-section :code))
|
||||
|
||||
(mf/with-effect [can-be-expanded?]
|
||||
(when (not can-be-expanded?)
|
||||
(st/emit! (dw/set-inspect-expanded false))))
|
||||
{:keys [on-pointer-down on-lost-pointer-capture on-pointer-move set-size size]}
|
||||
(use-resize-hook :code 256 256 768 :x true :right)
|
||||
|
||||
[:aside.settings-bar.settings-bar-right {:class (when (and can-be-expanded? expanded?) "expanded")}
|
||||
handle-change-section
|
||||
(mf/use-callback
|
||||
(fn [section]
|
||||
(reset! current-section* section)))
|
||||
|
||||
handle-expand
|
||||
(mf/use-callback
|
||||
(mf/deps size)
|
||||
(fn []
|
||||
(set-size (if (> size 256) 256 768))))
|
||||
|
||||
props
|
||||
(-> props
|
||||
(obj/clone)
|
||||
(obj/set! "on-change-section" handle-change-section)
|
||||
(obj/set! "on-expand" handle-expand))]
|
||||
|
||||
[:aside.settings-bar.settings-bar-right
|
||||
{:class (when (not can-be-expanded?) "not-expand")
|
||||
:style #js {"--width" (when can-be-expanded? (dm/str size "px"))}}
|
||||
(when can-be-expanded?
|
||||
[:div.resize-area
|
||||
{:on-pointer-down on-pointer-down
|
||||
:on-lost-pointer-capture on-lost-pointer-capture
|
||||
:on-pointer-move on-pointer-move}])
|
||||
[:div.settings-bar-inside
|
||||
(cond
|
||||
(true? is-comments?)
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
|
||||
(mf/defc options-content
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [selected section shapes shapes-with-children page-id file-id]}]
|
||||
[{:keys [selected section shapes shapes-with-children page-id file-id on-change-section on-expand]}]
|
||||
(let [drawing (mf/deref refs/workspace-drawing)
|
||||
objects (mf/deref refs/workspace-page-objects)
|
||||
shared-libs (mf/deref refs/workspace-libraries)
|
||||
|
|
@ -83,9 +83,8 @@
|
|||
|
||||
on-change-tab
|
||||
(fn [options-mode]
|
||||
(st/emit! (udw/set-options-mode options-mode)
|
||||
(udw/set-inspect-expanded false))
|
||||
(if (= options-mode :inspect) ;;TODO maybe move this logic to set-options-mode
|
||||
(st/emit! (udw/set-options-mode options-mode))
|
||||
(if (= options-mode :inspect)
|
||||
(st/emit! :interrupt (udw/set-workspace-read-only true))
|
||||
(st/emit! :interrupt (udw/set-workspace-read-only false))))]
|
||||
|
||||
|
|
@ -94,7 +93,7 @@
|
|||
[:& tabs-container {:on-change-tab on-change-tab
|
||||
:selected section}
|
||||
[:& tabs-element {:id :design
|
||||
:title (tr "workspace.options.design")}
|
||||
:title (tr "workspace.options.design")}
|
||||
[:div.element-options
|
||||
[:& align-options]
|
||||
[:& bool-options]
|
||||
|
|
@ -143,13 +142,16 @@
|
|||
[:& interactions-menu {:shape (first shapes)}]]]
|
||||
|
||||
[:& tabs-element {:id :inspect
|
||||
:title (tr "workspace.options.inspect")}
|
||||
[:div.element-options
|
||||
[:& hrs/right-sidebar {:page-id page-id
|
||||
:file-id file-id
|
||||
:frame shape-parent-frame
|
||||
:shapes selected-shapes
|
||||
:from :workspace}]]]]]]))
|
||||
:title (tr "workspace.options.inspect")}
|
||||
|
||||
[:div.element-options.element-options-inspect
|
||||
[:& hrs/right-sidebar {:page-id page-id
|
||||
:file-id file-id
|
||||
:frame shape-parent-frame
|
||||
:shapes selected-shapes
|
||||
:on-change-section on-change-section
|
||||
:on-expand on-expand
|
||||
:from :workspace}]]]]]]))
|
||||
|
||||
;; TODO: this need optimizations, selected-objects and
|
||||
;; selected-objects-with-children are derefed always but they only
|
||||
|
|
@ -161,6 +163,8 @@
|
|||
[props]
|
||||
(let [section (obj/get props "section")
|
||||
selected (obj/get props "selected")
|
||||
on-change-section (obj/get props "on-change-section")
|
||||
on-expand (obj/get props "on-expand")
|
||||
page-id (mf/use-ctx ctx/current-page-id)
|
||||
file-id (mf/use-ctx ctx/current-file-id)
|
||||
shapes (mf/deref refs/selected-objects)
|
||||
|
|
@ -171,4 +175,6 @@
|
|||
:shapes-with-children shapes-with-children
|
||||
:file-id file-id
|
||||
:page-id page-id
|
||||
:section section}]))
|
||||
:section section
|
||||
:on-change-section on-change-section
|
||||
:on-expand on-expand}]))
|
||||
|
|
|
|||
|
|
@ -125,6 +125,7 @@
|
|||
:justify-items
|
||||
(if is-col?
|
||||
(case val
|
||||
:stretch i/grid-justify-content-column-around
|
||||
:start i/grid-justify-content-column-start
|
||||
:end i/grid-justify-content-column-end
|
||||
:center i/grid-justify-content-column-center
|
||||
|
|
@ -133,6 +134,7 @@
|
|||
:space-evenly i/grid-justify-content-column-between)
|
||||
|
||||
(case val
|
||||
:stretch i/grid-justify-content-column-around
|
||||
:start i/grid-justify-content-row-start
|
||||
:end i/grid-justify-content-row-end
|
||||
:center i/grid-justify-content-row-center
|
||||
|
|
@ -407,7 +409,7 @@
|
|||
[{:keys [is-col? justify-items set-justify] :as props}]
|
||||
(let [type (if is-col? :column :row)]
|
||||
[:div.justify-content-style
|
||||
(for [align [:start :center :end :space-around :space-between :space-evenly]]
|
||||
(for [align [:stretch :start :center :end :space-around :space-between]]
|
||||
[:button.align-start.tooltip
|
||||
{:class (dom/classnames :active (= justify-items align)
|
||||
:tooltip-bottom-left (not= align :start)
|
||||
|
|
@ -748,7 +750,7 @@
|
|||
align-items-row (:layout-align-items values)
|
||||
align-items-column (:layout-justify-items values)
|
||||
|
||||
set-align-grid
|
||||
set-items-grid
|
||||
(fn [value type]
|
||||
(if (= type :row)
|
||||
(st/emit! (dwsl/update-layout ids {:layout-align-items value}))
|
||||
|
|
@ -758,7 +760,7 @@
|
|||
grid-justify-content-row (:layout-align-content values)
|
||||
grid-justify-content-column (:layout-justify-content values)
|
||||
|
||||
set-justify-grid
|
||||
set-content-grid
|
||||
(mf/use-callback
|
||||
(mf/deps ids)
|
||||
(fn [value type]
|
||||
|
|
@ -833,25 +835,25 @@
|
|||
[:& grid-edit-mode {:id (first ids)}]])]]
|
||||
|
||||
[:div.layout-row
|
||||
[:div.align-items-grid.row-title "Align"]
|
||||
[:div.align-items-grid.row-title "Items"]
|
||||
[:div.btn-wrapper.align-grid
|
||||
[:& align-grid-row {:is-col? false
|
||||
:align-items align-items-row
|
||||
:set-align set-align-grid}]
|
||||
:set-align set-items-grid}]
|
||||
|
||||
[:& align-grid-row {:is-col? true
|
||||
:align-items align-items-column
|
||||
:set-align set-align-grid}]]]
|
||||
:set-align set-items-grid}]]]
|
||||
|
||||
[:div.layout-row
|
||||
[:div.jusfiy-content-grid.row-title "Justify"]
|
||||
[:div.jusfiy-content-grid.row-title "Content"]
|
||||
[:div.btn-wrapper.align-grid
|
||||
[:& justify-grid-row {:is-col? true
|
||||
:justify-items grid-justify-content-column
|
||||
:set-justify set-justify-grid}]
|
||||
:set-justify set-content-grid}]
|
||||
[:& justify-grid-row {:is-col? false
|
||||
:justify-items grid-justify-content-row
|
||||
:set-justify set-justify-grid}]]]
|
||||
:set-justify set-content-grid}]]]
|
||||
[:& grid-columns-row {:is-col? true
|
||||
:expanded? @grid-columns-open?
|
||||
:toggle toggle-columns-info
|
||||
|
|
|
|||
|
|
@ -6,14 +6,19 @@
|
|||
|
||||
(ns app.util.code-gen
|
||||
(:require
|
||||
["react-dom/server" :as rds]
|
||||
[app.common.data :as d]
|
||||
[app.common.data.macros :as dm]
|
||||
[app.common.pages.helpers :as cph]
|
||||
[app.common.text :as txt]
|
||||
[app.common.types.shape.layout :as ctl]
|
||||
[app.config :as cfg]
|
||||
[app.main.render :as render]
|
||||
[app.main.ui.formats :as fmt]
|
||||
[app.main.ui.shapes.text.html-text :as text]
|
||||
[app.util.color :as uc]
|
||||
[cuerdas.core :as str]))
|
||||
[cuerdas.core :as str]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(defn shadow->css [shadow]
|
||||
(let [{:keys [style offset-x offset-y blur spread]} shadow
|
||||
|
|
@ -24,9 +29,14 @@
|
|||
|
||||
(defn fill-color->background
|
||||
[fill]
|
||||
(uc/color->background {:color (:fill-color fill)
|
||||
:opacity (:fill-opacity fill)
|
||||
:gradient (:fill-color-gradient fill)}))
|
||||
(cond
|
||||
(not= (:fill-opacity fill) 1)
|
||||
(uc/color->background {:color (:fill-color fill)
|
||||
:opacity (:fill-opacity fill)
|
||||
:gradient (:fill-color-gradient fill)})
|
||||
|
||||
:else
|
||||
(str/upper (:fill-color fill))))
|
||||
|
||||
(defn format-fill-color [_ shape]
|
||||
(let [fills (:fills shape)
|
||||
|
|
@ -41,7 +51,7 @@
|
|||
[(fill-color->background first-fill)])]
|
||||
(str/join ", " colors)))
|
||||
|
||||
(defn format-stroke [_ shape]
|
||||
(defn format-stroke [shape]
|
||||
(let [first-stroke (first (:strokes shape))
|
||||
width (:stroke-width first-stroke)
|
||||
style (let [style (:stroke-style first-stroke)]
|
||||
|
|
@ -52,16 +62,32 @@
|
|||
(when-not (= :none (:stroke-style first-stroke))
|
||||
(str/format "%spx %s %s" width style (uc/color->background color)))))
|
||||
|
||||
(defn format-position [_ shape]
|
||||
(let [relative? (cph/frame-shape? shape)
|
||||
absolute? (or (empty? (:flex-items shape))
|
||||
(and (ctl/any-layout? (:parent shape)) (ctl/layout-absolute? shape)))]
|
||||
(defn format-position [objects]
|
||||
(fn [_ shape]
|
||||
(cond
|
||||
absolute? "absolute"
|
||||
relative? "relative"
|
||||
(and (ctl/any-layout-immediate-child? objects shape)
|
||||
(not (ctl/layout-absolute? shape))
|
||||
(or (cph/group-shape? shape)
|
||||
(cph/frame-shape? shape)))
|
||||
"relative"
|
||||
|
||||
;; static is default value in css
|
||||
:else nil)))
|
||||
(and (ctl/any-layout-immediate-child? objects shape)
|
||||
(not (ctl/layout-absolute? shape)))
|
||||
nil
|
||||
|
||||
:else
|
||||
"absolute")))
|
||||
|
||||
(defn mk-grid-coord
|
||||
[objects prop span-prop]
|
||||
|
||||
(fn [_ shape]
|
||||
(when (ctl/grid-layout-immediate-child? objects shape)
|
||||
(let [parent (get objects (:parent-id shape))
|
||||
cell (ctl/get-cell-by-shape-id parent (:id shape))]
|
||||
(if (> (get cell span-prop) 1)
|
||||
(dm/str (get cell prop) " / " (+ (get cell prop) (get cell span-prop)))
|
||||
(get cell prop))))))
|
||||
|
||||
(defn get-size
|
||||
[type values]
|
||||
|
|
@ -75,14 +101,35 @@
|
|||
(fmt/format-size :width value values)
|
||||
(fmt/format-size :heigth value values))))
|
||||
|
||||
(defn make-format-absolute-pos
|
||||
[objects shape coord]
|
||||
(fn [value]
|
||||
(let [parent-id (dm/get-in objects [(:id shape) :parent-id])
|
||||
parent-value (dm/get-in objects [parent-id :selrect coord])]
|
||||
(when-not (or (cph/root-frame? shape)
|
||||
(ctl/any-layout-immediate-child? objects shape)
|
||||
(ctl/layout-absolute? shape))
|
||||
(fmt/format-pixels (- value parent-value))))))
|
||||
|
||||
(defn format-tracks
|
||||
[tracks]
|
||||
(str/join
|
||||
" "
|
||||
(->> tracks (map (fn [{:keys [type value]}]
|
||||
(case type
|
||||
:flex (dm/str (fmt/format-number value) "fr")
|
||||
:percent (fmt/format-percent (/ value 100))
|
||||
:auto "auto"
|
||||
(fmt/format-pixels value)))))))
|
||||
|
||||
(defn styles-data
|
||||
[shape]
|
||||
[objects shape]
|
||||
{:position {:props [:type]
|
||||
:to-prop {:type "position"}
|
||||
:format {:type format-position}}
|
||||
:format {:type (format-position objects)}}
|
||||
:layout {:props (if (or (empty? (:flex-items shape))
|
||||
(ctl/layout-absolute? shape))
|
||||
[:width :height :x :y :radius :rx :r1]
|
||||
[:x :y :width :height :radius :rx :r1]
|
||||
[:width :height :radius :rx :r1])
|
||||
:to-prop {:x "left"
|
||||
:y "top"
|
||||
|
|
@ -92,30 +139,60 @@
|
|||
:format {:rotation #(str/fmt "rotate(%sdeg)" %)
|
||||
:r1 #(apply str/fmt "%spx %spx %spx %spx" %)
|
||||
:width #(get-size :width %)
|
||||
:height #(get-size :height %)}
|
||||
:height #(get-size :height %)
|
||||
:x (make-format-absolute-pos objects shape :x)
|
||||
:y (make-format-absolute-pos objects shape :y)}
|
||||
:multi {:r1 [:r1 :r2 :r3 :r4]}}
|
||||
:fill {:props [:fills]
|
||||
:to-prop {:fills (if (> (count (:fills shape)) 1) "background-image" "background-color")}
|
||||
:to-prop {:fills (cond
|
||||
(or (cph/path-shape? shape)
|
||||
(cph/mask-shape? shape)
|
||||
(cph/bool-shape? shape)
|
||||
(cph/svg-raw-shape? shape)
|
||||
(some? (:svg-attrs shape)))
|
||||
nil
|
||||
|
||||
(> (count (:fills shape)) 1)
|
||||
"background-image"
|
||||
|
||||
(and (= (count (:fills shape)) 1)
|
||||
(some? (:fill-color-gradient (first (:fills shape)))))
|
||||
"background"
|
||||
|
||||
:else
|
||||
"background-color")}
|
||||
:format {:fills format-fill-color}}
|
||||
:stroke {:props [:strokes]
|
||||
:to-prop {:strokes "border"}
|
||||
:format {:strokes format-stroke}}
|
||||
:format {:strokes (fn [_ shape]
|
||||
(when-not (or (cph/path-shape? shape)
|
||||
(cph/mask-shape? shape)
|
||||
(cph/bool-shape? shape)
|
||||
(cph/svg-raw-shape? shape)
|
||||
(some? (:svg-attrs shape)))
|
||||
(format-stroke shape)))}}
|
||||
:shadow {:props [:shadow]
|
||||
:to-prop {:shadow :box-shadow}
|
||||
:format {:shadow #(str/join ", " (map shadow->css %1))}}
|
||||
:blur {:props [:blur]
|
||||
:to-prop {:blur "filter"}
|
||||
:format {:blur #(str/fmt "blur(%spx)" (:value %))}}
|
||||
|
||||
:layout-flex {:props [:layout
|
||||
:layout-flex-dir
|
||||
:layout-align-items
|
||||
:layout-justify-items
|
||||
:layout-align-content
|
||||
:layout-justify-content
|
||||
:layout-gap
|
||||
:layout-padding
|
||||
:layout-wrap-type]
|
||||
:gen-props [:flex-shrink]
|
||||
:to-prop {:layout "display"
|
||||
:layout-flex-dir "flex-direction"
|
||||
:layout-align-items "align-items"
|
||||
:layout-align-content "align-content"
|
||||
:layout-justify-items "justify-items"
|
||||
:layout-justify-content "justify-content"
|
||||
:layout-wrap-type "flex-wrap"
|
||||
:layout-gap "gap"
|
||||
|
|
@ -123,10 +200,24 @@
|
|||
:format {:layout d/name
|
||||
:layout-flex-dir d/name
|
||||
:layout-align-items d/name
|
||||
:layout-align-content d/name
|
||||
:layout-justify-items d/name
|
||||
:layout-justify-content d/name
|
||||
:layout-wrap-type d/name
|
||||
:layout-gap fmt/format-gap
|
||||
:layout-padding fmt/format-padding}}})
|
||||
:layout-padding fmt/format-padding
|
||||
:flex-shrink (fn [_ shape] (when (ctl/flex-layout-immediate-child? objects shape) 0))}}
|
||||
|
||||
:layout-grid {:props [:layout-grid-rows
|
||||
:layout-grid-columns]
|
||||
:gen-props [:grid-column
|
||||
:grid-row]
|
||||
:to-prop {:layout-grid-rows "grid-template-rows"
|
||||
:layout-grid-columns "grid-template-columns"}
|
||||
:format {:layout-grid-rows format-tracks
|
||||
:layout-grid-columns format-tracks
|
||||
:grid-column (mk-grid-coord objects :column :column-span)
|
||||
:grid-row (mk-grid-coord objects :row :row-span)}}})
|
||||
|
||||
(def style-text
|
||||
{:props [:fills
|
||||
|
|
@ -190,9 +281,12 @@
|
|||
|
||||
(defn generate-css-props
|
||||
([values properties]
|
||||
(generate-css-props values properties nil))
|
||||
(generate-css-props values properties [] nil))
|
||||
|
||||
([values properties params]
|
||||
([values properties gen-properties]
|
||||
(generate-css-props values properties gen-properties nil))
|
||||
|
||||
([values properties gen-properties params]
|
||||
(let [{:keys [to-prop format tab-size multi]
|
||||
:or {to-prop {} tab-size 0 multi {}}} params
|
||||
|
||||
|
|
@ -210,7 +304,7 @@
|
|||
to-prop)
|
||||
|
||||
get-value (fn [prop]
|
||||
(if-let [props (prop multi)]
|
||||
(if-let [props (get multi prop)]
|
||||
(map #(get values %) props)
|
||||
(get-specific-value values prop)))
|
||||
|
||||
|
|
@ -220,30 +314,35 @@
|
|||
(or (nil? value) (= value 0))))
|
||||
|
||||
default-format (fn [value] (dm/str (fmt/format-pixels value)))
|
||||
format-property (fn [prop]
|
||||
(let [css-prop (or (prop to-prop) (d/name prop))
|
||||
format-fn (or (prop format) default-format)
|
||||
css-val (format-fn (get-value prop) values)]
|
||||
(when css-val
|
||||
(dm/str
|
||||
(str/repeat " " tab-size)
|
||||
(str/fmt "%s: %s;" css-prop css-val)))))]
|
||||
|
||||
(->> properties
|
||||
(remove #(null? (get-value %)))
|
||||
(map format-property)
|
||||
(filter (comp not nil?))
|
||||
format-property
|
||||
(fn [prop]
|
||||
(let [css-prop (or (get to-prop prop) (d/name prop))
|
||||
format-fn (or (get format prop) default-format)
|
||||
css-val (format-fn (get-value prop) values)]
|
||||
(when (and css-val (not= css-val ""))
|
||||
(dm/str
|
||||
(str/repeat " " tab-size)
|
||||
(dm/fmt "%: %;" css-prop css-val)))))]
|
||||
|
||||
(->> (concat
|
||||
(->> properties
|
||||
(remove #(null? (get-value %))))
|
||||
gen-properties)
|
||||
(keep format-property)
|
||||
(str/join "\n")))))
|
||||
|
||||
(defn shape->properties [shape]
|
||||
(let [;; This property is added in an earlier step (code.cljs),
|
||||
(defn shape->properties [objects shape]
|
||||
(let [;; This property is added in an earlier step (code.cljs),
|
||||
;; it will come with a vector of flex-items if any.
|
||||
;; If there are none it will continue as usual.
|
||||
;; If there are none it will continue as usual.
|
||||
flex-items (:flex-items shape)
|
||||
props (->> (styles-data shape) vals (mapcat :props))
|
||||
to-prop (->> (styles-data shape) vals (map :to-prop) (reduce merge))
|
||||
format (->> (styles-data shape) vals (map :format) (reduce merge))
|
||||
multi (->> (styles-data shape) vals (map :multi) (reduce merge))
|
||||
props (->> (styles-data objects shape) vals (mapcat :props))
|
||||
to-prop (->> (styles-data objects shape) vals (map :to-prop) (reduce merge))
|
||||
format (->> (styles-data objects shape) vals (map :format) (reduce merge))
|
||||
multi (->> (styles-data objects shape) vals (map :multi) (reduce merge))
|
||||
gen-props (->> (styles-data objects shape) vals (mapcat :gen-props))
|
||||
|
||||
props (cond-> props
|
||||
(seq flex-items) (concat (:props layout-flex-item-params))
|
||||
(= :wrap (:layout-wrap-type shape)) (concat (:props layout-align-content)))
|
||||
|
|
@ -253,10 +352,14 @@
|
|||
format (cond-> format
|
||||
(seq flex-items) (merge (:format layout-flex-item-params))
|
||||
(= :wrap (:layout-wrap-type shape)) (merge (:format layout-align-content)))]
|
||||
(generate-css-props shape props {:to-prop to-prop
|
||||
:format format
|
||||
:multi multi
|
||||
:tab-size 2})))
|
||||
(generate-css-props
|
||||
shape
|
||||
props
|
||||
gen-props
|
||||
{:to-prop to-prop
|
||||
:format format
|
||||
:multi multi
|
||||
:tab-size 2})))
|
||||
|
||||
(defn search-text-attrs
|
||||
[node attrs]
|
||||
|
|
@ -269,36 +372,36 @@
|
|||
(defn parse-style-text-blocks
|
||||
[node attrs]
|
||||
(letfn
|
||||
[(rec-style-text-map [acc node style]
|
||||
(let [node-style (merge style (select-keys node attrs))
|
||||
head (or (-> acc first) [{} ""])
|
||||
[head-style head-text] head
|
||||
[(rec-style-text-map [acc node style]
|
||||
(let [node-style (merge style (select-keys node attrs))
|
||||
head (or (-> acc first) [{} ""])
|
||||
[head-style head-text] head
|
||||
|
||||
new-acc
|
||||
(cond
|
||||
(:children node)
|
||||
(reduce #(rec-style-text-map %1 %2 node-style) acc (:children node))
|
||||
new-acc
|
||||
(cond
|
||||
(:children node)
|
||||
(reduce #(rec-style-text-map %1 %2 node-style) acc (:children node))
|
||||
|
||||
(not= head-style node-style)
|
||||
(cons [node-style (:text node "")] acc)
|
||||
(not= head-style node-style)
|
||||
(cons [node-style (:text node "")] acc)
|
||||
|
||||
:else
|
||||
(cons [node-style (dm/str head-text "" (:text node))] (rest acc)))
|
||||
:else
|
||||
(cons [node-style (dm/str head-text "" (:text node))] (rest acc)))
|
||||
|
||||
;; We add an end-of-line when finish a paragraph
|
||||
new-acc
|
||||
(if (= (:type node) "paragraph")
|
||||
(let [[hs ht] (first new-acc)]
|
||||
(cons [hs (dm/str ht "\n")] (rest new-acc)))
|
||||
new-acc)]
|
||||
new-acc))]
|
||||
new-acc
|
||||
(if (= (:type node) "paragraph")
|
||||
(let [[hs ht] (first new-acc)]
|
||||
(cons [hs (dm/str ht "\n")] (rest new-acc)))
|
||||
new-acc)]
|
||||
new-acc))]
|
||||
|
||||
(-> (rec-style-text-map [] node {})
|
||||
reverse)))
|
||||
|
||||
(defn text->properties [shape]
|
||||
(defn text->properties [objects shape]
|
||||
(let [flex-items (:flex-items shape)
|
||||
text-shape-style (select-keys (styles-data shape) [:layout :shadow :blur])
|
||||
text-shape-style (d/without-keys (styles-data objects shape) [:fill :stroke])
|
||||
|
||||
shape-props (->> text-shape-style vals (mapcat :props))
|
||||
shape-to-prop (->> text-shape-style vals (map :to-prop) (reduce merge))
|
||||
|
|
@ -315,6 +418,7 @@
|
|||
(:content shape)
|
||||
(conj (:props style-text) :fill-color-gradient :fill-opacity))
|
||||
(d/merge txt/default-text-attrs))]
|
||||
|
||||
(str/join
|
||||
"\n"
|
||||
[(generate-css-props shape
|
||||
|
|
@ -328,21 +432,128 @@
|
|||
:format (:format style-text)
|
||||
:tab-size 2})])))
|
||||
|
||||
(defn generate-css [shape]
|
||||
(let [name (:name shape)
|
||||
properties (if (= :text (:type shape))
|
||||
(text->properties shape)
|
||||
(shape->properties shape))
|
||||
selector (str/css-selector name)
|
||||
(defn selector-name [shape]
|
||||
(let [
|
||||
name (-> (:name shape)
|
||||
#_(subs 0 (min 10 (count (:name shape)))))
|
||||
;; selectors cannot start with numbers
|
||||
name (if (re-matches #"^\d.*" name) (dm/str "c-" name) name)
|
||||
id (-> (dm/str (:id shape))
|
||||
#_(subs 24 36))
|
||||
selector (str/css-selector (dm/str name " " id))
|
||||
selector (if (str/starts-with? selector "-") (subs selector 1) selector)]
|
||||
selector))
|
||||
|
||||
(defn generate-css [objects shape]
|
||||
(let [name (:name shape)
|
||||
properties (shape->properties objects shape)
|
||||
selector (selector-name shape)]
|
||||
(str/join "\n" [(str/fmt "/* %s */" name)
|
||||
(str/fmt ".%s {" selector)
|
||||
properties
|
||||
"}"])))
|
||||
|
||||
(defn generate-style-code [type shapes]
|
||||
(defn generate-svg
|
||||
[objects shape-id]
|
||||
(let [shape (get objects shape-id)]
|
||||
(rds/renderToStaticMarkup
|
||||
(mf/element
|
||||
render/object-svg
|
||||
#js {:objects objects
|
||||
:object-id (-> shape :id)}))))
|
||||
|
||||
(defn generate-html
|
||||
([objects shape-id]
|
||||
(generate-html objects shape-id 0))
|
||||
|
||||
([objects shape-id level]
|
||||
(let [shape (get objects shape-id)
|
||||
indent (str/repeat " " level)
|
||||
maybe-reverse (if (ctl/any-layout? shape) reverse identity)]
|
||||
(cond
|
||||
(cph/text-shape? shape)
|
||||
(let [text-shape-html (rds/renderToStaticMarkup (mf/element text/text-shape #js {:shape shape :code? true}))]
|
||||
(dm/fmt "%<div class=\"%\">\n%\n%</div>"
|
||||
indent
|
||||
(selector-name shape)
|
||||
text-shape-html
|
||||
indent))
|
||||
|
||||
(cph/image-shape? shape)
|
||||
(let [data (or (:metadata shape) (:fill-image shape))
|
||||
image-url (cfg/resolve-file-media data)]
|
||||
(dm/fmt "%<img src=\"%\" class=\"%\">\n%</img>"
|
||||
indent
|
||||
image-url
|
||||
(selector-name shape)
|
||||
indent))
|
||||
|
||||
(or (cph/path-shape? shape)
|
||||
(cph/mask-shape? shape)
|
||||
(cph/bool-shape? shape)
|
||||
(cph/svg-raw-shape? shape)
|
||||
(some? (:svg-attrs shape)))
|
||||
(let [svg-markup (rds/renderToStaticMarkup (mf/element render/object-svg #js {:objects objects :object-id (:id shape) :render-embed? false}))]
|
||||
(dm/fmt "%<div class=\"%\">\n%\n%</div>"
|
||||
indent
|
||||
(selector-name shape)
|
||||
svg-markup
|
||||
indent))
|
||||
|
||||
(empty? (:shapes shape))
|
||||
(dm/fmt "%<div class=\"%\">\n%</div>"
|
||||
indent
|
||||
(selector-name shape)
|
||||
indent)
|
||||
|
||||
:else
|
||||
(dm/fmt "%<div class=\"%\">\n%\n%</div>"
|
||||
indent
|
||||
(selector-name shape)
|
||||
(->> (:shapes shape)
|
||||
(maybe-reverse)
|
||||
(map #(generate-html objects % (inc level)))
|
||||
(str/join "\n"))
|
||||
indent)))))
|
||||
|
||||
(defn generate-markup-code [objects type shapes]
|
||||
(let [generate-markup-fn (case type
|
||||
"html" generate-html
|
||||
"svg" generate-svg)]
|
||||
(->> shapes
|
||||
(map #(generate-markup-fn objects % 0))
|
||||
(str/join "\n"))))
|
||||
|
||||
(defn generate-style-code [objects type shapes]
|
||||
(let [generate-style-fn (case type
|
||||
"css" generate-css)]
|
||||
(->> shapes
|
||||
(map generate-style-fn)
|
||||
(str/join "\n\n"))))
|
||||
(dm/str
|
||||
"html, body {
|
||||
background-color: #E8E9EA;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
\n"
|
||||
(->> shapes
|
||||
(map (partial generate-style-fn objects))
|
||||
(str/join "\n\n")))))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue