mirror of
https://github.com/penpot/penpot.git
synced 2025-12-11 22:14:05 +01:00
Merge branch 'staging-render' into develop
This commit is contained in:
Andrey Antukh
@@ -234,16 +234,15 @@
|
|||||||
"Calculate the boolean content from shape and objects. Returns a
|
"Calculate the boolean content from shape and objects. Returns a
|
||||||
packed PathData instance"
|
packed PathData instance"
|
||||||
[shape objects]
|
[shape objects]
|
||||||
(let [content (if (fn? wasm:calc-bool-content)
|
(let [content (calc-bool-content* shape objects)]
|
||||||
(wasm:calc-bool-content (get shape :bool-type)
|
|
||||||
(get shape :shapes))
|
|
||||||
(calc-bool-content* shape objects))]
|
|
||||||
(impl/path-data content)))
|
(impl/path-data content)))
|
||||||
|
|
||||||
(defn update-bool-shape
|
(defn update-bool-shape
|
||||||
"Calculates the selrect+points for the boolean shape"
|
"Calculates the selrect+points for the boolean shape"
|
||||||
[shape objects]
|
[shape objects]
|
||||||
(let [content (calc-bool-content shape objects)
|
(let [content (if (fn? wasm:calc-bool-content)
|
||||||
|
(wasm:calc-bool-content shape objects)
|
||||||
|
(calc-bool-content shape objects))
|
||||||
shape (assoc shape :content content)]
|
shape (assoc shape :content content)]
|
||||||
(update-geometry shape)))
|
(update-geometry shape)))
|
||||||
|
|
||||||
|
|||||||
@@ -106,7 +106,7 @@
|
|||||||
"@penpot/hljs": "portal:./vendor/hljs",
|
"@penpot/hljs": "portal:./vendor/hljs",
|
||||||
"@penpot/mousetrap": "portal:./vendor/mousetrap",
|
"@penpot/mousetrap": "portal:./vendor/mousetrap",
|
||||||
"@penpot/plugins-runtime": "1.3.2",
|
"@penpot/plugins-runtime": "1.3.2",
|
||||||
"@penpot/svgo": "penpot/svgo#v3.1",
|
"@penpot/svgo": "penpot/svgo#v3.2",
|
||||||
"@penpot/text-editor": "portal:./text-editor",
|
"@penpot/text-editor": "portal:./text-editor",
|
||||||
"@tokens-studio/sd-transforms": "1.2.11",
|
"@tokens-studio/sd-transforms": "1.2.11",
|
||||||
"@zip.js/zip.js": "patch:@zip.js/zip.js@npm%3A2.7.60#~/.yarn/patches/@zip.js-zip.js-npm-2.7.60-b6b814410b.patch",
|
"@zip.js/zip.js": "patch:@zip.js/zip.js@npm%3A2.7.60#~/.yarn/patches/@zip.js-zip.js-npm-2.7.60-b6b814410b.patch",
|
||||||
|
|||||||
58
frontend/playwright/data/text-editor/get-file-blank.json
Normal file
58
frontend/playwright/data/text-editor/get-file-blank.json
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
{
|
||||||
|
"~:features": {
|
||||||
|
"~#set": [
|
||||||
|
"layout/grid",
|
||||||
|
"styles/v2",
|
||||||
|
"fdata/pointer-map",
|
||||||
|
"fdata/objects-map",
|
||||||
|
"components/v2",
|
||||||
|
"fdata/shape-data-type"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"~:permissions": {
|
||||||
|
"~:type": "~:membership",
|
||||||
|
"~:is-owner": true,
|
||||||
|
"~:is-admin": true,
|
||||||
|
"~:can-edit": true,
|
||||||
|
"~:can-read": true,
|
||||||
|
"~:is-logged": true
|
||||||
|
},
|
||||||
|
"~:has-media-trimmed": false,
|
||||||
|
"~:comment-thread-seqn": 0,
|
||||||
|
"~:name": "New File 1",
|
||||||
|
"~:revn": 11,
|
||||||
|
"~:modified-at": "~m1713873823633",
|
||||||
|
"~:id": "~uc7ce0794-0992-8105-8004-38f280443849",
|
||||||
|
"~:is-shared": false,
|
||||||
|
"~:version": 46,
|
||||||
|
"~:project-id": "~uc7ce0794-0992-8105-8004-38e630f7920b",
|
||||||
|
"~:created-at": "~m1713536343369",
|
||||||
|
"~:data": {
|
||||||
|
"~:pages": [
|
||||||
|
"~u66697432-c33d-8055-8006-2c62cc084cad"
|
||||||
|
],
|
||||||
|
"~:pages-index": {
|
||||||
|
"~u66697432-c33d-8055-8006-2c62cc084cad": {
|
||||||
|
"~#penpot/pointer": [
|
||||||
|
"~ude58c8f6-c5c2-8196-8004-3df9e2e52d88",
|
||||||
|
{
|
||||||
|
"~:created-at": "~m1713873823636"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:id": "~uc7ce0794-0992-8105-8004-38f280443849",
|
||||||
|
"~:options": {
|
||||||
|
"~:components-v2": true
|
||||||
|
},
|
||||||
|
"~:recent-colors": [
|
||||||
|
{
|
||||||
|
"~:color": "#0000ff",
|
||||||
|
"~:opacity": 1,
|
||||||
|
"~:id": null,
|
||||||
|
"~:file-id": null,
|
||||||
|
"~:image": null
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
345
frontend/playwright/data/text-editor/get-file-lorem-ipsum.json
Normal file
345
frontend/playwright/data/text-editor/get-file-lorem-ipsum.json
Normal file
@@ -0,0 +1,345 @@
|
|||||||
|
{
|
||||||
|
"~:features": {
|
||||||
|
"~#set": [
|
||||||
|
"fdata/path-data",
|
||||||
|
"plugins/runtime",
|
||||||
|
"design-tokens/v1",
|
||||||
|
"layout/grid",
|
||||||
|
"styles/v2",
|
||||||
|
"fdata/pointer-map",
|
||||||
|
"fdata/objects-map",
|
||||||
|
"components/v2",
|
||||||
|
"fdata/shape-data-type",
|
||||||
|
"text-editor/v2"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"~:team-id": "~u9e6e22b2-db76-81d6-8006-75d7cdbb8bad",
|
||||||
|
"~:permissions": {
|
||||||
|
"~:type": "~:membership",
|
||||||
|
"~:is-owner": true,
|
||||||
|
"~:is-admin": true,
|
||||||
|
"~:can-edit": true,
|
||||||
|
"~:can-read": true,
|
||||||
|
"~:is-logged": true
|
||||||
|
},
|
||||||
|
"~:has-media-trimmed": false,
|
||||||
|
"~:comment-thread-seqn": 0,
|
||||||
|
"~:name": "Bug 11552",
|
||||||
|
"~:revn": 3,
|
||||||
|
"~:modified-at": "~m1753957736516",
|
||||||
|
"~:vern": 0,
|
||||||
|
"~:id": "~u238a17e0-75ff-8075-8006-934586ea2230",
|
||||||
|
"~:is-shared": false,
|
||||||
|
"~:migrations": {
|
||||||
|
"~#ordered-set": [
|
||||||
|
"legacy-2",
|
||||||
|
"legacy-3",
|
||||||
|
"legacy-5",
|
||||||
|
"legacy-6",
|
||||||
|
"legacy-7",
|
||||||
|
"legacy-8",
|
||||||
|
"legacy-9",
|
||||||
|
"legacy-10",
|
||||||
|
"legacy-11",
|
||||||
|
"legacy-12",
|
||||||
|
"legacy-13",
|
||||||
|
"legacy-14",
|
||||||
|
"legacy-16",
|
||||||
|
"legacy-17",
|
||||||
|
"legacy-18",
|
||||||
|
"legacy-19",
|
||||||
|
"legacy-25",
|
||||||
|
"legacy-26",
|
||||||
|
"legacy-27",
|
||||||
|
"legacy-28",
|
||||||
|
"legacy-29",
|
||||||
|
"legacy-31",
|
||||||
|
"legacy-32",
|
||||||
|
"legacy-33",
|
||||||
|
"legacy-34",
|
||||||
|
"legacy-36",
|
||||||
|
"legacy-37",
|
||||||
|
"legacy-38",
|
||||||
|
"legacy-39",
|
||||||
|
"legacy-40",
|
||||||
|
"legacy-41",
|
||||||
|
"legacy-42",
|
||||||
|
"legacy-43",
|
||||||
|
"legacy-44",
|
||||||
|
"legacy-45",
|
||||||
|
"legacy-46",
|
||||||
|
"legacy-47",
|
||||||
|
"legacy-48",
|
||||||
|
"legacy-49",
|
||||||
|
"legacy-50",
|
||||||
|
"legacy-51",
|
||||||
|
"legacy-52",
|
||||||
|
"legacy-53",
|
||||||
|
"legacy-54",
|
||||||
|
"legacy-55",
|
||||||
|
"legacy-56",
|
||||||
|
"legacy-57",
|
||||||
|
"legacy-59",
|
||||||
|
"legacy-62",
|
||||||
|
"legacy-65",
|
||||||
|
"legacy-66",
|
||||||
|
"legacy-67",
|
||||||
|
"0001-remove-tokens-from-groups",
|
||||||
|
"0002-normalize-bool-content-v2",
|
||||||
|
"0002-clean-shape-interactions",
|
||||||
|
"0003-fix-root-shape",
|
||||||
|
"0003-convert-path-content-v2",
|
||||||
|
"0004-clean-shadow-color",
|
||||||
|
"0005-deprecate-image-type",
|
||||||
|
"0006-fix-old-texts-fills",
|
||||||
|
"0007-clear-invalid-strokes-and-fills-v2",
|
||||||
|
"0008-fix-library-colors-v4",
|
||||||
|
"0009-clean-library-colors",
|
||||||
|
"0009-add-partial-text-touched-flags"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"~:version": 67,
|
||||||
|
"~:project-id": "~u9e6e22b2-db76-81d6-8006-75d7cdc30669",
|
||||||
|
"~:created-at": "~m1753957644225",
|
||||||
|
"~:data": {
|
||||||
|
"~:pages": ["~u238a17e0-75ff-8075-8006-934586ea2231"],
|
||||||
|
"~:pages-index": {
|
||||||
|
"~u238a17e0-75ff-8075-8006-934586ea2231": {
|
||||||
|
"~:objects": {
|
||||||
|
"~u00000000-0000-0000-0000-000000000000": {
|
||||||
|
"~#shape": {
|
||||||
|
"~:y": 0,
|
||||||
|
"~:hide-fill-on-export": false,
|
||||||
|
"~:transform": {
|
||||||
|
"~#matrix": {
|
||||||
|
"~:a": 1.0,
|
||||||
|
"~:b": 0.0,
|
||||||
|
"~:c": 0.0,
|
||||||
|
"~:d": 1.0,
|
||||||
|
"~:e": 0.0,
|
||||||
|
"~:f": 0.0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:rotation": 0,
|
||||||
|
"~:name": "Root Frame",
|
||||||
|
"~:width": 0.01,
|
||||||
|
"~:type": "~:frame",
|
||||||
|
"~:points": [
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 0.0,
|
||||||
|
"~:y": 0.0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 0.01,
|
||||||
|
"~:y": 0.0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 0.01,
|
||||||
|
"~:y": 0.01
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 0.0,
|
||||||
|
"~:y": 0.01
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"~:r2": 0,
|
||||||
|
"~:proportion-lock": false,
|
||||||
|
"~:transform-inverse": {
|
||||||
|
"~#matrix": {
|
||||||
|
"~:a": 1.0,
|
||||||
|
"~:b": 0.0,
|
||||||
|
"~:c": 0.0,
|
||||||
|
"~:d": 1.0,
|
||||||
|
"~:e": 0.0,
|
||||||
|
"~:f": 0.0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:r3": 0,
|
||||||
|
"~:r1": 0,
|
||||||
|
"~:id": "~u00000000-0000-0000-0000-000000000000",
|
||||||
|
"~:parent-id": "~u00000000-0000-0000-0000-000000000000",
|
||||||
|
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
|
||||||
|
"~:strokes": [],
|
||||||
|
"~:x": 0,
|
||||||
|
"~:proportion": 1.0,
|
||||||
|
"~:r4": 0,
|
||||||
|
"~:selrect": {
|
||||||
|
"~#rect": {
|
||||||
|
"~:x": 0,
|
||||||
|
"~:y": 0,
|
||||||
|
"~:width": 0.01,
|
||||||
|
"~:height": 0.01,
|
||||||
|
"~:x1": 0,
|
||||||
|
"~:y1": 0,
|
||||||
|
"~:x2": 0.01,
|
||||||
|
"~:y2": 0.01
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:fills": [
|
||||||
|
{
|
||||||
|
"~:fill-color": "#FFFFFF",
|
||||||
|
"~:fill-opacity": 1
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"~:flip-x": null,
|
||||||
|
"~:height": 0.01,
|
||||||
|
"~:flip-y": null,
|
||||||
|
"~:shapes": ["~ucc6f0580-449c-8019-8006-9345db077fa0"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~ucc6f0580-449c-8019-8006-9345db077fa0": {
|
||||||
|
"~#shape": {
|
||||||
|
"~:y": 438,
|
||||||
|
"~:transform": {
|
||||||
|
"~#matrix": {
|
||||||
|
"~:a": 1.0,
|
||||||
|
"~:b": 0.0,
|
||||||
|
"~:c": 0.0,
|
||||||
|
"~:d": 1.0,
|
||||||
|
"~:e": 0.0,
|
||||||
|
"~:f": 0.0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:rotation": 0,
|
||||||
|
"~:grow-type": "~:auto-width",
|
||||||
|
"~:content": {
|
||||||
|
"~:type": "root",
|
||||||
|
"~:key": "1s4am1jl24s",
|
||||||
|
"~:children": [
|
||||||
|
{
|
||||||
|
"~:type": "paragraph-set",
|
||||||
|
"~:children": [
|
||||||
|
{
|
||||||
|
"~:line-height": "1.2",
|
||||||
|
"~:font-style": "normal",
|
||||||
|
"~:children": [
|
||||||
|
{
|
||||||
|
"~:line-height": "1.2",
|
||||||
|
"~:font-style": "normal",
|
||||||
|
"~:typography-ref-id": null,
|
||||||
|
"~:text-transform": "none",
|
||||||
|
"~:font-id": "sourcesanspro",
|
||||||
|
"~:key": "13p0zwl2yhc",
|
||||||
|
"~:font-size": "14",
|
||||||
|
"~:font-weight": "400",
|
||||||
|
"~:typography-ref-file": null,
|
||||||
|
"~:font-variant-id": "regular",
|
||||||
|
"~:text-decoration": "none",
|
||||||
|
"~:letter-spacing": "0",
|
||||||
|
"~:fills": [
|
||||||
|
{
|
||||||
|
"~:fill-color": "#000000",
|
||||||
|
"~:fill-opacity": 1
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"~:font-family": "sourcesanspro",
|
||||||
|
"~:text": "Lorem ipsum"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"~:typography-ref-id": null,
|
||||||
|
"~:text-transform": "none",
|
||||||
|
"~:text-align": "left",
|
||||||
|
"~:font-id": "sourcesanspro",
|
||||||
|
"~:key": "20hf3kmyoub",
|
||||||
|
"~:font-size": "14",
|
||||||
|
"~:font-weight": "400",
|
||||||
|
"~:typography-ref-file": null,
|
||||||
|
"~:text-direction": "ltr",
|
||||||
|
"~:type": "paragraph",
|
||||||
|
"~:font-variant-id": "regular",
|
||||||
|
"~:text-decoration": "none",
|
||||||
|
"~:letter-spacing": "0",
|
||||||
|
"~:fills": [
|
||||||
|
{
|
||||||
|
"~:fill-color": "#000000",
|
||||||
|
"~:fill-opacity": 1
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"~:font-family": "sourcesanspro"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"~:vertical-align": "top"
|
||||||
|
},
|
||||||
|
"~:hide-in-viewer": false,
|
||||||
|
"~:name": "Lorem ipsum",
|
||||||
|
"~:width": 77,
|
||||||
|
"~:type": "~:text",
|
||||||
|
"~:points": [
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 404,
|
||||||
|
"~:y": 438
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 481,
|
||||||
|
"~:y": 438
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 481,
|
||||||
|
"~:y": 455
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 404,
|
||||||
|
"~:y": 455
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"~:transform-inverse": {
|
||||||
|
"~#matrix": {
|
||||||
|
"~:a": 1.0,
|
||||||
|
"~:b": 0.0,
|
||||||
|
"~:c": 0.0,
|
||||||
|
"~:d": 1.0,
|
||||||
|
"~:e": 0.0,
|
||||||
|
"~:f": 0.0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:id": "~ucc6f0580-449c-8019-8006-9345db077fa0",
|
||||||
|
"~:parent-id": "~u00000000-0000-0000-0000-000000000000",
|
||||||
|
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
|
||||||
|
"~:x": 404,
|
||||||
|
"~:selrect": {
|
||||||
|
"~#rect": {
|
||||||
|
"~:x": 404,
|
||||||
|
"~:y": 438,
|
||||||
|
"~:width": 77,
|
||||||
|
"~:height": 17,
|
||||||
|
"~:x1": 404,
|
||||||
|
"~:y1": 438,
|
||||||
|
"~:x2": 481,
|
||||||
|
"~:y2": 455
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:flip-x": null,
|
||||||
|
"~:height": 17,
|
||||||
|
"~:flip-y": null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:id": "~u238a17e0-75ff-8075-8006-934586ea2231",
|
||||||
|
"~:name": "Page 1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:id": "~u238a17e0-75ff-8075-8006-934586ea2230",
|
||||||
|
"~:options": {
|
||||||
|
"~:components-v2": true,
|
||||||
|
"~:base-font-size": "16px"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,5 +1 @@
|
|||||||
{
|
w
|
||||||
"~:revn": 2,
|
|
||||||
"~:lagged": []
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|||||||
4
frontend/playwright/data/text-editor/update-file.json
Normal file
4
frontend/playwright/data/text-editor/update-file.json
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"~:revn": 2,
|
||||||
|
"~:lagged": []
|
||||||
|
}
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"~:id": "~u088df3d4-d383-80f6-8004-527e50ea4f1f",
|
||||||
|
"~:revn": 21,
|
||||||
|
"~:file-id": "~uc7ce0794-0992-8105-8004-38f280443849",
|
||||||
|
"~:session-id": "~u1dc6d4fa-7bd3-803a-8004-527dd9df2c62",
|
||||||
|
"~:changes": []
|
||||||
|
}
|
||||||
|
]
|
||||||
36
frontend/playwright/helpers/Clipboard.js
Normal file
36
frontend/playwright/helpers/Clipboard.js
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
export class Clipboard {
|
||||||
|
static Permission = {
|
||||||
|
ONLY_READ: ['clipboard-read'],
|
||||||
|
ONLY_WRITE: ['clipboard-write'],
|
||||||
|
ALL: ['clipboard-read', 'clipboard-write']
|
||||||
|
}
|
||||||
|
|
||||||
|
static enable(context, permissions) {
|
||||||
|
return context.grantPermissions(permissions)
|
||||||
|
}
|
||||||
|
|
||||||
|
static writeText(page, text) {
|
||||||
|
return page.evaluate((text) => navigator.clipboard.writeText(text), text);
|
||||||
|
}
|
||||||
|
|
||||||
|
static readText(page) {
|
||||||
|
return page.evaluate(() => navigator.clipboard.readText());
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor(page, context) {
|
||||||
|
this.page = page
|
||||||
|
this.context = context
|
||||||
|
}
|
||||||
|
|
||||||
|
enable(permissions) {
|
||||||
|
return Clipboard.enable(this.context, permissions);
|
||||||
|
}
|
||||||
|
|
||||||
|
writeText(text) {
|
||||||
|
return Clipboard.writeText(this.page, text);
|
||||||
|
}
|
||||||
|
|
||||||
|
readText() {
|
||||||
|
return Clipboard.readText(this.page);
|
||||||
|
}
|
||||||
|
}
|
||||||
30
frontend/playwright/helpers/Transit.js
Normal file
30
frontend/playwright/helpers/Transit.js
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
export class Transit {
|
||||||
|
static parse(value) {
|
||||||
|
if (typeof value !== 'string')
|
||||||
|
return value
|
||||||
|
|
||||||
|
if (value.startsWith('~'))
|
||||||
|
return value.slice(2)
|
||||||
|
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
|
||||||
|
static get(object, ...path) {
|
||||||
|
let aux = object;
|
||||||
|
for (const name of path) {
|
||||||
|
if (typeof name !== 'string') {
|
||||||
|
if (!(name in aux)) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
aux = aux[name];
|
||||||
|
} else {
|
||||||
|
const transitName = `~:${name}`;
|
||||||
|
if (!(transitName in aux)) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
aux = aux[transitName];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return this.parse(aux);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,4 +1,27 @@
|
|||||||
export class BasePage {
|
export class BasePage {
|
||||||
|
/**
|
||||||
|
* Mocks multiple RPC calls in a single call.
|
||||||
|
*
|
||||||
|
* @param {Page} page
|
||||||
|
* @param {object<string, string>} paths
|
||||||
|
* @param {*} options
|
||||||
|
* @returns {Promise<void>}
|
||||||
|
*/
|
||||||
|
static async mockRPCs(page, paths, options) {
|
||||||
|
for (const [path, jsonFilename] of Object.entries(paths)) {
|
||||||
|
await this.mockRPC(page, path, jsonFilename, options)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Mocks an RPC call using a file.
|
||||||
|
*
|
||||||
|
* @param {Page} page
|
||||||
|
* @param {string} path
|
||||||
|
* @param {string} jsonFilename
|
||||||
|
* @param {*} options
|
||||||
|
* @returns {Promise<void>}
|
||||||
|
*/
|
||||||
static async mockRPC(page, path, jsonFilename, options) {
|
static async mockRPC(page, path, jsonFilename, options) {
|
||||||
if (!page) {
|
if (!page) {
|
||||||
throw new TypeError("Invalid page argument. Must be a Playwright page.");
|
throw new TypeError("Invalid page argument. Must be a Playwright page.");
|
||||||
@@ -93,6 +116,10 @@ export class BasePage {
|
|||||||
return this.#page;
|
return this.#page;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async mockRPCs(paths, options) {
|
||||||
|
return BasePage.mockRPCs(this.page, paths, options);
|
||||||
|
}
|
||||||
|
|
||||||
async mockRPC(path, jsonFilename, options) {
|
async mockRPC(path, jsonFilename, options) {
|
||||||
return BasePage.mockRPC(this.page, path, jsonFilename, options);
|
return BasePage.mockRPC(this.page, path, jsonFilename, options);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,146 @@
|
|||||||
import { expect } from "@playwright/test";
|
import { expect } from "@playwright/test";
|
||||||
|
import { readFile } from 'node:fs/promises';
|
||||||
import { BaseWebSocketPage } from "./BaseWebSocketPage";
|
import { BaseWebSocketPage } from "./BaseWebSocketPage";
|
||||||
|
import { Transit } from '../../helpers/Transit';
|
||||||
|
|
||||||
export class WorkspacePage extends BaseWebSocketPage {
|
export class WorkspacePage extends BaseWebSocketPage {
|
||||||
|
static TextEditor = class TextEditor {
|
||||||
|
constructor(workspacePage) {
|
||||||
|
this.workspacePage = workspacePage;
|
||||||
|
|
||||||
|
// locators.
|
||||||
|
this.fontSize = this.workspacePage.rightSidebar.getByRole("textbox", {
|
||||||
|
name: "Font Size",
|
||||||
|
});
|
||||||
|
this.lineHeight = this.workspacePage.rightSidebar.getByRole("textbox", {
|
||||||
|
name: "Line Height",
|
||||||
|
});
|
||||||
|
this.letterSpacing = this.workspacePage.rightSidebar.getByRole(
|
||||||
|
"textbox",
|
||||||
|
{
|
||||||
|
name: "Letter Spacing",
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
get page() {
|
||||||
|
return this.workspacePage.page;
|
||||||
|
}
|
||||||
|
|
||||||
|
async waitForStyle(locator, styleName) {
|
||||||
|
return locator.evaluate(
|
||||||
|
(element, styleName) => element.style.getPropertyValue(styleName),
|
||||||
|
styleName,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async waitForEditor() {
|
||||||
|
return this.page.waitForSelector('[data-itype="editor"]');
|
||||||
|
}
|
||||||
|
|
||||||
|
async waitForRoot() {
|
||||||
|
return this.page.waitForSelector('[data-itype="root"]');
|
||||||
|
}
|
||||||
|
|
||||||
|
async waitForParagraph(nth) {
|
||||||
|
if (!nth) {
|
||||||
|
return this.page.waitForSelector('[data-itype="paragraph"]');
|
||||||
|
}
|
||||||
|
return this.page.waitForSelector(
|
||||||
|
`[data-itype="paragraph"]:nth-child(${nth})`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async waitForParagraphStyle(nth, styleName) {
|
||||||
|
const paragraph = await this.waitForParagraph(nth);
|
||||||
|
return this.waitForStyle(paragraph, styleName);
|
||||||
|
}
|
||||||
|
|
||||||
|
async waitForTextSpan(nth = 0) {
|
||||||
|
if (!nth) {
|
||||||
|
return this.page.waitForSelector('[data-itype="inline"]');
|
||||||
|
}
|
||||||
|
return this.page.waitForSelector(
|
||||||
|
`[data-itype="inline"]:nth-child(${nth})`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async waitForTextSpanContent(nth = 0) {
|
||||||
|
const textSpan = await this.waitForTextSpan(nth);
|
||||||
|
const textContent = await textSpan.textContent();
|
||||||
|
return textContent;
|
||||||
|
}
|
||||||
|
|
||||||
|
async waitForTextSpanStyle(nth, styleName) {
|
||||||
|
const textSpan = await this.waitForTextSpan(nth);
|
||||||
|
return this.waitForStyle(textSpan, styleName);
|
||||||
|
}
|
||||||
|
|
||||||
|
async startEditing() {
|
||||||
|
await this.page.keyboard.press("Enter");
|
||||||
|
return this.waitForEditor();
|
||||||
|
}
|
||||||
|
|
||||||
|
stopEditing() {
|
||||||
|
return this.page.keyboard.press("Escape");
|
||||||
|
}
|
||||||
|
|
||||||
|
async moveToLeft(amount = 0) {
|
||||||
|
for (let i = 0; i < amount; i++) {
|
||||||
|
await this.page.keyboard.press("ArrowLeft");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async moveToRight(amount = 0) {
|
||||||
|
for (let i = 0; i < amount; i++) {
|
||||||
|
await this.page.keyboard.press("ArrowRight");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async moveFromStart(offset = 0) {
|
||||||
|
await this.page.keyboard.press("ArrowLeft");
|
||||||
|
await this.moveToRight(offset);
|
||||||
|
}
|
||||||
|
|
||||||
|
async moveFromEnd(offset = 0) {
|
||||||
|
await this.page.keyboard.press("ArrowRight");
|
||||||
|
await this.moveToLeft(offset);
|
||||||
|
}
|
||||||
|
|
||||||
|
async selectFromStart(length, offset = 0) {
|
||||||
|
await this.moveFromStart(offset);
|
||||||
|
await this.page.keyboard.down("Shift");
|
||||||
|
await this.moveToRight(length);
|
||||||
|
await this.page.keyboard.up("Shift");
|
||||||
|
}
|
||||||
|
|
||||||
|
async selectFromEnd(length, offset = 0) {
|
||||||
|
await this.moveFromEnd(offset);
|
||||||
|
await this.page.keyboard.down("Shift");
|
||||||
|
await this.moveToLeft(length);
|
||||||
|
await this.page.keyboard.up("Shift");
|
||||||
|
}
|
||||||
|
|
||||||
|
async changeNumericInput(locator, newValue) {
|
||||||
|
await expect(locator).toBeVisible();
|
||||||
|
await locator.focus();
|
||||||
|
await locator.fill(`${newValue}`);
|
||||||
|
await locator.blur();
|
||||||
|
}
|
||||||
|
|
||||||
|
changeFontSize(newValue) {
|
||||||
|
return this.changeNumericInput(this.fontSize, newValue);
|
||||||
|
}
|
||||||
|
|
||||||
|
changeLineHeight(newValue) {
|
||||||
|
return this.changeNumericInput(this.lineHeight, newValue);
|
||||||
|
}
|
||||||
|
|
||||||
|
changeLetterSpacing(newValue) {
|
||||||
|
return this.changeNumericInput(this.letterSpacing, newValue);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* This should be called on `test.beforeEach`.
|
* This should be called on `test.beforeEach`.
|
||||||
*
|
*
|
||||||
@@ -11,50 +150,21 @@ export class WorkspacePage extends BaseWebSocketPage {
|
|||||||
static async init(page) {
|
static async init(page) {
|
||||||
await BaseWebSocketPage.initWebSockets(page);
|
await BaseWebSocketPage.initWebSockets(page);
|
||||||
|
|
||||||
await BaseWebSocketPage.mockRPC(
|
await BaseWebSocketPage.mockRPCs(page, {
|
||||||
page,
|
"get-profile": "logged-in-user/get-profile-logged-in.json",
|
||||||
"get-profile",
|
"get-team-users?file-id=*":
|
||||||
"logged-in-user/get-profile-logged-in.json",
|
"logged-in-user/get-team-users-single-user.json",
|
||||||
);
|
"get-comment-threads?file-id=*":
|
||||||
await BaseWebSocketPage.mockRPC(
|
"workspace/get-comment-threads-empty.json",
|
||||||
page,
|
"get-project?id=*": "workspace/get-project-default.json",
|
||||||
"get-team-users?file-id=*",
|
"get-team?id=*": "workspace/get-team-default.json",
|
||||||
"logged-in-user/get-team-users-single-user.json",
|
"get-teams": "get-teams.json",
|
||||||
);
|
"get-team-members?team-id=*":
|
||||||
await BaseWebSocketPage.mockRPC(
|
"logged-in-user/get-team-members-your-penpot.json",
|
||||||
page,
|
"get-profiles-for-file-comments?file-id=*":
|
||||||
"get-comment-threads?file-id=*",
|
"workspace/get-profile-for-file-comments.json",
|
||||||
"workspace/get-comment-threads-empty.json",
|
"update-profile-props": "workspace/update-profile-empty.json",
|
||||||
);
|
});
|
||||||
await BaseWebSocketPage.mockRPC(
|
|
||||||
page,
|
|
||||||
"get-project?id=*",
|
|
||||||
"workspace/get-project-default.json",
|
|
||||||
);
|
|
||||||
await BaseWebSocketPage.mockRPC(
|
|
||||||
page,
|
|
||||||
"get-team?id=*",
|
|
||||||
"workspace/get-team-default.json",
|
|
||||||
);
|
|
||||||
await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams.json");
|
|
||||||
|
|
||||||
await BaseWebSocketPage.mockRPC(
|
|
||||||
page,
|
|
||||||
"get-team-members?team-id=*",
|
|
||||||
"logged-in-user/get-team-members-your-penpot.json",
|
|
||||||
);
|
|
||||||
|
|
||||||
await BaseWebSocketPage.mockRPC(
|
|
||||||
page,
|
|
||||||
"get-profiles-for-file-comments?file-id=*",
|
|
||||||
"workspace/get-profile-for-file-comments.json",
|
|
||||||
);
|
|
||||||
|
|
||||||
await BaseWebSocketPage.mockRPC(
|
|
||||||
page,
|
|
||||||
"update-profile-props",
|
|
||||||
"workspace/update-profile-empty.json",
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
static anyTeamId = "c7ce0794-0992-8105-8004-38e630f7920a";
|
static anyTeamId = "c7ce0794-0992-8105-8004-38e630f7920a";
|
||||||
@@ -62,9 +172,20 @@ export class WorkspacePage extends BaseWebSocketPage {
|
|||||||
static anyFileId = "c7ce0794-0992-8105-8004-38f280443849";
|
static anyFileId = "c7ce0794-0992-8105-8004-38f280443849";
|
||||||
static anyPageId = "c7ce0794-0992-8105-8004-38f28044384a";
|
static anyPageId = "c7ce0794-0992-8105-8004-38f28044384a";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* WebSocket mock
|
||||||
|
*
|
||||||
|
* @type {MockWebSocketHelper}
|
||||||
|
*/
|
||||||
#ws = null;
|
#ws = null;
|
||||||
|
|
||||||
constructor(page) {
|
/**
|
||||||
|
* Constructor
|
||||||
|
*
|
||||||
|
* @param {Page} page
|
||||||
|
* @param {} [options]
|
||||||
|
*/
|
||||||
|
constructor(page, options) {
|
||||||
super(page);
|
super(page);
|
||||||
this.pageName = page.getByTestId("page-name");
|
this.pageName = page.getByTestId("page-name");
|
||||||
|
|
||||||
@@ -112,11 +233,14 @@ export class WorkspacePage extends BaseWebSocketPage {
|
|||||||
"tokens-context-menu-for-set",
|
"tokens-context-menu-for-set",
|
||||||
);
|
);
|
||||||
this.contextMenuForShape = page.getByTestId("context-menu");
|
this.contextMenuForShape = page.getByTestId("context-menu");
|
||||||
|
if (options?.textEditor) {
|
||||||
|
this.textEditor = new WorkspacePage.TextEditor(this);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async goToWorkspace({
|
async goToWorkspace({
|
||||||
fileId = WorkspacePage.anyFileId,
|
fileId = this.fileId ?? WorkspacePage.anyFileId,
|
||||||
pageId = WorkspacePage.anyPageId,
|
pageId = this.pageId ?? WorkspacePage.anyPageId,
|
||||||
} = {}) {
|
} = {}) {
|
||||||
await this.page.goto(
|
await this.page.goto(
|
||||||
`/#/workspace?team-id=${WorkspacePage.anyTeamId}&file-id=${fileId}&page-id=${pageId}`,
|
`/#/workspace?team-id=${WorkspacePage.anyTeamId}&file-id=${fileId}&page-id=${pageId}`,
|
||||||
@@ -141,48 +265,59 @@ export class WorkspacePage extends BaseWebSocketPage {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async setupEmptyFile() {
|
async setupEmptyFile() {
|
||||||
await this.mockRPC(
|
await this.mockRPCs({
|
||||||
"get-profile",
|
"get-profile": "logged-in-user/get-profile-logged-in.json",
|
||||||
"logged-in-user/get-profile-logged-in.json",
|
"get-team-users?file-id=*":
|
||||||
);
|
"logged-in-user/get-team-users-single-user.json ",
|
||||||
await this.mockRPC(
|
"get-comment-threads?file-id=*":
|
||||||
"get-team-users?file-id=*",
|
"workspace/get-comment-threads-empty.json",
|
||||||
"logged-in-user/get-team-users-single-user.json",
|
"get-project?id=*": "workspace/get-project-default.json",
|
||||||
);
|
"get-team?id=*": "workspace/get-team-default.json",
|
||||||
await this.mockRPC(
|
"get-profiles-for-file-comments?file-id=*":
|
||||||
"get-comment-threads?file-id=*",
|
"workspace/get-profile-for-file-comments.json",
|
||||||
"workspace/get-comment-threads-empty.json",
|
"get-file-object-thumbnails?file-id=*":
|
||||||
);
|
"workspace/get-file-object-thumbnails-blank.json",
|
||||||
await this.mockRPC(
|
"get-font-variants?team-id=*": "workspace/get-font-variants-empty.json",
|
||||||
"get-project?id=*",
|
"get-file-fragment?file-id=*": "workspace/get-file-fragment-blank.json",
|
||||||
"workspace/get-project-default.json",
|
"get-file-libraries?file-id=*": "workspace/get-file-libraries-empty.json",
|
||||||
);
|
});
|
||||||
await this.mockRPC("get-team?id=*", "workspace/get-team-default.json");
|
|
||||||
await this.mockRPC(
|
if (this.textEditor) {
|
||||||
"get-profiles-for-file-comments?file-id=*",
|
await this.mockRPC("update-file?id=*", "text-editor/update-file.json");
|
||||||
"workspace/get-profile-for-file-comments.json",
|
}
|
||||||
);
|
|
||||||
await this.mockRPC(/get\-file\?/, "workspace/get-file-blank.json");
|
// by default we mock the blank file.
|
||||||
await this.mockRPC(
|
await this.mockGetFile("workspace/get-file-blank.json");
|
||||||
"get-file-object-thumbnails?file-id=*",
|
|
||||||
"workspace/get-file-object-thumbnails-blank.json",
|
|
||||||
);
|
|
||||||
await this.mockRPC(
|
|
||||||
"get-font-variants?team-id=*",
|
|
||||||
"workspace/get-font-variants-empty.json",
|
|
||||||
);
|
|
||||||
await this.mockRPC(
|
|
||||||
"get-file-fragment?file-id=*",
|
|
||||||
"workspace/get-file-fragment-blank.json",
|
|
||||||
);
|
|
||||||
await this.mockRPC(
|
|
||||||
"get-file-libraries?file-id=*",
|
|
||||||
"workspace/get-file-libraries-empty.json",
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async mockGetFile(jsonFile) {
|
async mockGetFile(jsonFilename, options) {
|
||||||
await this.mockRPC(/get\-file\?/, jsonFile);
|
const page = this.page;
|
||||||
|
const jsonPath = `playwright/data/${jsonFilename}`;
|
||||||
|
const body = await readFile(jsonPath, "utf-8");
|
||||||
|
const payload = JSON.parse(body);
|
||||||
|
|
||||||
|
const fileId = Transit.get(payload, "id");
|
||||||
|
const pageId = Transit.get(payload, "data", "pages", 0);
|
||||||
|
const teamId = Transit.get(payload, "team-id");
|
||||||
|
|
||||||
|
this.fileId = fileId ?? this.anyFileId;
|
||||||
|
this.pageId = pageId ?? this.anyPageId;
|
||||||
|
this.teamId = teamId ?? this.anyTeamId;
|
||||||
|
|
||||||
|
const path = /get\-file\?/;
|
||||||
|
const url = typeof path === "string" ? `**/api/main/methods/${path}` : path;
|
||||||
|
const interceptConfig = {
|
||||||
|
status: 200,
|
||||||
|
contentType: "application/transit+json",
|
||||||
|
...options,
|
||||||
|
};
|
||||||
|
return page.route(url, (route) =>
|
||||||
|
route.fulfill({
|
||||||
|
...interceptConfig,
|
||||||
|
body,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
// await this.mockRPC(/get\-file\?/, jsonFile);
|
||||||
}
|
}
|
||||||
|
|
||||||
async mockGetAsset(regex, asset) {
|
async mockGetAsset(regex, asset) {
|
||||||
@@ -190,22 +325,15 @@ export class WorkspacePage extends BaseWebSocketPage {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async setupFileWithComments() {
|
async setupFileWithComments() {
|
||||||
await this.mockRPC(
|
await this.mockRPCs({
|
||||||
"get-comment-threads?file-id=*",
|
"get-comment-threads?file-id=*":
|
||||||
"workspace/get-comment-threads-unread.json",
|
"workspace/get-comment-threads-unread.json",
|
||||||
);
|
"get-file-fragment?file-id=*&fragment-id=*":
|
||||||
await this.mockRPC(
|
"viewer/get-file-fragment-single-board.json",
|
||||||
"get-file-fragment?file-id=*&fragment-id=*",
|
"get-comments?thread-id=*": "workspace/get-thread-comments.json",
|
||||||
"viewer/get-file-fragment-single-board.json",
|
"update-comment-thread-status":
|
||||||
);
|
"workspace/update-comment-thread-status.json",
|
||||||
await this.mockRPC(
|
});
|
||||||
"get-comments?thread-id=*",
|
|
||||||
"workspace/get-thread-comments.json",
|
|
||||||
);
|
|
||||||
await this.mockRPC(
|
|
||||||
"update-comment-thread-status",
|
|
||||||
"workspace/update-comment-thread-status.json",
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async clickWithDragViewportAt(x, y, width, height) {
|
async clickWithDragViewportAt(x, y, width, height) {
|
||||||
@@ -223,6 +351,67 @@ export class WorkspacePage extends BaseWebSocketPage {
|
|||||||
await this.page.mouse.up();
|
await this.page.mouse.up();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Clicks and moves from the coordinates x1,y1 to x2,y2
|
||||||
|
*
|
||||||
|
* @param {number} x1
|
||||||
|
* @param {number} y1
|
||||||
|
* @param {number} x2
|
||||||
|
* @param {number} y2
|
||||||
|
*/
|
||||||
|
async clickAndMove(x1, y1, x2, y2) {
|
||||||
|
await this.page.waitForTimeout(100);
|
||||||
|
await this.viewport.hover({ position: { x: x1, y: y1 } });
|
||||||
|
await this.page.mouse.down();
|
||||||
|
await this.viewport.hover({ position: { x: x2, y: y2 } });
|
||||||
|
await this.page.mouse.up();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates a new Text Shape in the specified coordinates
|
||||||
|
* with an initial text.
|
||||||
|
*
|
||||||
|
* @param {number} x1
|
||||||
|
* @param {number} y1
|
||||||
|
* @param {number} x2
|
||||||
|
* @param {number} y2
|
||||||
|
* @param {string} initialText
|
||||||
|
* @param {*} [options]
|
||||||
|
*/
|
||||||
|
async createTextShape(x1, y1, x2, y2, initialText, options) {
|
||||||
|
const timeToWait = options?.timeToWait ?? 100;
|
||||||
|
await this.page.keyboard.press("T");
|
||||||
|
await this.page.waitForTimeout(timeToWait);
|
||||||
|
await this.clickAndMove(x1, y1, x2, y2);
|
||||||
|
await this.page.waitForTimeout(timeToWait);
|
||||||
|
if (initialText) {
|
||||||
|
await this.page.keyboard.type(initialText);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Copies the selected element into the clipboard.
|
||||||
|
*
|
||||||
|
* @returns {Promise<void>}
|
||||||
|
*/
|
||||||
|
async copy() {
|
||||||
|
return this.page.keyboard.press("Control+C");
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pastes something from the clipboard.
|
||||||
|
*
|
||||||
|
* @param {"keyboard"|"context-menu"} [kind="keyboard"]
|
||||||
|
* @returns {Promise<void>}
|
||||||
|
*/
|
||||||
|
async paste(kind = "keyboard") {
|
||||||
|
if (kind === "context-menu") {
|
||||||
|
await this.viewport.click({ button: "right" });
|
||||||
|
return this.page.getByText("PasteCtrlV").click();
|
||||||
|
}
|
||||||
|
return this.page.keyboard.press("Control+V");
|
||||||
|
}
|
||||||
|
|
||||||
async panOnViewportAt(x, y, width, height) {
|
async panOnViewportAt(x, y, width, height) {
|
||||||
await this.page.waitForTimeout(100);
|
await this.page.waitForTimeout(100);
|
||||||
await this.viewport.hover({ position: { x, y } });
|
await this.viewport.hover({ position: { x, y } });
|
||||||
@@ -250,10 +439,15 @@ export class WorkspacePage extends BaseWebSocketPage {
|
|||||||
await this.page.waitForTimeout(500);
|
await this.page.waitForTimeout(500);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async doubleClickLeafLayer(name, clickOptions = {}) {
|
||||||
|
await this.clickLeafLayer(name, clickOptions);
|
||||||
|
await this.clickLeafLayer(name, clickOptions);
|
||||||
|
}
|
||||||
|
|
||||||
async clickToggableLayer(name, clickOptions = {}) {
|
async clickToggableLayer(name, clickOptions = {}) {
|
||||||
const layer = this.layers
|
const layer = this.layers
|
||||||
.getByTestId("layer-row")
|
.getByTestId("layer-row")
|
||||||
.filter({ hasText: name });
|
.filter({ hasText: name });
|
||||||
const button = layer.getByRole("button");
|
const button = layer.getByRole("button");
|
||||||
|
|
||||||
await button.waitFor();
|
await button.waitFor();
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 23 KiB |
@@ -360,7 +360,7 @@ test("Renders a file with texts with paragraphs and breaking lines", async ({
|
|||||||
id: "a5f238bd-dd8a-8164-8007-1bc3481eaf05",
|
id: "a5f238bd-dd8a-8164-8007-1bc3481eaf05",
|
||||||
pageId: "a5f238bd-dd8a-8164-8007-1bc3481eaf06",
|
pageId: "a5f238bd-dd8a-8164-8007-1bc3481eaf06",
|
||||||
});
|
});
|
||||||
await workspace.waitForFirstRender();
|
await workspace.waitForFirstRenderWithoutUI();
|
||||||
await expect(workspace.canvas).toHaveScreenshot();
|
await expect(workspace.canvas).toHaveScreenshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -18,6 +18,10 @@ const setupFile = async (workspacePage) => {
|
|||||||
fileId: "7b2da435-6186-815a-8007-0daa95d2f26d",
|
fileId: "7b2da435-6186-815a-8007-0daa95d2f26d",
|
||||||
pageId: "ce79274b-11ab-8088-8007-0487ad43f789",
|
pageId: "ce79274b-11ab-8088-8007-0487ad43f789",
|
||||||
});
|
});
|
||||||
|
await workspacePage.mockRPC(
|
||||||
|
"update-file?id=*",
|
||||||
|
"workspace/update-file-empty.json",
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const shapeToLayerName = {
|
const shapeToLayerName = {
|
||||||
|
|||||||
@@ -1,12 +1,317 @@
|
|||||||
import { test, expect } from "@playwright/test";
|
import { test, expect } from "@playwright/test";
|
||||||
|
import { Clipboard } from '../../helpers/Clipboard';
|
||||||
import { WorkspacePage } from "../pages/WorkspacePage";
|
import { WorkspacePage } from "../pages/WorkspacePage";
|
||||||
|
|
||||||
test.beforeEach(async ({ page }) => {
|
const timeToWait = 100;
|
||||||
|
|
||||||
|
test.beforeEach(async ({ page, context }) => {
|
||||||
|
await Clipboard.enable(context, Clipboard.Permission.ONLY_WRITE);
|
||||||
|
|
||||||
await WorkspacePage.init(page);
|
await WorkspacePage.init(page);
|
||||||
await WorkspacePage.mockConfigFlags(page, ["enable-feature-text-editor-v2"]);
|
await WorkspacePage.mockConfigFlags(page, ["enable-feature-text-editor-v2"]);
|
||||||
});
|
});
|
||||||
|
|
||||||
test.skip("BUG 11552 - Apply styles to the current caret", async ({ page }) => {
|
test.afterEach(async ({ context}) => {
|
||||||
|
context.clearPermissions();
|
||||||
|
})
|
||||||
|
|
||||||
|
test("Create a new text shape", async ({ page }) => {
|
||||||
|
const initialText = "Lorem ipsum";
|
||||||
|
const workspace = new WorkspacePage(page, {
|
||||||
|
textEditor: true
|
||||||
|
});
|
||||||
|
await workspace.setupEmptyFile();
|
||||||
|
await workspace.goToWorkspace();
|
||||||
|
await workspace.createTextShape(190, 150, 300, 200, initialText);
|
||||||
|
|
||||||
|
const textContent = await workspace.textEditor.waitForTextSpanContent();
|
||||||
|
expect(textContent).toBe(initialText);
|
||||||
|
|
||||||
|
await workspace.textEditor.stopEditing();
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Create a new text shape from pasting text", async ({ page, context }) => {
|
||||||
|
const textToPaste = "Lorem ipsum";
|
||||||
|
const workspace = new WorkspacePage(page, {
|
||||||
|
textEditor: true,
|
||||||
|
});
|
||||||
|
await workspace.setupEmptyFile();
|
||||||
|
await workspace.mockRPC(
|
||||||
|
"update-file?id=*",
|
||||||
|
"text-editor/update-file.json",
|
||||||
|
);
|
||||||
|
await workspace.goToWorkspace();
|
||||||
|
|
||||||
|
await Clipboard.writeText(page, textToPaste);
|
||||||
|
|
||||||
|
await workspace.clickAt(190, 150);
|
||||||
|
await workspace.paste("keyboard");
|
||||||
|
|
||||||
|
await page.waitForTimeout(timeToWait);
|
||||||
|
|
||||||
|
const textContent = await workspace.textEditor.waitForTextSpanContent();
|
||||||
|
expect(textContent).toBe(textToPaste);
|
||||||
|
|
||||||
|
await workspace.textEditor.stopEditing();
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Create a new text shape from pasting text using context menu", async ({ page, context }) => {
|
||||||
|
const textToPaste = "Lorem ipsum";
|
||||||
|
const workspace = new WorkspacePage(page, {
|
||||||
|
textEditor: true
|
||||||
|
});
|
||||||
|
await workspace.setupEmptyFile();
|
||||||
|
await workspace.goToWorkspace();
|
||||||
|
|
||||||
|
await Clipboard.writeText(page, textToPaste);
|
||||||
|
|
||||||
|
await workspace.clickAt(190, 150);
|
||||||
|
await workspace.paste("context-menu");
|
||||||
|
|
||||||
|
const textContent = await workspace.textEditor.waitForTextSpanContent();
|
||||||
|
expect(textContent).toBe(textToPaste);
|
||||||
|
|
||||||
|
await workspace.textEditor.stopEditing();
|
||||||
|
})
|
||||||
|
|
||||||
|
test("Update an already created text shape by appending text", async ({ page }) => {
|
||||||
|
const workspace = new WorkspacePage(page, {
|
||||||
|
textEditor: true
|
||||||
|
});
|
||||||
|
await workspace.setupEmptyFile();
|
||||||
|
await workspace.mockGetFile("text-editor/get-file-lorem-ipsum.json");
|
||||||
|
await workspace.goToWorkspace();
|
||||||
|
await workspace.clickLeafLayer("Lorem ipsum");
|
||||||
|
await workspace.textEditor.startEditing();
|
||||||
|
await workspace.textEditor.moveFromEnd(0);
|
||||||
|
await page.keyboard.type(" dolor sit amet");
|
||||||
|
const textContent = await workspace.textEditor.waitForTextSpanContent();
|
||||||
|
expect(textContent).toBe("Lorem ipsum dolor sit amet");
|
||||||
|
await workspace.textEditor.stopEditing();
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Update an already created text shape by prepending text", async ({
|
||||||
|
page,
|
||||||
|
}) => {
|
||||||
|
const workspace = new WorkspacePage(page, {
|
||||||
|
textEditor: true
|
||||||
|
});
|
||||||
|
await workspace.setupEmptyFile();
|
||||||
|
await workspace.mockGetFile("text-editor/get-file-lorem-ipsum.json");
|
||||||
|
await workspace.goToWorkspace();
|
||||||
|
await workspace.clickLeafLayer("Lorem ipsum");
|
||||||
|
await workspace.textEditor.startEditing();
|
||||||
|
await workspace.textEditor.moveFromStart(0);
|
||||||
|
await page.keyboard.type("Dolor sit amet ");
|
||||||
|
const textContent = await workspace.textEditor.waitForTextSpanContent();
|
||||||
|
expect(textContent).toBe("Dolor sit amet Lorem ipsum");
|
||||||
|
await workspace.textEditor.stopEditing();
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Update an already created text shape by inserting text in between", async ({
|
||||||
|
page,
|
||||||
|
}) => {
|
||||||
|
const workspace = new WorkspacePage(page, {
|
||||||
|
textEditor: true
|
||||||
|
});
|
||||||
|
await workspace.setupEmptyFile();
|
||||||
|
await workspace.mockGetFile("text-editor/get-file-lorem-ipsum.json");
|
||||||
|
await workspace.goToWorkspace();
|
||||||
|
await workspace.clickLeafLayer("Lorem ipsum");
|
||||||
|
await workspace.textEditor.startEditing();
|
||||||
|
await workspace.textEditor.moveFromStart(5);
|
||||||
|
await page.keyboard.type(" dolor sit amet");
|
||||||
|
const textContent = await workspace.textEditor.waitForTextSpanContent();
|
||||||
|
expect(textContent).toBe("Lorem dolor sit amet ipsum");
|
||||||
|
await workspace.textEditor.stopEditing();
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Update a new text shape appending text by pasting text", async ({ page, context }) => {
|
||||||
|
const textToPaste = " dolor sit amet";
|
||||||
|
const workspace = new WorkspacePage(page, {
|
||||||
|
textEditor: true
|
||||||
|
});
|
||||||
|
await workspace.setupEmptyFile();
|
||||||
|
await workspace.mockGetFile("text-editor/get-file-lorem-ipsum.json");
|
||||||
|
await workspace.goToWorkspace();
|
||||||
|
|
||||||
|
await Clipboard.writeText(page, textToPaste);
|
||||||
|
|
||||||
|
await workspace.clickLeafLayer("Lorem ipsum");
|
||||||
|
await workspace.textEditor.startEditing();
|
||||||
|
await workspace.textEditor.moveFromEnd();
|
||||||
|
await workspace.paste("keyboard");
|
||||||
|
const textContent = await workspace.textEditor.waitForTextSpanContent();
|
||||||
|
expect(textContent).toBe("Lorem ipsum dolor sit amet");
|
||||||
|
await workspace.textEditor.stopEditing();
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Update a new text shape prepending text by pasting text", async ({
|
||||||
|
page, context
|
||||||
|
}) => {
|
||||||
|
const textToPaste = "Dolor sit amet ";
|
||||||
|
const workspace = new WorkspacePage(page, {
|
||||||
|
textEditor: true
|
||||||
|
});
|
||||||
|
await workspace.setupEmptyFile();
|
||||||
|
await workspace.mockGetFile("text-editor/get-file-lorem-ipsum.json");
|
||||||
|
await workspace.goToWorkspace();
|
||||||
|
|
||||||
|
await Clipboard.writeText(page, textToPaste);
|
||||||
|
|
||||||
|
await workspace.clickLeafLayer("Lorem ipsum");
|
||||||
|
await workspace.textEditor.startEditing();
|
||||||
|
await workspace.textEditor.moveFromStart();
|
||||||
|
await workspace.paste("keyboard");
|
||||||
|
const textContent = await workspace.textEditor.waitForTextSpanContent();
|
||||||
|
expect(textContent).toBe("Dolor sit amet Lorem ipsum");
|
||||||
|
await workspace.textEditor.stopEditing();
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Update a new text shape replacing (starting) text with pasted text", async ({
|
||||||
|
page,
|
||||||
|
}) => {
|
||||||
|
const textToPaste = "Dolor sit amet";
|
||||||
|
const workspace = new WorkspacePage(page, {
|
||||||
|
textEditor: true
|
||||||
|
});
|
||||||
|
await workspace.setupEmptyFile();
|
||||||
|
await workspace.mockGetFile("text-editor/get-file-lorem-ipsum.json");
|
||||||
|
await workspace.goToWorkspace();
|
||||||
|
await workspace.clickLeafLayer("Lorem ipsum");
|
||||||
|
await workspace.textEditor.startEditing();
|
||||||
|
await workspace.textEditor.selectFromStart(5);
|
||||||
|
|
||||||
|
await Clipboard.writeText(page, textToPaste);
|
||||||
|
|
||||||
|
await workspace.paste("keyboard");
|
||||||
|
|
||||||
|
const textContent = await workspace.textEditor.waitForTextSpanContent();
|
||||||
|
expect(textContent).toBe("Dolor sit amet ipsum");
|
||||||
|
|
||||||
|
await workspace.textEditor.stopEditing();
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Update a new text shape replacing (ending) text with pasted text", async ({
|
||||||
|
page,
|
||||||
|
}) => {
|
||||||
|
const textToPaste = "dolor sit amet";
|
||||||
|
const workspace = new WorkspacePage(page, {
|
||||||
|
textEditor: true
|
||||||
|
});
|
||||||
|
await workspace.setupEmptyFile();
|
||||||
|
await workspace.mockGetFile("text-editor/get-file-lorem-ipsum.json");
|
||||||
|
await workspace.goToWorkspace();
|
||||||
|
await workspace.clickLeafLayer("Lorem ipsum");
|
||||||
|
await workspace.textEditor.startEditing();
|
||||||
|
await workspace.textEditor.selectFromEnd(5);
|
||||||
|
|
||||||
|
await Clipboard.writeText(page, textToPaste);
|
||||||
|
|
||||||
|
await workspace.paste("keyboard");
|
||||||
|
|
||||||
|
const textContent = await workspace.textEditor.waitForTextSpanContent();
|
||||||
|
expect(textContent).toBe("Lorem dolor sit amet");
|
||||||
|
|
||||||
|
await workspace.textEditor.stopEditing();
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Update a new text shape replacing (in between) text with pasted text", async ({
|
||||||
|
page,
|
||||||
|
}) => {
|
||||||
|
const textToPaste = "dolor sit amet";
|
||||||
|
const workspace = new WorkspacePage(page, {
|
||||||
|
textEditor: true
|
||||||
|
});
|
||||||
|
await workspace.setupEmptyFile();
|
||||||
|
await workspace.mockGetFile("text-editor/get-file-lorem-ipsum.json");
|
||||||
|
await workspace.goToWorkspace();
|
||||||
|
await workspace.clickLeafLayer("Lorem ipsum");
|
||||||
|
await workspace.textEditor.startEditing();
|
||||||
|
await workspace.textEditor.selectFromStart(5, 3);
|
||||||
|
|
||||||
|
await Clipboard.writeText(page, textToPaste);
|
||||||
|
|
||||||
|
await workspace.paste("keyboard");
|
||||||
|
|
||||||
|
const textContent = await workspace.textEditor.waitForTextSpanContent();
|
||||||
|
expect(textContent).toBe("Lordolor sit ametsum");
|
||||||
|
|
||||||
|
await workspace.textEditor.stopEditing();
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Update text font size selecting a part of it (starting)", async ({
|
||||||
|
page,
|
||||||
|
}) => {
|
||||||
|
const workspace = new WorkspacePage(page, {
|
||||||
|
textEditor: true
|
||||||
|
});
|
||||||
|
await workspace.setupEmptyFile();
|
||||||
|
await workspace.mockGetFile("text-editor/get-file-lorem-ipsum.json");
|
||||||
|
await workspace.mockRPC(
|
||||||
|
"update-file?id=*",
|
||||||
|
"text-editor/update-file.json",
|
||||||
|
);
|
||||||
|
await workspace.goToWorkspace();
|
||||||
|
await workspace.clickLeafLayer("Lorem ipsum");
|
||||||
|
await workspace.textEditor.startEditing();
|
||||||
|
await workspace.textEditor.selectFromStart(5);
|
||||||
|
await workspace.textEditor.changeFontSize(36);
|
||||||
|
|
||||||
|
const textContent1 = await workspace.textEditor.waitForTextSpanContent(1);
|
||||||
|
expect(textContent1).toBe("Lorem");
|
||||||
|
const textContent2 = await workspace.textEditor.waitForTextSpanContent(2);
|
||||||
|
expect(textContent2).toBe(" ipsum");
|
||||||
|
await workspace.textEditor.stopEditing();
|
||||||
|
});
|
||||||
|
|
||||||
|
test.skip("Update text line height selecting a part of it (starting)", async ({
|
||||||
|
page,
|
||||||
|
}) => {
|
||||||
|
const workspace = new WorkspacePage(page, {
|
||||||
|
textEditor: true,
|
||||||
|
});
|
||||||
|
await workspace.setupEmptyFile();
|
||||||
|
await workspace.mockGetFile("text-editor/get-file-lorem-ipsum.json");
|
||||||
|
await workspace.mockRPC("update-file?id=*", "text-editor/update-file.json");
|
||||||
|
await workspace.goToWorkspace();
|
||||||
|
await workspace.clickLeafLayer("Lorem ipsum");
|
||||||
|
await workspace.textEditor.startEditing();
|
||||||
|
await workspace.textEditor.selectFromStart(5);
|
||||||
|
await workspace.textEditor.changeLineHeight(1.4);
|
||||||
|
|
||||||
|
const lineHeight = await workspace.textEditor.waitForParagraphStyle(1, 'line-height');
|
||||||
|
expect(lineHeight).toBe("1.4");
|
||||||
|
|
||||||
|
const textContent = await workspace.textEditor.waitForTextSpanContent();
|
||||||
|
expect(textContent).toBe("Lorem ipsum");
|
||||||
|
|
||||||
|
await workspace.textEditor.stopEditing();
|
||||||
|
});
|
||||||
|
|
||||||
|
test.skip("Update text letter spacing selecting a part of it (starting)", async ({
|
||||||
|
page,
|
||||||
|
}) => {
|
||||||
|
const workspace = new WorkspacePage(page, {
|
||||||
|
textEditor: true,
|
||||||
|
});
|
||||||
|
await workspace.setupEmptyFile();
|
||||||
|
await workspace.mockGetFile("text-editor/get-file-lorem-ipsum.json");
|
||||||
|
await workspace.mockRPC("update-file?id=*", "text-editor/update-file.json");
|
||||||
|
await workspace.goToWorkspace();
|
||||||
|
await workspace.clickLeafLayer("Lorem ipsum");
|
||||||
|
await workspace.textEditor.startEditing();
|
||||||
|
await workspace.textEditor.selectFromStart(5);
|
||||||
|
await workspace.textEditor.changeLetterSpacing(10);
|
||||||
|
|
||||||
|
const textContent1 = await workspace.textEditor.waitForTextSpanContent(1);
|
||||||
|
expect(textContent1).toBe("Lorem");
|
||||||
|
const textContent2 = await workspace.textEditor.waitForTextSpanContent(2);
|
||||||
|
expect(textContent2).toBe(" ipsum");
|
||||||
|
await workspace.textEditor.stopEditing();
|
||||||
|
});
|
||||||
|
|
||||||
|
test("BUG 11552 - Apply styles to the current caret", async ({ page }) => {
|
||||||
const workspace = new WorkspacePage(page);
|
const workspace = new WorkspacePage(page);
|
||||||
await workspace.setupEmptyFile();
|
await workspace.setupEmptyFile();
|
||||||
await workspace.mockGetFile("text-editor/get-file-11552.json");
|
await workspace.mockGetFile("text-editor/get-file-11552.json");
|
||||||
@@ -14,21 +319,16 @@ test.skip("BUG 11552 - Apply styles to the current caret", async ({ page }) => {
|
|||||||
"update-file?id=*",
|
"update-file?id=*",
|
||||||
"text-editor/update-file-11552.json",
|
"text-editor/update-file-11552.json",
|
||||||
);
|
);
|
||||||
|
await workspace.goToWorkspace();
|
||||||
await workspace.goToWorkspace({
|
await workspace.doubleClickLeafLayer("Lorem ipsum");
|
||||||
fileId: "238a17e0-75ff-8075-8006-934586ea2230",
|
|
||||||
pageId: "238a17e0-75ff-8075-8006-934586ea2231",
|
|
||||||
});
|
|
||||||
await workspace.clickLeafLayer("Lorem ipsum");
|
|
||||||
await workspace.clickLeafLayer("Lorem ipsum");
|
|
||||||
|
|
||||||
const fontSizeInput = workspace.rightSidebar.getByRole("textbox", {
|
const fontSizeInput = workspace.rightSidebar.getByRole("textbox", {
|
||||||
name: "Font Size",
|
name: "Font Size",
|
||||||
});
|
});
|
||||||
await expect(fontSizeInput).toBeVisible();
|
await expect(fontSizeInput).toBeVisible();
|
||||||
|
|
||||||
await workspace.page.keyboard.press("Enter");
|
await page.keyboard.press("Enter");
|
||||||
await workspace.page.keyboard.press("ArrowRight");
|
await page.keyboard.press("ArrowRight");
|
||||||
|
|
||||||
await fontSizeInput.fill("36");
|
await fontSizeInput.fill("36");
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -76,7 +76,7 @@
|
|||||||
(map :page-id))
|
(map :page-id))
|
||||||
|
|
||||||
(defn- apply-changes-localy
|
(defn- apply-changes-localy
|
||||||
[{:keys [file-id redo-changes] :as commit} pending]
|
[{:keys [file-id redo-changes ignore-wasm?] :as commit} pending]
|
||||||
(ptk/reify ::apply-changes-localy
|
(ptk/reify ::apply-changes-localy
|
||||||
ptk/UpdateEvent
|
ptk/UpdateEvent
|
||||||
(update [_ state]
|
(update [_ state]
|
||||||
@@ -103,7 +103,7 @@
|
|||||||
pids (into #{} xf:map-page-id redo-changes)]
|
pids (into #{} xf:map-page-id redo-changes)]
|
||||||
(reduce #(ctst/update-object-indices %1 %2) fdata pids)))]
|
(reduce #(ctst/update-object-indices %1 %2) fdata pids)))]
|
||||||
|
|
||||||
(if (features/active-feature? state "render-wasm/v1")
|
(if (and (not ignore-wasm?) (features/active-feature? state "render-wasm/v1"))
|
||||||
;; Update the wasm model
|
;; Update the wasm model
|
||||||
(let [shape-changes (volatile! {})
|
(let [shape-changes (volatile! {})
|
||||||
|
|
||||||
@@ -122,7 +122,7 @@
|
|||||||
(defn commit
|
(defn commit
|
||||||
"Create a commit event instance"
|
"Create a commit event instance"
|
||||||
[{:keys [commit-id redo-changes undo-changes origin save-undo? features
|
[{:keys [commit-id redo-changes undo-changes origin save-undo? features
|
||||||
file-id file-revn file-vern undo-group tags stack-undo? source]}]
|
file-id file-revn file-vern undo-group tags stack-undo? source ignore-wasm?]}]
|
||||||
|
|
||||||
(assert (cpc/check-changes redo-changes)
|
(assert (cpc/check-changes redo-changes)
|
||||||
"expect valid vector of changes for redo-changes")
|
"expect valid vector of changes for redo-changes")
|
||||||
@@ -147,7 +147,8 @@
|
|||||||
:save-undo? save-undo?
|
:save-undo? save-undo?
|
||||||
:undo-group undo-group
|
:undo-group undo-group
|
||||||
:tags tags
|
:tags tags
|
||||||
:stack-undo? stack-undo?}]
|
:stack-undo? stack-undo?
|
||||||
|
:ignore-wasm? ignore-wasm?}]
|
||||||
|
|
||||||
(ptk/reify ::commit
|
(ptk/reify ::commit
|
||||||
cljs.core/IDeref
|
cljs.core/IDeref
|
||||||
|
|||||||
@@ -102,7 +102,8 @@
|
|||||||
{:origin it
|
{:origin it
|
||||||
:redo-changes changes
|
:redo-changes changes
|
||||||
:undo-changes []
|
:undo-changes []
|
||||||
:save-undo? false})))))))
|
:save-undo? false
|
||||||
|
:ignore-wasm? true})))))))
|
||||||
|
|
||||||
;; FIXME: would be nice to not execute this code twice per page in the
|
;; FIXME: would be nice to not execute this code twice per page in the
|
||||||
;; same working session, maybe some local memoization can improve that
|
;; same working session, maybe some local memoization can improve that
|
||||||
@@ -119,4 +120,5 @@
|
|||||||
{:origin it
|
{:origin it
|
||||||
:redo-changes changes
|
:redo-changes changes
|
||||||
:undo-changes []
|
:undo-changes []
|
||||||
:save-undo? false})))))))
|
:save-undo? false
|
||||||
|
:ignore-wasm? true})))))))
|
||||||
|
|||||||
@@ -649,7 +649,7 @@
|
|||||||
(propagate-structure-modifiers modif-tree (dsh/lookup-page-objects state))
|
(propagate-structure-modifiers modif-tree (dsh/lookup-page-objects state))
|
||||||
|
|
||||||
ids
|
ids
|
||||||
(into [] xf:without-uuid-zero (keys transforms))
|
(into (set (keys modif-tree)) xf:without-uuid-zero (keys transforms))
|
||||||
|
|
||||||
update-shape
|
update-shape
|
||||||
(fn [shape]
|
(fn [shape]
|
||||||
|
|||||||
@@ -831,7 +831,8 @@
|
|||||||
(effect [_ state _]
|
(effect [_ state _]
|
||||||
(when (features/active-feature? state "text-editor/v2")
|
(when (features/active-feature? state "text-editor/v2")
|
||||||
(let [instance (:workspace-editor state)
|
(let [instance (:workspace-editor state)
|
||||||
attrs-to-override (some-> (editor.v2/getCurrentStyle instance) (styles/get-styles-from-style-declaration))
|
attrs-to-override (some-> (editor.v2/getCurrentStyle instance)
|
||||||
|
(styles/get-styles-from-style-declaration))
|
||||||
overriden-attrs (merge attrs-to-override attrs)
|
overriden-attrs (merge attrs-to-override attrs)
|
||||||
styles (styles/attrs->styles overriden-attrs)]
|
styles (styles/attrs->styles overriden-attrs)]
|
||||||
(editor.v2/applyStylesToSelection instance styles))))))
|
(editor.v2/applyStylesToSelection instance styles))))))
|
||||||
|
|||||||
@@ -26,7 +26,7 @@
|
|||||||
(log/set-level! :warn)
|
(log/set-level! :warn)
|
||||||
|
|
||||||
(def google-fonts
|
(def google-fonts
|
||||||
(preload-gfonts "fonts/gfonts.2025.05.19.json"))
|
(preload-gfonts "fonts/gfonts.2025.11.28.json"))
|
||||||
|
|
||||||
(def local-fonts
|
(def local-fonts
|
||||||
[{:id "sourcesanspro"
|
[{:id "sourcesanspro"
|
||||||
@@ -342,8 +342,8 @@
|
|||||||
(fn [result {:keys [font-id] :as node}]
|
(fn [result {:keys [font-id] :as node}]
|
||||||
(let [current-font
|
(let [current-font
|
||||||
(if (some? font-id)
|
(if (some? font-id)
|
||||||
(select-keys node [:font-id :font-variant-id])
|
(select-keys node [:font-id :font-variant-id :font-weight :font-style])
|
||||||
(select-keys txt/default-typography [:font-id :font-variant-id]))]
|
(select-keys txt/default-typography [:font-id :font-variant-id :font-weight :font-style]))]
|
||||||
(conj result current-font)))
|
(conj result current-font)))
|
||||||
#{})))
|
#{})))
|
||||||
|
|
||||||
|
|||||||
@@ -372,6 +372,9 @@
|
|||||||
(def workspace-modifiers
|
(def workspace-modifiers
|
||||||
(l/derived :workspace-modifiers st/state))
|
(l/derived :workspace-modifiers st/state))
|
||||||
|
|
||||||
|
(def workspace-wasm-modifiers
|
||||||
|
(l/derived :workspace-wasm-modifiers st/state))
|
||||||
|
|
||||||
(def ^:private workspace-modifiers-with-objects
|
(def ^:private workspace-modifiers-with-objects
|
||||||
(l/derived
|
(l/derived
|
||||||
(fn [state]
|
(fn [state]
|
||||||
|
|||||||
@@ -30,6 +30,7 @@
|
|||||||
(def current-zoom (mf/create-context nil))
|
(def current-zoom (mf/create-context nil))
|
||||||
|
|
||||||
(def workspace-read-only? (mf/create-context nil))
|
(def workspace-read-only? (mf/create-context nil))
|
||||||
|
(def is-render? (mf/create-context false))
|
||||||
(def is-component? (mf/create-context false))
|
(def is-component? (mf/create-context false))
|
||||||
|
|
||||||
(def sidebar
|
(def sidebar
|
||||||
|
|||||||
@@ -7,6 +7,7 @@
|
|||||||
(ns app.main.ui.flex-controls.gap
|
(ns app.main.ui.flex-controls.gap
|
||||||
(:require
|
(:require
|
||||||
[app.common.data :as d]
|
[app.common.data :as d]
|
||||||
|
[app.common.data.macros :as dm]
|
||||||
[app.common.files.helpers :as cfh]
|
[app.common.files.helpers :as cfh]
|
||||||
[app.common.geom.point :as gpt]
|
[app.common.geom.point :as gpt]
|
||||||
[app.common.geom.shapes :as gsh]
|
[app.common.geom.shapes :as gsh]
|
||||||
@@ -16,6 +17,8 @@
|
|||||||
[app.common.types.shape.layout :as ctl]
|
[app.common.types.shape.layout :as ctl]
|
||||||
[app.main.data.helpers :as dsh]
|
[app.main.data.helpers :as dsh]
|
||||||
[app.main.data.workspace.modifiers :as dwm]
|
[app.main.data.workspace.modifiers :as dwm]
|
||||||
|
[app.main.data.workspace.transforms :as dwt]
|
||||||
|
[app.main.features :as features]
|
||||||
[app.main.refs :as refs]
|
[app.main.refs :as refs]
|
||||||
[app.main.store :as st]
|
[app.main.store :as st]
|
||||||
[app.main.ui.css-cursors :as cur]
|
[app.main.ui.css-cursors :as cur]
|
||||||
@@ -27,10 +30,11 @@
|
|||||||
(mf/defc gap-display
|
(mf/defc gap-display
|
||||||
[{:keys [frame-id zoom gap-type gap on-pointer-enter on-pointer-leave
|
[{:keys [frame-id zoom gap-type gap on-pointer-enter on-pointer-leave
|
||||||
rect-data hover? selected? mouse-pos hover-value
|
rect-data hover? selected? mouse-pos hover-value
|
||||||
on-move-selected on-context-menu]}]
|
on-move-selected on-context-menu on-change]}]
|
||||||
(let [resizing (mf/use-var nil)
|
(let [resizing (mf/use-var nil)
|
||||||
start (mf/use-var nil)
|
start (mf/use-var nil)
|
||||||
original-value (mf/use-var 0)
|
original-value (mf/use-var 0)
|
||||||
|
last-pos (mf/use-var nil)
|
||||||
negate? (:resize-negate? rect-data)
|
negate? (:resize-negate? rect-data)
|
||||||
axis (:resize-axis rect-data)
|
axis (:resize-axis rect-data)
|
||||||
|
|
||||||
@@ -43,32 +47,55 @@
|
|||||||
(reset! start (dom/get-client-position event))
|
(reset! start (dom/get-client-position event))
|
||||||
(reset! original-value (:initial-value rect-data))))
|
(reset! original-value (:initial-value rect-data))))
|
||||||
|
|
||||||
on-lost-pointer-capture
|
calc-modifiers
|
||||||
(mf/use-fn
|
(mf/use-fn
|
||||||
(mf/deps frame-id gap-type gap)
|
(mf/deps frame-id gap-type gap)
|
||||||
|
(fn [pos]
|
||||||
|
(let [delta
|
||||||
|
(-> (gpt/to-vec @start pos)
|
||||||
|
(cond-> negate? gpt/negate)
|
||||||
|
(get axis))
|
||||||
|
val
|
||||||
|
(int (max (+ @original-value (/ delta zoom)) 0))
|
||||||
|
|
||||||
|
layout-gap (assoc gap gap-type val)]
|
||||||
|
[val
|
||||||
|
(dwm/create-modif-tree
|
||||||
|
[frame-id]
|
||||||
|
(ctm/change-property (ctm/empty) :layout-gap layout-gap))])))
|
||||||
|
|
||||||
|
on-lost-pointer-capture
|
||||||
|
(mf/use-fn
|
||||||
|
(mf/deps calc-modifiers)
|
||||||
(fn [event]
|
(fn [event]
|
||||||
(dom/release-pointer event)
|
(dom/release-pointer event)
|
||||||
|
|
||||||
|
(when (and (features/active-feature? @st/state "render-wasm/v1") (= @resizing gap-type))
|
||||||
|
(let [[_ modifiers] (calc-modifiers @last-pos)]
|
||||||
|
(st/emit! (dwm/apply-wasm-modifiers modifiers)
|
||||||
|
(dwt/finish-transform))))
|
||||||
|
|
||||||
(reset! resizing nil)
|
(reset! resizing nil)
|
||||||
(reset! start nil)
|
(reset! start nil)
|
||||||
(reset! original-value 0)
|
(reset! original-value 0)
|
||||||
(st/emit! (dwm/apply-modifiers))))
|
(when (not (features/active-feature? @st/state "render-wasm/v1"))
|
||||||
|
(st/emit! (dwm/apply-modifiers)))))
|
||||||
|
|
||||||
on-pointer-move
|
on-pointer-move
|
||||||
(mf/use-fn
|
(mf/use-fn
|
||||||
(mf/deps frame-id gap-type gap)
|
(mf/deps calc-modifiers on-change)
|
||||||
(fn [event]
|
(fn [event]
|
||||||
(let [pos (dom/get-client-position event)]
|
(let [pos (dom/get-client-position event)]
|
||||||
|
(reset! last-pos pos)
|
||||||
(reset! mouse-pos (point->viewport pos))
|
(reset! mouse-pos (point->viewport pos))
|
||||||
(when (= @resizing gap-type)
|
(when (= @resizing gap-type)
|
||||||
(let [delta (-> (gpt/to-vec @start pos)
|
(let [[val modifiers] (calc-modifiers pos)]
|
||||||
(cond-> negate? gpt/negate)
|
|
||||||
(get axis))
|
|
||||||
val (int (max (+ @original-value (/ delta zoom)) 0))
|
|
||||||
layout-gap (assoc gap gap-type val)
|
|
||||||
modifiers (dwm/create-modif-tree [frame-id] (ctm/change-property (ctm/empty) :layout-gap layout-gap))]
|
|
||||||
|
|
||||||
(reset! hover-value val)
|
(reset! hover-value val)
|
||||||
(st/emit! (dwm/set-modifiers modifiers)))))))]
|
(if (features/active-feature? @st/state "render-wasm/v1")
|
||||||
|
(st/emit! (dwm/set-wasm-modifiers modifiers))
|
||||||
|
(st/emit! (dwm/set-modifiers modifiers)))
|
||||||
|
(when on-change
|
||||||
|
(on-change modifiers)))))))]
|
||||||
|
|
||||||
[:g.gap-rect
|
[:g.gap-rect
|
||||||
[:rect.info-area
|
[:rect.info-area
|
||||||
@@ -120,10 +147,17 @@
|
|||||||
pill-width (/ fcc/flex-display-pill-width zoom)
|
pill-width (/ fcc/flex-display-pill-width zoom)
|
||||||
pill-height (/ fcc/flex-display-pill-height zoom)
|
pill-height (/ fcc/flex-display-pill-height zoom)
|
||||||
workspace-modifiers (mf/deref refs/workspace-modifiers)
|
workspace-modifiers (mf/deref refs/workspace-modifiers)
|
||||||
|
workspace-wasm-modifiers (mf/deref refs/workspace-wasm-modifiers)
|
||||||
|
|
||||||
gap-selected (mf/deref refs/workspace-gap-selected)
|
gap-selected (mf/deref refs/workspace-gap-selected)
|
||||||
hover (mf/use-state nil)
|
hover (mf/use-state nil)
|
||||||
hover-value (mf/use-state 0)
|
hover-value (mf/use-state 0)
|
||||||
mouse-pos (mf/use-state nil)
|
mouse-pos (mf/use-state nil)
|
||||||
|
current-modifiers (mf/use-state nil)
|
||||||
|
|
||||||
|
frame
|
||||||
|
(ctm/apply-structure-modifiers frame (dm/get-in @current-modifiers [frame-id :modifiers]))
|
||||||
|
|
||||||
padding (:layout-padding frame)
|
padding (:layout-padding frame)
|
||||||
gap (:layout-gap frame)
|
gap (:layout-gap frame)
|
||||||
{:keys [width height x1 y1]} (:selrect frame)
|
{:keys [width height x1 y1]} (:selrect frame)
|
||||||
@@ -132,6 +166,12 @@
|
|||||||
(reset! hover-value val))
|
(reset! hover-value val))
|
||||||
|
|
||||||
on-pointer-leave #(reset! hover nil)
|
on-pointer-leave #(reset! hover nil)
|
||||||
|
|
||||||
|
on-change
|
||||||
|
(mf/use-fn
|
||||||
|
(fn [modifiers]
|
||||||
|
(reset! current-modifiers modifiers)))
|
||||||
|
|
||||||
negate {:column-gap (if flip-x true false)
|
negate {:column-gap (if flip-x true false)
|
||||||
:row-gap (if flip-y true false)}
|
:row-gap (if flip-y true false)}
|
||||||
|
|
||||||
@@ -143,8 +183,16 @@
|
|||||||
(= :column-reverse saved-dir))
|
(= :column-reverse saved-dir))
|
||||||
(drop-last children)
|
(drop-last children)
|
||||||
(rest children))
|
(rest children))
|
||||||
children-to-display (->> children-to-display
|
children-to-display
|
||||||
(map #(gsh/transform-shape % (get-in workspace-modifiers [(:id %) :modifiers]))))
|
(if (features/active-feature? @st/state "render-wasm/v1")
|
||||||
|
(let [modifiers (into {} workspace-wasm-modifiers)]
|
||||||
|
(->> children-to-display
|
||||||
|
;;(map #(gsh/transform-shape % (get-in workspace-modifiers [(:id %) :modifiers])))
|
||||||
|
(map (fn [shape]
|
||||||
|
(gsh/apply-transform shape (get modifiers (:id shape)))))))
|
||||||
|
|
||||||
|
(->> children-to-display
|
||||||
|
(map #(gsh/transform-shape % (get-in workspace-modifiers [(:id %) :modifiers])))))
|
||||||
|
|
||||||
wrap-blocks
|
wrap-blocks
|
||||||
(let [block-children (->> children
|
(let [block-children (->> children
|
||||||
@@ -272,20 +320,22 @@
|
|||||||
[:g.gaps {:pointer-events "visible"}
|
[:g.gaps {:pointer-events "visible"}
|
||||||
(for [[index display-item] (d/enumerate (concat display-blocks display-children))]
|
(for [[index display-item] (d/enumerate (concat display-blocks display-children))]
|
||||||
(let [gap-type (:gap-type display-item)]
|
(let [gap-type (:gap-type display-item)]
|
||||||
[:& gap-display {:key (str frame-id index)
|
[:& gap-display
|
||||||
:frame-id frame-id
|
{:key (str frame-id index)
|
||||||
:zoom zoom
|
:frame-id frame-id
|
||||||
:gap-type gap-type
|
:zoom zoom
|
||||||
:gap gap
|
:gap-type gap-type
|
||||||
:on-pointer-enter (partial on-pointer-enter gap-type (get gap gap-type))
|
:gap gap
|
||||||
:on-pointer-leave on-pointer-leave
|
:on-pointer-enter (partial on-pointer-enter gap-type (get gap gap-type))
|
||||||
:on-move-selected on-move-selected
|
:on-pointer-leave on-pointer-leave
|
||||||
:on-context-menu on-context-menu
|
:on-move-selected on-move-selected
|
||||||
:rect-data display-item
|
:on-context-menu on-context-menu
|
||||||
:hover? (= @hover gap-type)
|
:on-change on-change
|
||||||
:selected? (= gap-selected gap-type)
|
:rect-data display-item
|
||||||
:mouse-pos mouse-pos
|
:hover? (= @hover gap-type)
|
||||||
:hover-value hover-value}]))
|
:selected? (= gap-selected gap-type)
|
||||||
|
:mouse-pos mouse-pos
|
||||||
|
:hover-value hover-value}]))
|
||||||
|
|
||||||
(when @hover
|
(when @hover
|
||||||
[:& fcc/flex-display-pill
|
[:& fcc/flex-display-pill
|
||||||
|
|||||||
@@ -6,9 +6,12 @@
|
|||||||
|
|
||||||
(ns app.main.ui.flex-controls.margin
|
(ns app.main.ui.flex-controls.margin
|
||||||
(:require
|
(:require
|
||||||
|
[app.common.data.macros :as dm]
|
||||||
[app.common.geom.point :as gpt]
|
[app.common.geom.point :as gpt]
|
||||||
[app.common.types.modifiers :as ctm]
|
[app.common.types.modifiers :as ctm]
|
||||||
[app.main.data.workspace.modifiers :as dwm]
|
[app.main.data.workspace.modifiers :as dwm]
|
||||||
|
[app.main.data.workspace.transforms :as dwt]
|
||||||
|
[app.main.features :as features]
|
||||||
[app.main.refs :as refs]
|
[app.main.refs :as refs]
|
||||||
[app.main.store :as st]
|
[app.main.store :as st]
|
||||||
[app.main.ui.css-cursors :as cur]
|
[app.main.ui.css-cursors :as cur]
|
||||||
@@ -17,11 +20,14 @@
|
|||||||
[app.util.dom :as dom]
|
[app.util.dom :as dom]
|
||||||
[rumext.v2 :as mf]))
|
[rumext.v2 :as mf]))
|
||||||
|
|
||||||
(mf/defc margin-display [{:keys [shape-id zoom hover-all? hover-v? hover-h? margin-num margin on-pointer-enter on-pointer-leave
|
(mf/defc margin-display
|
||||||
rect-data hover? selected? mouse-pos hover-value]}]
|
[{:keys [shape-id zoom hover-all? hover-v? hover-h? margin-num margin
|
||||||
|
on-pointer-enter on-pointer-leave on-change
|
||||||
|
rect-data hover? selected? mouse-pos hover-value]}]
|
||||||
(let [resizing? (mf/use-var false)
|
(let [resizing? (mf/use-var false)
|
||||||
start (mf/use-var nil)
|
start (mf/use-var nil)
|
||||||
original-value (mf/use-var 0)
|
original-value (mf/use-var 0)
|
||||||
|
last-pos (mf/use-var nil)
|
||||||
negate? (true? (:resize-negate? rect-data))
|
negate? (true? (:resize-negate? rect-data))
|
||||||
axis (:resize-axis rect-data)
|
axis (:resize-axis rect-data)
|
||||||
|
|
||||||
@@ -34,39 +40,69 @@
|
|||||||
(reset! start (dom/get-client-position event))
|
(reset! start (dom/get-client-position event))
|
||||||
(reset! original-value (:initial-value rect-data))))
|
(reset! original-value (:initial-value rect-data))))
|
||||||
|
|
||||||
|
calc-modifiers
|
||||||
|
(mf/use-fn
|
||||||
|
(mf/deps shape-id margin-num margin hover-all? hover-v? hover-h?)
|
||||||
|
(fn [pos]
|
||||||
|
(let [delta
|
||||||
|
(-> (gpt/to-vec @start pos)
|
||||||
|
(cond-> negate? gpt/negate)
|
||||||
|
(get axis))
|
||||||
|
|
||||||
|
val
|
||||||
|
(int (max (+ @original-value (/ delta zoom)) 0))
|
||||||
|
|
||||||
|
layout-item-margin
|
||||||
|
(cond
|
||||||
|
hover-all? (assoc margin :m1 val :m2 val :m3 val :m4 val)
|
||||||
|
hover-v? (assoc margin :m1 val :m3 val)
|
||||||
|
hover-h? (assoc margin :m2 val :m4 val)
|
||||||
|
:else (assoc margin margin-num val))
|
||||||
|
|
||||||
|
layout-item-margin-type
|
||||||
|
(if (= (:m1 margin) (:m2 margin) (:m3 margin) (:m4 margin)) :simple :multiple)]
|
||||||
|
|
||||||
|
[val
|
||||||
|
(dwm/create-modif-tree
|
||||||
|
[shape-id]
|
||||||
|
(-> (ctm/empty)
|
||||||
|
(ctm/change-property :layout-item-margin layout-item-margin)
|
||||||
|
(ctm/change-property :layout-item-margin-type layout-item-margin-type)))])))
|
||||||
|
|
||||||
on-lost-pointer-capture
|
on-lost-pointer-capture
|
||||||
(mf/use-fn
|
(mf/use-fn
|
||||||
(mf/deps shape-id margin-num margin)
|
(mf/deps calc-modifiers)
|
||||||
(fn [event]
|
(fn [event]
|
||||||
(dom/release-pointer event)
|
(dom/release-pointer event)
|
||||||
|
|
||||||
|
(when (features/active-feature? @st/state "render-wasm/v1")
|
||||||
|
(let [[_ modifiers] (calc-modifiers @last-pos)]
|
||||||
|
(st/emit! (dwm/apply-wasm-modifiers modifiers)
|
||||||
|
(dwt/finish-transform))))
|
||||||
|
|
||||||
(reset! resizing? false)
|
(reset! resizing? false)
|
||||||
(reset! start nil)
|
(reset! start nil)
|
||||||
(reset! original-value 0)
|
(reset! original-value 0)
|
||||||
(st/emit! (dwm/apply-modifiers))))
|
|
||||||
|
(when (not (features/active-feature? @st/state "render-wasm/v1"))
|
||||||
|
(st/emit! (dwm/apply-modifiers)))))
|
||||||
|
|
||||||
on-pointer-move
|
on-pointer-move
|
||||||
(mf/use-fn
|
(mf/use-fn
|
||||||
(mf/deps shape-id margin-num margin hover-all? hover-v? hover-h?)
|
(mf/deps calc-modifiers on-change)
|
||||||
(fn [event]
|
(fn [event]
|
||||||
(let [pos (dom/get-client-position event)]
|
(let [pos (dom/get-client-position event)]
|
||||||
(reset! mouse-pos (point->viewport pos))
|
(reset! mouse-pos (point->viewport pos))
|
||||||
|
(reset! last-pos pos)
|
||||||
(when @resizing?
|
(when @resizing?
|
||||||
(let [delta (-> (gpt/to-vec @start pos)
|
(let [[val modifiers] (calc-modifiers pos)]
|
||||||
(cond-> negate? gpt/negate)
|
|
||||||
(get axis))
|
|
||||||
val (int (max (+ @original-value (/ delta zoom)) 0))
|
|
||||||
layout-item-margin (cond
|
|
||||||
hover-all? (assoc margin :m1 val :m2 val :m3 val :m4 val)
|
|
||||||
hover-v? (assoc margin :m1 val :m3 val)
|
|
||||||
hover-h? (assoc margin :m2 val :m4 val)
|
|
||||||
:else (assoc margin margin-num val))
|
|
||||||
layout-item-margin-type (if (= (:m1 margin) (:m2 margin) (:m3 margin) (:m4 margin)) :simple :multiple)
|
|
||||||
modifiers (dwm/create-modif-tree [shape-id]
|
|
||||||
(-> (ctm/empty)
|
|
||||||
(ctm/change-property :layout-item-margin layout-item-margin)
|
|
||||||
(ctm/change-property :layout-item-margin-type layout-item-margin-type)))]
|
|
||||||
(reset! hover-value val)
|
(reset! hover-value val)
|
||||||
(st/emit! (dwm/set-modifiers modifiers)))))))]
|
(if (features/active-feature? @st/state "render-wasm/v1")
|
||||||
|
(st/emit! (dwm/set-wasm-modifiers modifiers))
|
||||||
|
(st/emit! (dwm/set-modifiers modifiers)))
|
||||||
|
|
||||||
|
(when on-change
|
||||||
|
(on-change modifiers)))))))]
|
||||||
|
|
||||||
[:rect.margin-rect
|
[:rect.margin-rect
|
||||||
{:x (:x rect-data)
|
{:x (:x rect-data)
|
||||||
@@ -89,6 +125,11 @@
|
|||||||
pill-width (/ fcc/flex-display-pill-width zoom)
|
pill-width (/ fcc/flex-display-pill-width zoom)
|
||||||
pill-height (/ fcc/flex-display-pill-height zoom)
|
pill-height (/ fcc/flex-display-pill-height zoom)
|
||||||
margins-selected (mf/deref refs/workspace-margins-selected)
|
margins-selected (mf/deref refs/workspace-margins-selected)
|
||||||
|
current-modifiers (mf/use-state nil)
|
||||||
|
|
||||||
|
shape
|
||||||
|
(ctm/apply-structure-modifiers shape (dm/get-in @current-modifiers [shape-id :modifiers]))
|
||||||
|
|
||||||
hover-value (mf/use-state 0)
|
hover-value (mf/use-state 0)
|
||||||
mouse-pos (mf/use-state nil)
|
mouse-pos (mf/use-state nil)
|
||||||
hover (mf/use-state nil)
|
hover (mf/use-state nil)
|
||||||
@@ -97,50 +138,67 @@
|
|||||||
hover-h? (and (or (= @hover :m2) (= @hover :m4)) shift?)
|
hover-h? (and (or (= @hover :m2) (= @hover :m4)) shift?)
|
||||||
margin (:layout-item-margin shape)
|
margin (:layout-item-margin shape)
|
||||||
{:keys [width height x1 x2 y1 y2]} (:selrect shape)
|
{:keys [width height x1 x2 y1 y2]} (:selrect shape)
|
||||||
on-pointer-enter (fn [hover-type val]
|
|
||||||
(reset! hover hover-type)
|
on-pointer-enter
|
||||||
(reset! hover-value val))
|
(mf/use-fn
|
||||||
on-pointer-leave #(reset! hover nil)
|
(fn [hover-type val]
|
||||||
hover? #(or hover-all?
|
(reset! hover hover-type)
|
||||||
(and (or (= % :m1) (= % :m3)) hover-v?)
|
(reset! hover-value val)))
|
||||||
(and (or (= % :m2) (= % :m4)) hover-h?)
|
|
||||||
(= @hover %))
|
on-pointer-leave
|
||||||
margin-display-data {:m1 {:key (str shape-id "-m1")
|
(mf/use-fn
|
||||||
:x x1
|
(fn []
|
||||||
:y (if (:flip-y frame) y2 (- y1 (:m1 margin)))
|
(reset! hover nil)))
|
||||||
:width width
|
|
||||||
:height (:m1 margin)
|
on-change
|
||||||
:initial-value (:m1 margin)
|
(mf/use-fn
|
||||||
:resize-type :top
|
(fn [modifiers]
|
||||||
:resize-axis :y
|
(reset! current-modifiers modifiers)))
|
||||||
:resize-negate? (:flip-y frame)}
|
|
||||||
:m2 {:key (str shape-id "-m2")
|
hover?
|
||||||
:x (if (:flip-x frame) (- x1 (:m2 margin)) x2)
|
(fn [value]
|
||||||
:y y1
|
(or hover-all?
|
||||||
:width (:m2 margin)
|
(and (or (= value :m1) (= value :m3)) hover-v?)
|
||||||
:height height
|
(and (or (= value :m2) (= value :m4)) hover-h?)
|
||||||
:initial-value (:m2 margin)
|
(= @hover value)))
|
||||||
:resize-type :left
|
|
||||||
:resize-axis :x
|
margin-display-data
|
||||||
:resize-negate? (:flip-x frame)}
|
{:m1 {:key (str shape-id "-m1")
|
||||||
:m3 {:key (str shape-id "-m3")
|
:x x1
|
||||||
:x x1
|
:y (if (:flip-y frame) y2 (- y1 (:m1 margin)))
|
||||||
:y (if (:flip-y frame) (- y1 (:m3 margin)) y2)
|
:width width
|
||||||
:width width
|
:height (:m1 margin)
|
||||||
:height (:m3 margin)
|
:initial-value (:m1 margin)
|
||||||
:initial-value (:m3 margin)
|
:resize-type :top
|
||||||
:resize-type :top
|
:resize-axis :y
|
||||||
:resize-axis :y
|
:resize-negate? (:flip-y frame)}
|
||||||
:resize-negate? (:flip-y frame)}
|
:m2 {:key (str shape-id "-m2")
|
||||||
:m4 {:key (str shape-id "-m4")
|
:x (if (:flip-x frame) (- x1 (:m2 margin)) x2)
|
||||||
:x (if (:flip-x frame) x2 (- x1 (:m4 margin)))
|
:y y1
|
||||||
:y y1
|
:width (:m2 margin)
|
||||||
:width (:m4 margin)
|
:height height
|
||||||
:height height
|
:initial-value (:m2 margin)
|
||||||
:initial-value (:m4 margin)
|
:resize-type :left
|
||||||
:resize-type :left
|
:resize-axis :x
|
||||||
:resize-axis :x
|
:resize-negate? (:flip-x frame)}
|
||||||
:resize-negate? (:flip-x frame)}}]
|
:m3 {:key (str shape-id "-m3")
|
||||||
|
:x x1
|
||||||
|
:y (if (:flip-y frame) (- y1 (:m3 margin)) y2)
|
||||||
|
:width width
|
||||||
|
:height (:m3 margin)
|
||||||
|
:initial-value (:m3 margin)
|
||||||
|
:resize-type :top
|
||||||
|
:resize-axis :y
|
||||||
|
:resize-negate? (:flip-y frame)}
|
||||||
|
:m4 {:key (str shape-id "-m4")
|
||||||
|
:x (if (:flip-x frame) x2 (- x1 (:m4 margin)))
|
||||||
|
:y y1
|
||||||
|
:width (:m4 margin)
|
||||||
|
:height height
|
||||||
|
:initial-value (:m4 margin)
|
||||||
|
:resize-type :left
|
||||||
|
:resize-axis :x
|
||||||
|
:resize-negate? (:flip-x frame)}}]
|
||||||
|
|
||||||
[:g.margins {:pointer-events "visible"}
|
[:g.margins {:pointer-events "visible"}
|
||||||
(for [[margin-num rect-data] margin-display-data]
|
(for [[margin-num rect-data] margin-display-data]
|
||||||
@@ -155,6 +213,7 @@
|
|||||||
:margin margin
|
:margin margin
|
||||||
:on-pointer-enter (partial on-pointer-enter margin-num (get margin margin-num))
|
:on-pointer-enter (partial on-pointer-enter margin-num (get margin margin-num))
|
||||||
:on-pointer-leave on-pointer-leave
|
:on-pointer-leave on-pointer-leave
|
||||||
|
:on-change on-change
|
||||||
:rect-data rect-data
|
:rect-data rect-data
|
||||||
:hover? (hover? margin-num)
|
:hover? (hover? margin-num)
|
||||||
:selected? (get margins-selected margin-num)
|
:selected? (get margins-selected margin-num)
|
||||||
|
|||||||
@@ -6,9 +6,12 @@
|
|||||||
|
|
||||||
(ns app.main.ui.flex-controls.padding
|
(ns app.main.ui.flex-controls.padding
|
||||||
(:require
|
(:require
|
||||||
|
[app.common.data.macros :as dm]
|
||||||
[app.common.geom.point :as gpt]
|
[app.common.geom.point :as gpt]
|
||||||
[app.common.types.modifiers :as ctm]
|
[app.common.types.modifiers :as ctm]
|
||||||
[app.main.data.workspace.modifiers :as dwm]
|
[app.main.data.workspace.modifiers :as dwm]
|
||||||
|
[app.main.data.workspace.transforms :as dwt]
|
||||||
|
[app.main.features :as features]
|
||||||
[app.main.refs :as refs]
|
[app.main.refs :as refs]
|
||||||
[app.main.store :as st]
|
[app.main.store :as st]
|
||||||
[app.main.ui.css-cursors :as cur]
|
[app.main.ui.css-cursors :as cur]
|
||||||
@@ -18,11 +21,13 @@
|
|||||||
[rumext.v2 :as mf]))
|
[rumext.v2 :as mf]))
|
||||||
|
|
||||||
(mf/defc padding-display
|
(mf/defc padding-display
|
||||||
[{:keys [frame-id zoom hover-all? hover-v? hover-h? padding-num padding on-pointer-enter on-pointer-leave
|
[{:keys [frame-id zoom hover-all? hover-v? hover-h? padding-num padding on-pointer-enter
|
||||||
rect-data hover? selected? mouse-pos hover-value on-move-selected on-context-menu]}]
|
on-pointer-leave rect-data hover? selected? mouse-pos hover-value on-move-selected
|
||||||
|
on-context-menu on-change]}]
|
||||||
(let [resizing? (mf/use-var false)
|
(let [resizing? (mf/use-var false)
|
||||||
start (mf/use-var nil)
|
start (mf/use-var nil)
|
||||||
original-value (mf/use-var 0)
|
original-value (mf/use-var 0)
|
||||||
|
last-pos (mf/use-var nil)
|
||||||
negate? (true? (:resize-negate? rect-data))
|
negate? (true? (:resize-negate? rect-data))
|
||||||
axis (:resize-axis rect-data)
|
axis (:resize-axis rect-data)
|
||||||
|
|
||||||
@@ -35,41 +40,69 @@
|
|||||||
(reset! start (dom/get-client-position event))
|
(reset! start (dom/get-client-position event))
|
||||||
(reset! original-value (:initial-value rect-data))))
|
(reset! original-value (:initial-value rect-data))))
|
||||||
|
|
||||||
|
calc-modifiers
|
||||||
|
(mf/use-fn
|
||||||
|
(mf/deps frame-id padding-num padding hover-all? hover-v? hover-h?)
|
||||||
|
(fn [pos]
|
||||||
|
(let [delta
|
||||||
|
(-> (gpt/to-vec @start pos)
|
||||||
|
(cond-> negate? gpt/negate)
|
||||||
|
(get axis))
|
||||||
|
|
||||||
|
val
|
||||||
|
(int (max (+ @original-value (/ delta zoom)) 0))
|
||||||
|
|
||||||
|
layout-padding
|
||||||
|
(cond
|
||||||
|
hover-all? (assoc padding :p1 val :p2 val :p3 val :p4 val)
|
||||||
|
hover-v? (assoc padding :p1 val :p3 val)
|
||||||
|
hover-h? (assoc padding :p2 val :p4 val)
|
||||||
|
:else (assoc padding padding-num val))
|
||||||
|
|
||||||
|
|
||||||
|
layout-padding-type
|
||||||
|
(if (= (:p1 padding) (:p2 padding) (:p3 padding) (:p4 padding)) :simple :multiple)]
|
||||||
|
[val
|
||||||
|
(dwm/create-modif-tree
|
||||||
|
[frame-id]
|
||||||
|
(-> (ctm/empty)
|
||||||
|
(ctm/change-property :layout-padding layout-padding)
|
||||||
|
(ctm/change-property :layout-padding-type layout-padding-type)))])))
|
||||||
|
|
||||||
on-lost-pointer-capture
|
on-lost-pointer-capture
|
||||||
(mf/use-fn
|
(mf/use-fn
|
||||||
(mf/deps frame-id padding-num padding)
|
(mf/deps calc-modifiers)
|
||||||
(fn [event]
|
(fn [event]
|
||||||
(dom/release-pointer event)
|
(dom/release-pointer event)
|
||||||
|
|
||||||
|
(when (features/active-feature? @st/state "render-wasm/v1")
|
||||||
|
(let [[_ modifiers] (calc-modifiers @last-pos)]
|
||||||
|
(st/emit! (dwm/apply-wasm-modifiers modifiers)
|
||||||
|
(dwt/finish-transform))))
|
||||||
|
|
||||||
(reset! resizing? false)
|
(reset! resizing? false)
|
||||||
(reset! start nil)
|
(reset! start nil)
|
||||||
(reset! original-value 0)
|
(reset! original-value 0)
|
||||||
(st/emit! (dwm/apply-modifiers))))
|
|
||||||
|
(when (not (features/active-feature? @st/state "render-wasm/v1"))
|
||||||
|
(st/emit! (dwm/apply-modifiers)))))
|
||||||
|
|
||||||
on-pointer-move
|
on-pointer-move
|
||||||
(mf/use-fn
|
(mf/use-fn
|
||||||
(mf/deps frame-id padding-num padding hover-all? hover-v? hover-h?)
|
(mf/deps calc-modifiers on-change)
|
||||||
(fn [event]
|
(fn [event]
|
||||||
(let [pos (dom/get-client-position event)]
|
(let [pos (dom/get-client-position event)]
|
||||||
(reset! mouse-pos (point->viewport pos))
|
(reset! mouse-pos (point->viewport pos))
|
||||||
|
(reset! last-pos pos)
|
||||||
(when @resizing?
|
(when @resizing?
|
||||||
(let [delta (-> (gpt/to-vec @start pos)
|
(let [[val modifiers] (calc-modifiers pos)]
|
||||||
(cond-> negate? gpt/negate)
|
|
||||||
(get axis))
|
|
||||||
val (int (max (+ @original-value (/ delta zoom)) 0))
|
|
||||||
layout-padding (cond
|
|
||||||
hover-all? (assoc padding :p1 val :p2 val :p3 val :p4 val)
|
|
||||||
hover-v? (assoc padding :p1 val :p3 val)
|
|
||||||
hover-h? (assoc padding :p2 val :p4 val)
|
|
||||||
:else (assoc padding padding-num val))
|
|
||||||
|
|
||||||
|
|
||||||
layout-padding-type (if (= (:p1 padding) (:p2 padding) (:p3 padding) (:p4 padding)) :simple :multiple)
|
|
||||||
modifiers (dwm/create-modif-tree [frame-id]
|
|
||||||
(-> (ctm/empty)
|
|
||||||
(ctm/change-property :layout-padding layout-padding)
|
|
||||||
(ctm/change-property :layout-padding-type layout-padding-type)))]
|
|
||||||
(reset! hover-value val)
|
(reset! hover-value val)
|
||||||
(st/emit! (dwm/set-modifiers modifiers)))))))]
|
(if (features/active-feature? @st/state "render-wasm/v1")
|
||||||
|
(st/emit! (dwm/set-wasm-modifiers modifiers))
|
||||||
|
(st/emit! (dwm/set-modifiers modifiers)))
|
||||||
|
|
||||||
|
(when on-change
|
||||||
|
(on-change modifiers)))))))]
|
||||||
|
|
||||||
[:g.padding-rect
|
[:g.padding-rect
|
||||||
[:rect.info-area
|
[:rect.info-area
|
||||||
@@ -105,77 +138,108 @@
|
|||||||
:on-lost-pointer-capture on-lost-pointer-capture
|
:on-lost-pointer-capture on-lost-pointer-capture
|
||||||
:on-pointer-move on-pointer-move
|
:on-pointer-move on-pointer-move
|
||||||
:on-context-menu on-context-menu
|
:on-context-menu on-context-menu
|
||||||
:class (when (or hover? selected?)
|
:class
|
||||||
(if (= (:resize-axis rect-data) :x) (cur/get-dynamic "resize-ew" 0) (cur/get-dynamic "resize-ew" 90)))
|
(when (or hover? selected?)
|
||||||
:style {:fill (if (or hover? selected?) fcc/distance-color "none")
|
(if (= (:resize-axis rect-data) :x)
|
||||||
:opacity (if selected? 0 1)}}])]))
|
(cur/get-dynamic "resize-ew" 0)
|
||||||
|
(cur/get-dynamic "resize-ew" 90)))
|
||||||
|
|
||||||
|
:style
|
||||||
|
{:fill (if (or hover? selected?) fcc/distance-color "none")
|
||||||
|
:opacity (if selected? 0 1)}}])]))
|
||||||
|
|
||||||
(mf/defc padding-rects
|
(mf/defc padding-rects
|
||||||
[{:keys [frame zoom alt? shift? on-move-selected on-context-menu]}]
|
[{:keys [frame zoom alt? shift? on-move-selected on-context-menu]}]
|
||||||
(let [frame-id (:id frame)
|
(let [frame-id (:id frame)
|
||||||
paddings-selected (mf/deref refs/workspace-paddings-selected)
|
paddings-selected (mf/deref refs/workspace-paddings-selected)
|
||||||
|
current-modifiers (mf/use-state nil)
|
||||||
|
|
||||||
|
frame
|
||||||
|
(ctm/apply-structure-modifiers frame (dm/get-in @current-modifiers [frame-id :modifiers]))
|
||||||
|
|
||||||
hover-value (mf/use-state 0)
|
hover-value (mf/use-state 0)
|
||||||
mouse-pos (mf/use-state nil)
|
mouse-pos (mf/use-state nil)
|
||||||
hover (mf/use-state nil)
|
hover (mf/use-state nil)
|
||||||
|
|
||||||
hover-all? (and (not (nil? @hover)) alt?)
|
hover-all? (and (not (nil? @hover)) alt?)
|
||||||
hover-v? (and (or (= @hover :p1) (= @hover :p3)) shift?)
|
hover-v? (and (or (= @hover :p1) (= @hover :p3)) shift?)
|
||||||
hover-h? (and (or (= @hover :p2) (= @hover :p4)) shift?)
|
hover-h? (and (or (= @hover :p2) (= @hover :p4)) shift?)
|
||||||
padding (:layout-padding frame)
|
padding (:layout-padding frame)
|
||||||
{:keys [width height x1 x2 y1 y2]} (:selrect frame)
|
{:keys [width height x1 x2 y1 y2]} (:selrect frame)
|
||||||
on-pointer-enter (fn [hover-type val]
|
|
||||||
(reset! hover hover-type)
|
|
||||||
(reset! hover-value val))
|
|
||||||
on-pointer-leave #(reset! hover nil)
|
|
||||||
pill-width (/ fcc/flex-display-pill-width zoom)
|
pill-width (/ fcc/flex-display-pill-width zoom)
|
||||||
pill-height (/ fcc/flex-display-pill-height zoom)
|
pill-height (/ fcc/flex-display-pill-height zoom)
|
||||||
hover? #(or hover-all?
|
|
||||||
(and (or (= % :p1) (= % :p3)) hover-v?)
|
|
||||||
(and (or (= % :p2) (= % :p4)) hover-h?)
|
|
||||||
(= @hover %))
|
|
||||||
negate {:p1 (if (:flip-y frame) true false)
|
|
||||||
:p2 (if (:flip-x frame) true false)
|
|
||||||
:p3 (if (:flip-y frame) true false)
|
|
||||||
:p4 (if (:flip-x frame) true false)}
|
|
||||||
negate (cond-> negate
|
|
||||||
(not= :auto (:layout-item-h-sizing frame)) (assoc :p2 (not (:p2 negate)))
|
|
||||||
(not= :auto (:layout-item-v-sizing frame)) (assoc :p3 (not (:p3 negate))))
|
|
||||||
|
|
||||||
padding-rect-data {:p1 {:key (str frame-id "-p1")
|
negate
|
||||||
:x x1
|
{:p1 (if (:flip-y frame) true false)
|
||||||
:y (if (:flip-y frame) (- y2 (:p1 padding)) y1)
|
:p2 (if (:flip-x frame) true false)
|
||||||
:width width
|
:p3 (if (:flip-y frame) true false)
|
||||||
:height (:p1 padding)
|
:p4 (if (:flip-x frame) true false)}
|
||||||
:initial-value (:p1 padding)
|
|
||||||
:resize-type (if (:flip-y frame) :bottom :top)
|
negate
|
||||||
:resize-axis :y
|
(cond-> negate
|
||||||
:resize-negate? (:p1 negate)}
|
(not= :auto (:layout-item-h-sizing frame)) (assoc :p2 (not (:p2 negate)))
|
||||||
:p2 {:key (str frame-id "-p2")
|
(not= :auto (:layout-item-v-sizing frame)) (assoc :p3 (not (:p3 negate))))
|
||||||
:x (if (:flip-x frame) x1 (- x2 (:p2 padding)))
|
|
||||||
:y y1
|
padding-rect-data
|
||||||
:width (:p2 padding)
|
{:p1 {:key (str frame-id "-p1")
|
||||||
:height height
|
:x x1
|
||||||
:initial-value (:p2 padding)
|
:y (if (:flip-y frame) (- y2 (:p1 padding)) y1)
|
||||||
:resize-type :left
|
:width width
|
||||||
:resize-axis :x
|
:height (:p1 padding)
|
||||||
:resize-negate? (:p2 negate)}
|
:initial-value (:p1 padding)
|
||||||
:p3 {:key (str frame-id "-p3")
|
:resize-type (if (:flip-y frame) :bottom :top)
|
||||||
:x x1
|
:resize-axis :y
|
||||||
:y (if (:flip-y frame) y1 (- y2 (:p3 padding)))
|
:resize-negate? (:p1 negate)}
|
||||||
:width width
|
:p2 {:key (str frame-id "-p2")
|
||||||
:height (:p3 padding)
|
:x (if (:flip-x frame) x1 (- x2 (:p2 padding)))
|
||||||
:initial-value (:p3 padding)
|
:y y1
|
||||||
:resize-type :bottom
|
:width (:p2 padding)
|
||||||
:resize-axis :y
|
:height height
|
||||||
:resize-negate? (:p3 negate)}
|
:initial-value (:p2 padding)
|
||||||
:p4 {:key (str frame-id "-p4")
|
:resize-type :left
|
||||||
:x (if (:flip-x frame) (- x2 (:p4 padding)) x1)
|
:resize-axis :x
|
||||||
:y y1
|
:resize-negate? (:p2 negate)}
|
||||||
:width (:p4 padding)
|
:p3 {:key (str frame-id "-p3")
|
||||||
:height height
|
:x x1
|
||||||
:initial-value (:p4 padding)
|
:y (if (:flip-y frame) y1 (- y2 (:p3 padding)))
|
||||||
:resize-type (if (:flip-x frame) :right :left)
|
:width width
|
||||||
:resize-axis :x
|
:height (:p3 padding)
|
||||||
:resize-negate? (:p4 negate)}}]
|
:initial-value (:p3 padding)
|
||||||
|
:resize-type :bottom
|
||||||
|
:resize-axis :y
|
||||||
|
:resize-negate? (:p3 negate)}
|
||||||
|
:p4 {:key (str frame-id "-p4")
|
||||||
|
:x (if (:flip-x frame) (- x2 (:p4 padding)) x1)
|
||||||
|
:y y1
|
||||||
|
:width (:p4 padding)
|
||||||
|
:height height
|
||||||
|
:initial-value (:p4 padding)
|
||||||
|
:resize-type (if (:flip-x frame) :right :left)
|
||||||
|
:resize-axis :x
|
||||||
|
:resize-negate? (:p4 negate)}}
|
||||||
|
|
||||||
|
on-pointer-enter
|
||||||
|
(mf/use-fn
|
||||||
|
(fn [hover-type val]
|
||||||
|
(reset! hover hover-type)
|
||||||
|
(reset! hover-value val)))
|
||||||
|
|
||||||
|
on-pointer-leave
|
||||||
|
(mf/use-fn
|
||||||
|
(fn []
|
||||||
|
(reset! hover nil)))
|
||||||
|
|
||||||
|
on-change
|
||||||
|
(mf/use-fn
|
||||||
|
(fn [modifiers]
|
||||||
|
(reset! current-modifiers modifiers)))
|
||||||
|
|
||||||
|
hover?
|
||||||
|
(fn [value]
|
||||||
|
(or hover-all?
|
||||||
|
(and (or (= value :p1) (= value :p3)) hover-v?)
|
||||||
|
(and (or (= value :p2) (= value :p4)) hover-h?)
|
||||||
|
(= @hover value)))]
|
||||||
|
|
||||||
[:g.paddings {:pointer-events "visible"}
|
[:g.paddings {:pointer-events "visible"}
|
||||||
(for [[padding-num rect-data] padding-rect-data]
|
(for [[padding-num rect-data] padding-rect-data]
|
||||||
@@ -194,9 +258,11 @@
|
|||||||
:on-pointer-leave on-pointer-leave
|
:on-pointer-leave on-pointer-leave
|
||||||
:on-move-selected on-move-selected
|
:on-move-selected on-move-selected
|
||||||
:on-context-menu on-context-menu
|
:on-context-menu on-context-menu
|
||||||
|
:on-change on-change
|
||||||
:hover? (hover? padding-num)
|
:hover? (hover? padding-num)
|
||||||
:selected? (get paddings-selected padding-num)
|
:selected? (get paddings-selected padding-num)
|
||||||
:rect-data rect-data}])
|
:rect-data rect-data}])
|
||||||
|
|
||||||
(when @hover
|
(when @hover
|
||||||
[:& fcc/flex-display-pill
|
[:& fcc/flex-display-pill
|
||||||
{:height pill-height
|
{:height pill-height
|
||||||
|
|||||||
@@ -28,6 +28,7 @@
|
|||||||
{::mf/wrap-props false}
|
{::mf/wrap-props false}
|
||||||
[props]
|
[props]
|
||||||
(let [{:keys [position-data content] :as shape} (obj/get props "shape")
|
(let [{:keys [position-data content] :as shape} (obj/get props "shape")
|
||||||
|
is-render? (mf/use-ctx ctx/is-render?)
|
||||||
is-component? (mf/use-ctx ctx/is-component?)]
|
is-component? (mf/use-ctx ctx/is-component?)]
|
||||||
|
|
||||||
(mf/with-memo [content]
|
(mf/with-memo [content]
|
||||||
@@ -41,5 +42,5 @@
|
|||||||
;; Only use this for component preview, otherwise the dashboard thumbnails
|
;; Only use this for component preview, otherwise the dashboard thumbnails
|
||||||
;; will give a tainted canvas error because the `foreignObject` cannot be
|
;; will give a tainted canvas error because the `foreignObject` cannot be
|
||||||
;; rendered.
|
;; rendered.
|
||||||
(and (nil? position-data) is-component?)
|
(and (nil? position-data) (or is-component? is-render?))
|
||||||
[:> fo/text-shape props])))
|
[:> fo/text-shape props])))
|
||||||
|
|||||||
@@ -12,18 +12,20 @@
|
|||||||
[app.main.features :as features]
|
[app.main.features :as features]
|
||||||
[app.main.refs :as refs]
|
[app.main.refs :as refs]
|
||||||
[app.main.store :as st]
|
[app.main.store :as st]
|
||||||
|
[app.render-wasm.api :as wasm.api]
|
||||||
[rumext.v2 :as mf]))
|
[rumext.v2 :as mf]))
|
||||||
|
|
||||||
(mf/defc text-edition-outline
|
(mf/defc text-edition-outline
|
||||||
[{:keys [shape zoom modifiers]}]
|
[{:keys [shape zoom modifiers]}]
|
||||||
(if (features/active-feature? @st/state "render-wasm/v1")
|
(if (features/active-feature? @st/state "render-wasm/v1")
|
||||||
(let [selrect-transform (mf/deref refs/workspace-selrect)
|
(let [{:keys [width height]} (wasm.api/get-text-dimensions (:id shape))
|
||||||
[{:keys [x y width height]} transform] (dsh/get-selrect selrect-transform shape)]
|
selrect-transform (mf/deref refs/workspace-selrect)
|
||||||
|
[selrect transform] (dsh/get-selrect selrect-transform shape)]
|
||||||
[:rect.main.viewport-selrect
|
[:rect.main.viewport-selrect
|
||||||
{:x x
|
{:x (:x selrect)
|
||||||
:y y
|
:y (:y selrect)
|
||||||
:width width
|
:width (max width (:width selrect))
|
||||||
:height height
|
:height (max height (:height selrect))
|
||||||
:transform transform
|
:transform transform
|
||||||
:style {:stroke "var(--color-accent-tertiary)"
|
:style {:stroke "var(--color-accent-tertiary)"
|
||||||
:stroke-width (/ 1 zoom)
|
:stroke-width (/ 1 zoom)
|
||||||
|
|||||||
@@ -320,10 +320,12 @@
|
|||||||
|
|
||||||
[{:keys [x y width height]} transform]
|
[{:keys [x y width height]} transform]
|
||||||
(if render-wasm?
|
(if render-wasm?
|
||||||
(let [{:keys [height]} (wasm.api/get-text-dimensions shape-id)
|
(let [{:keys [width height]} (wasm.api/get-text-dimensions shape-id)
|
||||||
selrect-transform (mf/deref refs/workspace-selrect)
|
selrect-transform (mf/deref refs/workspace-selrect)
|
||||||
[selrect transform] (dsh/get-selrect selrect-transform shape)
|
[selrect transform] (dsh/get-selrect selrect-transform shape)
|
||||||
selrect-height (:height selrect)
|
selrect-height (:height selrect)
|
||||||
|
selrect-width (:width selrect)
|
||||||
|
max-width (max width selrect-width)
|
||||||
max-height (max height selrect-height)
|
max-height (max height selrect-height)
|
||||||
valign (-> shape :content :vertical-align)
|
valign (-> shape :content :vertical-align)
|
||||||
y (:y selrect)
|
y (:y selrect)
|
||||||
@@ -333,7 +335,7 @@
|
|||||||
"center" (- y (/ (- height selrect-height) 2))
|
"center" (- y (/ (- height selrect-height) 2))
|
||||||
"top" y)
|
"top" y)
|
||||||
y)]
|
y)]
|
||||||
[(assoc selrect :y y :width (:width selrect) :height max-height) transform])
|
[(assoc selrect :y y :width max-width :height max-height) transform])
|
||||||
|
|
||||||
(let [bounds (gst/shape->rect shape)
|
(let [bounds (gst/shape->rect shape)
|
||||||
x (mth/min (dm/get-prop bounds :x)
|
x (mth/min (dm/get-prop bounds :x)
|
||||||
@@ -352,7 +354,7 @@
|
|||||||
(obj/merge!
|
(obj/merge!
|
||||||
#js {"--editor-container-width" (dm/str width "px")
|
#js {"--editor-container-width" (dm/str width "px")
|
||||||
"--editor-container-height" (dm/str height "px")
|
"--editor-container-height" (dm/str height "px")
|
||||||
"--fallback-families" (dm/str (str/join ", " fallback-families))})
|
"--fallback-families" (if (seq fallback-families) (dm/str (str/join ", " fallback-families)) "sourcesanspro")})
|
||||||
|
|
||||||
(not render-wasm?)
|
(not render-wasm?)
|
||||||
(obj/merge!
|
(obj/merge!
|
||||||
|
|||||||
@@ -379,6 +379,7 @@
|
|||||||
:step 0.1
|
:step 0.1
|
||||||
:default-value "1.2"
|
:default-value "1.2"
|
||||||
:class (stl/css :line-height-input)
|
:class (stl/css :line-height-input)
|
||||||
|
:aria-label (tr "inspect.attributes.typography.line-height")
|
||||||
:value (attr->string line-height)
|
:value (attr->string line-height)
|
||||||
:placeholder (if (= :multiple line-height) (tr "settings.multiple") "--")
|
:placeholder (if (= :multiple line-height) (tr "settings.multiple") "--")
|
||||||
:nillable (= :multiple line-height)
|
:nillable (= :multiple line-height)
|
||||||
@@ -397,6 +398,7 @@
|
|||||||
:step 0.1
|
:step 0.1
|
||||||
:default-value "0"
|
:default-value "0"
|
||||||
:class (stl/css :letter-spacing-input)
|
:class (stl/css :letter-spacing-input)
|
||||||
|
:aria-label (tr "inspect.attributes.typography.letter-spacing")
|
||||||
:value (attr->string letter-spacing)
|
:value (attr->string letter-spacing)
|
||||||
:placeholder (if (= :multiple letter-spacing) (tr "settings.multiple") "--")
|
:placeholder (if (= :multiple letter-spacing) (tr "settings.multiple") "--")
|
||||||
:on-change #(handle-change % :letter-spacing)
|
:on-change #(handle-change % :letter-spacing)
|
||||||
|
|||||||
@@ -23,6 +23,7 @@
|
|||||||
[app.main.data.workspace.grid-layout.editor :as dwge]
|
[app.main.data.workspace.grid-layout.editor :as dwge]
|
||||||
[app.main.data.workspace.modifiers :as dwm]
|
[app.main.data.workspace.modifiers :as dwm]
|
||||||
[app.main.data.workspace.shape-layout :as dwsl]
|
[app.main.data.workspace.shape-layout :as dwsl]
|
||||||
|
[app.main.data.workspace.transforms :as dwt]
|
||||||
[app.main.features :as features]
|
[app.main.features :as features]
|
||||||
[app.main.refs :as refs]
|
[app.main.refs :as refs]
|
||||||
[app.main.store :as st]
|
[app.main.store :as st]
|
||||||
@@ -257,7 +258,8 @@
|
|||||||
(let [modifiers (calculate-drag-modifiers position)
|
(let [modifiers (calculate-drag-modifiers position)
|
||||||
modif-tree (dwm/create-modif-tree [(:id shape)] modifiers)]
|
modif-tree (dwm/create-modif-tree [(:id shape)] modifiers)]
|
||||||
(when on-clear-modifiers (on-clear-modifiers modifiers))
|
(when on-clear-modifiers (on-clear-modifiers modifiers))
|
||||||
(st/emit! (dwm/apply-wasm-modifiers modif-tree)))
|
(st/emit! (dwm/apply-wasm-modifiers modif-tree)
|
||||||
|
(dwt/finish-transform)))
|
||||||
(st/emit! (dwm/apply-modifiers)))))
|
(st/emit! (dwm/apply-modifiers)))))
|
||||||
|
|
||||||
{:keys [handle-pointer-down handle-lost-pointer-capture handle-pointer-move]}
|
{:keys [handle-pointer-down handle-lost-pointer-capture handle-pointer-move]}
|
||||||
@@ -506,7 +508,8 @@
|
|||||||
(let [modifiers (calculate-modifiers position)
|
(let [modifiers (calculate-modifiers position)
|
||||||
modif-tree (dwm/create-modif-tree [(:id shape)] modifiers)]
|
modif-tree (dwm/create-modif-tree [(:id shape)] modifiers)]
|
||||||
(when on-clear-modifiers (on-clear-modifiers))
|
(when on-clear-modifiers (on-clear-modifiers))
|
||||||
(st/emit! (dwm/apply-wasm-modifiers modif-tree)))
|
(st/emit! (dwm/apply-wasm-modifiers modif-tree)
|
||||||
|
(dwt/finish-transform)))
|
||||||
(st/emit! (dwm/apply-modifiers)))
|
(st/emit! (dwm/apply-modifiers)))
|
||||||
(reset! start-size-before nil)
|
(reset! start-size-before nil)
|
||||||
(reset! start-size-after nil)))]
|
(reset! start-size-after nil)))]
|
||||||
|
|||||||
@@ -54,15 +54,11 @@
|
|||||||
[app.util.debug :as dbg]
|
[app.util.debug :as dbg]
|
||||||
[app.util.text-editor :as ted]
|
[app.util.text-editor :as ted]
|
||||||
[beicon.v2.core :as rx]
|
[beicon.v2.core :as rx]
|
||||||
[okulary.core :as l]
|
|
||||||
[promesa.core :as p]
|
[promesa.core :as p]
|
||||||
[rumext.v2 :as mf]))
|
[rumext.v2 :as mf]))
|
||||||
|
|
||||||
;; --- Viewport
|
;; --- Viewport
|
||||||
|
|
||||||
(def workspace-wasm-modifiers
|
|
||||||
(l/derived :workspace-wasm-modifiers st/state))
|
|
||||||
|
|
||||||
(defn apply-modifiers-to-selected
|
(defn apply-modifiers-to-selected
|
||||||
[selected objects modifiers]
|
[selected objects modifiers]
|
||||||
(->> modifiers
|
(->> modifiers
|
||||||
@@ -98,7 +94,7 @@
|
|||||||
;; DEREFS
|
;; DEREFS
|
||||||
drawing (mf/deref refs/workspace-drawing)
|
drawing (mf/deref refs/workspace-drawing)
|
||||||
focus (mf/deref refs/workspace-focus-selected)
|
focus (mf/deref refs/workspace-focus-selected)
|
||||||
wasm-modifiers (mf/deref workspace-wasm-modifiers)
|
wasm-modifiers (mf/deref refs/workspace-wasm-modifiers)
|
||||||
|
|
||||||
workspace-editor-state (mf/deref refs/workspace-editor-state)
|
workspace-editor-state (mf/deref refs/workspace-editor-state)
|
||||||
|
|
||||||
|
|||||||
@@ -18,6 +18,7 @@
|
|||||||
[app.main.render :as render]
|
[app.main.render :as render]
|
||||||
[app.main.repo :as repo]
|
[app.main.repo :as repo]
|
||||||
[app.main.store :as st]
|
[app.main.store :as st]
|
||||||
|
[app.main.ui.context :as ctx]
|
||||||
[app.util.dom :as dom]
|
[app.util.dom :as dom]
|
||||||
[app.util.globals :as glob]
|
[app.util.globals :as glob]
|
||||||
[beicon.v2.core :as rx]
|
[beicon.v2.core :as rx]
|
||||||
@@ -76,11 +77,12 @@
|
|||||||
(mth/ceil height) "px")}))))
|
(mth/ceil height) "px")}))))
|
||||||
|
|
||||||
(when objects
|
(when objects
|
||||||
[:& render/object-svg
|
[:& (mf/provider ctx/is-render?) {:value true}
|
||||||
{:objects objects
|
[:& render/object-svg
|
||||||
:object-id object-id
|
{:objects objects
|
||||||
:embed embed
|
:object-id object-id
|
||||||
:skip-children skip-children}])))
|
:embed embed
|
||||||
|
:skip-children skip-children}]])))
|
||||||
|
|
||||||
(mf/defc objects-svg
|
(mf/defc objects-svg
|
||||||
{::mf/wrap-props false}
|
{::mf/wrap-props false}
|
||||||
@@ -88,12 +90,13 @@
|
|||||||
(when-let [objects (mf/deref ref:objects)]
|
(when-let [objects (mf/deref ref:objects)]
|
||||||
(for [object-id object-ids]
|
(for [object-id object-ids]
|
||||||
(let [objects (render/adapt-objects-for-shape objects object-id)]
|
(let [objects (render/adapt-objects-for-shape objects object-id)]
|
||||||
[:& render/object-svg
|
[:& (mf/provider ctx/is-render?) {:value true}
|
||||||
{:objects objects
|
[:& render/object-svg
|
||||||
:key (str object-id)
|
{:objects objects
|
||||||
:object-id object-id
|
:key (str object-id)
|
||||||
:embed embed
|
:object-id object-id
|
||||||
:skip-children skip-children}]))))
|
:embed embed
|
||||||
|
:skip-children skip-children}]]))))
|
||||||
|
|
||||||
(defn- fetch-objects-bundle
|
(defn- fetch-objects-bundle
|
||||||
[& {:keys [file-id page-id share-id object-id] :as options}]
|
[& {:keys [file-id page-id share-id object-id] :as options}]
|
||||||
|
|||||||
@@ -20,7 +20,6 @@
|
|||||||
[app.common.types.shape.layout :as ctl]
|
[app.common.types.shape.layout :as ctl]
|
||||||
[app.common.uuid :as uuid]
|
[app.common.uuid :as uuid]
|
||||||
[app.config :as cf]
|
[app.config :as cf]
|
||||||
[app.main.fonts :as fonts]
|
|
||||||
[app.main.refs :as refs]
|
[app.main.refs :as refs]
|
||||||
[app.main.render :as render]
|
[app.main.render :as render]
|
||||||
[app.main.store :as st]
|
[app.main.store :as st]
|
||||||
@@ -61,6 +60,9 @@
|
|||||||
|
|
||||||
(def ^:const MAX_BUFFER_CHUNK_SIZE (* 256 1024))
|
(def ^:const MAX_BUFFER_CHUNK_SIZE (* 256 1024))
|
||||||
|
|
||||||
|
(def ^:const DEBOUNCE_DELAY_MS 100)
|
||||||
|
(def ^:const THROTTLE_DELAY_MS 10)
|
||||||
|
|
||||||
(def dpr
|
(def dpr
|
||||||
(if use-dpr? (if (exists? js/window) js/window.devicePixelRatio 1.0) 1.0))
|
(if use-dpr? (if (exists? js/window) js/window.devicePixelRatio 1.0) 1.0))
|
||||||
|
|
||||||
@@ -829,7 +831,7 @@
|
|||||||
|
|
||||||
(set-shape-vertical-align (get content :vertical-align))
|
(set-shape-vertical-align (get content :vertical-align))
|
||||||
|
|
||||||
(let [fonts (fonts/get-content-fonts content)
|
(let [fonts (f/get-content-fonts content)
|
||||||
fallback-fonts (fonts-from-text-content content true)
|
fallback-fonts (fonts-from-text-content content true)
|
||||||
all-fonts (concat fonts fallback-fonts)
|
all-fonts (concat fonts fallback-fonts)
|
||||||
result (f/store-fonts shape-id all-fonts)]
|
result (f/store-fonts shape-id all-fonts)]
|
||||||
@@ -875,10 +877,10 @@
|
|||||||
(letfn [(do-render [ts]
|
(letfn [(do-render [ts]
|
||||||
(h/call wasm/internal-module "_set_view_end")
|
(h/call wasm/internal-module "_set_view_end")
|
||||||
(render ts))]
|
(render ts))]
|
||||||
(fns/debounce do-render 100)))
|
(fns/debounce do-render DEBOUNCE_DELAY_MS)))
|
||||||
|
|
||||||
(def render-pan
|
(def render-pan
|
||||||
(fns/throttle render 10))
|
(fns/throttle render THROTTLE_DELAY_MS))
|
||||||
|
|
||||||
(defn set-view-box
|
(defn set-view-box
|
||||||
[prev-zoom zoom vbox]
|
[prev-zoom zoom vbox]
|
||||||
@@ -1044,6 +1046,7 @@
|
|||||||
(process-pending shapes thumbnails full noop-fn
|
(process-pending shapes thumbnails full noop-fn
|
||||||
(fn []
|
(fn []
|
||||||
(when render-callback (render-callback))
|
(when render-callback (render-callback))
|
||||||
|
(render-finish)
|
||||||
(ug/dispatch! (ug/event "penpot:wasm:set-objects")))))))
|
(ug/dispatch! (ug/event "penpot:wasm:set-objects")))))))
|
||||||
|
|
||||||
(defn clear-focus-mode
|
(defn clear-focus-mode
|
||||||
@@ -1247,9 +1250,15 @@
|
|||||||
|
|
||||||
(defn clear-canvas
|
(defn clear-canvas
|
||||||
[]
|
[]
|
||||||
;; TODO: perform corresponding cleaning
|
(try
|
||||||
(set! wasm/context-initialized? false)
|
;; TODO: perform corresponding cleaning
|
||||||
(h/call wasm/internal-module "_clean_up"))
|
(set! wasm/context-initialized? false)
|
||||||
|
(h/call wasm/internal-module "_clean_up")
|
||||||
|
|
||||||
|
;; If this calls panics we don't want to crash. This happens sometimes
|
||||||
|
;; with hot-reload in develop
|
||||||
|
(catch :default error
|
||||||
|
(.error js/console error))))
|
||||||
|
|
||||||
(defn show-grid
|
(defn show-grid
|
||||||
[id]
|
[id]
|
||||||
@@ -1292,12 +1301,7 @@
|
|||||||
(mem/free)
|
(mem/free)
|
||||||
content))
|
content))
|
||||||
|
|
||||||
(defn- calculate-bool*
|
(defn calculate-bool*
|
||||||
[bool-type]
|
|
||||||
(-> (h/call wasm/internal-module "_calculate_bool" (sr/translate-bool-type bool-type))
|
|
||||||
(mem/->offset-32)))
|
|
||||||
|
|
||||||
(defn calculate-bool
|
|
||||||
[bool-type ids]
|
[bool-type ids]
|
||||||
(let [size (mem/get-alloc-size ids UUID-U8-SIZE)
|
(let [size (mem/get-alloc-size ids UUID-U8-SIZE)
|
||||||
heap (mem/get-heap-u32)
|
heap (mem/get-heap-u32)
|
||||||
@@ -1308,7 +1312,10 @@
|
|||||||
offset
|
offset
|
||||||
(rseq ids))
|
(rseq ids))
|
||||||
|
|
||||||
(let [offset (calculate-bool* bool-type)
|
(let [offset
|
||||||
|
(-> (h/call wasm/internal-module "_calculate_bool" (sr/translate-bool-type bool-type))
|
||||||
|
(mem/->offset-32))
|
||||||
|
|
||||||
length (aget heap offset)
|
length (aget heap offset)
|
||||||
data (mem/slice heap
|
data (mem/slice heap
|
||||||
(+ offset 1)
|
(+ offset 1)
|
||||||
@@ -1317,6 +1324,29 @@
|
|||||||
(mem/free)
|
(mem/free)
|
||||||
content)))
|
content)))
|
||||||
|
|
||||||
|
(defn calculate-bool
|
||||||
|
[shape objects]
|
||||||
|
|
||||||
|
;; We need to be able to calculate the boolean data but we cannot
|
||||||
|
;; depend on the serialization flow.
|
||||||
|
;; start_temp_object / end_temp_object create a new shapes_pool
|
||||||
|
;; temporary and then we serialize the objects needed to calculate the
|
||||||
|
;; boolean object.
|
||||||
|
;; After the content is returned we discard that temporary context
|
||||||
|
(h/call wasm/internal-module "_start_temp_objects")
|
||||||
|
|
||||||
|
(let [bool-type (get shape :bool-type)
|
||||||
|
ids (get shape :shapes)
|
||||||
|
all-children
|
||||||
|
(->> ids
|
||||||
|
(mapcat #(cfh/get-children-with-self objects %)))]
|
||||||
|
(h/call wasm/internal-module "_init_shapes_pool" (count all-children))
|
||||||
|
(run! (partial set-object objects) all-children)
|
||||||
|
|
||||||
|
(let [content (-> (calculate-bool* bool-type ids)
|
||||||
|
(path.impl/path-data))]
|
||||||
|
(h/call wasm/internal-module "_end_temp_objects")
|
||||||
|
content)))
|
||||||
|
|
||||||
(defn init-wasm-module
|
(defn init-wasm-module
|
||||||
[module]
|
[module]
|
||||||
|
|||||||
@@ -9,6 +9,7 @@
|
|||||||
[app.common.data :as d]
|
[app.common.data :as d]
|
||||||
[app.common.data.macros :as dm]
|
[app.common.data.macros :as dm]
|
||||||
[app.common.logging :as log]
|
[app.common.logging :as log]
|
||||||
|
[app.common.types.text :as txt]
|
||||||
[app.common.uuid :as uuid]
|
[app.common.uuid :as uuid]
|
||||||
[app.config :as cf]
|
[app.config :as cf]
|
||||||
[app.main.fonts :as fonts]
|
[app.main.fonts :as fonts]
|
||||||
@@ -49,10 +50,13 @@
|
|||||||
:builtin))
|
:builtin))
|
||||||
|
|
||||||
(defn- font-db-data
|
(defn- font-db-data
|
||||||
[font-id font-variant-id]
|
[font-id font-variant-id font-weight-fallback font-style-fallback]
|
||||||
(let [font (fonts/get-font-data font-id)
|
(let [font (fonts/get-font-data font-id)
|
||||||
|
closest-variant (fonts/find-closest-variant font font-weight-fallback font-style-fallback)
|
||||||
variant (fonts/get-variant font font-variant-id)]
|
variant (fonts/get-variant font font-variant-id)]
|
||||||
variant))
|
(if (or (nil? closest-variant) (= closest-variant variant))
|
||||||
|
variant
|
||||||
|
closest-variant)))
|
||||||
|
|
||||||
(defn- font-id->uuid [font-id]
|
(defn- font-id->uuid [font-id]
|
||||||
(case (font-backend font-id)
|
(case (font-backend font-id)
|
||||||
@@ -63,22 +67,22 @@
|
|||||||
:builtin
|
:builtin
|
||||||
uuid/zero))
|
uuid/zero))
|
||||||
|
|
||||||
(defn ^:private font-id->asset-id [font-id font-variant-id]
|
|
||||||
|
(defn ^:private font-id->asset-id [font-id font-variant-id font-weight font-style]
|
||||||
(case (font-backend font-id)
|
(case (font-backend font-id)
|
||||||
:google
|
:google
|
||||||
font-id
|
font-id
|
||||||
:custom
|
:custom
|
||||||
(let [font-uuid (custom-font-id->uuid font-id)
|
(let [font-uuid (custom-font-id->uuid font-id)
|
||||||
matching-font (d/seek (fn [[_ font]]
|
matching-font (some (fn [[_ font]]
|
||||||
(let [variant-id (or (:font-variant-id font) (dm/str (:font-style font) "-" (:font-weight font)))]
|
(and (= (:font-id font) font-uuid)
|
||||||
(and (= (:font-id font) font-uuid)
|
(= (str (:font-weight font)) (str font-weight))
|
||||||
(or (nil? font-variant-id)
|
font))
|
||||||
(= variant-id font-variant-id)))))
|
(seq @fonts))]
|
||||||
(seq @fonts))]
|
|
||||||
(when matching-font
|
(when matching-font
|
||||||
(:ttf-file-id (second matching-font))))
|
(:ttf-file-id matching-font)))
|
||||||
:builtin
|
:builtin
|
||||||
(let [variant (font-db-data font-id font-variant-id)]
|
(let [variant (font-db-data font-id font-variant-id font-weight font-style)]
|
||||||
(:ttf-url variant))))
|
(:ttf-url variant))))
|
||||||
|
|
||||||
(defn update-text-layout
|
(defn update-text-layout
|
||||||
@@ -100,6 +104,7 @@
|
|||||||
ptr (h/call wasm/internal-module "_alloc_bytes" size)
|
ptr (h/call wasm/internal-module "_alloc_bytes" size)
|
||||||
heap (gobj/get ^js wasm/internal-module "HEAPU8")
|
heap (gobj/get ^js wasm/internal-module "HEAPU8")
|
||||||
mem (js/Uint8Array. (.-buffer heap) ptr size)]
|
mem (js/Uint8Array. (.-buffer heap) ptr size)]
|
||||||
|
|
||||||
(.set mem (js/Uint8Array. font-array-buffer))
|
(.set mem (js/Uint8Array. font-array-buffer))
|
||||||
(h/call wasm/internal-module "_store_font"
|
(h/call wasm/internal-module "_store_font"
|
||||||
(aget shape-id-buffer 0)
|
(aget shape-id-buffer 0)
|
||||||
@@ -134,17 +139,17 @@
|
|||||||
(rx/empty))))})
|
(rx/empty))))})
|
||||||
|
|
||||||
(defn- google-font-ttf-url
|
(defn- google-font-ttf-url
|
||||||
[font-id font-variant-id]
|
[font-id font-variant-id font-weight font-style]
|
||||||
(let [variant (font-db-data font-id font-variant-id)]
|
(let [variant (font-db-data font-id font-variant-id font-weight font-style)]
|
||||||
(if-let [ttf-url (:ttf-url variant)]
|
(if-let [ttf-url (:ttf-url variant)]
|
||||||
(str/replace ttf-url "https://fonts.gstatic.com/s/" (u/join cf/public-uri "/internal/gfonts/font/"))
|
(str/replace ttf-url "https://fonts.gstatic.com/s/" (u/join cf/public-uri "/internal/gfonts/font/"))
|
||||||
nil)))
|
nil)))
|
||||||
|
|
||||||
(defn- font-id->ttf-url
|
(defn- font-id->ttf-url
|
||||||
[font-id asset-id font-variant-id]
|
[font-id asset-id font-variant-id font-weight font-style]
|
||||||
(case (font-backend font-id)
|
(case (font-backend font-id)
|
||||||
:google
|
:google
|
||||||
(google-font-ttf-url font-id font-variant-id)
|
(google-font-ttf-url font-id font-variant-id font-weight font-style)
|
||||||
:custom
|
:custom
|
||||||
(dm/str (u/join cf/public-uri "assets/by-id/" asset-id))
|
(dm/str (u/join cf/public-uri "assets/by-id/" asset-id))
|
||||||
:builtin
|
:builtin
|
||||||
@@ -153,7 +158,7 @@
|
|||||||
(defn- store-font-id
|
(defn- store-font-id
|
||||||
[shape-id font-data asset-id emoji? fallback?]
|
[shape-id font-data asset-id emoji? fallback?]
|
||||||
(when asset-id
|
(when asset-id
|
||||||
(let [uri (font-id->ttf-url (:font-id font-data) asset-id (:font-variant-id font-data))
|
(let [uri (font-id->ttf-url (:font-id font-data) asset-id (:font-variant-id font-data) (:weight font-data) (:style-name font-data))
|
||||||
id-buffer (uuid/get-u32 (:wasm-id font-data))
|
id-buffer (uuid/get-u32 (:wasm-id font-data))
|
||||||
font-data (assoc font-data :family-id-buffer id-buffer)
|
font-data (assoc font-data :family-id-buffer id-buffer)
|
||||||
font-stored? (not= 0 (h/call wasm/internal-module "_is_font_uploaded"
|
font-stored? (not= 0 (h/call wasm/internal-module "_is_font_uploaded"
|
||||||
@@ -187,6 +192,30 @@
|
|||||||
(catch :default _e
|
(catch :default _e
|
||||||
uuid/zero)))
|
uuid/zero)))
|
||||||
|
|
||||||
|
(defn normalize-span-font
|
||||||
|
[span paragraph]
|
||||||
|
(let [font-id (:font-id span)
|
||||||
|
font-variant-id (:font-variant-id span)
|
||||||
|
font-weight-fallback (or (:font-weight span) (:font-weight paragraph))
|
||||||
|
font-style-fallback (or (:font-style span) (:font-style paragraph))
|
||||||
|
font-data (font-db-data font-id font-variant-id font-weight-fallback font-style-fallback)]
|
||||||
|
(-> span
|
||||||
|
(assoc :font-variant-id (or (:id font-data) (:id font-data) font-variant-id)
|
||||||
|
:font-weight (or (:weight font-data) font-weight-fallback)
|
||||||
|
:font-style (or (:style font-data) font-style-fallback)))))
|
||||||
|
|
||||||
|
(defn normalize-paragraph-font
|
||||||
|
[paragraph]
|
||||||
|
(let [font-id (:font-id paragraph)
|
||||||
|
font-variant-id (:font-variant-id paragraph)
|
||||||
|
font-weight-fallback (:font-weight paragraph)
|
||||||
|
font-style-fallback (:font-style paragraph)
|
||||||
|
font-data (font-db-data font-id font-variant-id font-weight-fallback font-style-fallback)]
|
||||||
|
(-> paragraph
|
||||||
|
(assoc :font-variant-id (or (:id font-data) (:id font-data) font-variant-id)
|
||||||
|
:font-weight (or (:weight font-data) font-weight-fallback)
|
||||||
|
:font-style (or (:style font-data) font-style-fallback)))))
|
||||||
|
|
||||||
(defn serialize-font-size
|
(defn serialize-font-size
|
||||||
[font-size]
|
[font-size]
|
||||||
(cond
|
(cond
|
||||||
@@ -244,26 +273,41 @@
|
|||||||
(string? letter-spacing)
|
(string? letter-spacing)
|
||||||
(or (d/parse-double letter-spacing) default-letter-spacing)))
|
(or (d/parse-double letter-spacing) default-letter-spacing)))
|
||||||
|
|
||||||
|
|
||||||
|
(defn normalize-font-variant
|
||||||
|
[font-variant-id]
|
||||||
|
(if (or (nil? font-variant-id) (str/blank? font-variant-id))
|
||||||
|
"regular"
|
||||||
|
font-variant-id))
|
||||||
|
|
||||||
(defn store-font
|
(defn store-font
|
||||||
[shape-id font]
|
[shape-id font]
|
||||||
(let [font-id (get font :font-id)
|
(let [font-id (get font :font-id)
|
||||||
font-variant-id (get font :font-variant-id)
|
font-variant-id (get font :font-variant-id)
|
||||||
|
normalized-variant-id (when font-variant-id
|
||||||
|
(-> font-variant-id
|
||||||
|
(str/lower)
|
||||||
|
(str/replace #"\s+" "")))
|
||||||
|
font-weight-fallback (or (get font :font-weight) 400)
|
||||||
|
font-style-fallback (or (get font :font-style) "normal")
|
||||||
emoji? (get font :is-emoji false)
|
emoji? (get font :is-emoji false)
|
||||||
fallback? (get font :is-fallback false)
|
fallback? (get font :is-fallback false)
|
||||||
|
font-data (font-db-data font-id normalized-variant-id font-weight-fallback font-style-fallback)
|
||||||
wasm-id (font-id->uuid font-id)
|
wasm-id (font-id->uuid font-id)
|
||||||
raw-weight (or (:weight (font-db-data font-id font-variant-id)) 400)
|
raw-weight (or (:weight font-data) font-weight-fallback)
|
||||||
weight (serialize-font-weight raw-weight)
|
weight (serialize-font-weight raw-weight)
|
||||||
style (serialize-font-style (cond
|
style (cond
|
||||||
(str/includes? font-variant-id "italic") "italic"
|
(str/includes? (or normalized-variant-id "") "italic") "italic"
|
||||||
(str/includes? raw-weight "italic") "italic"
|
(str/includes? raw-weight "italic") "italic"
|
||||||
:else "normal"))
|
:else font-style-fallback)
|
||||||
asset-id (font-id->asset-id font-id font-variant-id)
|
variant-id (or (:id font-data) normalized-variant-id)
|
||||||
|
asset-id (font-id->asset-id font-id variant-id raw-weight style)
|
||||||
font-data {:wasm-id wasm-id
|
font-data {:wasm-id wasm-id
|
||||||
:font-id font-id
|
:font-id font-id
|
||||||
:font-variant-id font-variant-id
|
:font-variant-id variant-id
|
||||||
:style style
|
:style (serialize-font-style style)
|
||||||
|
:style-name style
|
||||||
:weight weight}]
|
:weight weight}]
|
||||||
|
|
||||||
(store-font-id shape-id font-data asset-id emoji? fallback?)))
|
(store-font-id shape-id font-data asset-id emoji? fallback?)))
|
||||||
|
|
||||||
;; FIXME: This is a temporary function to load the fallback fonts for the editor.
|
;; FIXME: This is a temporary function to load the fallback fonts for the editor.
|
||||||
@@ -273,6 +317,29 @@
|
|||||||
(doseq [font fonts]
|
(doseq [font fonts]
|
||||||
(fonts/ensure-loaded! (:font-id font) (:font-variant-id font))))
|
(fonts/ensure-loaded! (:font-id font) (:font-variant-id font))))
|
||||||
|
|
||||||
|
|
||||||
|
(defn get-content-fonts
|
||||||
|
"Extends from app.main.fonts/get-content-fonts. Extracts the fonts used by the content of a text shape, resolving the correct font variant info."
|
||||||
|
[content]
|
||||||
|
(let [paragraph-set (first (get content :children))
|
||||||
|
paragraphs (get paragraph-set :children)]
|
||||||
|
(->> paragraphs
|
||||||
|
(mapcat #(get % :children))
|
||||||
|
(filter txt/is-text-node?)
|
||||||
|
(reduce
|
||||||
|
(fn [result {:keys [font-id font-variant-id font-weight font-style] :as node}]
|
||||||
|
(let [resolved-font-id (or font-id (:font-id txt/default-typography))
|
||||||
|
resolved-variant-id (or font-variant-id (:font-variant-id txt/default-typography))
|
||||||
|
font-weight-fallback (or font-weight (:font-weight txt/default-typography) 400)
|
||||||
|
font-style-fallback (or font-style (:font-style txt/default-typography) "normal")
|
||||||
|
font-data (font-db-data resolved-font-id resolved-variant-id font-weight-fallback font-style-fallback)
|
||||||
|
font-ref {:font-id resolved-font-id
|
||||||
|
:font-variant-id (or (:id font-data) (:name font-data) resolved-variant-id)
|
||||||
|
:font-weight (or (:weight font-data) font-weight-fallback)
|
||||||
|
:font-style (or (:style font-data) font-style-fallback)}]
|
||||||
|
(conj result font-ref)))
|
||||||
|
#{}))))
|
||||||
|
|
||||||
(defn store-fonts
|
(defn store-fonts
|
||||||
[shape-id fonts]
|
[shape-id fonts]
|
||||||
(keep (fn [font] (store-font shape-id font)) fonts))
|
(keep (fn [font] (store-font shape-id font)) fonts))
|
||||||
|
|||||||
@@ -80,7 +80,7 @@
|
|||||||
font-size (f/serialize-font-size font-size)
|
font-size (f/serialize-font-size font-size)
|
||||||
|
|
||||||
line-height (f/serialize-line-height (get span :line-height) paragraph-line-height)
|
line-height (f/serialize-line-height (get span :line-height) paragraph-line-height)
|
||||||
letter-spacing (f/serialize-letter-spacing (get paragraph :letter-spacing))
|
letter-spacing (f/serialize-letter-spacing (get span :letter-spacing))
|
||||||
|
|
||||||
font-weight (get span :font-weight paragraph-font-weight)
|
font-weight (get span :font-weight paragraph-font-weight)
|
||||||
font-weight (f/serialize-font-weight font-weight)
|
font-weight (f/serialize-font-weight font-weight)
|
||||||
@@ -142,7 +142,9 @@
|
|||||||
;; buffer has the following format:
|
;; buffer has the following format:
|
||||||
;; [<num-spans> <paragraph_attributes> <spans_attributes> <text>]
|
;; [<num-spans> <paragraph_attributes> <spans_attributes> <text>]
|
||||||
[spans paragraph text]
|
[spans paragraph text]
|
||||||
(let [num-spans (count spans)
|
(let [normalized-paragraph (f/normalize-paragraph-font paragraph)
|
||||||
|
normalized-spans (map #(f/normalize-span-font % normalized-paragraph) spans)
|
||||||
|
num-spans (count normalized-spans)
|
||||||
fills-size (* types.fills.impl/FILL-U8-SIZE MAX-TEXT-FILLS)
|
fills-size (* types.fills.impl/FILL-U8-SIZE MAX-TEXT-FILLS)
|
||||||
metadata-size (+ PARAGRAPH-ATTR-U8-SIZE
|
metadata-size (+ PARAGRAPH-ATTR-U8-SIZE
|
||||||
(* num-spans (+ SPAN-ATTR-U8-SIZE fills-size)))
|
(* num-spans (+ SPAN-ATTR-U8-SIZE fills-size)))
|
||||||
@@ -157,8 +159,8 @@
|
|||||||
|
|
||||||
(-> offset
|
(-> offset
|
||||||
(mem/write-u32 dview num-spans)
|
(mem/write-u32 dview num-spans)
|
||||||
(write-paragraph dview paragraph)
|
(write-paragraph dview normalized-paragraph)
|
||||||
(write-spans dview spans paragraph)
|
(write-spans dview normalized-spans normalized-paragraph)
|
||||||
(mem/write-buffer heapu8 text-buffer))
|
(mem/write-buffer heapu8 text-buffer))
|
||||||
|
|
||||||
(h/call wasm/internal-module "_set_shape_text_content")))
|
(h/call wasm/internal-module "_set_shape_text_content")))
|
||||||
|
|||||||
@@ -291,7 +291,8 @@
|
|||||||
(api/set-grid-layout-data shape)
|
(api/set-grid-layout-data shape)
|
||||||
|
|
||||||
(ctl/flex-layout? shape)
|
(ctl/flex-layout? shape)
|
||||||
(api/set-flex-layout shape)))
|
(api/set-flex-layout shape))
|
||||||
|
(api/set-layout-child shape))
|
||||||
|
|
||||||
;; Property not in WASM
|
;; Property not in WASM
|
||||||
nil))))
|
nil))))
|
||||||
@@ -322,7 +323,7 @@
|
|||||||
(rx/subs! #(api/request-render "set-wasm-attrs"))))
|
(rx/subs! #(api/request-render "set-wasm-attrs"))))
|
||||||
|
|
||||||
;; `conj` empty set initialization
|
;; `conj` empty set initialization
|
||||||
(def conj* (fnil conj #{}))
|
(def conj* (fnil conj (d/ordered-set)))
|
||||||
|
|
||||||
(defn- impl-assoc
|
(defn- impl-assoc
|
||||||
[self k v]
|
[self k v]
|
||||||
|
|||||||
@@ -48,6 +48,9 @@
|
|||||||
"This function strips units from attr values and un-scapes font-family"
|
"This function strips units from attr values and un-scapes font-family"
|
||||||
[k v]
|
[k v]
|
||||||
(cond
|
(cond
|
||||||
|
(= v "mixed")
|
||||||
|
:multiple
|
||||||
|
|
||||||
(and (or (= k :font-size)
|
(and (or (= k :font-size)
|
||||||
(= k :letter-spacing))
|
(= k :letter-spacing))
|
||||||
(= (str/slice v -2) "px"))
|
(= (str/slice v -2) "px"))
|
||||||
|
|||||||
@@ -257,7 +257,7 @@
|
|||||||
(filter (if clip-children?
|
(filter (if clip-children?
|
||||||
(comp overlaps-parent? :clip-parents)
|
(comp overlaps-parent? :clip-parents)
|
||||||
(constantly true)))
|
(constantly true)))
|
||||||
(map :id))
|
(keep :id))
|
||||||
result)))
|
result)))
|
||||||
|
|
||||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||||
|
|||||||
@@ -26,6 +26,7 @@ import LayoutType from "./layout/LayoutType.js";
|
|||||||
* @typedef {Object} TextEditorOptions
|
* @typedef {Object} TextEditorOptions
|
||||||
* @property {CSSStyleDeclaration|Object.<string,*>} [styleDefaults]
|
* @property {CSSStyleDeclaration|Object.<string,*>} [styleDefaults]
|
||||||
* @property {SelectionControllerDebug} [debug]
|
* @property {SelectionControllerDebug} [debug]
|
||||||
|
* @property {boolean} [shouldUpdatePositionOnScroll=false]
|
||||||
* @property {boolean} [allowHTMLPaste=false]
|
* @property {boolean} [allowHTMLPaste=false]
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@@ -92,6 +93,21 @@ export class TextEditor extends EventTarget {
|
|||||||
*/
|
*/
|
||||||
#canvas = null;
|
#canvas = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Text editor options.
|
||||||
|
*
|
||||||
|
* @type {TextEditorOptions}
|
||||||
|
*/
|
||||||
|
#options = {};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A boolean indicating that this instance was
|
||||||
|
* disposed or not.
|
||||||
|
*
|
||||||
|
* @type {boolean}
|
||||||
|
*/
|
||||||
|
#isDisposed = false;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Constructor.
|
* Constructor.
|
||||||
*
|
*
|
||||||
@@ -101,9 +117,9 @@ export class TextEditor extends EventTarget {
|
|||||||
*/
|
*/
|
||||||
constructor(element, canvas, options) {
|
constructor(element, canvas, options) {
|
||||||
super();
|
super();
|
||||||
if (!(element instanceof HTMLElement))
|
if (!(element instanceof HTMLElement)) {
|
||||||
throw new TypeError("Invalid text editor element");
|
throw new TypeError("Invalid text editor element");
|
||||||
|
}
|
||||||
this.#element = element;
|
this.#element = element;
|
||||||
this.#canvas = canvas;
|
this.#canvas = canvas;
|
||||||
this.#events = {
|
this.#events = {
|
||||||
@@ -119,6 +135,7 @@ export class TextEditor extends EventTarget {
|
|||||||
keydown: this.#onKeyDown,
|
keydown: this.#onKeyDown,
|
||||||
};
|
};
|
||||||
this.#styleDefaults = options?.styleDefaults;
|
this.#styleDefaults = options?.styleDefaults;
|
||||||
|
this.#options = options;
|
||||||
this.#setup(options);
|
this.#setup(options);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -150,14 +167,18 @@ export class TextEditor extends EventTarget {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Setups the root element.
|
* Setups the root element.
|
||||||
|
*
|
||||||
|
* @param {TextEditorOptions} options
|
||||||
*/
|
*/
|
||||||
#setupRoot() {
|
#setupRoot(options) {
|
||||||
this.#root = createEmptyRoot(this.#styleDefaults);
|
this.#root = createEmptyRoot(this.#styleDefaults);
|
||||||
this.#element.appendChild(this.#root);
|
this.#element.appendChild(this.#root);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Setups event listeners.
|
* Setups event listeners.
|
||||||
|
*
|
||||||
|
* @param {TextEditorOptions} options
|
||||||
*/
|
*/
|
||||||
#setupListeners(options) {
|
#setupListeners(options) {
|
||||||
this.#changeController.addEventListener("change", this.#onChange);
|
this.#changeController.addEventListener("change", this.#onChange);
|
||||||
@@ -174,18 +195,61 @@ export class TextEditor extends EventTarget {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Setups the elements, the properties and the
|
* Disposes everything.
|
||||||
* initial content.
|
|
||||||
*/
|
*/
|
||||||
#setup(options) {
|
dispose() {
|
||||||
this.#setupElementProperties(options);
|
if (this.#isDisposed) {
|
||||||
this.#setupRoot(options);
|
return this;
|
||||||
|
}
|
||||||
|
this.#isDisposed = true;
|
||||||
|
|
||||||
|
// Dispose change controller.
|
||||||
|
this.#changeController.removeEventListener("change", this.#onChange);
|
||||||
|
this.#changeController.dispose();
|
||||||
|
this.#changeController = null;
|
||||||
|
|
||||||
|
// Disposes selection controller.
|
||||||
|
this.#selectionController.removeEventListener(
|
||||||
|
"stylechange",
|
||||||
|
this.#onStyleChange,
|
||||||
|
);
|
||||||
|
this.#selectionController.dispose();
|
||||||
|
this.#selectionController = null;
|
||||||
|
|
||||||
|
// Disposes the rest of event listeners.
|
||||||
|
removeEventListeners(this.#element, this.#events);
|
||||||
|
if (this.#options.shouldUpdatePositionOnScroll) {
|
||||||
|
window.removeEventListener("scroll", this.#onScroll);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Disposes references to DOM elements.
|
||||||
|
this.#element = null;
|
||||||
|
this.#root = null;
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Setups controllers.
|
||||||
|
*
|
||||||
|
* @param {TextEditorOptions} options
|
||||||
|
*/
|
||||||
|
#setupControllers(options) {
|
||||||
this.#changeController = new ChangeController(this);
|
this.#changeController = new ChangeController(this);
|
||||||
this.#selectionController = new SelectionController(
|
this.#selectionController = new SelectionController(
|
||||||
this,
|
this,
|
||||||
document.getSelection(),
|
document.getSelection(),
|
||||||
options,
|
options,
|
||||||
);
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Setups the elements, the properties and the
|
||||||
|
* initial content.
|
||||||
|
*/
|
||||||
|
#setup(options) {
|
||||||
|
this.#setupElementProperties(options);
|
||||||
|
this.#setupRoot(options);
|
||||||
|
this.#setupControllers(options);
|
||||||
this.#setupListeners(options);
|
this.#setupListeners(options);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -242,7 +306,9 @@ export class TextEditor extends EventTarget {
|
|||||||
* @param {CustomEvent} e
|
* @param {CustomEvent} e
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
#onChange = (e) => this.dispatchEvent(new e.constructor(e.type, e));
|
#onChange = (e) => {
|
||||||
|
this.dispatchEvent(new e.constructor(e.type, e));
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Dispatchs a `stylechange` event.
|
* Dispatchs a `stylechange` event.
|
||||||
@@ -421,6 +487,15 @@ export class TextEditor extends EventTarget {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Indicates that the TextEditor was disposed.
|
||||||
|
*
|
||||||
|
* @type {boolean}
|
||||||
|
*/
|
||||||
|
get isDisposed() {
|
||||||
|
return this.#isDisposed;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Root element that contains all the paragraphs.
|
* Root element that contains all the paragraphs.
|
||||||
*
|
*
|
||||||
@@ -478,6 +553,15 @@ export class TextEditor extends EventTarget {
|
|||||||
return this.#selectionController.currentStyle;
|
return this.#selectionController.currentStyle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Text editor options
|
||||||
|
*
|
||||||
|
* @type {TextEditorOptions}
|
||||||
|
*/
|
||||||
|
get options() {
|
||||||
|
return this.#options;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Focus the element
|
* Focus the element
|
||||||
*/
|
*/
|
||||||
@@ -540,7 +624,8 @@ export class TextEditor extends EventTarget {
|
|||||||
* Applies the current styles to the selection or
|
* Applies the current styles to the selection or
|
||||||
* the current DOM node at the caret.
|
* the current DOM node at the caret.
|
||||||
*
|
*
|
||||||
* @param {*} styles
|
* @param {Object.<string, *>} styles
|
||||||
|
* @returns {TextEditor}
|
||||||
*/
|
*/
|
||||||
applyStylesToSelection(styles) {
|
applyStylesToSelection(styles) {
|
||||||
this.#selectionController.startMutation();
|
this.#selectionController.startMutation();
|
||||||
@@ -553,6 +638,8 @@ export class TextEditor extends EventTarget {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Selects all content.
|
* Selects all content.
|
||||||
|
*
|
||||||
|
* @returns {TextEditor}
|
||||||
*/
|
*/
|
||||||
selectAll() {
|
selectAll() {
|
||||||
this.#selectionController.selectAll();
|
this.#selectionController.selectAll();
|
||||||
@@ -562,30 +649,12 @@ export class TextEditor extends EventTarget {
|
|||||||
/**
|
/**
|
||||||
* Moves cursor to end.
|
* Moves cursor to end.
|
||||||
*
|
*
|
||||||
* @returns
|
* @returns {TextEditor}
|
||||||
*/
|
*/
|
||||||
cursorToEnd() {
|
cursorToEnd() {
|
||||||
this.#selectionController.cursorToEnd();
|
this.#selectionController.cursorToEnd();
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Disposes everything.
|
|
||||||
*/
|
|
||||||
dispose() {
|
|
||||||
this.#changeController.removeEventListener("change", this.#onChange);
|
|
||||||
this.#changeController.dispose();
|
|
||||||
this.#changeController = null;
|
|
||||||
this.#selectionController.removeEventListener(
|
|
||||||
"stylechange",
|
|
||||||
this.#onStyleChange,
|
|
||||||
);
|
|
||||||
this.#selectionController.dispose();
|
|
||||||
this.#selectionController = null;
|
|
||||||
removeEventListeners(this.#element, this.#events);
|
|
||||||
this.#element = null;
|
|
||||||
this.#root = null;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -615,47 +684,98 @@ export function createRootFromString(string) {
|
|||||||
return root;
|
return root;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function isEditor(instance) {
|
/**
|
||||||
|
* Returns true if the passed object is a TextEditor
|
||||||
|
* instance.
|
||||||
|
*
|
||||||
|
* @param {*} instance
|
||||||
|
* @returns {boolean}
|
||||||
|
*/
|
||||||
|
export function isTextEditor(instance) {
|
||||||
return instance instanceof TextEditor;
|
return instance instanceof TextEditor;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Convenience function based API for Text Editor */
|
/**
|
||||||
|
* Returns the root element of a TextEditor
|
||||||
|
* instance.
|
||||||
|
*
|
||||||
|
* @param {TextEditor} instance
|
||||||
|
* @returns {HTMLDivElement}
|
||||||
|
*/
|
||||||
export function getRoot(instance) {
|
export function getRoot(instance) {
|
||||||
if (isEditor(instance)) {
|
if (isTextEditor(instance)) {
|
||||||
return instance.root;
|
return instance.root;
|
||||||
} else {
|
|
||||||
return null;
|
|
||||||
}
|
}
|
||||||
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sets the root of the text editor.
|
||||||
|
*
|
||||||
|
* @param {TextEditor} instance
|
||||||
|
* @param {HTMLDivElement} root
|
||||||
|
* @returns {TextEditor}
|
||||||
|
*/
|
||||||
export function setRoot(instance, root) {
|
export function setRoot(instance, root) {
|
||||||
if (isEditor(instance)) {
|
if (isTextEditor(instance)) {
|
||||||
instance.root = root;
|
instance.root = root;
|
||||||
}
|
}
|
||||||
|
|
||||||
return instance;
|
return instance;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates a new TextEditor instance.
|
||||||
|
*
|
||||||
|
* @param {HTMLDivElement} element
|
||||||
|
* @param {HTMLCanvasElement} canvas
|
||||||
|
* @param {TextEditorOptions} options
|
||||||
|
* @returns {TextEditor}
|
||||||
|
*/
|
||||||
export function create(element, canvas, options) {
|
export function create(element, canvas, options) {
|
||||||
return new TextEditor(element, canvas, { ...options });
|
return new TextEditor(element, canvas, { ...options });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the current style of the TextEditor instance.
|
||||||
|
*
|
||||||
|
* @param {TextEditor} instance
|
||||||
|
* @returns {CSSStyleDeclaration|undefined}
|
||||||
|
*/
|
||||||
export function getCurrentStyle(instance) {
|
export function getCurrentStyle(instance) {
|
||||||
if (isEditor(instance)) {
|
if (isTextEditor(instance)) {
|
||||||
return instance.currentStyle;
|
return instance.currentStyle;
|
||||||
}
|
}
|
||||||
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Applies the specified styles to the TextEditor
|
||||||
|
* passed.
|
||||||
|
*
|
||||||
|
* @param {TextEditor} instance
|
||||||
|
* @param {Object.<string, *>} styles
|
||||||
|
* @returns {TextEditor|null}
|
||||||
|
*/
|
||||||
export function applyStylesToSelection(instance, styles) {
|
export function applyStylesToSelection(instance, styles) {
|
||||||
if (isEditor(instance)) {
|
if (isTextEditor(instance)) {
|
||||||
return instance.applyStylesToSelection(styles);
|
return instance.applyStylesToSelection(styles);
|
||||||
}
|
}
|
||||||
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Disposes the current instance resources by nullifying
|
||||||
|
* every property.
|
||||||
|
*
|
||||||
|
* @param {TextEditor} instance
|
||||||
|
* @returns {TextEditor|null}
|
||||||
|
*/
|
||||||
export function dispose(instance) {
|
export function dispose(instance) {
|
||||||
if (isEditor(instance)) {
|
if (isTextEditor(instance)) {
|
||||||
instance.dispose();
|
return instance.dispose();
|
||||||
}
|
}
|
||||||
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default TextEditor;
|
export default TextEditor;
|
||||||
|
|||||||
@@ -10,6 +10,7 @@ import {
|
|||||||
mapContentFragmentFromHTML,
|
mapContentFragmentFromHTML,
|
||||||
mapContentFragmentFromString,
|
mapContentFragmentFromString,
|
||||||
} from "../content/dom/Content.js";
|
} from "../content/dom/Content.js";
|
||||||
|
import { TextEditor } from "../TextEditor.js";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Returns a DocumentFragment from text/html.
|
* Returns a DocumentFragment from text/html.
|
||||||
@@ -38,19 +39,26 @@ function getPlainFragmentFromClipboardData(selectionController, clipboardData) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Returns a DocumentFragment (or null) if it contains
|
* Returns a document fragment of html data.
|
||||||
* a compatible clipboardData type.
|
|
||||||
*
|
*
|
||||||
* @param {DataTransfer} clipboardData
|
* @param {DataTransfer} clipboardData
|
||||||
* @returns {DocumentFragment|null}
|
* @returns {DocumentFragment}
|
||||||
*/
|
*/
|
||||||
function getFragmentFromClipboardData(selectionController, clipboardData) {
|
function getFormattedOrPlainFragmentFromClipboardData(
|
||||||
|
selectionController,
|
||||||
|
clipboardData,
|
||||||
|
) {
|
||||||
if (clipboardData.types.includes("text/html")) {
|
if (clipboardData.types.includes("text/html")) {
|
||||||
return getFormattedFragmentFromClipboardData(selectionController, clipboardData)
|
return getFormattedFragmentFromClipboardData(
|
||||||
|
selectionController,
|
||||||
|
clipboardData,
|
||||||
|
);
|
||||||
} else if (clipboardData.types.includes("text/plain")) {
|
} else if (clipboardData.types.includes("text/plain")) {
|
||||||
return getPlainFragmentFromClipboardData(selectionController, clipboardData)
|
return getPlainFragmentFromClipboardData(
|
||||||
|
selectionController,
|
||||||
|
clipboardData,
|
||||||
|
);
|
||||||
}
|
}
|
||||||
return null
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -71,18 +79,37 @@ export function paste(event, editor, selectionController) {
|
|||||||
|
|
||||||
let fragment = null;
|
let fragment = null;
|
||||||
if (editor?.options?.allowHTMLPaste) {
|
if (editor?.options?.allowHTMLPaste) {
|
||||||
fragment = getFragmentFromClipboardData(selectionController, event.clipboardData);
|
fragment = getFormattedOrPlainFragmentFromClipboardData(event.clipboardData);
|
||||||
} else {
|
} else {
|
||||||
fragment = getPlainFragmentFromClipboardData(selectionController, event.clipboardData);
|
fragment = getPlainFragmentFromClipboardData(selectionController, event.clipboardData);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!fragment) {
|
if (!fragment) {
|
||||||
|
// NOOP
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (selectionController.isCollapsed) {
|
if (selectionController.isCollapsed) {
|
||||||
selectionController.insertPaste(fragment);
|
const hasOnlyOneParagraph = fragment.children.length === 1;
|
||||||
|
const hasOnlyOneTextSpan = fragment.firstElementChild.children.length === 1;
|
||||||
|
const forceTextSpan = fragment.firstElementChild.dataset.textSpan === "force";
|
||||||
|
if (hasOnlyOneParagraph
|
||||||
|
&& hasOnlyOneTextSpan
|
||||||
|
&& forceTextSpan) {
|
||||||
|
selectionController.insertIntoFocus(fragment.textContent);
|
||||||
|
} else {
|
||||||
|
selectionController.insertPaste(fragment);
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
selectionController.replaceWithPaste(fragment);
|
const hasOnlyOneParagraph = fragment.children.length === 1;
|
||||||
|
const hasOnlyOneTextSpan = fragment.firstElementChild.children.length === 1;
|
||||||
|
const forceTextSpan = fragment.firstElementChild.dataset.textSpan === "force";
|
||||||
|
if (hasOnlyOneParagraph
|
||||||
|
&& hasOnlyOneTextSpan
|
||||||
|
&& forceTextSpan) {
|
||||||
|
selectionController.replaceText(fragment.textContent);
|
||||||
|
} else {
|
||||||
|
selectionController.replaceWithPaste(fragment);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -230,14 +230,19 @@ export function mapContentFragmentFromString(string, styleDefaults) {
|
|||||||
const fragment = document.createDocumentFragment();
|
const fragment = document.createDocumentFragment();
|
||||||
for (const line of lines) {
|
for (const line of lines) {
|
||||||
if (line === "") {
|
if (line === "") {
|
||||||
fragment.appendChild(createEmptyParagraph(styleDefaults));
|
|
||||||
} else {
|
|
||||||
fragment.appendChild(
|
fragment.appendChild(
|
||||||
createParagraph(
|
createEmptyParagraph(styleDefaults)
|
||||||
[createTextSpan(new Text(line), styleDefaults)],
|
|
||||||
styleDefaults,
|
|
||||||
),
|
|
||||||
);
|
);
|
||||||
|
} else {
|
||||||
|
const textSpan = createTextSpan(new Text(line), styleDefaults);
|
||||||
|
const paragraph = createParagraph(
|
||||||
|
[textSpan],
|
||||||
|
styleDefaults,
|
||||||
|
);
|
||||||
|
if (lines.length === 1) {
|
||||||
|
paragraph.dataset.textSpan = "force";
|
||||||
|
}
|
||||||
|
fragment.appendChild(paragraph);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return fragment;
|
return fragment;
|
||||||
|
|||||||
@@ -6,6 +6,7 @@
|
|||||||
* Copyright (c) KALEIDOS INC
|
* Copyright (c) KALEIDOS INC
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import StyleDeclaration from '../../controllers/StyleDeclaration.js';
|
||||||
import { getFills } from "./Color.js";
|
import { getFills } from "./Color.js";
|
||||||
|
|
||||||
const DEFAULT_FONT_SIZE = "16px";
|
const DEFAULT_FONT_SIZE = "16px";
|
||||||
@@ -338,13 +339,14 @@ export function setStylesFromObject(element, allowedStyles, styleObject) {
|
|||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
let styleValue = styleObject[styleName];
|
let styleValue = styleObject[styleName];
|
||||||
|
if (!styleValue)
|
||||||
|
continue;
|
||||||
|
|
||||||
if (styleName === "font-family") {
|
if (styleName === "font-family") {
|
||||||
styleValue = sanitizeFontFamily(styleValue);
|
styleValue = sanitizeFontFamily(styleValue);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (styleValue) {
|
setStyle(element, styleName, styleValue, styleUnit);
|
||||||
setStyle(element, styleName, styleValue, styleUnit);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
return element;
|
return element;
|
||||||
}
|
}
|
||||||
@@ -386,7 +388,8 @@ export function setStylesFromDeclaration(
|
|||||||
* @returns {HTMLElement}
|
* @returns {HTMLElement}
|
||||||
*/
|
*/
|
||||||
export function setStyles(element, allowedStyles, styleObjectOrDeclaration) {
|
export function setStyles(element, allowedStyles, styleObjectOrDeclaration) {
|
||||||
if (styleObjectOrDeclaration instanceof CSSStyleDeclaration) {
|
if (styleObjectOrDeclaration instanceof CSSStyleDeclaration
|
||||||
|
|| styleObjectOrDeclaration instanceof StyleDeclaration) {
|
||||||
return setStylesFromDeclaration(
|
return setStylesFromDeclaration(
|
||||||
element,
|
element,
|
||||||
allowedStyles,
|
allowedStyles,
|
||||||
@@ -426,13 +429,15 @@ export function mergeStyles(allowedStyles, styleDeclaration, newStyles) {
|
|||||||
const mergedStyles = {};
|
const mergedStyles = {};
|
||||||
for (const [styleName, styleUnit] of allowedStyles) {
|
for (const [styleName, styleUnit] of allowedStyles) {
|
||||||
if (styleName in newStyles) {
|
if (styleName in newStyles) {
|
||||||
mergedStyles[styleName] = newStyles[styleName];
|
const styleValue = newStyles[styleName];
|
||||||
|
mergedStyles[styleName] = styleValue;
|
||||||
} else {
|
} else {
|
||||||
mergedStyles[styleName] = getStyleFromDeclaration(
|
const styleValue = getStyleFromDeclaration(
|
||||||
styleDeclaration,
|
styleDeclaration,
|
||||||
styleName,
|
styleName,
|
||||||
styleUnit,
|
styleUnit,
|
||||||
);
|
);
|
||||||
|
mergedStyles[styleName] = styleValue;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return mergedStyles;
|
return mergedStyles;
|
||||||
|
|||||||
@@ -6,6 +6,8 @@
|
|||||||
* Copyright (c) KALEIDOS INC
|
* Copyright (c) KALEIDOS INC
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import SafeGuard from '../../controllers/SafeGuard.js';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Iterator direction.
|
* Iterator direction.
|
||||||
*
|
*
|
||||||
@@ -245,6 +247,51 @@ export class TextNodeIterator {
|
|||||||
this.#currentNode = previousNode;
|
this.#currentNode = previousNode;
|
||||||
return this.#currentNode;
|
return this.#currentNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns an array of text nodes.
|
||||||
|
*
|
||||||
|
* @param {TextNode} startNode
|
||||||
|
* @param {TextNode} endNode
|
||||||
|
* @returns {Array<TextNode>}
|
||||||
|
*/
|
||||||
|
collectFrom(startNode, endNode) {
|
||||||
|
const nodes = [];
|
||||||
|
for (const node of this.iterateFrom(startNode, endNode)) {
|
||||||
|
nodes.push(node);
|
||||||
|
}
|
||||||
|
return nodes;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Iterates over a list of nodes.
|
||||||
|
*
|
||||||
|
* @param {TextNode} startNode
|
||||||
|
* @param {TextNode} endNode
|
||||||
|
* @yields {TextNode}
|
||||||
|
*/
|
||||||
|
* iterateFrom(startNode, endNode) {
|
||||||
|
const comparedPosition = startNode.compareDocumentPosition(
|
||||||
|
endNode
|
||||||
|
);
|
||||||
|
this.#currentNode = startNode;
|
||||||
|
SafeGuard.start();
|
||||||
|
while (this.#currentNode !== endNode) {
|
||||||
|
yield this.#currentNode;
|
||||||
|
SafeGuard.update();
|
||||||
|
if (comparedPosition === Node.DOCUMENT_POSITION_PRECEDING) {
|
||||||
|
if (!this.previousNode()) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} else if (comparedPosition === Node.DOCUMENT_POSITION_FOLLOWING) {
|
||||||
|
if (!this.nextNode()) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default TextNodeIterator;
|
export default TextNodeIterator;
|
||||||
|
|||||||
@@ -28,7 +28,20 @@ export function update() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let timeoutId = 0
|
||||||
|
export function throwAfter(error, timeout = SAFE_GUARD_TIME) {
|
||||||
|
timeoutId = setTimeout(() => {
|
||||||
|
throw error
|
||||||
|
}, timeout)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function throwCancel() {
|
||||||
|
clearTimeout(timeoutId)
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
start,
|
start,
|
||||||
update,
|
update,
|
||||||
}
|
throwAfter,
|
||||||
|
throwCancel,
|
||||||
|
};
|
||||||
|
|||||||
@@ -54,6 +54,7 @@ import { isRoot, setRootStyles } from "../content/dom/Root.js";
|
|||||||
import { SelectionDirection } from "./SelectionDirection.js";
|
import { SelectionDirection } from "./SelectionDirection.js";
|
||||||
import SafeGuard from "./SafeGuard.js";
|
import SafeGuard from "./SafeGuard.js";
|
||||||
import { sanitizeFontFamily } from "../content/dom/Style.js";
|
import { sanitizeFontFamily } from "../content/dom/Style.js";
|
||||||
|
import StyleDeclaration from './StyleDeclaration.js';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Supported options for the SelectionController.
|
* Supported options for the SelectionController.
|
||||||
@@ -64,39 +65,7 @@ import { sanitizeFontFamily } from "../content/dom/Style.js";
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* SelectionController uses the same concepts used by the Selection API but extending it to support
|
* SelectionController uses the same concepts used by the Selection API but extending it to support
|
||||||
* our own internal model based on paragraphs (in drafconst textEditorMock = TextEditorMock.createTextEditorMockWithParagraphs([
|
* our own internal model based on paragraphs (in draft.js they were called blocks) and text spans.
|
||||||
createParagraph([createTextSpan(new Text("Hello, "))]),
|
|
||||||
createEmptyParagraph(),
|
|
||||||
createParagraph([createTextSpan(new Text("World!"))]),
|
|
||||||
]);
|
|
||||||
const root = textEditorMock.root;
|
|
||||||
const selection = document.getSelection();
|
|
||||||
const selectionController = new SelectionController(
|
|
||||||
textEditorMock,
|
|
||||||
selection
|
|
||||||
);
|
|
||||||
focus(
|
|
||||||
selection,
|
|
||||||
textEditorMock,
|
|
||||||
root.childNodes.item(2).firstChild.firstChild,
|
|
||||||
0
|
|
||||||
);
|
|
||||||
selectionController.mergeBackwardParagraph();
|
|
||||||
expect(textEditorMock.root).toBeInstanceOf(HTMLDivElement);
|
|
||||||
expect(textEditorMock.root.children.length).toBe(2);
|
|
||||||
expect(textEditorMock.root.dataset.itype).toBe("root");
|
|
||||||
expect(textEditorMock.root.firstChild).toBeInstanceOf(HTMLDivElement);
|
|
||||||
expect(textEditorMock.root.firstChild.dataset.itype).toBe("paragraph");
|
|
||||||
expect(textEditorMock.root.firstChild.firstChild).toBeInstanceOf(
|
|
||||||
HTMLSpanElement
|
|
||||||
);
|
|
||||||
expect(textEditorMock.root.firstChild.firstChild.dataset.itype).toBe(
|
|
||||||
"span"
|
|
||||||
);
|
|
||||||
expect(textEditorMock.root.textContent).toBe("Hello, World!");
|
|
||||||
expect(textEditorMock.root.firstChild.textContent).toBe("Hello, ");
|
|
||||||
expect(textEditorMock.root.lastChild.textContent).toBe("World!");
|
|
||||||
t.js they were called blocks) and text spans.
|
|
||||||
*/
|
*/
|
||||||
export class SelectionController extends EventTarget {
|
export class SelectionController extends EventTarget {
|
||||||
/**
|
/**
|
||||||
@@ -164,21 +133,12 @@ export class SelectionController extends EventTarget {
|
|||||||
#textNodeIterator = null;
|
#textNodeIterator = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* CSSStyleDeclaration that we can mutate
|
* StyleDeclaration that we can mutate
|
||||||
* to handle style changes.
|
* to handle style changes.
|
||||||
*
|
*
|
||||||
* @type {CSSStyleDeclaration}
|
* @type {StyleDeclaration}
|
||||||
*/
|
*/
|
||||||
#currentStyle = null;
|
#currentStyle = new StyleDeclaration();
|
||||||
|
|
||||||
/**
|
|
||||||
* Element used to have a custom CSSStyleDeclaration
|
|
||||||
* that we can modify to handle style changes when the
|
|
||||||
* selection is changed.
|
|
||||||
*
|
|
||||||
* @type {HTMLDivElement}
|
|
||||||
*/
|
|
||||||
#inertElement = null;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @type {SelectionControllerDebug}
|
* @type {SelectionControllerDebug}
|
||||||
@@ -275,19 +235,62 @@ export class SelectionController extends EventTarget {
|
|||||||
*
|
*
|
||||||
* @param {HTMLElement} element
|
* @param {HTMLElement} element
|
||||||
*/
|
*/
|
||||||
#applyStylesToCurrentStyle(element) {
|
#applyStylesFromElementToCurrentStyle(element) {
|
||||||
for (let index = 0; index < element.style.length; index++) {
|
for (let index = 0; index < element.style.length; index++) {
|
||||||
const styleName = element.style.item(index);
|
const styleName = element.style.item(index);
|
||||||
|
if (styleName === "--fills") {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
let styleValue = element.style.getPropertyValue(styleName);
|
||||||
|
|
||||||
|
if (styleName === "font-family") {
|
||||||
|
styleValue = sanitizeFontFamily(styleValue);
|
||||||
|
}
|
||||||
|
this.#currentStyle.setProperty(styleName, styleValue);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Applies some styles to the currentStyle
|
||||||
|
* CSSStyleDeclaration
|
||||||
|
*
|
||||||
|
* @param {HTMLElement} element
|
||||||
|
*/
|
||||||
|
#mergeStylesFromElementToCurrentStyle(element) {
|
||||||
|
for (let index = 0; index < element.style.length; index++) {
|
||||||
|
const styleName = element.style.item(index);
|
||||||
let styleValue = element.style.getPropertyValue(styleName);
|
let styleValue = element.style.getPropertyValue(styleName);
|
||||||
if (styleName === "font-family") {
|
if (styleName === "font-family") {
|
||||||
styleValue = sanitizeFontFamily(styleValue);
|
styleValue = sanitizeFontFamily(styleValue);
|
||||||
}
|
}
|
||||||
|
this.#currentStyle.mergeProperty(styleName, styleValue);
|
||||||
this.#currentStyle.setProperty(styleName, styleValue);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Updates current styles based on the currently selected text spans.
|
||||||
|
*
|
||||||
|
* @param {HTMLSpanElement} startNode
|
||||||
|
* @param {HTMLSpanElement} endNode
|
||||||
|
*/
|
||||||
|
#updateCurrentStyleFrom(startNode, endNode) {
|
||||||
|
this.#applyDefaultStylesToCurrentStyle();
|
||||||
|
const root = startNode.parentElement.parentElement.parentElement;
|
||||||
|
this.#applyStylesFromElementToCurrentStyle(root);
|
||||||
|
// FIXME: I don't like this approximation. Having to iterate nodes twice
|
||||||
|
// is bad for performance. I think we need another way of "computing"
|
||||||
|
// the cascade.
|
||||||
|
for (const textNode of this.#textNodeIterator.iterateFrom(startNode, endNode)) {
|
||||||
|
const paragraph = textNode.parentElement.parentElement;
|
||||||
|
this.#applyStylesFromElementToCurrentStyle(paragraph);
|
||||||
|
}
|
||||||
|
for (const textNode of this.#textNodeIterator.iterateFrom(startNode, endNode)) {
|
||||||
|
const textSpan = textNode.parentElement;
|
||||||
|
this.#mergeStylesFromElementToCurrentStyle(textSpan);
|
||||||
|
}
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Updates current styles based on the currently selected text span.
|
* Updates current styles based on the currently selected text span.
|
||||||
*
|
*
|
||||||
@@ -297,20 +300,14 @@ export class SelectionController extends EventTarget {
|
|||||||
#updateCurrentStyle(textSpan) {
|
#updateCurrentStyle(textSpan) {
|
||||||
this.#applyDefaultStylesToCurrentStyle();
|
this.#applyDefaultStylesToCurrentStyle();
|
||||||
const root = textSpan.parentElement.parentElement;
|
const root = textSpan.parentElement.parentElement;
|
||||||
this.#applyStylesToCurrentStyle(root);
|
this.#applyStylesFromElementToCurrentStyle(root);
|
||||||
const paragraph = textSpan.parentElement;
|
const paragraph = textSpan.parentElement;
|
||||||
this.#applyStylesToCurrentStyle(paragraph);
|
this.#applyStylesFromElementToCurrentStyle(paragraph);
|
||||||
this.#applyStylesToCurrentStyle(textSpan);
|
this.#applyStylesFromElementToCurrentStyle(textSpan);
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
#updateState() {
|
||||||
* This is called on every `selectionchange` because it is dispatched
|
|
||||||
* only by the `document` object.
|
|
||||||
*
|
|
||||||
* @param {Event} e
|
|
||||||
*/
|
|
||||||
#onSelectionChange = (e) => {
|
|
||||||
// If we're outside the contenteditable element, then
|
// If we're outside the contenteditable element, then
|
||||||
// we return.
|
// we return.
|
||||||
if (!this.hasFocus) {
|
if (!this.hasFocus) {
|
||||||
@@ -320,17 +317,23 @@ export class SelectionController extends EventTarget {
|
|||||||
let focusNodeChanges = false;
|
let focusNodeChanges = false;
|
||||||
let anchorNodeChanges = false;
|
let anchorNodeChanges = false;
|
||||||
|
|
||||||
if (this.#focusNode !== this.#selection.focusNode) {
|
if (
|
||||||
|
this.#focusNode !== this.#selection.focusNode ||
|
||||||
|
this.#focusOffset !== this.#selection.focusOffset
|
||||||
|
) {
|
||||||
this.#focusNode = this.#selection.focusNode;
|
this.#focusNode = this.#selection.focusNode;
|
||||||
|
this.#focusOffset = this.#selection.focusOffset;
|
||||||
focusNodeChanges = true;
|
focusNodeChanges = true;
|
||||||
}
|
}
|
||||||
this.#focusOffset = this.#selection.focusOffset;
|
|
||||||
|
|
||||||
if (this.#anchorNode !== this.#selection.anchorNode) {
|
if (
|
||||||
|
this.#anchorNode !== this.#selection.anchorNode ||
|
||||||
|
this.#anchorOffset !== this.#selection.anchorOffset
|
||||||
|
) {
|
||||||
this.#anchorNode = this.#selection.anchorNode;
|
this.#anchorNode = this.#selection.anchorNode;
|
||||||
|
this.#anchorOffset = this.#selection.anchorOffset;
|
||||||
anchorNodeChanges = true;
|
anchorNodeChanges = true;
|
||||||
}
|
}
|
||||||
this.#anchorOffset = this.#selection.anchorOffset;
|
|
||||||
|
|
||||||
// We need to handle multi selection from firefox
|
// We need to handle multi selection from firefox
|
||||||
// and remove all the old ranges and just keep the
|
// and remove all the old ranges and just keep the
|
||||||
@@ -359,7 +362,7 @@ export class SelectionController extends EventTarget {
|
|||||||
// If focus node changed, we need to retrieve all the
|
// If focus node changed, we need to retrieve all the
|
||||||
// styles of the current text span and dispatch an event
|
// styles of the current text span and dispatch an event
|
||||||
// to notify that the styles have changed.
|
// to notify that the styles have changed.
|
||||||
if (focusNodeChanges) {
|
if (focusNodeChanges || anchorNodeChanges) {
|
||||||
this.#notifyStyleChange();
|
this.#notifyStyleChange();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -372,43 +375,42 @@ export class SelectionController extends EventTarget {
|
|||||||
if (this.#debug) {
|
if (this.#debug) {
|
||||||
this.#debug.update(this);
|
this.#debug.update(this);
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This is called on every `selectionchange` because it is dispatched
|
||||||
|
* only by the `document` object.
|
||||||
|
*
|
||||||
|
* @param {Event} e
|
||||||
|
*/
|
||||||
|
#onSelectionChange = (_) => this.#updateState();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Notifies that the styles have changed.
|
* Notifies that the styles have changed.
|
||||||
*/
|
*/
|
||||||
#notifyStyleChange() {
|
#notifyStyleChange() {
|
||||||
const textSpan = this.focusTextSpan;
|
if (this.#selection.isCollapsed) {
|
||||||
if (textSpan) {
|
// CARET
|
||||||
this.#updateCurrentStyle(textSpan);
|
const textSpan =
|
||||||
this.dispatchEvent(
|
this.focusTextSpan ??
|
||||||
new CustomEvent("stylechange", {
|
|
||||||
detail: this.#currentStyle,
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
const firstTextSpan =
|
|
||||||
this.#textEditor.root?.firstElementChild?.firstElementChild;
|
this.#textEditor.root?.firstElementChild?.firstElementChild;
|
||||||
if (firstTextSpan) {
|
|
||||||
this.#updateCurrentStyle(firstTextSpan);
|
this.#updateCurrentStyle(textSpan);
|
||||||
this.dispatchEvent(
|
} else {
|
||||||
new CustomEvent("stylechange", {
|
// SELECTION.
|
||||||
detail: this.#currentStyle,
|
this.#updateCurrentStyleFrom(this.#anchorNode, this.#focusNode);
|
||||||
}),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
this.dispatchEvent(
|
||||||
|
new CustomEvent("stylechange", {
|
||||||
|
detail: this.#currentStyle,
|
||||||
|
}),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Setups
|
* Setups
|
||||||
*/
|
*/
|
||||||
#setup() {
|
#setup() {
|
||||||
// This element is not attached to the DOM
|
|
||||||
// so it doesn't trigger style or layout calculations.
|
|
||||||
// That's why it's called "inertElement".
|
|
||||||
this.#inertElement = document.createElement("div");
|
|
||||||
this.#currentStyle = this.#inertElement.style;
|
|
||||||
this.#applyDefaultStylesToCurrentStyle();
|
this.#applyDefaultStylesToCurrentStyle();
|
||||||
|
|
||||||
if (this.#selection.rangeCount > 0) {
|
if (this.#selection.rangeCount > 0) {
|
||||||
@@ -428,6 +430,22 @@ export class SelectionController extends EventTarget {
|
|||||||
document.addEventListener("selectionchange", this.#onSelectionChange);
|
document.addEventListener("selectionchange", this.#onSelectionChange);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Disposes the current resources.
|
||||||
|
*/
|
||||||
|
dispose() {
|
||||||
|
document.removeEventListener("selectionchange", this.#onSelectionChange);
|
||||||
|
this.#textEditor = null;
|
||||||
|
this.#ranges.clear();
|
||||||
|
this.#ranges = null;
|
||||||
|
this.#range = null;
|
||||||
|
this.#selection = null;
|
||||||
|
this.#focusNode = null;
|
||||||
|
this.#anchorNode = null;
|
||||||
|
this.#mutations.dispose();
|
||||||
|
this.#mutations = null;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Returns a Range-like object.
|
* Returns a Range-like object.
|
||||||
*
|
*
|
||||||
@@ -502,6 +520,8 @@ export class SelectionController extends EventTarget {
|
|||||||
* Marks the start of a mutation.
|
* Marks the start of a mutation.
|
||||||
*
|
*
|
||||||
* Clears all the mutations kept in CommandMutations.
|
* Clears all the mutations kept in CommandMutations.
|
||||||
|
*
|
||||||
|
* @returns {boolean}
|
||||||
*/
|
*/
|
||||||
startMutation() {
|
startMutation() {
|
||||||
this.#mutations.clear();
|
this.#mutations.clear();
|
||||||
@@ -512,7 +532,7 @@ export class SelectionController extends EventTarget {
|
|||||||
/**
|
/**
|
||||||
* Marks the end of a mutation.
|
* Marks the end of a mutation.
|
||||||
*
|
*
|
||||||
* @returns
|
* @returns {CommandMutations}
|
||||||
*/
|
*/
|
||||||
endMutation() {
|
endMutation() {
|
||||||
return this.#mutations;
|
return this.#mutations;
|
||||||
@@ -520,6 +540,8 @@ export class SelectionController extends EventTarget {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Selects all content.
|
* Selects all content.
|
||||||
|
*
|
||||||
|
* @returns {SelectionController}
|
||||||
*/
|
*/
|
||||||
selectAll() {
|
selectAll() {
|
||||||
if (this.#textEditor.isEmpty) {
|
if (this.#textEditor.isEmpty) {
|
||||||
@@ -558,23 +580,15 @@ export class SelectionController extends EventTarget {
|
|||||||
this.#selection.removeAllRanges();
|
this.#selection.removeAllRanges();
|
||||||
this.#selection.addRange(range);
|
this.#selection.addRange(range);
|
||||||
|
|
||||||
// Ensure internal state is synchronized
|
this.#updateState();
|
||||||
this.#focusNode = this.#selection.focusNode;
|
|
||||||
this.#focusOffset = this.#selection.focusOffset;
|
|
||||||
this.#anchorNode = this.#selection.anchorNode;
|
|
||||||
this.#anchorOffset = this.#selection.anchorOffset;
|
|
||||||
this.#range = range;
|
|
||||||
this.#ranges.clear();
|
|
||||||
this.#ranges.add(range);
|
|
||||||
|
|
||||||
// Notify style changes
|
|
||||||
this.#notifyStyleChange();
|
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Moves cursor to end.
|
* Moves cursor to end.
|
||||||
|
*
|
||||||
|
* @returns {SelectionController}
|
||||||
*/
|
*/
|
||||||
cursorToEnd() {
|
cursorToEnd() {
|
||||||
const range = document.createRange(); //Create a range (a range is a like the selection but invisible)
|
const range = document.createRange(); //Create a range (a range is a like the selection but invisible)
|
||||||
@@ -662,22 +676,6 @@ export class SelectionController extends EventTarget {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Disposes the current resources.
|
|
||||||
*/
|
|
||||||
dispose() {
|
|
||||||
document.removeEventListener("selectionchange", this.#onSelectionChange);
|
|
||||||
this.#textEditor = null;
|
|
||||||
this.#ranges.clear();
|
|
||||||
this.#ranges = null;
|
|
||||||
this.#range = null;
|
|
||||||
this.#selection = null;
|
|
||||||
this.#focusNode = null;
|
|
||||||
this.#anchorNode = null;
|
|
||||||
this.#mutations.dispose();
|
|
||||||
this.#mutations = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Returns the current selection.
|
* Returns the current selection.
|
||||||
*
|
*
|
||||||
@@ -1114,8 +1112,8 @@ export class SelectionController extends EventTarget {
|
|||||||
return isParagraphEnd(this.focusNode, this.focusOffset);
|
return isParagraphEnd(this.focusNode, this.focusOffset);
|
||||||
}
|
}
|
||||||
|
|
||||||
#getFragmentInlineTextNode(fragment) {
|
#getFragmentTextSpanTextNode(fragment) {
|
||||||
if (isInline(fragment.firstElementChild.lastChild)) {
|
if (isTextSpan(fragment.firstElementChild.lastChild)) {
|
||||||
return fragment.firstElementChild.firstElementChild.lastChild;
|
return fragment.firstElementChild.firstElementChild.lastChild;
|
||||||
}
|
}
|
||||||
return fragment.firstElementChild.lastChild;
|
return fragment.firstElementChild.lastChild;
|
||||||
@@ -1131,11 +1129,15 @@ export class SelectionController extends EventTarget {
|
|||||||
* @param {DocumentFragment} fragment
|
* @param {DocumentFragment} fragment
|
||||||
*/
|
*/
|
||||||
insertPaste(fragment) {
|
insertPaste(fragment) {
|
||||||
|
const hasOnlyOneParagraph = fragment.children.length === 1;
|
||||||
|
const forceTextSpan =
|
||||||
|
fragment.firstElementChild?.dataset?.textSpan === "force";
|
||||||
if (
|
if (
|
||||||
fragment.children.length === 1 &&
|
hasOnlyOneParagraph &&
|
||||||
fragment.firstElementChild?.dataset?.textSpan === "force"
|
forceTextSpan
|
||||||
) {
|
) {
|
||||||
const collapseNode = fragment.firstElementChild.firstChild;
|
// first text span
|
||||||
|
const collapseNode = fragment.firstElementChild.firstElementChild;
|
||||||
if (this.isTextSpanStart) {
|
if (this.isTextSpanStart) {
|
||||||
this.focusTextSpan.before(...fragment.firstElementChild.children);
|
this.focusTextSpan.before(...fragment.firstElementChild.children);
|
||||||
} else if (this.isTextSpanEnd) {
|
} else if (this.isTextSpanEnd) {
|
||||||
@@ -1147,7 +1149,9 @@ export class SelectionController extends EventTarget {
|
|||||||
newTextSpan,
|
newTextSpan,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return this.collapse(collapseNode, collapseNode.nodeValue?.length || 0);
|
// collapseNode could be a <br>, that's why we need to
|
||||||
|
// make `nodeValue` as optional.
|
||||||
|
return this.collapse(collapseNode, collapseNode?.nodeValue?.length || 0);
|
||||||
}
|
}
|
||||||
const collapseNode = this.#getFragmentParagraphTextNode(fragment);
|
const collapseNode = this.#getFragmentParagraphTextNode(fragment);
|
||||||
if (this.isParagraphStart) {
|
if (this.isParagraphStart) {
|
||||||
@@ -1393,9 +1397,16 @@ export class SelectionController extends EventTarget {
|
|||||||
this.focusOffset,
|
this.focusOffset,
|
||||||
newText,
|
newText,
|
||||||
);
|
);
|
||||||
|
this.collapse(this.focusNode, this.focusOffset + newText.length);
|
||||||
} else if (this.isLineBreakFocus) {
|
} else if (this.isLineBreakFocus) {
|
||||||
const textNode = new Text(newText);
|
const textNode = new Text(newText);
|
||||||
this.focusNode.replaceWith(textNode);
|
// the focus node is a <span>.
|
||||||
|
if (isTextSpan(this.focusNode)) {
|
||||||
|
this.focusNode.firstElementChild.replaceWith(textNode);
|
||||||
|
// the focus node is a <br>.
|
||||||
|
} else {
|
||||||
|
this.focusNode.replaceWith(textNode);
|
||||||
|
}
|
||||||
this.collapse(textNode, newText.length);
|
this.collapse(textNode, newText.length);
|
||||||
} else {
|
} else {
|
||||||
throw new Error("Unknown node type");
|
throw new Error("Unknown node type");
|
||||||
@@ -1932,11 +1943,21 @@ export class SelectionController extends EventTarget {
|
|||||||
const textSpan = this.startTextSpan;
|
const textSpan = this.startTextSpan;
|
||||||
const midText = startNode.splitText(startOffset);
|
const midText = startNode.splitText(startOffset);
|
||||||
const endText = midText.splitText(endOffset - startOffset);
|
const endText = midText.splitText(endOffset - startOffset);
|
||||||
const midTextSpan = createTextSpanFrom(textSpan, midText, newStyles);
|
|
||||||
textSpan.after(midTextSpan);
|
// Only create text span if midText is not empty
|
||||||
if (endText.length > 0) {
|
if (midText.nodeValue && midText.nodeValue.length > 0) {
|
||||||
const endTextSpan = createTextSpan(endText, textSpan.style);
|
const midTextSpan = createTextSpanFrom(textSpan, midText, newStyles);
|
||||||
midTextSpan.after(endTextSpan);
|
textSpan.after(midTextSpan);
|
||||||
|
if (endText.length > 0) {
|
||||||
|
const endTextSpan = createTextSpan(endText, textSpan.style);
|
||||||
|
midTextSpan.after(endTextSpan);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// If midText is empty, just create endTextSpan if needed
|
||||||
|
if (endText.length > 0) {
|
||||||
|
const endTextSpan = createTextSpan(endText, textSpan.style);
|
||||||
|
textSpan.after(endTextSpan);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// NOTE: This is necessary because sometimes
|
// NOTE: This is necessary because sometimes
|
||||||
@@ -1953,16 +1974,21 @@ export class SelectionController extends EventTarget {
|
|||||||
// the styles are applied to the current caret
|
// the styles are applied to the current caret
|
||||||
else if (
|
else if (
|
||||||
this.startOffset === this.endOffset &&
|
this.startOffset === this.endOffset &&
|
||||||
this.endOffset === endNode.nodeValue.length
|
this.endOffset === endNode.nodeValue?.length
|
||||||
) {
|
) {
|
||||||
const newTextSpan = createVoidTextSpan(newStyles);
|
const newTextSpan = createVoidTextSpan(newStyles);
|
||||||
this.endTextSpan.after(newTextSpan);
|
this.endTextSpan.after(newTextSpan);
|
||||||
this.setSelection(newTextSpan.firstChild, 0, newTextSpan.firstChild, 0);
|
this.setSelection(newTextSpan.firstChild, 0, newTextSpan.firstChild, 0);
|
||||||
}
|
}
|
||||||
// The styles are applied to the paragraph
|
// The styles are applied to the paragraph
|
||||||
else {
|
else
|
||||||
|
{
|
||||||
const paragraph = this.startParagraph;
|
const paragraph = this.startParagraph;
|
||||||
setParagraphStyles(paragraph, newStyles);
|
setParagraphStyles(paragraph, newStyles);
|
||||||
|
// Apply styles to child text spans.
|
||||||
|
for (const textSpan of paragraph.children) {
|
||||||
|
setTextSpanStyles(textSpan, newStyles);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
return this.#notifyStyleChange();
|
return this.#notifyStyleChange();
|
||||||
|
|
||||||
@@ -1984,7 +2010,8 @@ export class SelectionController extends EventTarget {
|
|||||||
// new text span.
|
// new text span.
|
||||||
if (
|
if (
|
||||||
this.#textNodeIterator.currentNode === startNode &&
|
this.#textNodeIterator.currentNode === startNode &&
|
||||||
startOffset > 0
|
startOffset > 0 &&
|
||||||
|
startOffset < (startNode.nodeValue?.length || 0)
|
||||||
) {
|
) {
|
||||||
const newTextSpan = splitTextSpan(textSpan, startOffset);
|
const newTextSpan = splitTextSpan(textSpan, startOffset);
|
||||||
setTextSpanStyles(newTextSpan, newStyles);
|
setTextSpanStyles(newTextSpan, newStyles);
|
||||||
@@ -1999,14 +2026,15 @@ export class SelectionController extends EventTarget {
|
|||||||
(this.#textNodeIterator.currentNode !== startNode &&
|
(this.#textNodeIterator.currentNode !== startNode &&
|
||||||
this.#textNodeIterator.currentNode !== endNode) ||
|
this.#textNodeIterator.currentNode !== endNode) ||
|
||||||
(this.#textNodeIterator.currentNode === endNode &&
|
(this.#textNodeIterator.currentNode === endNode &&
|
||||||
endOffset === endNode.nodeValue.length)
|
endOffset === endNode.nodeValue?.length)
|
||||||
) {
|
) {
|
||||||
setTextSpanStyles(textSpan, newStyles);
|
setTextSpanStyles(textSpan, newStyles);
|
||||||
|
|
||||||
// If we're at end node
|
// If we're at end node
|
||||||
} else if (
|
} else if (
|
||||||
this.#textNodeIterator.currentNode === endNode &&
|
this.#textNodeIterator.currentNode === endNode &&
|
||||||
endOffset < endNode.nodeValue.length
|
endOffset < endNode.nodeValue?.length &&
|
||||||
|
endOffset > 0
|
||||||
) {
|
) {
|
||||||
const newTextSpan = splitTextSpan(textSpan, endOffset);
|
const newTextSpan = splitTextSpan(textSpan, endOffset);
|
||||||
setTextSpanStyles(textSpan, newStyles);
|
setTextSpanStyles(textSpan, newStyles);
|
||||||
|
|||||||
110
frontend/text-editor/src/editor/controllers/StyleDeclaration.js
Normal file
110
frontend/text-editor/src/editor/controllers/StyleDeclaration.js
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
export class StyleDeclaration {
|
||||||
|
static Property = class Property {
|
||||||
|
static NULL = '["~#\'",null]';
|
||||||
|
|
||||||
|
static Default = new Property("", "", "");
|
||||||
|
|
||||||
|
name;
|
||||||
|
value = "";
|
||||||
|
priority = "";
|
||||||
|
|
||||||
|
constructor(name, value = "", priority = "") {
|
||||||
|
this.name = name;
|
||||||
|
this.value = value ?? "";
|
||||||
|
this.priority = priority ?? "";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
#items = new Map();
|
||||||
|
|
||||||
|
get cssFloat() {
|
||||||
|
throw new Error("Not implemented");
|
||||||
|
}
|
||||||
|
|
||||||
|
get cssText() {
|
||||||
|
throw new Error("Not implemented");
|
||||||
|
}
|
||||||
|
|
||||||
|
get parentRule() {
|
||||||
|
throw new Error("Not implemented");
|
||||||
|
}
|
||||||
|
|
||||||
|
get length() {
|
||||||
|
return this.#items.size;
|
||||||
|
}
|
||||||
|
|
||||||
|
#getProperty(name) {
|
||||||
|
return this.#items.get(name) ?? StyleDeclaration.Property.Default;
|
||||||
|
}
|
||||||
|
|
||||||
|
getPropertyPriority(name) {
|
||||||
|
const { priority } = this.#getProperty(name);
|
||||||
|
return priority ?? "";
|
||||||
|
}
|
||||||
|
|
||||||
|
getPropertyValue(name) {
|
||||||
|
const { value } = this.#getProperty(name);
|
||||||
|
return value ?? "";
|
||||||
|
}
|
||||||
|
|
||||||
|
item(index) {
|
||||||
|
return Array.from(this.#items).at(index).name;
|
||||||
|
}
|
||||||
|
|
||||||
|
removeProperty(name) {
|
||||||
|
const value = this.getPropertyValue(name);
|
||||||
|
this.#items.delete(name);
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
|
||||||
|
setProperty(name, value, priority) {
|
||||||
|
this.#items.set(name, new StyleDeclaration.Property(name, value, priority));
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Non compatible methods */
|
||||||
|
#isQuotedValue(a, b) {
|
||||||
|
if (a.startsWith('"') && b.startsWith('"')) {
|
||||||
|
return a === b;
|
||||||
|
} else if (a.startsWith('"') && !b.startsWith('"')) {
|
||||||
|
return a.slice(1, -1) === b;
|
||||||
|
} else if (!a.startsWith('"') && b.startsWith('"')) {
|
||||||
|
return a === b.slice(1, -1);
|
||||||
|
}
|
||||||
|
return a === b;
|
||||||
|
}
|
||||||
|
|
||||||
|
mergeProperty(name, value) {
|
||||||
|
const currentValue = this.getPropertyValue(name);
|
||||||
|
if (this.#isQuotedValue(currentValue, value)) {
|
||||||
|
return this.setProperty(name, value);
|
||||||
|
} else if (currentValue === "" && value === StyleDeclaration.Property.NULL) {
|
||||||
|
return this.setProperty(name, value);
|
||||||
|
} else if (currentValue === "" && ["initial", "none"].includes(value)) {
|
||||||
|
return this.setProperty(name, value);
|
||||||
|
} else if (currentValue !== value && name === "--fills") {
|
||||||
|
return this.setProperty(name, value);
|
||||||
|
} else if (currentValue !== value) {
|
||||||
|
return this.setProperty(name, "mixed");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fromCSSStyleDeclaration(cssStyleDeclaration) {
|
||||||
|
for (let index = 0; index < cssStyleDeclaration.length; index++) {
|
||||||
|
const name = cssStyleDeclaration.item(index);
|
||||||
|
const value = cssStyleDeclaration.getPropertyValue(name);
|
||||||
|
const priority = cssStyleDeclaration.getPropertyPriority(name);
|
||||||
|
this.setProperty(name, value, priority);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
toObject() {
|
||||||
|
return Object.fromEntries(
|
||||||
|
Array.from(this.#items.entries(), ([name, property]) => [
|
||||||
|
name,
|
||||||
|
property.value,
|
||||||
|
]),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default StyleDeclaration
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
import { describe, test, expect } from "vitest";
|
||||||
|
import { StyleDeclaration } from "./StyleDeclaration.js";
|
||||||
|
|
||||||
|
describe("StyleDeclaration", () => {
|
||||||
|
test("Create a new StyleDeclaration", () => {
|
||||||
|
const styleDeclaration = new StyleDeclaration();
|
||||||
|
expect(styleDeclaration).toBeInstanceOf(StyleDeclaration);
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Uninmplemented getters should throw", () => {
|
||||||
|
expect(() => styleDeclaration.cssFloat).toThrow();
|
||||||
|
expect(() => styleDeclaration.cssText).toThrow();
|
||||||
|
expect(() => styleDeclaration.parentRule).toThrow();
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Set property", () => {
|
||||||
|
const styleDeclaration = new StyleDeclaration();
|
||||||
|
styleDeclaration.setProperty("line-height", "1.2");
|
||||||
|
expect(styleDeclaration.getPropertyValue("line-height")).toBe("1.2");
|
||||||
|
expect(styleDeclaration.getPropertyPriority("line-height")).toBe("");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Remove property", () => {
|
||||||
|
const styleDeclaration = new StyleDeclaration();
|
||||||
|
styleDeclaration.setProperty("line-height", "1.2");
|
||||||
|
expect(styleDeclaration.getPropertyValue("line-height")).toBe("1.2");
|
||||||
|
expect(styleDeclaration.getPropertyPriority("line-height")).toBe("");
|
||||||
|
styleDeclaration.removeProperty("line-height");
|
||||||
|
expect(styleDeclaration.getPropertyValue("line-height")).toBe("");
|
||||||
|
expect(styleDeclaration.getPropertyPriority("line-height")).toBe("");
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -1226,16 +1226,16 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@penpot/svgo@penpot/svgo#v3.1":
|
"@penpot/svgo@penpot/svgo#v3.2":
|
||||||
version: 4.0.0
|
version: 4.0.0
|
||||||
resolution: "@penpot/svgo@https://github.com/penpot/svgo.git#commit=a46262c12c0d967708395972c374eb2adead4180"
|
resolution: "@penpot/svgo@https://github.com/penpot/svgo.git#commit=8c9b0e32e9cb5f106085260bd9375f3c91a5010b"
|
||||||
dependencies:
|
dependencies:
|
||||||
"@trysound/sax": "npm:0.2.0"
|
"@trysound/sax": "npm:0.2.0"
|
||||||
css-select: "npm:^5.1.0"
|
css-select: "npm:^5.1.0"
|
||||||
css-tree: "npm:^3.1.0"
|
css-tree: "npm:^3.1.0"
|
||||||
csso: "npm:^5.0.5"
|
csso: "npm:^5.0.5"
|
||||||
lodash: "npm:^4.17.21"
|
lodash: "npm:^4.17.21"
|
||||||
checksum: 10c0/db5f81c99dec2765721d73b69bb30594869ebf657380dfb46709c79775b6c0dc1af678fe9fe51bbe2272a2c78d19c2694a12ec6578bcc41235fa4aff475c9416
|
checksum: 10c0/d7af2801451b97f8ffb17664147c609456f5bcc786c6d03b222546125260c0f268e750748311d61598e31f66610b00038d2b969635b1a15e5694647e19c6b63a
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
@@ -4311,7 +4311,7 @@ __metadata:
|
|||||||
"@penpot/hljs": "portal:./vendor/hljs"
|
"@penpot/hljs": "portal:./vendor/hljs"
|
||||||
"@penpot/mousetrap": "portal:./vendor/mousetrap"
|
"@penpot/mousetrap": "portal:./vendor/mousetrap"
|
||||||
"@penpot/plugins-runtime": "npm:1.3.2"
|
"@penpot/plugins-runtime": "npm:1.3.2"
|
||||||
"@penpot/svgo": "penpot/svgo#v3.1"
|
"@penpot/svgo": "penpot/svgo#v3.2"
|
||||||
"@penpot/text-editor": "portal:./text-editor"
|
"@penpot/text-editor": "portal:./text-editor"
|
||||||
"@playwright/test": "npm:1.52.0"
|
"@playwright/test": "npm:1.52.0"
|
||||||
"@storybook/addon-docs": "npm:10.0.4"
|
"@storybook/addon-docs": "npm:10.0.4"
|
||||||
|
|||||||
Binary file not shown.
@@ -163,6 +163,19 @@ pub extern "C" fn render_sync() {
|
|||||||
pub extern "C" fn render_sync_shape(a: u32, b: u32, c: u32, d: u32) {
|
pub extern "C" fn render_sync_shape(a: u32, b: u32, c: u32, d: u32) {
|
||||||
with_state_mut!(state, {
|
with_state_mut!(state, {
|
||||||
let id = uuid_from_u32_quartet(a, b, c, d);
|
let id = uuid_from_u32_quartet(a, b, c, d);
|
||||||
|
state.use_shape(id);
|
||||||
|
|
||||||
|
// look for an existing root shape, and create it if missing
|
||||||
|
let mut was_root_missing = false;
|
||||||
|
if !state.shapes.has(&Uuid::nil()) {
|
||||||
|
state.shapes.add_shape(Uuid::nil());
|
||||||
|
was_root_missing = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if was_root_missing {
|
||||||
|
state.set_parent_for_current_shape(Uuid::nil());
|
||||||
|
}
|
||||||
|
|
||||||
state.rebuild_tiles_from(Some(&id));
|
state.rebuild_tiles_from(Some(&id));
|
||||||
state
|
state
|
||||||
.render_sync_shape(&id, performance::get_time())
|
.render_sync_shape(&id, performance::get_time())
|
||||||
@@ -330,6 +343,10 @@ fn set_children_set(entries: Vec<Uuid>) {
|
|||||||
parent_id = Some(shape.id);
|
parent_id = Some(shape.id);
|
||||||
(_, deleted) = shape.compute_children_differences(&entries);
|
(_, deleted) = shape.compute_children_differences(&entries);
|
||||||
shape.children = entries.clone();
|
shape.children = entries.clone();
|
||||||
|
|
||||||
|
for id in entries {
|
||||||
|
state.touch_shape(id);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
with_state_mut!(state, {
|
with_state_mut!(state, {
|
||||||
@@ -339,6 +356,7 @@ fn set_children_set(entries: Vec<Uuid>) {
|
|||||||
|
|
||||||
for id in deleted {
|
for id in deleted {
|
||||||
state.delete_shape_children(parent_id, id);
|
state.delete_shape_children(parent_id, id);
|
||||||
|
state.touch_shape(id);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -650,6 +668,26 @@ pub extern "C" fn set_modifiers() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#[no_mangle]
|
||||||
|
pub extern "C" fn start_temp_objects() {
|
||||||
|
unsafe {
|
||||||
|
#[allow(static_mut_refs)]
|
||||||
|
let mut state = STATE.take().expect("Got an invalid state pointer");
|
||||||
|
state = Box::new(state.start_temp_objects());
|
||||||
|
STATE = Some(state);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[no_mangle]
|
||||||
|
pub extern "C" fn end_temp_objects() {
|
||||||
|
unsafe {
|
||||||
|
#[allow(static_mut_refs)]
|
||||||
|
let mut state = STATE.take().expect("Got an invalid state pointer");
|
||||||
|
state = Box::new(state.end_temp_objects());
|
||||||
|
STATE = Some(state);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
fn main() {
|
fn main() {
|
||||||
#[cfg(target_arch = "wasm32")]
|
#[cfg(target_arch = "wasm32")]
|
||||||
init_gl!();
|
init_gl!();
|
||||||
|
|||||||
@@ -34,9 +34,9 @@ pub use fonts::*;
|
|||||||
pub use images::*;
|
pub use images::*;
|
||||||
|
|
||||||
// This is the extra are used for tile rendering.
|
// This is the extra are used for tile rendering.
|
||||||
const VIEWPORT_INTEREST_AREA_THRESHOLD: i32 = 1;
|
const VIEWPORT_INTEREST_AREA_THRESHOLD: i32 = 2;
|
||||||
const MAX_BLOCKING_TIME_MS: i32 = 32;
|
const MAX_BLOCKING_TIME_MS: i32 = 32;
|
||||||
const NODE_BATCH_THRESHOLD: i32 = 10;
|
const NODE_BATCH_THRESHOLD: i32 = 3;
|
||||||
|
|
||||||
type ClipStack = Vec<(Rect, Option<Corners>, Matrix)>;
|
type ClipStack = Vec<(Rect, Option<Corners>, Matrix)>;
|
||||||
|
|
||||||
@@ -141,7 +141,20 @@ impl NodeRenderState {
|
|||||||
|
|
||||||
match &element.shape_type {
|
match &element.shape_type {
|
||||||
Type::Frame(_) => {
|
Type::Frame(_) => {
|
||||||
let bounds = element.get_selrect_shadow_bounds(shadow);
|
let mut bounds = element.get_selrect_shadow_bounds(shadow);
|
||||||
|
let blur_inset = (shadow.blur * 2.).max(0.0);
|
||||||
|
if blur_inset > 0.0 {
|
||||||
|
let max_inset_x = (bounds.width() * 0.5).max(0.0);
|
||||||
|
let max_inset_y = (bounds.height() * 0.5).max(0.0);
|
||||||
|
// Clamp the inset so we never shrink more than half of the width/height;
|
||||||
|
// otherwise the rect could end up inverted on small frames.
|
||||||
|
let inset_x = blur_inset.min(max_inset_x);
|
||||||
|
let inset_y = blur_inset.min(max_inset_y);
|
||||||
|
if inset_x > 0.0 || inset_y > 0.0 {
|
||||||
|
bounds.inset((inset_x, inset_y));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
let mut transform = element.transform;
|
let mut transform = element.transform;
|
||||||
transform.post_translate(element.center());
|
transform.post_translate(element.center());
|
||||||
transform.pre_translate(-element.center());
|
transform.pre_translate(-element.center());
|
||||||
@@ -1721,6 +1734,7 @@ impl RenderState {
|
|||||||
allow_stop: bool,
|
allow_stop: bool,
|
||||||
) -> Result<(), String> {
|
) -> Result<(), String> {
|
||||||
let mut should_stop = false;
|
let mut should_stop = false;
|
||||||
|
|
||||||
while !should_stop {
|
while !should_stop {
|
||||||
if let Some(current_tile) = self.current_tile {
|
if let Some(current_tile) = self.current_tile {
|
||||||
if self.surfaces.has_cached_tile_surface(current_tile) {
|
if self.surfaces.has_cached_tile_surface(current_tile) {
|
||||||
@@ -1794,17 +1808,21 @@ impl RenderState {
|
|||||||
|
|
||||||
if !self.surfaces.has_cached_tile_surface(next_tile) {
|
if !self.surfaces.has_cached_tile_surface(next_tile) {
|
||||||
if let Some(ids) = self.tiles.get_shapes_at(next_tile) {
|
if let Some(ids) = self.tiles.get_shapes_at(next_tile) {
|
||||||
|
let root_ids_map: std::collections::HashMap<Uuid, usize> = root_ids
|
||||||
|
.iter()
|
||||||
|
.enumerate()
|
||||||
|
.map(|(i, id)| (*id, i))
|
||||||
|
.collect();
|
||||||
|
|
||||||
// We only need first level shapes
|
// We only need first level shapes
|
||||||
let mut valid_ids: Vec<Uuid> = ids
|
let mut valid_ids: Vec<Uuid> = ids
|
||||||
.iter()
|
.iter()
|
||||||
.filter(|id| root_ids.contains(id))
|
.filter(|id| root_ids_map.contains_key(id))
|
||||||
.copied()
|
.copied()
|
||||||
.collect();
|
.collect();
|
||||||
|
|
||||||
// These shapes for the tile should be ordered as they are in the parent node
|
// These shapes for the tile should be ordered as they are in the parent node
|
||||||
valid_ids.sort_by_key(|id| {
|
valid_ids.sort_by_key(|id| root_ids_map.get(id).unwrap_or(&usize::MAX));
|
||||||
root_ids.iter().position(|x| x == id).unwrap_or(usize::MAX)
|
|
||||||
});
|
|
||||||
|
|
||||||
self.pending_nodes.extend(valid_ids.into_iter().map(|id| {
|
self.pending_nodes.extend(valid_ids.into_iter().map(|id| {
|
||||||
NodeRenderState {
|
NodeRenderState {
|
||||||
@@ -1821,6 +1839,7 @@ impl RenderState {
|
|||||||
should_stop = true;
|
should_stop = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
self.render_in_progress = false;
|
self.render_in_progress = false;
|
||||||
|
|
||||||
self.surfaces.gc();
|
self.surfaces.gc();
|
||||||
|
|||||||
@@ -8,8 +8,8 @@ use super::{gpu_state::GpuState, tiles::Tile, tiles::TileViewbox, tiles::TILE_SI
|
|||||||
use base64::{engine::general_purpose, Engine as _};
|
use base64::{engine::general_purpose, Engine as _};
|
||||||
use std::collections::{HashMap, HashSet};
|
use std::collections::{HashMap, HashSet};
|
||||||
|
|
||||||
const TEXTURES_CACHE_CAPACITY: usize = 512;
|
const TEXTURES_CACHE_CAPACITY: usize = 1024;
|
||||||
const TEXTURES_BATCH_DELETE: usize = 32;
|
const TEXTURES_BATCH_DELETE: usize = 256;
|
||||||
// This is the amount of extra space we're going to give to all the surfaces to render shapes.
|
// This is the amount of extra space we're going to give to all the surfaces to render shapes.
|
||||||
// If it's too big it could affect performance.
|
// If it's too big it could affect performance.
|
||||||
const TILE_SIZE_MULTIPLIER: i32 = 2;
|
const TILE_SIZE_MULTIPLIER: i32 = 2;
|
||||||
|
|||||||
@@ -290,7 +290,7 @@ fn propagate_reflow(
|
|||||||
let mut skip_reflow = false;
|
let mut skip_reflow = false;
|
||||||
if shape.is_layout_horizontal_fill() || shape.is_layout_vertical_fill() {
|
if shape.is_layout_horizontal_fill() || shape.is_layout_vertical_fill() {
|
||||||
if let Some(parent_id) = shape.parent_id {
|
if let Some(parent_id) = shape.parent_id {
|
||||||
if !reflown.contains(&parent_id) {
|
if parent_id != Uuid::nil() && !reflown.contains(&parent_id) {
|
||||||
// If this is a fill layout but the parent has not been reflown yet
|
// If this is a fill layout but the parent has not been reflown yet
|
||||||
// we wait for the next iteration for reflow
|
// we wait for the next iteration for reflow
|
||||||
skip_reflow = true;
|
skip_reflow = true;
|
||||||
|
|||||||
@@ -53,15 +53,6 @@ struct LayoutAxis {
|
|||||||
is_auto_across: bool,
|
is_auto_across: bool,
|
||||||
}
|
}
|
||||||
|
|
||||||
impl LayoutAxis {
|
|
||||||
fn main_space(&self) -> f32 {
|
|
||||||
self.main_size - self.padding_main_start - self.padding_main_end
|
|
||||||
}
|
|
||||||
fn across_space(&self) -> f32 {
|
|
||||||
self.across_size - self.padding_across_start - self.padding_across_end
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
impl LayoutAxis {
|
impl LayoutAxis {
|
||||||
fn new(
|
fn new(
|
||||||
shape: &Shape,
|
shape: &Shape,
|
||||||
@@ -101,6 +92,13 @@ impl LayoutAxis {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
fn main_space(&self) -> f32 {
|
||||||
|
self.main_size - self.padding_main_start - self.padding_main_end
|
||||||
|
}
|
||||||
|
fn across_space(&self) -> f32 {
|
||||||
|
self.across_size - self.padding_across_start - self.padding_across_end
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#[derive(Debug, Copy, Clone)]
|
#[derive(Debug, Copy, Clone)]
|
||||||
@@ -624,6 +622,9 @@ pub fn reflow_flex_layout(
|
|||||||
}
|
}
|
||||||
|
|
||||||
result.push_back(Modifier::transform_propagate(child.id, transform));
|
result.push_back(Modifier::transform_propagate(child.id, transform));
|
||||||
|
if child.has_layout() {
|
||||||
|
result.push_back(Modifier::reflow(child.id));
|
||||||
|
}
|
||||||
|
|
||||||
shape_anchor = next_anchor(
|
shape_anchor = next_anchor(
|
||||||
layout_data,
|
layout_data,
|
||||||
@@ -654,7 +655,11 @@ pub fn reflow_flex_layout(
|
|||||||
.iter()
|
.iter()
|
||||||
.map(|track| {
|
.map(|track| {
|
||||||
let nshapes = usize::max(track.shapes.len(), 1);
|
let nshapes = usize::max(track.shapes.len(), 1);
|
||||||
track.shapes.iter().map(|s| s.main_size).sum::<f32>()
|
track
|
||||||
|
.shapes
|
||||||
|
.iter()
|
||||||
|
.map(|s| s.margin_main_start + s.margin_main_end + s.main_size)
|
||||||
|
.sum::<f32>()
|
||||||
+ (nshapes as f32 - 1.0) * layout_axis.gap_main
|
+ (nshapes as f32 - 1.0) * layout_axis.gap_main
|
||||||
})
|
})
|
||||||
.reduce(f32::max)
|
.reduce(f32::max)
|
||||||
|
|||||||
@@ -792,6 +792,9 @@ pub fn reflow_grid_layout(
|
|||||||
}
|
}
|
||||||
|
|
||||||
result.push_back(Modifier::transform_propagate(child.id, transform));
|
result.push_back(Modifier::transform_propagate(child.id, transform));
|
||||||
|
if child.has_layout() {
|
||||||
|
result.push_back(Modifier::reflow(child.id));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if shape.is_layout_horizontal_auto() || shape.is_layout_vertical_auto() {
|
if shape.is_layout_horizontal_auto() || shape.is_layout_vertical_auto() {
|
||||||
|
|||||||
@@ -24,6 +24,7 @@ pub(crate) struct State<'a> {
|
|||||||
pub current_id: Option<Uuid>,
|
pub current_id: Option<Uuid>,
|
||||||
pub current_browser: u8,
|
pub current_browser: u8,
|
||||||
pub shapes: ShapesPool<'a>,
|
pub shapes: ShapesPool<'a>,
|
||||||
|
pub saved_shapes: Option<ShapesPool<'a>>,
|
||||||
}
|
}
|
||||||
|
|
||||||
impl<'a> State<'a> {
|
impl<'a> State<'a> {
|
||||||
@@ -34,9 +35,32 @@ impl<'a> State<'a> {
|
|||||||
current_id: None,
|
current_id: None,
|
||||||
current_browser: 0,
|
current_browser: 0,
|
||||||
shapes: ShapesPool::new(),
|
shapes: ShapesPool::new(),
|
||||||
|
// TODO: Maybe this can be moved to a different object
|
||||||
|
saved_shapes: None,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Creates a new temporary shapes pool.
|
||||||
|
// Will panic if a previous temporary pool exists.
|
||||||
|
pub fn start_temp_objects(mut self) -> Self {
|
||||||
|
if self.saved_shapes.is_some() {
|
||||||
|
panic!("Tried to start a temp objects while the previous have not been restored");
|
||||||
|
}
|
||||||
|
self.saved_shapes = Some(self.shapes);
|
||||||
|
self.shapes = ShapesPool::new();
|
||||||
|
self
|
||||||
|
}
|
||||||
|
|
||||||
|
// Disposes of the temporary shapes pool restoring the normal pool
|
||||||
|
// Will panic if a there is no temporary pool.
|
||||||
|
pub fn end_temp_objects(mut self) -> Self {
|
||||||
|
self.shapes = self
|
||||||
|
.saved_shapes
|
||||||
|
.expect("Tried to end temp objects but not content to be restored is present");
|
||||||
|
self.saved_shapes = None;
|
||||||
|
self
|
||||||
|
}
|
||||||
|
|
||||||
pub fn resize(&mut self, width: i32, height: i32) {
|
pub fn resize(&mut self, width: i32, height: i32) {
|
||||||
self.render_state.resize(width, height);
|
self.render_state.resize(width, height);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -88,6 +88,7 @@ impl TileViewbox {
|
|||||||
}
|
}
|
||||||
|
|
||||||
pub fn is_visible(&self, tile: &Tile) -> bool {
|
pub fn is_visible(&self, tile: &Tile) -> bool {
|
||||||
|
// TO CHECK self.interest_rect.contains(tile)
|
||||||
self.visible_rect.contains(tile)
|
self.visible_rect.contains(tile)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -59,18 +59,19 @@ pub extern "C" fn set_layout_child_data(
|
|||||||
is_absolute: bool,
|
is_absolute: bool,
|
||||||
z_index: i32,
|
z_index: i32,
|
||||||
) {
|
) {
|
||||||
let h_sizing = RawSizing::from(h_sizing);
|
|
||||||
let v_sizing = RawSizing::from(v_sizing);
|
|
||||||
let max_h = if has_max_h { Some(max_h) } else { None };
|
|
||||||
let min_h = if has_min_h { Some(min_h) } else { None };
|
|
||||||
let max_w = if has_max_w { Some(max_w) } else { None };
|
|
||||||
let min_w = if has_min_w { Some(min_w) } else { None };
|
|
||||||
|
|
||||||
let raw_align_self = align::RawAlignSelf::from(align_self);
|
|
||||||
|
|
||||||
let align_self = raw_align_self.try_into().ok();
|
|
||||||
|
|
||||||
with_current_shape_mut!(state, |shape: &mut Shape| {
|
with_current_shape_mut!(state, |shape: &mut Shape| {
|
||||||
|
let h_sizing = RawSizing::from(h_sizing);
|
||||||
|
let v_sizing = RawSizing::from(v_sizing);
|
||||||
|
|
||||||
|
let max_h = if has_max_h { Some(max_h) } else { None };
|
||||||
|
let min_h = if has_min_h { Some(min_h) } else { None };
|
||||||
|
let max_w = if has_max_w { Some(max_w) } else { None };
|
||||||
|
let min_w = if has_min_w { Some(min_w) } else { None };
|
||||||
|
|
||||||
|
let raw_align_self = align::RawAlignSelf::from(align_self);
|
||||||
|
|
||||||
|
let align_self = raw_align_self.try_into().ok();
|
||||||
|
|
||||||
shape.set_flex_layout_child_data(
|
shape.set_flex_layout_child_data(
|
||||||
margin_top,
|
margin_top,
|
||||||
margin_right,
|
margin_right,
|
||||||
|
|||||||
Reference in New Issue
Block a user