@kritzel/engine 0.4.31 → 0.4.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +49 -49
- package/dist/cjs/{engine.constants-CakmdKMW.js → engine.constants-VyFrUl1W.js} +627 -129
- package/dist/cjs/{index-BbbWU2aN.js → index-BP5Iy6FQ.js} +27 -9
- package/dist/cjs/index.cjs.js +4 -2
- package/dist/cjs/kritzel-awareness-cursors_5.cjs.entry.js +257 -113
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/stencil.cjs.js +3 -3
- package/dist/collection/classes/core/core.class.js +40 -32
- package/dist/collection/classes/core/reviver.class.js +4 -0
- package/dist/collection/classes/core/store.class.js +10 -3
- package/dist/collection/classes/managers/cursor.manager.js +10 -5
- package/dist/collection/classes/objects/dynamic-object.class.js +18 -5
- package/dist/collection/classes/objects/iframe.class.js +447 -0
- package/dist/collection/classes/registries/icon-registry.class.js +100 -67
- package/dist/collection/classes/tools/selection-tool.class.js +3 -3
- package/dist/collection/collection-manifest.json +4 -2
- package/dist/collection/components/kritzel-awareness-cursors/kritzel-awareness-cursors.css +115 -115
- package/dist/collection/components/kritzel-awareness-cursors/kritzel-awareness-cursors.js +1 -1
- package/dist/collection/components/kritzel-cursor-trail/kritzel-cursor-trail.css +10 -10
- package/dist/collection/components/kritzel-cursor-trail/kritzel-cursor-trail.js +1 -1
- package/dist/collection/components/kritzel-engine/kritzel-engine.css +80 -80
- package/dist/collection/components/kritzel-engine/kritzel-engine.js +196 -44
- package/dist/collection/components/kritzel-icon/kritzel-icon.css +18 -18
- package/dist/collection/components/kritzel-icon/kritzel-icon.js +25 -4
- package/dist/collection/components/kritzel-watermark/kritzel-watermark.css +29 -29
- package/dist/collection/components/kritzel-watermark/kritzel-watermark.js +2 -2
- package/dist/collection/constants/version.js +1 -1
- package/dist/collection/helpers/cursor.helper.js +8 -8
- package/dist/collection/helpers/object.helper.js +13 -0
- package/dist/collection/helpers/svg-export.helper.js +55 -41
- package/dist/collection/helpers/wheel.helper.js +1 -7
- package/dist/collection/index.js +3 -0
- package/dist/collection/interfaces/embedded-object.interface.js +1 -0
- package/dist/collection/themes/dark-theme.js +1 -5
- package/dist/collection/themes/light-theme.js +1 -6
- package/dist/components/index.js +7 -7
- package/dist/components/kritzel-awareness-cursors.js +1 -1
- package/dist/components/kritzel-cursor-trail.js +1 -1
- package/dist/components/kritzel-engine.js +755 -161
- package/dist/components/kritzel-icon.js +1 -1
- package/dist/components/kritzel-watermark.js +1 -1
- package/dist/components/{p-B2Htv9ou.js → p-BHVbfJrf.js} +3 -3
- package/dist/components/{p-YP8wAcF4.js → p-BTU9qcSW.js} +2 -2
- package/dist/components/{p-CfSx6HU_.js → p-BWfRbEIq.js} +16 -4
- package/dist/components/p-NAEiq8CK.js +214 -0
- package/dist/components/{p-BvRGQvVI.js → p-k0LxV9Bg.js} +18 -14
- package/dist/esm/{engine.constants-Bl5-pbq-.js → engine.constants-BHTr2qPx.js} +626 -130
- package/dist/esm/{index-BU9Mv7y0.js → index-C8PnHbLt.js} +27 -10
- package/dist/esm/index.js +3 -3
- package/dist/esm/kritzel-awareness-cursors_5.entry.js +257 -113
- package/dist/esm/loader.js +3 -3
- package/dist/esm/stencil.js +4 -4
- package/dist/stencil/index.esm.js +3 -3
- package/dist/stencil/{p-f0a8b7af.entry.js → p-40097a38.entry.js} +257 -113
- package/dist/stencil/{p-Bl5-pbq-.js → p-BHTr2qPx.js} +626 -130
- package/dist/stencil/{p-BU9Mv7y0.js → p-C8PnHbLt.js} +27 -10
- package/dist/stencil/stencil.esm.js +4 -4
- package/dist/types/classes/core/store.class.d.ts +3 -2
- package/dist/types/classes/objects/dynamic-object.class.d.ts +4 -2
- package/dist/types/classes/objects/iframe.class.d.ts +76 -0
- package/dist/types/classes/registries/icon-registry.class.d.ts +75 -6
- package/dist/types/components/kritzel-engine/kritzel-engine.d.ts +14 -1
- package/dist/types/components/kritzel-icon/kritzel-icon.d.ts +5 -1
- package/dist/types/components.d.ts +26 -8
- package/dist/types/constants/version.d.ts +1 -1
- package/dist/types/helpers/cursor.helper.d.ts +2 -1
- package/dist/types/helpers/object.helper.d.ts +2 -0
- package/dist/types/helpers/svg-export.helper.d.ts +1 -0
- package/dist/types/helpers/wheel.helper.d.ts +2 -2
- package/dist/types/index.d.ts +3 -0
- package/dist/types/interfaces/context-menu-item.interface.d.ts +2 -1
- package/dist/types/interfaces/dynamic-object-renderer.interface.d.ts +7 -0
- package/dist/types/interfaces/embedded-object.interface.d.ts +9 -0
- package/dist/types/interfaces/engine-state.interface.d.ts +3 -2
- package/dist/types/interfaces/login-config.interface.d.ts +2 -1
- package/dist/types/interfaces/master-detail.interface.d.ts +2 -1
- package/dist/types/interfaces/menu-item.interface.d.ts +2 -1
- package/dist/types/interfaces/theme.interface.d.ts +6 -7
- package/dist/types/interfaces/tool.interface.d.ts +9 -0
- package/dist/types/interfaces/toolbar-item.interface.d.ts +3 -2
- package/dist/types/stencil-public-runtime.d.ts +61 -55
- package/package.json +3 -1
- package/readme.md +10 -10
- package/dist/components/p-fx6msYHJ.js +0 -167
|
@@ -15,6 +15,19 @@ class ObjectHelper {
|
|
|
15
15
|
static isClass(object, className) {
|
|
16
16
|
return !!object && object.__class__ === className;
|
|
17
17
|
}
|
|
18
|
+
static isKritzelEmbeddedObject(object) {
|
|
19
|
+
if (!object || typeof object !== 'object') {
|
|
20
|
+
return false;
|
|
21
|
+
}
|
|
22
|
+
const candidate = object;
|
|
23
|
+
return (typeof candidate.isInteractive === 'boolean' &&
|
|
24
|
+
typeof candidate.isSelected === 'boolean' &&
|
|
25
|
+
typeof candidate.mount === 'function' &&
|
|
26
|
+
typeof candidate.unmount === 'function' &&
|
|
27
|
+
typeof candidate.setIsInteractive === 'function' &&
|
|
28
|
+
typeof candidate.hasFocusedInputElement === 'function' &&
|
|
29
|
+
typeof candidate.getEmbeddedContentRoots === 'function');
|
|
30
|
+
}
|
|
18
31
|
static isKritzelExportable(object) {
|
|
19
32
|
if (!object || typeof object !== 'object') {
|
|
20
33
|
return false;
|
|
@@ -1372,7 +1385,6 @@ class Mark {
|
|
|
1372
1385
|
if (!type)
|
|
1373
1386
|
throw new RangeError(`There is no mark type ${json.type} in this schema`);
|
|
1374
1387
|
let mark = type.create(json.attrs);
|
|
1375
|
-
type.checkAttrs(mark.attrs);
|
|
1376
1388
|
return mark;
|
|
1377
1389
|
}
|
|
1378
1390
|
/**
|
|
@@ -2352,11 +2364,11 @@ class Node {
|
|
|
2352
2364
|
*/
|
|
2353
2365
|
check() {
|
|
2354
2366
|
this.type.checkContent(this.content);
|
|
2355
|
-
this.type.
|
|
2367
|
+
checkAttrs(this.type.attrs, this.attrs, "node", this.type.name);
|
|
2356
2368
|
let copy = Mark.none;
|
|
2357
2369
|
for (let i = 0; i < this.marks.length; i++) {
|
|
2358
2370
|
let mark = this.marks[i];
|
|
2359
|
-
mark.type.
|
|
2371
|
+
checkAttrs(mark.type.attrs, mark.attrs, "mark", mark.type.name);
|
|
2360
2372
|
copy = mark.addToSet(copy);
|
|
2361
2373
|
}
|
|
2362
2374
|
if (!Mark.sameSet(copy, this.marks))
|
|
@@ -2397,7 +2409,6 @@ class Node {
|
|
|
2397
2409
|
}
|
|
2398
2410
|
let content = Fragment.fromJSON(schema, json.content);
|
|
2399
2411
|
let node = schema.nodeType(json.type).create(json.attrs, content, marks);
|
|
2400
|
-
node.type.checkAttrs(node.attrs);
|
|
2401
2412
|
return node;
|
|
2402
2413
|
}
|
|
2403
2414
|
}
|
|
@@ -2447,6 +2458,15 @@ function wrapMarks(marks, str) {
|
|
|
2447
2458
|
str = marks[i].type.name + "(" + str + ")";
|
|
2448
2459
|
return str;
|
|
2449
2460
|
}
|
|
2461
|
+
function checkAttrs(attrs, values, type, name) {
|
|
2462
|
+
for (let attr in values)
|
|
2463
|
+
if (!(attr in attrs))
|
|
2464
|
+
throw new RangeError(`Unsupported attribute ${attr} for ${type} of type ${name}`);
|
|
2465
|
+
for (let attr in attrs) {
|
|
2466
|
+
if (attrs[attr].validate)
|
|
2467
|
+
attrs[attr].validate(values[attr]);
|
|
2468
|
+
}
|
|
2469
|
+
}
|
|
2450
2470
|
|
|
2451
2471
|
/**
|
|
2452
2472
|
Instances of this class represent a match state of a node type's
|
|
@@ -2901,27 +2921,21 @@ function defaultAttrs(attrs) {
|
|
|
2901
2921
|
function computeAttrs(attrs, value) {
|
|
2902
2922
|
let built = Object.create(null);
|
|
2903
2923
|
for (let name in attrs) {
|
|
2924
|
+
let attr = attrs[name];
|
|
2904
2925
|
let given = value && value[name];
|
|
2905
2926
|
if (given === undefined) {
|
|
2906
|
-
let attr = attrs[name];
|
|
2907
2927
|
if (attr.hasDefault)
|
|
2908
2928
|
given = attr.default;
|
|
2909
2929
|
else
|
|
2910
2930
|
throw new RangeError("No value supplied for attribute " + name);
|
|
2911
2931
|
}
|
|
2932
|
+
else if (attr.validate) {
|
|
2933
|
+
attr.validate(given);
|
|
2934
|
+
}
|
|
2912
2935
|
built[name] = given;
|
|
2913
2936
|
}
|
|
2914
2937
|
return built;
|
|
2915
2938
|
}
|
|
2916
|
-
function checkAttrs(attrs, values, type, name) {
|
|
2917
|
-
for (let attr in values)
|
|
2918
|
-
if (!(attr in attrs))
|
|
2919
|
-
throw new RangeError(`Unsupported attribute ${attr} for ${type} of type ${name}`);
|
|
2920
|
-
for (let attr in attrs) {
|
|
2921
|
-
if (attrs[attr].validate)
|
|
2922
|
-
attrs[attr].validate(values[attr]);
|
|
2923
|
-
}
|
|
2924
|
-
}
|
|
2925
2939
|
function initAttrs(typeName, attrs) {
|
|
2926
2940
|
let result = Object.create(null);
|
|
2927
2941
|
if (attrs)
|
|
@@ -3093,11 +3107,9 @@ let NodeType$1 = class NodeType {
|
|
|
3093
3107
|
throw new RangeError(`Invalid content for node ${this.name}: ${content.toString().slice(0, 50)}`);
|
|
3094
3108
|
}
|
|
3095
3109
|
/**
|
|
3096
|
-
@internal
|
|
3110
|
+
@internal no longer useful, but called by old prosemirror-view versions
|
|
3097
3111
|
*/
|
|
3098
|
-
checkAttrs(attrs) {
|
|
3099
|
-
checkAttrs(this.attrs, attrs, "node", this.name);
|
|
3100
|
-
}
|
|
3112
|
+
checkAttrs(attrs) { }
|
|
3101
3113
|
/**
|
|
3102
3114
|
Check whether the given mark type is allowed in this node.
|
|
3103
3115
|
*/
|
|
@@ -3244,12 +3256,6 @@ class MarkType {
|
|
|
3244
3256
|
return set[i];
|
|
3245
3257
|
}
|
|
3246
3258
|
/**
|
|
3247
|
-
@internal
|
|
3248
|
-
*/
|
|
3249
|
-
checkAttrs(attrs) {
|
|
3250
|
-
checkAttrs(this.attrs, attrs, "mark", this.name);
|
|
3251
|
-
}
|
|
3252
|
-
/**
|
|
3253
3259
|
Queries whether a given mark type is
|
|
3254
3260
|
[excluded](https://prosemirror.net/docs/ref/#model.MarkSpec.excludes) by this one.
|
|
3255
3261
|
*/
|
|
@@ -9941,7 +9947,8 @@ function nodeLen(node) {
|
|
|
9941
9947
|
}
|
|
9942
9948
|
function isIgnorable(dom, dir) {
|
|
9943
9949
|
let desc = dom.pmViewDesc;
|
|
9944
|
-
return desc
|
|
9950
|
+
return desc ? desc.size == 0 && (dir < 0 || dom.nextSibling || dom.nodeName != "BR")
|
|
9951
|
+
: dom.nodeType == 1 && dom.contentEditable == "false";
|
|
9945
9952
|
}
|
|
9946
9953
|
function skipIgnoredNodes(view, dir) {
|
|
9947
9954
|
return dir < 0 ? skipIgnoredNodesBefore(view) : skipIgnoredNodesAfter(view);
|
|
@@ -10530,12 +10537,11 @@ function addContext(slice, context) {
|
|
|
10530
10537
|
if (!type || type.hasRequiredAttrs())
|
|
10531
10538
|
break;
|
|
10532
10539
|
try {
|
|
10533
|
-
type.
|
|
10540
|
+
content = Fragment.from(type.create(array[i + 1], content));
|
|
10534
10541
|
}
|
|
10535
10542
|
catch (e) {
|
|
10536
10543
|
break;
|
|
10537
10544
|
}
|
|
10538
|
-
content = Fragment.from(type.create(array[i + 1], content));
|
|
10539
10545
|
openStart++;
|
|
10540
10546
|
openEnd++;
|
|
10541
10547
|
}
|
|
@@ -11015,7 +11021,7 @@ editHandlers.compositionstart = editHandlers.compositionupdate = view => {
|
|
|
11015
11021
|
if (!view.composing) {
|
|
11016
11022
|
view.domObserver.flush();
|
|
11017
11023
|
let { state } = view, $pos = state.selection.$to;
|
|
11018
|
-
if (state.selection instanceof TextSelection &&
|
|
11024
|
+
if (state.selection instanceof TextSelection && state.selection.empty &&
|
|
11019
11025
|
(state.storedMarks ||
|
|
11020
11026
|
(!$pos.textOffset && $pos.parentOffset && $pos.nodeBefore.marks.some(m => m.type.spec.inclusive === false)) ||
|
|
11021
11027
|
chrome && windows$1 && selectionBeforeUneditable(view))) { // Issue #1500
|
|
@@ -12652,9 +12658,7 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
|
|
|
12652
12658
|
// as being an iOS enter press), just dispatch an Enter key instead.
|
|
12653
12659
|
if (((ios && view.input.lastIOSEnter > Date.now() - 225 &&
|
|
12654
12660
|
(!inlineChange || addedNodes.some(n => n.nodeName == "DIV" || n.nodeName == "P"))) ||
|
|
12655
|
-
(!inlineChange && $from.pos
|
|
12656
|
-
(!$from.sameParent($to) || !$from.parent.inlineContent) &&
|
|
12657
|
-
$from.pos < $to.pos && !/\S/.test(parse.doc.textBetween($from.pos, $to.pos, "", "")))) &&
|
|
12661
|
+
(!inlineChange && looksLikeEnter(parse.doc, $from.pos, $to.pos))) &&
|
|
12658
12662
|
view.someProp("handleKeyDown", f => f(view, keyEvent(13, "Enter")))) {
|
|
12659
12663
|
view.input.lastIOSEnter = 0;
|
|
12660
12664
|
return;
|
|
@@ -12805,6 +12809,16 @@ function looksLikeBackspace(old, start, end, $newStart, $newEnd) {
|
|
|
12805
12809
|
// The fragments after the join point must match
|
|
12806
12810
|
return $newStart.parent.content.cut($newStart.parentOffset).eq($next.parent.content);
|
|
12807
12811
|
}
|
|
12812
|
+
function looksLikeEnter(content, from, to) {
|
|
12813
|
+
let newTextlines = 0, newLeaves = 0;
|
|
12814
|
+
content.nodesBetween(from, to, (node, pos) => {
|
|
12815
|
+
if (node.isTextblock && pos >= from && pos < to)
|
|
12816
|
+
newTextlines++;
|
|
12817
|
+
else if (node.isText ? /\S/.test(node.text.slice(Math.max(0, from - pos), Math.min(node.nodeSize, to - pos))) : node.isLeaf)
|
|
12818
|
+
newLeaves++;
|
|
12819
|
+
});
|
|
12820
|
+
return newLeaves == 0 && newTextlines == 1;
|
|
12821
|
+
}
|
|
12808
12822
|
function skipClosingAndOpening($pos, fromEnd, mayOpen) {
|
|
12809
12823
|
let depth = $pos.depth, end = fromEnd ? $pos.end() : $pos.pos;
|
|
12810
12824
|
while (depth > 0 && (fromEnd || $pos.indexAfter(depth) == $pos.node(depth).childCount)) {
|
|
@@ -14466,6 +14480,7 @@ const lightTheme = {
|
|
|
14466
14480
|
dividerColor: '#e0e0e0',
|
|
14467
14481
|
focusColor: '#333333',
|
|
14468
14482
|
focusRingColor: '#333333',
|
|
14483
|
+
fontFamily: 'sans-serif',
|
|
14469
14484
|
iconColor: 'currentColor',
|
|
14470
14485
|
scrollbarThumbColor: '#ebebeb',
|
|
14471
14486
|
textPrimary: '#000000',
|
|
@@ -14554,7 +14569,6 @@ const lightTheme = {
|
|
|
14554
14569
|
closeButtonColor: '#333333',
|
|
14555
14570
|
closeButtonHoverBackground: 'hsl(0, 0%, 0%, 4.3%)',
|
|
14556
14571
|
closeButtonHoverColor: '#000000',
|
|
14557
|
-
fontFamily: 'inherit',
|
|
14558
14572
|
footerBorder: '1px solid #ebebeb',
|
|
14559
14573
|
headerBorder: '1px solid #ebebeb',
|
|
14560
14574
|
titleColor: '#000000',
|
|
@@ -14589,11 +14603,6 @@ const lightTheme = {
|
|
|
14589
14603
|
loadingOverlayColor: '#333333',
|
|
14590
14604
|
loadingOverlaySpinnerActiveColor: '#333333',
|
|
14591
14605
|
loadingOverlaySpinnerColor: '#cccccc',
|
|
14592
|
-
syncIndicatorBackground: 'rgba(255, 255, 255, 0.92)',
|
|
14593
|
-
syncIndicatorColor: '#334155',
|
|
14594
|
-
syncIndicatorSpinnerColor: '#007AFF',
|
|
14595
|
-
syncIndicatorSpinnerTrack: 'rgba(148, 163, 184, 0.35)',
|
|
14596
|
-
syncIndicatorZIndex: '10001',
|
|
14597
14606
|
},
|
|
14598
14607
|
snap: {
|
|
14599
14608
|
indicatorFill: 'rgba(59, 130, 246, 0.3)',
|
|
@@ -14813,6 +14822,7 @@ const darkTheme = {
|
|
|
14813
14822
|
dividerColor: '#3a3a3a',
|
|
14814
14823
|
focusColor: '#ffffff',
|
|
14815
14824
|
focusRingColor: '#ffffff',
|
|
14825
|
+
fontFamily: 'sans-serif',
|
|
14816
14826
|
iconColor: 'currentColor',
|
|
14817
14827
|
scrollbarThumbColor: '#555555',
|
|
14818
14828
|
textPrimary: '#ffffff',
|
|
@@ -14935,11 +14945,6 @@ const darkTheme = {
|
|
|
14935
14945
|
loadingOverlayColor: '#e0e0e0',
|
|
14936
14946
|
loadingOverlaySpinnerActiveColor: '#e0e0e0',
|
|
14937
14947
|
loadingOverlaySpinnerColor: '#555555',
|
|
14938
|
-
syncIndicatorBackground: 'rgba(30, 30, 30, 0.95)',
|
|
14939
|
-
syncIndicatorColor: '#e0e0e0',
|
|
14940
|
-
syncIndicatorSpinnerColor: '#0A84FF',
|
|
14941
|
-
syncIndicatorSpinnerTrack: 'rgba(160, 160, 160, 0.3)',
|
|
14942
|
-
syncIndicatorZIndex: '10001',
|
|
14943
14948
|
},
|
|
14944
14949
|
snap: {
|
|
14945
14950
|
indicatorFill: 'rgba(10, 132, 255, 0.35)',
|
|
@@ -15541,7 +15546,7 @@ class KritzelMathHelper {
|
|
|
15541
15546
|
|
|
15542
15547
|
const KRITZEL_FONT_REGISTRY_KEY = '__kritzelFontRegistry__';
|
|
15543
15548
|
const KRITZEL_FONT_REGISTRY_EVENT = 'kritzel-font-registry-change';
|
|
15544
|
-
const getGlobalRegistryStore$
|
|
15549
|
+
const getGlobalRegistryStore$2 = () => {
|
|
15545
15550
|
const globalScope = globalThis;
|
|
15546
15551
|
const existing = globalScope[KRITZEL_FONT_REGISTRY_KEY];
|
|
15547
15552
|
if (existing) {
|
|
@@ -15574,7 +15579,7 @@ const normalizeKey = (value) => value.trim().toLocaleLowerCase();
|
|
|
15574
15579
|
const normalizeFamily = (value) => value.trim().toLocaleLowerCase();
|
|
15575
15580
|
class KritzelFontRegistry {
|
|
15576
15581
|
static get _fonts() {
|
|
15577
|
-
return getGlobalRegistryStore$
|
|
15582
|
+
return getGlobalRegistryStore$2().fonts;
|
|
15578
15583
|
}
|
|
15579
15584
|
static getFontFaceSet() {
|
|
15580
15585
|
if (typeof document === 'undefined' || !document.fonts) {
|
|
@@ -20020,7 +20025,7 @@ class KritzelShape extends KritzelBaseObject {
|
|
|
20020
20025
|
}
|
|
20021
20026
|
|
|
20022
20027
|
const KRITZEL_RENDERER_REGISTRY_KEY = '__kritzelDynamicObjectRendererRegistry__';
|
|
20023
|
-
const getGlobalRegistryStore = () => {
|
|
20028
|
+
const getGlobalRegistryStore$1 = () => {
|
|
20024
20029
|
const globalScope = globalThis;
|
|
20025
20030
|
const existing = globalScope[KRITZEL_RENDERER_REGISTRY_KEY];
|
|
20026
20031
|
if (existing) {
|
|
@@ -20044,7 +20049,7 @@ const getGlobalRegistryStore = () => {
|
|
|
20044
20049
|
*/
|
|
20045
20050
|
class KritzelDynamicObjectRendererRegistry {
|
|
20046
20051
|
static get _renderers() {
|
|
20047
|
-
return getGlobalRegistryStore().renderers;
|
|
20052
|
+
return getGlobalRegistryStore$1().renderers;
|
|
20048
20053
|
}
|
|
20049
20054
|
/**
|
|
20050
20055
|
* Registers a renderer implementation for a given key.
|
|
@@ -20313,7 +20318,7 @@ class KritzelDynamicObject extends KritzelBaseObject {
|
|
|
20313
20318
|
}
|
|
20314
20319
|
applyInteractiveState() {
|
|
20315
20320
|
const pointerEvents = this.isInteractive ? 'auto' : 'none';
|
|
20316
|
-
const contentCursor = this.isInteractive ? 'auto' : '';
|
|
20321
|
+
const contentCursor = this.isInteractive ? 'var(--kritzel-global-default-cursor, auto)' : '';
|
|
20317
20322
|
if (this.element) {
|
|
20318
20323
|
this.element.style.pointerEvents = pointerEvents;
|
|
20319
20324
|
this.element.style.cursor = contentCursor;
|
|
@@ -20349,7 +20354,7 @@ class KritzelDynamicObject extends KritzelBaseObject {
|
|
|
20349
20354
|
if (!this.isInteractive) {
|
|
20350
20355
|
return false;
|
|
20351
20356
|
}
|
|
20352
|
-
const focusHosts = this.
|
|
20357
|
+
const focusHosts = this.getEmbeddedContentRoots();
|
|
20353
20358
|
// Primary path: locate the focused input-like element by walking from each host through
|
|
20354
20359
|
// `:focus` (piercing open shadow roots). This works in real browsers even when the engine
|
|
20355
20360
|
// and editor are nested web components, because it never relies on the document-level
|
|
@@ -20366,7 +20371,7 @@ class KritzelDynamicObject extends KritzelBaseObject {
|
|
|
20366
20371
|
}
|
|
20367
20372
|
return false;
|
|
20368
20373
|
}
|
|
20369
|
-
|
|
20374
|
+
getEmbeddedContentRoots() {
|
|
20370
20375
|
const hosts = [];
|
|
20371
20376
|
if (this.element) {
|
|
20372
20377
|
hosts.push(this.element);
|
|
@@ -20579,11 +20584,11 @@ class KritzelDynamicObject extends KritzelBaseObject {
|
|
|
20579
20584
|
* @returns A serializable object with htmlString and dimension snapshots
|
|
20580
20585
|
*/
|
|
20581
20586
|
serialize() {
|
|
20582
|
-
const { _core, _elementRef, element, totalWidth, totalHeight, isSelected, isHovered, isMounted, isInteractive, resizing, markedForRemoval, isVisible, ...props } = this;
|
|
20587
|
+
const { _core, _elementRef, element, totalWidth, totalHeight, isSelected, isHovered, isMounted, isInteractive, resizing, markedForRemoval, isVisible, rendererData, ...props } = this;
|
|
20583
20588
|
const cloned = structuredClone(props);
|
|
20584
20589
|
// Include rendererKey and rendererData for lifecycle-driven rendering
|
|
20585
20590
|
cloned.rendererKey = this.rendererKey;
|
|
20586
|
-
cloned.rendererData = this.
|
|
20591
|
+
cloned.rendererData = this.serializeRendererData();
|
|
20587
20592
|
// Store HTML as string for fallback/compatibility when renderer is unavailable
|
|
20588
20593
|
cloned.htmlString = element ? element.outerHTML : '';
|
|
20589
20594
|
// Capture dimension snapshot at serialization time
|
|
@@ -20591,6 +20596,19 @@ class KritzelDynamicObject extends KritzelBaseObject {
|
|
|
20591
20596
|
cloned.serializedHeight = this.height;
|
|
20592
20597
|
return cloned;
|
|
20593
20598
|
}
|
|
20599
|
+
serializeRendererData() {
|
|
20600
|
+
if (this.rendererKey) {
|
|
20601
|
+
const renderer = KritzelDynamicObjectRendererRegistry.get(this.rendererKey);
|
|
20602
|
+
if (renderer?.onSerialize) {
|
|
20603
|
+
return structuredClone(renderer.onSerialize({
|
|
20604
|
+
object: this,
|
|
20605
|
+
container: this.isMounted && this.elementRef instanceof HTMLElement ? this.elementRef : null,
|
|
20606
|
+
data: this.rendererData,
|
|
20607
|
+
}));
|
|
20608
|
+
}
|
|
20609
|
+
}
|
|
20610
|
+
return structuredClone(this.rendererData);
|
|
20611
|
+
}
|
|
20594
20612
|
/**
|
|
20595
20613
|
* Deserializes the dynamic object from a plain object.
|
|
20596
20614
|
* Reconstructs the element from stored HTML string with fallback to placeholder.
|
|
@@ -20623,6 +20641,452 @@ class KritzelDynamicObject extends KritzelBaseObject {
|
|
|
20623
20641
|
}
|
|
20624
20642
|
}
|
|
20625
20643
|
|
|
20644
|
+
const IFRAME_STATE_MESSAGE = 'kritzel-iframe-state';
|
|
20645
|
+
const IFRAME_PARENT_STATE_MESSAGE = 'kritzel-iframe-parent-state';
|
|
20646
|
+
const IFRAME_POINTER_MESSAGE = 'kritzel-iframe-pointer';
|
|
20647
|
+
const IFRAME_CONTEXT_MENU_MESSAGE = 'kritzel-iframe-contextmenu';
|
|
20648
|
+
const SUPPORTED_SANDBOX_TOKENS = new Set([
|
|
20649
|
+
'allow-downloads',
|
|
20650
|
+
'allow-forms',
|
|
20651
|
+
'allow-modals',
|
|
20652
|
+
'allow-orientation-lock',
|
|
20653
|
+
'allow-pointer-lock',
|
|
20654
|
+
'allow-popups',
|
|
20655
|
+
'allow-popups-to-escape-sandbox',
|
|
20656
|
+
'allow-presentation',
|
|
20657
|
+
'allow-same-origin',
|
|
20658
|
+
'allow-scripts',
|
|
20659
|
+
'allow-top-navigation-by-user-activation',
|
|
20660
|
+
]);
|
|
20661
|
+
const iframePointerBridgeStarts = new WeakMap();
|
|
20662
|
+
class KritzelIframeObject extends KritzelBaseObject {
|
|
20663
|
+
__class__ = 'KritzelIframeObject';
|
|
20664
|
+
content = { html: '', css: '', script: '' };
|
|
20665
|
+
loadingContent;
|
|
20666
|
+
isLoading = false;
|
|
20667
|
+
state = {};
|
|
20668
|
+
title = 'Embedded content';
|
|
20669
|
+
sandbox = ['allow-scripts'];
|
|
20670
|
+
borderRadius;
|
|
20671
|
+
boxShadow;
|
|
20672
|
+
get html() { return this.content.html; }
|
|
20673
|
+
set html(value) { this.content = { ...this.content, html: value }; }
|
|
20674
|
+
get css() { return this.content.css; }
|
|
20675
|
+
set css(value) { this.content = { ...this.content, css: value }; }
|
|
20676
|
+
get script() { return this.content.script; }
|
|
20677
|
+
set script(value) { this.content = { ...this.content, script: value }; }
|
|
20678
|
+
messageListener = null;
|
|
20679
|
+
constructor(config) {
|
|
20680
|
+
super();
|
|
20681
|
+
this.content = {
|
|
20682
|
+
html: config?.content?.html ?? config?.html ?? '',
|
|
20683
|
+
css: config?.content?.css ?? config?.css ?? '',
|
|
20684
|
+
script: config?.content?.script ?? config?.script ?? '',
|
|
20685
|
+
};
|
|
20686
|
+
this.loadingContent = config?.loadingContent ? {
|
|
20687
|
+
html: config.loadingContent.html ?? '',
|
|
20688
|
+
css: config.loadingContent.css ?? '',
|
|
20689
|
+
script: config.loadingContent.script ?? '',
|
|
20690
|
+
} : undefined;
|
|
20691
|
+
this.isLoading = config?.isLoading ?? false;
|
|
20692
|
+
this.state = structuredClone(config?.state ?? {});
|
|
20693
|
+
this.title = config?.title ?? 'Embedded content';
|
|
20694
|
+
this.sandbox = this.normalizeSandbox(config?.sandbox);
|
|
20695
|
+
this.borderRadius = config?.borderRadius;
|
|
20696
|
+
this.boxShadow = config?.boxShadow;
|
|
20697
|
+
this.translateX = config?.translateX ?? 0;
|
|
20698
|
+
this.translateY = config?.translateY ?? 0;
|
|
20699
|
+
this.rotation = KritzelMathHelper.degreesToRadians(config?.rotation ?? 0);
|
|
20700
|
+
this.scale = config?.scale ?? 1;
|
|
20701
|
+
this.width = config?.width ?? 0;
|
|
20702
|
+
this.height = config?.height ?? 0;
|
|
20703
|
+
}
|
|
20704
|
+
static create(core, config) {
|
|
20705
|
+
const object = new KritzelIframeObject(config);
|
|
20706
|
+
object._core = core;
|
|
20707
|
+
object.id = object.generateId();
|
|
20708
|
+
object.workspaceId = core.store.state.activeWorkspace.id;
|
|
20709
|
+
object.userId = core.user?.id;
|
|
20710
|
+
object.scale = config?.scale ?? core.store.state.scale;
|
|
20711
|
+
object.zIndex = core.store.currentZIndex;
|
|
20712
|
+
return object;
|
|
20713
|
+
}
|
|
20714
|
+
get sandboxAttribute() {
|
|
20715
|
+
return this.sandbox.join(' ');
|
|
20716
|
+
}
|
|
20717
|
+
mount(iframe) {
|
|
20718
|
+
if (this.isMounted && this.elementRef === iframe) {
|
|
20719
|
+
return;
|
|
20720
|
+
}
|
|
20721
|
+
if (this.isMounted) {
|
|
20722
|
+
this.unmount();
|
|
20723
|
+
}
|
|
20724
|
+
this.elementRef = iframe;
|
|
20725
|
+
this.isMounted = true;
|
|
20726
|
+
iframe.title = this.title;
|
|
20727
|
+
iframe.setAttribute('sandbox', this.sandboxAttribute);
|
|
20728
|
+
iframe.style.pointerEvents = this.isInteractive ? 'auto' : 'none';
|
|
20729
|
+
this.messageListener = event => this.handleMessage(event);
|
|
20730
|
+
window.addEventListener('message', this.messageListener);
|
|
20731
|
+
iframe.srcdoc = this.createSourceDocument();
|
|
20732
|
+
this.onMount(this.createLifecycleContext());
|
|
20733
|
+
}
|
|
20734
|
+
unmount() {
|
|
20735
|
+
if (!this.isMounted) {
|
|
20736
|
+
return;
|
|
20737
|
+
}
|
|
20738
|
+
const nextState = this.onUnmount(this.createLifecycleContext());
|
|
20739
|
+
if (nextState !== undefined) {
|
|
20740
|
+
this.state = structuredClone(nextState);
|
|
20741
|
+
}
|
|
20742
|
+
if (this.messageListener) {
|
|
20743
|
+
window.removeEventListener('message', this.messageListener);
|
|
20744
|
+
this.messageListener = null;
|
|
20745
|
+
}
|
|
20746
|
+
this.isMounted = false;
|
|
20747
|
+
this._elementRef = null;
|
|
20748
|
+
}
|
|
20749
|
+
setContent(content) {
|
|
20750
|
+
this.content = {
|
|
20751
|
+
html: content.html ?? this.content.html,
|
|
20752
|
+
css: content.css ?? this.content.css,
|
|
20753
|
+
script: content.script ?? this.content.script,
|
|
20754
|
+
};
|
|
20755
|
+
this.refreshDocument();
|
|
20756
|
+
this.persistUpdate();
|
|
20757
|
+
}
|
|
20758
|
+
setLoadingContent(content) {
|
|
20759
|
+
this.loadingContent = {
|
|
20760
|
+
html: content.html ?? this.loadingContent?.html ?? '',
|
|
20761
|
+
css: content.css ?? this.loadingContent?.css ?? '',
|
|
20762
|
+
script: content.script ?? this.loadingContent?.script ?? '',
|
|
20763
|
+
};
|
|
20764
|
+
this.refreshDocument();
|
|
20765
|
+
this.persistUpdate();
|
|
20766
|
+
}
|
|
20767
|
+
setLoading(isLoading) {
|
|
20768
|
+
this.isLoading = isLoading;
|
|
20769
|
+
this.refreshDocument();
|
|
20770
|
+
this.persistUpdate();
|
|
20771
|
+
}
|
|
20772
|
+
getActiveContent() {
|
|
20773
|
+
const activeLoadingContent = this.isLoading ? this.loadingContent : undefined;
|
|
20774
|
+
return {
|
|
20775
|
+
html: activeLoadingContent?.html ?? this.content.html,
|
|
20776
|
+
css: activeLoadingContent?.css ?? this.content.css,
|
|
20777
|
+
script: activeLoadingContent?.script ?? this.content.script,
|
|
20778
|
+
};
|
|
20779
|
+
}
|
|
20780
|
+
setState(state) {
|
|
20781
|
+
this.state = structuredClone(state);
|
|
20782
|
+
this.elementRef?.contentWindow?.postMessage({ type: IFRAME_PARENT_STATE_MESSAGE, state: this.state }, '*');
|
|
20783
|
+
this.persistUpdate();
|
|
20784
|
+
}
|
|
20785
|
+
setIsInteractive(isInteractive) {
|
|
20786
|
+
this.isInteractive = isInteractive;
|
|
20787
|
+
if (this.isMounted && this.elementRef) {
|
|
20788
|
+
this.elementRef.style.pointerEvents = isInteractive ? 'auto' : 'none';
|
|
20789
|
+
if (!isInteractive) {
|
|
20790
|
+
this.elementRef.blur();
|
|
20791
|
+
}
|
|
20792
|
+
}
|
|
20793
|
+
}
|
|
20794
|
+
hasFocusedInputElement() {
|
|
20795
|
+
return this.isInteractive && this.isMounted && document.activeElement === this.elementRef;
|
|
20796
|
+
}
|
|
20797
|
+
getEmbeddedContentRoots() {
|
|
20798
|
+
return this.isMounted && this.elementRef instanceof HTMLElement && this.elementRef.tagName === 'IFRAME' ? [this.elementRef] : [];
|
|
20799
|
+
}
|
|
20800
|
+
onMount(_context) { }
|
|
20801
|
+
onSerialize(context) {
|
|
20802
|
+
return context.state;
|
|
20803
|
+
}
|
|
20804
|
+
onUnmount(context) {
|
|
20805
|
+
return context.state;
|
|
20806
|
+
}
|
|
20807
|
+
serialize() {
|
|
20808
|
+
const nextState = this.onSerialize(this.createLifecycleContext());
|
|
20809
|
+
this.state = structuredClone(nextState);
|
|
20810
|
+
const messageListener = this.messageListener;
|
|
20811
|
+
this.messageListener = null;
|
|
20812
|
+
try {
|
|
20813
|
+
const serialized = super.serialize();
|
|
20814
|
+
delete serialized.messageListener;
|
|
20815
|
+
return serialized;
|
|
20816
|
+
}
|
|
20817
|
+
finally {
|
|
20818
|
+
this.messageListener = messageListener;
|
|
20819
|
+
}
|
|
20820
|
+
}
|
|
20821
|
+
deserialize(object) {
|
|
20822
|
+
super.deserialize(object);
|
|
20823
|
+
const nextContent = object.content && typeof object.content === 'object' ? object.content : {};
|
|
20824
|
+
const nextLoadingContent = object.loadingContent && typeof object.loadingContent === 'object' ? object.loadingContent : undefined;
|
|
20825
|
+
this.content = {
|
|
20826
|
+
html: typeof nextContent.html === 'string' ? nextContent.html : typeof object.html === 'string' ? object.html : '',
|
|
20827
|
+
css: typeof nextContent.css === 'string' ? nextContent.css : typeof object.css === 'string' ? object.css : '',
|
|
20828
|
+
script: typeof nextContent.script === 'string' ? nextContent.script : typeof object.script === 'string' ? object.script : '',
|
|
20829
|
+
};
|
|
20830
|
+
this.loadingContent = nextLoadingContent ? {
|
|
20831
|
+
html: typeof nextLoadingContent.html === 'string' ? nextLoadingContent.html : '',
|
|
20832
|
+
css: typeof nextLoadingContent.css === 'string' ? nextLoadingContent.css : '',
|
|
20833
|
+
script: typeof nextLoadingContent.script === 'string' ? nextLoadingContent.script : '',
|
|
20834
|
+
} : undefined;
|
|
20835
|
+
this.isLoading = typeof object.isLoading === 'boolean' ? object.isLoading : false;
|
|
20836
|
+
this.state = object.state && typeof object.state === 'object' ? structuredClone(object.state) : {};
|
|
20837
|
+
this.title = typeof object.title === 'string' ? object.title : 'Embedded content';
|
|
20838
|
+
this.sandbox = this.normalizeSandbox(Array.isArray(object.sandbox) ? object.sandbox.filter((token) => typeof token === 'string') : undefined);
|
|
20839
|
+
this.borderRadius = (typeof object.borderRadius === 'number' || typeof object.borderRadius === 'string') ? object.borderRadius : undefined;
|
|
20840
|
+
this.boxShadow = typeof object.boxShadow === 'string' ? object.boxShadow : undefined;
|
|
20841
|
+
this.messageListener = null;
|
|
20842
|
+
return this;
|
|
20843
|
+
}
|
|
20844
|
+
copy() {
|
|
20845
|
+
const copiedObject = super.copy();
|
|
20846
|
+
copiedObject.content = { ...this.content };
|
|
20847
|
+
copiedObject.loadingContent = this.loadingContent ? { ...this.loadingContent } : undefined;
|
|
20848
|
+
copiedObject.isLoading = this.isLoading;
|
|
20849
|
+
copiedObject.state = structuredClone(this.state);
|
|
20850
|
+
copiedObject.sandbox = [...this.sandbox];
|
|
20851
|
+
copiedObject.borderRadius = this.borderRadius;
|
|
20852
|
+
copiedObject.boxShadow = this.boxShadow;
|
|
20853
|
+
copiedObject.messageListener = null;
|
|
20854
|
+
copiedObject._elementRef = null;
|
|
20855
|
+
return copiedObject;
|
|
20856
|
+
}
|
|
20857
|
+
clone() {
|
|
20858
|
+
const clonedObject = super.clone();
|
|
20859
|
+
clonedObject.content = { ...this.content };
|
|
20860
|
+
clonedObject.loadingContent = this.loadingContent ? { ...this.loadingContent } : undefined;
|
|
20861
|
+
clonedObject.isLoading = this.isLoading;
|
|
20862
|
+
clonedObject.state = structuredClone(this.state);
|
|
20863
|
+
clonedObject.sandbox = [...this.sandbox];
|
|
20864
|
+
clonedObject.borderRadius = this.borderRadius;
|
|
20865
|
+
clonedObject.boxShadow = this.boxShadow;
|
|
20866
|
+
clonedObject.messageListener = null;
|
|
20867
|
+
clonedObject.isMounted = false;
|
|
20868
|
+
clonedObject._elementRef = null;
|
|
20869
|
+
return clonedObject;
|
|
20870
|
+
}
|
|
20871
|
+
adoptTransientStateFrom(previous) {
|
|
20872
|
+
if (!(previous instanceof KritzelIframeObject)) {
|
|
20873
|
+
return;
|
|
20874
|
+
}
|
|
20875
|
+
this.isInteractive = previous.isInteractive;
|
|
20876
|
+
this.isSelected = previous.isSelected;
|
|
20877
|
+
this.isHovered = previous.isHovered;
|
|
20878
|
+
if (!previous.isMounted || !(previous.elementRef instanceof HTMLElement) || previous.elementRef.tagName !== 'IFRAME') {
|
|
20879
|
+
return;
|
|
20880
|
+
}
|
|
20881
|
+
if (previous.messageListener) {
|
|
20882
|
+
window.removeEventListener('message', previous.messageListener);
|
|
20883
|
+
}
|
|
20884
|
+
this._elementRef = previous.elementRef;
|
|
20885
|
+
this.isMounted = true;
|
|
20886
|
+
this.messageListener = event => this.handleMessage(event);
|
|
20887
|
+
window.addEventListener('message', this.messageListener);
|
|
20888
|
+
this.elementRef.style.pointerEvents = this.isInteractive ? 'auto' : 'none';
|
|
20889
|
+
previous.messageListener = null;
|
|
20890
|
+
previous.isMounted = false;
|
|
20891
|
+
previous._elementRef = null;
|
|
20892
|
+
}
|
|
20893
|
+
createLifecycleContext() {
|
|
20894
|
+
return {
|
|
20895
|
+
object: this,
|
|
20896
|
+
iframe: this.isMounted ? this.elementRef : null,
|
|
20897
|
+
state: structuredClone(this.state),
|
|
20898
|
+
};
|
|
20899
|
+
}
|
|
20900
|
+
normalizeSandbox(tokens) {
|
|
20901
|
+
const requestedTokens = tokens ?? ['allow-scripts'];
|
|
20902
|
+
const normalized = requestedTokens.filter(token => SUPPORTED_SANDBOX_TOKENS.has(token));
|
|
20903
|
+
return [...new Set(normalized.length > 0 ? normalized : ['allow-scripts'])];
|
|
20904
|
+
}
|
|
20905
|
+
createSourceDocument() {
|
|
20906
|
+
const activeContent = this.getActiveContent();
|
|
20907
|
+
const state = JSON.stringify(this.state).replace(/</g, '\\u003c');
|
|
20908
|
+
const css = activeContent.css.replace(/<\/style/gi, '<\\/style');
|
|
20909
|
+
const script = activeContent.script.replace(/<\/script/gi, '<\\/script');
|
|
20910
|
+
const computedStyle = this.isMounted ? getComputedStyle(this.elementRef) : null;
|
|
20911
|
+
const defaultCursor = computedStyle?.getPropertyValue('--kritzel-global-default-cursor').trim() || 'auto';
|
|
20912
|
+
const pointerCursor = computedStyle?.getPropertyValue('--kritzel-global-pointer-cursor').trim() || defaultCursor;
|
|
20913
|
+
return `<!doctype html>
|
|
20914
|
+
<html>
|
|
20915
|
+
<head>
|
|
20916
|
+
<meta charset="utf-8">
|
|
20917
|
+
<style>
|
|
20918
|
+
:root {
|
|
20919
|
+
--kritzel-iframe-default-cursor: ${defaultCursor};
|
|
20920
|
+
--kritzel-iframe-pointer-cursor: ${pointerCursor};
|
|
20921
|
+
}
|
|
20922
|
+
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; cursor: var(--kritzel-iframe-default-cursor); }
|
|
20923
|
+
button, button *, a, a *, input, textarea, select { cursor: var(--kritzel-iframe-pointer-cursor) !important; }
|
|
20924
|
+
${css}
|
|
20925
|
+
</style>
|
|
20926
|
+
</head>
|
|
20927
|
+
<body>
|
|
20928
|
+
${activeContent.html}
|
|
20929
|
+
<script>
|
|
20930
|
+
const kritzel = globalThis.kritzel = {
|
|
20931
|
+
state: ${state},
|
|
20932
|
+
setState(nextState) {
|
|
20933
|
+
this.state = nextState;
|
|
20934
|
+
parent.postMessage({ type: '${IFRAME_STATE_MESSAGE}', state: nextState }, '*');
|
|
20935
|
+
},
|
|
20936
|
+
};
|
|
20937
|
+
globalThis.addEventListener('message', event => {
|
|
20938
|
+
if (event.data?.type === '${IFRAME_PARENT_STATE_MESSAGE}' && event.data.state && typeof event.data.state === 'object') {
|
|
20939
|
+
kritzel.state = event.data.state;
|
|
20940
|
+
globalThis.dispatchEvent(new CustomEvent('kritzelstatechange', { detail: kritzel.state }));
|
|
20941
|
+
}
|
|
20942
|
+
});
|
|
20943
|
+
let bridgedPointerId = null;
|
|
20944
|
+
const interactiveSelector = 'button, input, textarea, select, a[href], [contenteditable="true"], [contenteditable=""]';
|
|
20945
|
+
const bridgePointerEvent = event => parent.postMessage({
|
|
20946
|
+
type: '${IFRAME_POINTER_MESSAGE}',
|
|
20947
|
+
eventType: event.type,
|
|
20948
|
+
pointerId: event.pointerId,
|
|
20949
|
+
pointerType: event.pointerType,
|
|
20950
|
+
clientX: event.clientX,
|
|
20951
|
+
clientY: event.clientY,
|
|
20952
|
+
screenX: event.screenX,
|
|
20953
|
+
screenY: event.screenY,
|
|
20954
|
+
button: event.button,
|
|
20955
|
+
buttons: event.buttons,
|
|
20956
|
+
shiftKey: event.shiftKey,
|
|
20957
|
+
ctrlKey: event.ctrlKey,
|
|
20958
|
+
altKey: event.altKey,
|
|
20959
|
+
metaKey: event.metaKey,
|
|
20960
|
+
}, '*');
|
|
20961
|
+
document.addEventListener('pointerdown', event => {
|
|
20962
|
+
if (event.target instanceof Element && event.target.closest(interactiveSelector)) return;
|
|
20963
|
+
bridgedPointerId = event.pointerId;
|
|
20964
|
+
event.preventDefault();
|
|
20965
|
+
bridgePointerEvent(event);
|
|
20966
|
+
});
|
|
20967
|
+
document.addEventListener('pointermove', event => {
|
|
20968
|
+
if (event.pointerId !== bridgedPointerId) return;
|
|
20969
|
+
event.preventDefault();
|
|
20970
|
+
bridgePointerEvent(event);
|
|
20971
|
+
});
|
|
20972
|
+
const finishPointerBridge = event => {
|
|
20973
|
+
if (event.pointerId !== bridgedPointerId) return;
|
|
20974
|
+
event.preventDefault();
|
|
20975
|
+
bridgePointerEvent(event);
|
|
20976
|
+
bridgedPointerId = null;
|
|
20977
|
+
};
|
|
20978
|
+
document.addEventListener('pointerup', finishPointerBridge);
|
|
20979
|
+
document.addEventListener('pointercancel', finishPointerBridge);
|
|
20980
|
+
document.addEventListener('contextmenu', event => {
|
|
20981
|
+
event.preventDefault();
|
|
20982
|
+
parent.postMessage({
|
|
20983
|
+
type: '${IFRAME_CONTEXT_MENU_MESSAGE}',
|
|
20984
|
+
clientX: event.clientX,
|
|
20985
|
+
clientY: event.clientY,
|
|
20986
|
+
button: event.button,
|
|
20987
|
+
shiftKey: event.shiftKey,
|
|
20988
|
+
ctrlKey: event.ctrlKey,
|
|
20989
|
+
altKey: event.altKey,
|
|
20990
|
+
metaKey: event.metaKey,
|
|
20991
|
+
}, '*');
|
|
20992
|
+
});
|
|
20993
|
+
${script}
|
|
20994
|
+
<\/script>
|
|
20995
|
+
</body>
|
|
20996
|
+
</html>`;
|
|
20997
|
+
}
|
|
20998
|
+
handleMessage(event) {
|
|
20999
|
+
if (event.source !== this.elementRef?.contentWindow || !event.data || typeof event.data !== 'object') {
|
|
21000
|
+
return;
|
|
21001
|
+
}
|
|
21002
|
+
const message = event.data;
|
|
21003
|
+
if (message.type === IFRAME_POINTER_MESSAGE) {
|
|
21004
|
+
this.dispatchPointerMessage(event.data);
|
|
21005
|
+
return;
|
|
21006
|
+
}
|
|
21007
|
+
if (message.type === IFRAME_CONTEXT_MENU_MESSAGE) {
|
|
21008
|
+
this.dispatchContextMenuMessage(event.data);
|
|
21009
|
+
return;
|
|
21010
|
+
}
|
|
21011
|
+
if (message.type !== IFRAME_STATE_MESSAGE || !message.state || typeof message.state !== 'object') {
|
|
21012
|
+
return;
|
|
21013
|
+
}
|
|
21014
|
+
this.state = structuredClone(message.state);
|
|
21015
|
+
this.persistUpdate();
|
|
21016
|
+
}
|
|
21017
|
+
dispatchPointerMessage(message) {
|
|
21018
|
+
if (!this.isMounted || !this.elementRef || !['pointerdown', 'pointermove', 'pointerup', 'pointercancel'].includes(message.eventType)) {
|
|
21019
|
+
return;
|
|
21020
|
+
}
|
|
21021
|
+
const iframeRect = this.elementRef.getBoundingClientRect();
|
|
21022
|
+
if (message.eventType === 'pointerdown') {
|
|
21023
|
+
const scaleX = this.elementRef.offsetWidth > 0 ? iframeRect.width / this.elementRef.offsetWidth : 1;
|
|
21024
|
+
const scaleY = this.elementRef.offsetHeight > 0 ? iframeRect.height / this.elementRef.offsetHeight : 1;
|
|
21025
|
+
iframePointerBridgeStarts.set(this.elementRef, {
|
|
21026
|
+
pointerId: message.pointerId,
|
|
21027
|
+
clientX: iframeRect.left + message.clientX * scaleX,
|
|
21028
|
+
clientY: iframeRect.top + message.clientY * scaleY,
|
|
21029
|
+
screenX: message.screenX,
|
|
21030
|
+
screenY: message.screenY,
|
|
21031
|
+
});
|
|
21032
|
+
}
|
|
21033
|
+
const bridgeStart = iframePointerBridgeStarts.get(this.elementRef);
|
|
21034
|
+
const hasBridgeStart = bridgeStart?.pointerId === message.pointerId;
|
|
21035
|
+
const clientX = hasBridgeStart ? bridgeStart.clientX + message.screenX - bridgeStart.screenX : iframeRect.left + message.clientX;
|
|
21036
|
+
const clientY = hasBridgeStart ? bridgeStart.clientY + message.screenY - bridgeStart.screenY : iframeRect.top + message.clientY;
|
|
21037
|
+
this.elementRef.dispatchEvent(new PointerEvent(message.eventType, {
|
|
21038
|
+
bubbles: true,
|
|
21039
|
+
composed: true,
|
|
21040
|
+
cancelable: true,
|
|
21041
|
+
pointerId: message.pointerId,
|
|
21042
|
+
pointerType: message.pointerType,
|
|
21043
|
+
clientX,
|
|
21044
|
+
clientY,
|
|
21045
|
+
screenX: message.screenX,
|
|
21046
|
+
screenY: message.screenY,
|
|
21047
|
+
button: message.button,
|
|
21048
|
+
buttons: message.buttons,
|
|
21049
|
+
shiftKey: message.shiftKey,
|
|
21050
|
+
ctrlKey: message.ctrlKey,
|
|
21051
|
+
altKey: message.altKey,
|
|
21052
|
+
metaKey: message.metaKey,
|
|
21053
|
+
}));
|
|
21054
|
+
if (message.eventType === 'pointerup' || message.eventType === 'pointercancel') {
|
|
21055
|
+
iframePointerBridgeStarts.delete(this.elementRef);
|
|
21056
|
+
}
|
|
21057
|
+
}
|
|
21058
|
+
dispatchContextMenuMessage(message) {
|
|
21059
|
+
if (!this.isMounted || !this.elementRef) {
|
|
21060
|
+
return;
|
|
21061
|
+
}
|
|
21062
|
+
const iframeRect = this.elementRef.getBoundingClientRect();
|
|
21063
|
+
// Dispatched as a MouseEvent (not PointerEvent) to mirror how browsers
|
|
21064
|
+
// natively raise 'contextmenu' for both mouse right-click and touch long-press.
|
|
21065
|
+
this.elementRef.dispatchEvent(new MouseEvent('contextmenu', {
|
|
21066
|
+
bubbles: true,
|
|
21067
|
+
composed: true,
|
|
21068
|
+
cancelable: true,
|
|
21069
|
+
clientX: iframeRect.left + message.clientX,
|
|
21070
|
+
clientY: iframeRect.top + message.clientY,
|
|
21071
|
+
button: message.button,
|
|
21072
|
+
shiftKey: message.shiftKey,
|
|
21073
|
+
ctrlKey: message.ctrlKey,
|
|
21074
|
+
altKey: message.altKey,
|
|
21075
|
+
metaKey: message.metaKey,
|
|
21076
|
+
}));
|
|
21077
|
+
}
|
|
21078
|
+
refreshDocument() {
|
|
21079
|
+
if (this.isMounted && this.elementRef) {
|
|
21080
|
+
this.elementRef.srcdoc = this.createSourceDocument();
|
|
21081
|
+
}
|
|
21082
|
+
}
|
|
21083
|
+
persistUpdate() {
|
|
21084
|
+
if (this._core?.store?.objects) {
|
|
21085
|
+
this.update();
|
|
21086
|
+
}
|
|
21087
|
+
}
|
|
21088
|
+
}
|
|
21089
|
+
|
|
20626
21090
|
/**
|
|
20627
21091
|
* Represents a selection group that manages multiple selected objects on the canvas.
|
|
20628
21092
|
* The selection group allows batch operations like move, resize, and rotate on multiple objects simultaneously.
|
|
@@ -22753,13 +23217,38 @@ class KritzelShapeTool extends KritzelBaseTool {
|
|
|
22753
23217
|
}
|
|
22754
23218
|
}
|
|
22755
23219
|
|
|
23220
|
+
const KRITZEL_ICON_REGISTRY_KEY = '__kritzelIconRegistry__';
|
|
23221
|
+
const getGlobalRegistryStore = () => {
|
|
23222
|
+
const globalScope = globalThis;
|
|
23223
|
+
const existing = globalScope[KRITZEL_ICON_REGISTRY_KEY];
|
|
23224
|
+
if (existing) {
|
|
23225
|
+
return existing;
|
|
23226
|
+
}
|
|
23227
|
+
const created = {
|
|
23228
|
+
icons: new Map(),
|
|
23229
|
+
listeners: new Set(),
|
|
23230
|
+
};
|
|
23231
|
+
globalScope[KRITZEL_ICON_REGISTRY_KEY] = created;
|
|
23232
|
+
return created;
|
|
23233
|
+
};
|
|
22756
23234
|
/**
|
|
22757
23235
|
* A static registry for managing SVG icons throughout the Kritzel library.
|
|
22758
23236
|
* Icons are stored as name-to-SVG-content mappings and can be retrieved by name.
|
|
22759
23237
|
*/
|
|
22760
23238
|
class KritzelIconRegistry {
|
|
22761
23239
|
/** Internal storage for registered icons, mapping icon names to their SVG content. */
|
|
22762
|
-
static registry
|
|
23240
|
+
static get registry() {
|
|
23241
|
+
return getGlobalRegistryStore().icons;
|
|
23242
|
+
}
|
|
23243
|
+
static get listeners() {
|
|
23244
|
+
return getGlobalRegistryStore().listeners;
|
|
23245
|
+
}
|
|
23246
|
+
static subscribe(listener) {
|
|
23247
|
+
this.listeners.add(listener);
|
|
23248
|
+
return () => {
|
|
23249
|
+
this.listeners.delete(listener);
|
|
23250
|
+
};
|
|
23251
|
+
}
|
|
22763
23252
|
/**
|
|
22764
23253
|
* Registers a single icon with the given name and SVG content.
|
|
22765
23254
|
* If an icon with the same name already exists, it will be overwritten and a warning will be logged.
|
|
@@ -22772,6 +23261,9 @@ class KritzelIconRegistry {
|
|
|
22772
23261
|
console.warn(`[IconRegistry] Icon "${name}" is already registered. It will be overwritten.`);
|
|
22773
23262
|
}
|
|
22774
23263
|
this.registry.set(name, svgContent);
|
|
23264
|
+
for (const listener of this.listeners) {
|
|
23265
|
+
listener(name);
|
|
23266
|
+
}
|
|
22775
23267
|
}
|
|
22776
23268
|
/**
|
|
22777
23269
|
* Retrieves the SVG content for a registered icon by its name.
|
|
@@ -22805,72 +23297,77 @@ class KritzelIconRegistry {
|
|
|
22805
23297
|
return this.registry.has(name);
|
|
22806
23298
|
}
|
|
22807
23299
|
}
|
|
22808
|
-
|
|
22809
|
-
|
|
22810
|
-
|
|
22811
|
-
|
|
22812
|
-
|
|
22813
|
-
|
|
22814
|
-
|
|
22815
|
-
|
|
22816
|
-
|
|
22817
|
-
|
|
22818
|
-
|
|
22819
|
-
|
|
22820
|
-
|
|
22821
|
-
|
|
22822
|
-
|
|
22823
|
-
|
|
22824
|
-
|
|
22825
|
-
|
|
22826
|
-
|
|
22827
|
-
|
|
22828
|
-
|
|
22829
|
-
|
|
22830
|
-
|
|
22831
|
-
|
|
22832
|
-
|
|
22833
|
-
|
|
22834
|
-
|
|
22835
|
-
|
|
22836
|
-
|
|
22837
|
-
|
|
22838
|
-
|
|
22839
|
-
|
|
22840
|
-
|
|
22841
|
-
|
|
22842
|
-
|
|
22843
|
-
|
|
22844
|
-
|
|
22845
|
-
|
|
22846
|
-
|
|
22847
|
-
|
|
22848
|
-
|
|
22849
|
-
|
|
22850
|
-
|
|
22851
|
-
|
|
22852
|
-
|
|
22853
|
-
|
|
22854
|
-
|
|
22855
|
-
|
|
22856
|
-
|
|
22857
|
-
|
|
22858
|
-
|
|
22859
|
-
|
|
22860
|
-
|
|
22861
|
-
|
|
22862
|
-
|
|
22863
|
-
|
|
22864
|
-
|
|
22865
|
-
|
|
22866
|
-
|
|
22867
|
-
|
|
22868
|
-
|
|
22869
|
-
|
|
22870
|
-
|
|
22871
|
-
|
|
22872
|
-
|
|
22873
|
-
}
|
|
23300
|
+
const defaultIcons = {
|
|
23301
|
+
cursor: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z"/></svg>',
|
|
23302
|
+
pen: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg>',
|
|
23303
|
+
arrow: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="19" x2="19" y2="5"/><path d="M15 5h4v4"/></svg>',
|
|
23304
|
+
arrowUpFromDot: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-from-dot-icon lucide-arrow-up-from-dot"><path d="m5 9 7-7 7 7"/><path d="M12 16V2"/><circle cx="12" cy="21" r="1"/></svg>',
|
|
23305
|
+
arrowDownFromDot: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-from-dot-icon lucide-arrow-down-from-dot" transform="rotate(180)"><path d="m5 9 7-7 7 7"/><path d="M12 16V2"/><circle cx="12" cy="21" r="1"/></svg>',
|
|
23306
|
+
highlighter: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-highlighter-icon lucide-highlighter"><path d="m9 11-6 6v3h9l3-3"/><path d="m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4"/></svg>',
|
|
23307
|
+
eraser: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/><path d="m5 11 9 9"/></svg>',
|
|
23308
|
+
type: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/></svg>',
|
|
23309
|
+
shapes: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z"/><rect x="3" y="14" width="7" height="7" rx="1"/><circle cx="17.5" cy="17.5" r="3.5"/></svg>',
|
|
23310
|
+
shapeRectangle: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>',
|
|
23311
|
+
shapeEllipse: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="12" rx="10" ry="8"/></svg>',
|
|
23312
|
+
shapeTriangle: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3L22 21H2L12 3Z"/></svg>',
|
|
23313
|
+
image: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>',
|
|
23314
|
+
imageOff: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image-off-icon lucide-image-off"><line x1="2" x2="22" y1="2" y2="22"/><path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/><line x1="13.5" x2="6" y1="13.5" y2="21"/><line x1="18" x2="21" y1="12" y2="15"/><path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/><path d="M21 15V5a2 2 0 0 0-2-2H9"/></svg>',
|
|
23315
|
+
chevronDown: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>',
|
|
23316
|
+
chevronUp: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>',
|
|
23317
|
+
chevronLeft: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left-icon lucide-chevron-left"><path d="m15 18-6-6 6-6"/></svg>',
|
|
23318
|
+
chevronRight: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right-icon lucide-chevron-right"><path d="m9 18 6-6-6-6"/></svg>',
|
|
23319
|
+
chevronsLeft: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-left-icon lucide-chevrons-left"><path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/></svg>',
|
|
23320
|
+
copy: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>',
|
|
23321
|
+
paste: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard-paste-icon lucide-clipboard-paste"><path d="M11 14h10"/><path d="M16 4h2a2 2 0 0 1 2 2v1.344"/><path d="m17 18 4-4-4-4"/><path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"/><rect x="8" y="2" width="8" height="4" rx="1"/></svg>',
|
|
23322
|
+
cut: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scissors-icon lucide-scissors"><circle cx="6" cy="6" r="3"/><path d="M8.12 8.12 12 12"/><path d="M20 4 8.12 15.88"/><circle cx="6" cy="18" r="3"/><path d="M14.8 14.8 20 20"/></svg>',
|
|
23323
|
+
delete: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>',
|
|
23324
|
+
bringToFront: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-to-line-icon lucide-arrow-up-to-line"><path d="M5 3h14"/><path d="m18 13-6-6-6 6"/><path d="M12 7v14"/></svg>',
|
|
23325
|
+
sendToBack: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-to-line-icon lucide-arrow-down-to-line"><path d="M12 17V3"/><path d="m6 11 6 6 6-6"/><path d="M19 21H5"/></svg>',
|
|
23326
|
+
selectAll: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-mouse-pointer-icon lucide-square-mouse-pointer"><path d="M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z"/><path d="M21 11V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6"/></svg>',
|
|
23327
|
+
download: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>',
|
|
23328
|
+
upload: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-upload-icon lucide-upload"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>',
|
|
23329
|
+
undo: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-undo-icon lucide-undo"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/></svg>',
|
|
23330
|
+
redo: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-redo-icon lucide-redo"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"/></svg>',
|
|
23331
|
+
plus: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus-icon lucide-plus"><path d="M5 12h14"/><path d="M12 5v14"/></svg>',
|
|
23332
|
+
minus: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus-icon lucide-minus"><path d="M5 12h14"/></svg>',
|
|
23333
|
+
ellipsisVertical: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis-vertical-icon lucide-ellipsis-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>',
|
|
23334
|
+
x: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',
|
|
23335
|
+
check: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>',
|
|
23336
|
+
group: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-group-icon lucide-group"><path d="M3 7V5c0-1.1.9-2 2-2h2"/><path d="M17 3h2c1.1 0 2 .9 2 2v2"/><path d="M21 17v2c0 1.1-.9 2-2 2h-2"/><path d="M7 21H5c-1.1 0-2-.9-2-2v-2"/><rect width="7" height="5" x="7" y="7" rx="1"/><rect width="7" height="5" x="10" y="12" rx="1"/></svg>',
|
|
23337
|
+
ungroup: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ungroup-icon lucide-ungroup"><rect width="8" height="6" x="5" y="4" rx="1"/><rect width="8" height="6" x="11" y="14" rx="1"/></svg>',
|
|
23338
|
+
moveVertical: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-move-vertical-icon lucide-move-vertical" version="1.1" id="svg3"> <defs id="defs3" /> <path d="M12 2v20" id="path1" /> <path style="fill:#ffffff;stroke-width:2.5;stroke-dasharray:none;stroke-linejoin:round;paint-order:stroke fill markers" d="m 11.735575,22.661865 c -0.09259,-0.02798 -0.204674,-0.07661 -0.249076,-0.108068 -0.04441,-0.03147 -1.167275,-0.979853 -2.4952713,-2.10755 -1.8557024,-1.57581 -2.4300904,-2.079639 -2.4817336,-2.17687 -0.086514,-0.162885 -0.089504,-0.422449 -0.00664,-0.576334 0.1483053,-0.275409 0.437667,-0.436207 0.7830634,-0.435147 0.3692925,0.0011 0.3517326,-0.01122 2.168748,1.525599 L 11.12348,20.194964 V 11.999996 3.8050256 L 9.4546663,5.2164943 C 7.6376509,6.7533118 7.6552109,6.7409594 7.2859184,6.7420935 6.6681409,6.7439906 6.253658,6.1955854 6.5159903,5.723396 6.5738626,5.6192278 7.1368766,5.1267427 9.0629381,3.4955044 11.738128,1.2298067 11.640395,1.3026868 12.00355,1.3026868 c 0.363154,0 0.265421,-0.07288 2.940611,2.1928176 1.926062,1.6312383 2.489076,2.1237234 2.546948,2.2278916 0.262332,0.4721894 -0.15215,1.0205946 -0.769928,1.0186975 -0.369293,-0.00114 -0.351733,0.011218 -2.168748,-1.5255992 L 12.88362,3.8050256 v 8.1949704 8.194968 l 1.668813,-1.411469 c 1.817015,-1.536817 1.799455,-1.524464 2.168748,-1.525599 0.617772,-0.0019 1.032269,0.546521 0.769928,1.018687 -0.103474,0.18623 -4.919006,4.273935 -5.130582,4.355136 -0.20796,0.07981 -0.425829,0.09033 -0.624952,0.03014 z" id="path4" /> </svg>',
|
|
23339
|
+
hand: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hand-icon lucide-hand" version="1.1" id="svg4"> <defs id="defs4" /> <path d="M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2" id="path1" /> <path d="M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2" id="path2" /> <path d="M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8" id="path3" /> <path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" id="path4" /> <path style="fill:#ffffff;stroke-width:0.0423032" d="M 11.478261,21.222477 C 9.6854059,21.139331 8.3341788,20.647346 7.1297169,19.639159 6.9698298,19.505327 5.949644,18.508708 4.8626374,17.42445 3.0780314,15.644357 2.8775851,15.435367 2.7968392,15.270602 2.5896561,14.847836 2.616354,14.436649 2.8771894,14.033085 c 0.136522,-0.211226 0.3837159,-0.398688 0.6367632,-0.482897 0.1529977,-0.05091 0.2326803,-0.05992 0.4470908,-0.05054 0.2250407,0.0098 0.2876577,0.02439 0.4554568,0.105827 0.1747854,0.08483 0.2933718,0.192702 1.1675186,1.062064 0.7182021,0.714271 1.0062041,0.982633 1.0998825,1.024878 0.1680197,0.07577 0.4756439,0.07817 0.6368269,0.005 0.1370772,-0.06226 0.2976691,-0.220818 0.3691296,-0.364463 0.072561,-0.145855 0.071573,-0.543545 -0.00169,-0.681911 -0.028747,-0.05429 -0.2476439,-0.296131 -0.4864385,-0.537426 l -0.4341716,-0.438718 0.00753,-3.989014 0.00753,-3.9890137 0.089246,-0.1883791 c 0.244787,-0.516692 0.7711718,-0.809716 1.3059705,-0.7269981 0.3973687,0.061462 0.7569953,0.3284904 0.9363122,0.6952277 l 0.093853,0.1919473 0.014101,2.4958872 0.014101,2.4958877 0.067385,0.149123 c 0.1186861,0.262654 0.4140438,0.457222 0.6940724,0.457222 0.2764172,0 0.5690532,-0.187563 0.6965992,-0.446482 l 0.06486,-0.131661 0.0141,-3.4970626 0.0141,-3.4970623 0.08982,-0.1896121 C 11.096301,3.0422103 11.506844,2.7755634 12,2.7755634 c 0.493156,0 0.903699,0.2666469 1.122868,0.7293016 l 0.08982,0.1896121 0.0141,3.2432432 c 0.01405,3.2315947 0.01432,3.2437077 0.07397,3.3726737 0.124721,0.269649 0.355908,0.424566 0.661411,0.443206 0.237954,0.01452 0.429018,-0.0627 0.591626,-0.239109 0.223655,-0.242637 0.208338,-0.06565 0.224113,-2.5896966 l 0.0141,-2.2561693 0.09385,-0.1919473 c 0.179317,-0.3667373 0.538944,-0.6337662 0.936313,-0.6952277 0.609359,-0.09425 1.208067,0.3054956 1.370981,0.9153772 0.03013,0.1127929 0.03773,0.6662436 0.038,2.7657391 3.74e-4,2.9328416 -0.008,2.8034316 0.197044,3.0364016 0.234927,0.266892 0.603828,0.337117 0.920407,0.175213 0.181933,-0.09304 0.329759,-0.261686 0.376309,-0.4293 0.01848,-0.06654 0.02929,-0.683932 0.0295,-1.684364 1.78e-4,-0.8783075 0.01239,-1.6530128 0.02751,-1.745346 0.08579,-0.5238478 0.505382,-0.9420803 1.039546,-1.0361716 0.607538,-0.1070155 1.25615,0.3485846 1.385876,0.973471 0.02211,0.1064847 0.02843,1.1397236 0.02169,3.5455556 -0.0093,3.324725 -0.01078,3.403075 -0.07062,3.770606 -0.126399,0.776213 -0.328814,1.41352 -0.669031,2.106456 -0.36657,0.746612 -0.72118,1.250303 -1.297841,1.843464 -1.185731,1.21966 -2.604527,1.933174 -4.300822,2.162889 -0.38234,0.05178 -2.604621,0.0785 -3.412456,0.04104 z" id="path16" /> </svg>',
|
|
23340
|
+
handGrab: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hand-grab-icon lucide-hand-grab" version="1.1" id="svg5"> <defs id="defs5" /> <path d="M18 11.5V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1.4" id="path1" /> <path d="M14 10V8a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2" id="path2" /> <path d="M10 9.9V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v5" id="path3" /> <path d="M6 14a2 2 0 0 0-2-2a2 2 0 0 0-2 2" id="path4" /> <path d="M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-4a8 8 0 0 1-8-8 2 2 0 1 1 4 0" id="path5" /> <path style="fill:#ffffff;stroke-width:0.0423032" d="M 9.5887192,21.221364 C 8.0526856,21.128375 6.6533474,20.587008 5.4571093,19.622953 5.3019976,19.497947 5.0101058,19.225967 4.8084606,19.018552 4.2300382,18.423579 3.8474097,17.879011 3.4960953,17.150756 3.1017715,16.333345 2.9014937,15.633198 2.8052391,14.735605 c -0.097577,-0.909922 -0.019834,-1.263323 0.3569794,-1.622742 0.753018,-0.718257 1.9463784,-0.256949 2.0619296,0.797066 0.037839,0.345154 0.089701,0.477674 0.2472582,0.631806 0.2464521,0.241095 0.5958008,0.287445 0.9036474,0.119894 0.1478567,-0.08047 0.2303871,-0.16866 0.3266699,-0.349056 0.050118,-0.0939 0.05337,-0.2326 0.066784,-2.848413 L 6.7826087,8.7144536 6.8458627,8.559342 C 6.9736603,8.2459558 7.2463773,7.9734987 7.5581669,7.8477164 c 0.1253804,-0.050581 0.2118709,-0.062705 0.4512338,-0.063254 0.275392,-6.312e-4 0.3094658,0.00564 0.4867271,0.089609 0.264676,0.1253746 0.4771417,0.334346 0.6070085,0.5970252 l 0.1048543,0.212087 0.017338,0.7488899 c 0.019395,0.8377165 0.026343,0.8713745 0.2242006,1.0860245 0.1591067,0.172611 0.3522021,0.249908 0.5883018,0.235502 0.305503,-0.01864 0.53669,-0.173557 0.661411,-0.443206 0.05734,-0.123963 0.0605,-0.181852 0.07486,-1.3703236 0.01626,-1.3456629 0.0141,-1.3267758 0.182667,-1.5938092 0.257891,-0.4085268 0.77099,-0.6442307 1.228943,-0.5645435 0.471012,0.08196 0.850379,0.4102836 0.989676,0.8565175 0.04663,0.149383 0.0514,0.2860903 0.0514,1.4721724 0,0.8344844 0.01108,1.3591794 0.03064,1.4503554 0.04109,0.191585 0.179844,0.390224 0.342505,0.490321 0.27721,0.170587 0.693425,0.126085 0.92529,-0.09893 0.228986,-0.222224 0.234357,-0.25046 0.251582,-1.3227071 l 0.0152,-0.9463484 0.104855,-0.2120434 c 0.129872,-0.2626357 0.342372,-0.471626 0.607008,-0.5969817 0.177262,-0.083967 0.211335,-0.09024 0.486727,-0.089609 0.239363,5.486e-4 0.325854,0.012673 0.451234,0.063254 0.31179,0.1257823 0.584507,0.3982394 0.712304,0.7116256 0.0621,0.1522783 0.06351,0.1824139 0.07736,1.649824 0.01408,1.492435 0.0142,1.494914 0.07947,1.627432 0.0771,0.156535 0.2216,0.291061 0.395058,0.367789 0.09695,0.04289 0.169789,0.05275 0.325757,0.04411 0.230544,-0.01277 0.363779,-0.06826 0.506411,-0.21089 0.177062,-0.177061 0.198302,-0.25307 0.219359,-0.784959 0.02002,-0.505773 0.05012,-0.6549 0.175297,-0.868492 0.498409,-0.850471 1.728484,-0.8041941 2.173478,0.08177 0.131751,0.262312 0.134447,0.313526 0.122615,2.328965 -0.0104,1.771638 -0.01517,1.923481 -0.0714,2.273746 -0.123689,0.770512 -0.327108,1.411813 -0.668163,2.106456 -0.36657,0.746612 -0.72118,1.250303 -1.297841,1.843464 -1.180268,1.214041 -2.600612,1.930754 -4.287083,2.163284 -0.28697,0.03957 -0.685446,0.04782 -2.636536,0.05459 -1.26416,0.0044 -2.4698005,-0.0024 -2.6792012,-0.01507 z" id="path6" /> </svg>',
|
|
23341
|
+
mousePointer: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mouse-pointer2-icon lucide-mouse-pointer-2" version="1.1" id="svg1"> <defs id="defs1" /> <path d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z" id="path1" /> <path style="fill:#ffffff;stroke-width:0.0972651;stroke-linejoin:round;paint-order:stroke fill markers" d="M 7.8509196,12.314844 C 6.127071,8.1920568 4.7235325,4.8125504 4.7319449,4.8048299 c 0.01847,-0.016951 15.4787861,6.0801241 15.4610371,6.0973581 -0.0069,0.0067 -1.32633,0.341226 -2.93219,0.743509 -1.858829,0.465652 -3.011462,0.772855 -3.172161,0.845453 -0.688426,0.310999 -1.245788,0.879167 -1.498145,1.527185 -0.06251,0.160512 -0.440389,1.529576 -0.839733,3.042364 -0.399346,1.512788 -0.734966,2.750433 -0.745822,2.750322 -0.01086,-1.09e-4 -1.430163,-3.373391 -3.1540114,-7.496177 z" id="path2" /> <path style="fill:#ffffff;stroke-width:0.0705053;stroke-linejoin:round;paint-order:stroke fill markers" d="M 10.777831,19.240865 C 9.3899089,15.977493 4.7567738,4.8648478 4.7760705,4.8455511 c 0.013084,-0.013084 4.7618079,1.8507077 10.7773965,4.2299406 4.467495,1.7669453 4.558837,1.8037523 4.533848,1.8269883 -0.01183,0.011 -0.96064,0.257045 -2.108467,0.546768 -3.445281,0.869623 -3.777157,0.960825 -4.075205,1.119907 -0.597122,0.31871 -1.103666,0.864485 -1.309236,1.410635 -0.09642,0.256167 -0.312339,1.032806 -0.943226,3.392713 -0.641066,2.39798 -0.629171,2.354884 -0.649929,2.354849 -0.0091,-1.5e-5 -0.10963,-0.218934 -0.223421,-0.486487 z" id="path6" /> </svg>',
|
|
23342
|
+
pointer: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pointer-icon lucide-pointer" version="1.1" id="svg5"> <defs id="defs5" /> <path d="M22 14a8 8 0 0 1-8 8" id="path1" /> <path d="M18 11v-1a2 2 0 0 0-2-2a2 2 0 0 0-2 2" id="path2" /> <path d="M14 10V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1" id="path3" /> <path d="M10 9.5V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v10" id="path4" /> <path d="M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" id="path5" /> <path style="fill:#ffffff;stroke-width:0.0930233;stroke-linejoin:round;paint-order:stroke fill markers" d="M 11.2,21.203517 C 9.5092536,21.041493 8.4838422,20.667261 7.3116279,19.784423 7.1888372,19.691945 6.139155,18.670017 4.9790008,17.513473 2.5649891,15.106974 2.6562686,15.220427 2.6869266,14.664621 c 0.020277,-0.367608 0.1272548,-0.601802 0.3822766,-0.836873 0.2609241,-0.240511 0.4631523,-0.319555 0.8191689,-0.320185 0.509345,-9.02e-4 0.5815472,0.04845 1.7102825,1.168976 0.532833,0.528958 1.0223742,0.98871 1.0878697,1.021671 0.1699959,0.08555 0.4741793,0.07658 0.6733897,-0.01985 0.303161,-0.146758 0.4720469,-0.543298 0.3791811,-0.890307 -0.036373,-0.135913 -0.1250717,-0.246717 -0.506083,-0.632208 l -0.4619807,-0.467411 0.00983,-5.002356 0.00983,-5.0023561 0.080405,-0.1739784 C 6.9849846,3.2633288 7.2288893,3.0140593 7.4738043,2.8937849 7.6531903,2.8056908 7.7297209,2.7906977 8,2.7906977 c 0.2702791,0 0.3468097,0.014993 0.5261957,0.1030872 0.244915,0.1202744 0.4888197,0.3695439 0.6027014,0.6159576 0.079998,0.1730976 0.080499,0.1905559 0.09901,3.448397 0.020472,3.6031325 0.00418,3.3665775 0.2478407,3.5980265 0.2810043,0.266918 0.6822132,0.283308 1.0083162,0.04119 0.232339,-0.172501 0.25913,-0.280173 0.275933,-1.1089849 0.01456,-0.7180841 0.01869,-0.7520168 0.117805,-0.9674419 0.454637,-0.9881395 1.789759,-0.9881395 2.244396,0 0.09912,0.2154251 0.103248,0.2493578 0.117805,0.9674419 0.0168,0.8288119 0.04359,0.9364839 0.275933,1.1089849 0.326103,0.242117 0.727312,0.225727 1.008316,-0.04119 0.160426,-0.152384 0.218977,-0.294978 0.250819,-0.610832 C 14.845142,9.2502593 15.336916,8.7840275 16,8.7840275 c 0.478554,0 0.847992,0.2240614 1.082489,0.6565225 l 0.126813,0.2338686 0.01869,0.7813954 c 0.02069,0.865066 0.03258,0.913549 0.276595,1.127795 0.239244,0.210059 0.56665,0.239738 0.88018,0.07979 0.219744,-0.112104 0.324993,-0.301479 0.383515,-0.690054 0.06437,-0.427406 0.125794,-0.56694 0.357358,-0.811785 C 19.38604,9.8862229 19.614832,9.7882106 20,9.7869898 c 0.380153,-0.0012 0.636641,0.1145641 0.905451,0.4086842 0.318537,0.348531 0.317259,0.340596 0.332734,2.064791 0.02055,2.290001 -0.04576,2.983129 -0.383655,4.009983 -0.878739,2.670467 -3.284504,4.613238 -6.090273,4.918188 -0.322415,0.03504 -3.227312,0.04717 -3.564257,0.01488 z" id="path6" /> <path style="fill:#ffffff;stroke-width:0.0705053;stroke-linejoin:round;paint-order:stroke fill markers" d="m 11.942854,21.190957 c -1.015003,-0.01704 -1.131723,-0.02688 -1.806535,-0.1522 C 9.5352183,20.927122 8.8225664,20.681951 8.319624,20.413766 7.7570149,20.113766 7.3758537,19.827607 6.7836127,19.260598 5.774345,18.294328 3.1746828,15.68636 2.994305,15.459184 2.7288345,15.124838 2.6970674,15.049109 2.7026798,14.763988 c 0.00827,-0.420163 0.1162058,-0.679868 0.3844475,-0.925026 0.2382303,-0.217729 0.416008,-0.293073 0.7303102,-0.309513 0.5101451,-0.02668 0.6329728,0.04799 1.5378542,0.934977 0.8479274,0.831158 1.2429087,1.199656 1.342282,1.252283 0.11819,0.06259 0.4442817,0.06081 0.6122724,-0.0033 0.1482348,-0.05661 0.3410696,-0.248342 0.4107195,-0.408368 0.063024,-0.144802 0.06179,-0.498 -0.00216,-0.618376 C 7.6917315,14.63641 7.4736023,14.388937 7.2336742,14.136678 L 6.797441,13.678026 6.7970753,8.6903755 6.7967098,3.7027253 6.9021002,3.502167 C 7.0320375,3.2548956 7.2343175,3.0487286 7.4743519,2.9189189 c 0.1797064,-0.097185 0.1877434,-0.098707 0.5209477,-0.098707 0.3169743,0 0.349151,0.00524 0.5076381,0.082665 0.2190605,0.1070166 0.4871239,0.3748528 0.5931342,0.592632 l 0.081613,0.1676584 0.019992,1.3834579 c 0.010995,0.7609018 0.021403,2.0560783 0.023128,2.87817 0.00341,1.6233162 0.028863,2.2876938 0.093598,2.4426258 0.089047,0.213119 0.4255042,0.419889 0.683247,0.419889 0.1563141,0 0.3731941,-0.08265 0.5187231,-0.197689 0.205546,-0.162474 0.225694,-0.250142 0.256177,-1.1146856 C 10.79418,8.8613623 10.8052,8.7492253 10.85668,8.6186115 11.053264,8.1198873 11.50183,7.7978848 12,7.7978848 c 0.49817,0 0.946736,0.3220025 1.143315,0.8207259 0.05148,0.1306138 0.0625,0.2427508 0.08413,0.8563239 0.02897,0.8216044 0.05497,0.9507864 0.218548,1.0859664 0.341252,0.282005 0.756809,0.293493 1.057036,0.02922 0.169206,-0.148941 0.234219,-0.2921 0.288276,-0.6347773 0.103115,-0.6536616 0.472737,-1.0621772 1.030077,-1.1384664 0.547738,-0.074975 0.986339,0.1608863 1.276145,0.6862578 l 0.105758,0.1917223 7.68e-4,0.3699606 c 0.0011,0.553623 0.04553,1.179579 0.09141,1.289176 0.04428,0.105777 0.219161,0.276182 0.364423,0.355092 0.06913,0.03755 0.155512,0.05067 0.333059,0.05055 0.204058,-1.3e-4 0.260695,-0.01118 0.380729,-0.07426 0.239564,-0.12591 0.320531,-0.265583 0.407786,-0.703455 0.08382,-0.420648 0.125337,-0.527172 0.279883,-0.718174 0.321102,-0.3968443 0.77117,-0.5469022 1.259123,-0.4198065 0.21344,0.055594 0.39756,0.1739295 0.578279,0.3716645 0.286251,0.313205 0.299377,0.389392 0.324444,1.883099 0.02888,1.721047 -0.03379,2.808669 -0.20314,3.525265 -0.307591,1.301561 -0.970113,2.493177 -1.91312,3.440943 -1.060413,1.065767 -2.34115,1.742909 -3.849589,2.035329 -0.348478,0.06755 -0.462014,0.07524 -1.340342,0.09078 -0.527787,0.0093 -1.416154,0.0093 -1.974148,-6.4e-5 z" id="path7" /> </svg>',
|
|
23343
|
+
settings: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings-icon lucide-settings"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>',
|
|
23344
|
+
share: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-share2-icon lucide-share-2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>',
|
|
23345
|
+
palette: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-palette-icon lucide-palette"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"/><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/></svg>',
|
|
23346
|
+
command: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-command-icon lucide-command"><path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"/></svg>',
|
|
23347
|
+
info: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info-icon lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>',
|
|
23348
|
+
ordering: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bring-to-front-icon lucide-bring-to-front"><rect x="8" y="8" width="8" height="8" rx="2"/><path d="M4 10a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2"/><path d="M14 20a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2"/></svg>',
|
|
23349
|
+
layoutTemplate: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-template-icon lucide-layout-template"><rect width="18" height="7" x="3" y="3" rx="1"/><rect width="9" height="7" x="3" y="14" rx="1"/><rect width="5" height="7" x="16" y="14" rx="1"/></svg>',
|
|
23350
|
+
align: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="3" y1="10" y2="10"/><line x1="21" x2="3" y1="6" y2="6"/><line x1="21" x2="3" y1="14" y2="14"/><line x1="21" x2="3" y1="18" y2="18"/></svg>',
|
|
23351
|
+
alignStartHorizontal: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-align-start-horizontal-icon lucide-align-start-horizontal"><rect width="6" height="16" x="4" y="6" rx="2"/><rect width="6" height="9" x="14" y="6" rx="2"/><path d="M22 2H2"/></svg>',
|
|
23352
|
+
alignCenterHorizontal: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-align-center-horizontal-icon lucide-align-center-horizontal"><path d="M2 12h20"/><path d="M10 16v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-4"/><path d="M10 8V4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v4"/><path d="M20 16v1a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-1"/><path d="M14 8V7c0-1.1.9-2 2-2h2a2 2 0 0 1 2 2v1"/></svg>',
|
|
23353
|
+
alignEndHorizontal: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-align-end-horizontal-icon lucide-align-end-horizontal"><rect width="6" height="16" x="4" y="2" rx="2"/><rect width="6" height="9" x="14" y="9" rx="2"/><path d="M22 22H2"/></svg>',
|
|
23354
|
+
alignStartVertical: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-align-start-vertical-icon lucide-align-start-vertical"><rect width="9" height="6" x="6" y="14" rx="2"/><rect width="16" height="6" x="6" y="4" rx="2"/><path d="M2 2v20"/></svg>',
|
|
23355
|
+
alignCenterVertical: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-align-center-vertical-icon lucide-align-center-vertical"><path d="M12 2v20"/><path d="M8 10H4a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2h4"/><path d="M16 10h4a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-4"/><path d="M8 20H7a2 2 0 0 1-2-2v-2c0-1.1.9-2 2-2h1"/><path d="M16 14h1a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-1"/></svg>',
|
|
23356
|
+
alignEndVertical: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-align-end-vertical-icon lucide-align-end-vertical"><rect width="16" height="6" x="2" y="4" rx="2"/><rect width="9" height="6" x="9" y="14" rx="2"/><path d="M22 22V2"/></svg>',
|
|
23357
|
+
viewport: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize-icon lucide-maximize"><path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/></svg>',
|
|
23358
|
+
logOut: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-log-out-icon lucide-log-out"><path d="m16 17 5-5-5-5"/><path d="M21 12H9"/><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/></svg>',
|
|
23359
|
+
usersRound: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users-round-icon lucide-users-round"><path d="M18 21a8 8 0 0 0-16 0"/><circle cx="10" cy="8" r="5"/><path d="M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"/></svg>',
|
|
23360
|
+
google: '<svg version="1.1" viewBox="0 0 48 48" style="display: block;"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></svg>',
|
|
23361
|
+
facebook: '<svg version="1.1" id="svg9" width="666.66669" height="666.66718" viewBox="0 0 666.66668 666.66717"> <defs id="defs13"> <clipPath clipPathUnits="userSpaceOnUse" id="clipPath25"> <path d="M 0,700 H 700 V 0 H 0 Z" id="path23" /> </clipPath> </defs> <g id="g17" transform="matrix(1.3333333,0,0,-1.3333333,-133.33333,799.99999)"> <g id="g19"> <g id="g21" clip-path="url(#clipPath25)"> <g id="g27" transform="translate(600,350)"> <path d="m 0,0 c 0,138.071 -111.929,250 -250,250 -138.071,0 -250,-111.929 -250,-250 0,-117.245 80.715,-215.622 189.606,-242.638 v 166.242 h -51.552 V 0 h 51.552 v 32.919 c 0,85.092 38.508,124.532 122.048,124.532 15.838,0 43.167,-3.105 54.347,-6.211 V 81.986 c -5.901,0.621 -16.149,0.932 -28.882,0.932 -40.993,0 -56.832,-15.528 -56.832,-55.9 V 0 h 81.659 l -14.028,-76.396 h -67.631 V -248.169 C -95.927,-233.218 0,-127.818 0,0" style="fill:#0866ff;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path29" /> </g> <g id="g31" transform="translate(447.9175,273.6036)"> <path d="M 0,0 14.029,76.396 H -67.63 v 27.019 c 0,40.372 15.838,55.899 56.831,55.899 12.733,0 22.981,-0.31 28.882,-0.931 v 69.253 c -11.18,3.106 -38.509,6.212 -54.347,6.212 -83.539,0 -122.048,-39.441 -122.048,-124.533 V 76.396 h -51.552 V 0 h 51.552 v -166.242 c 19.343,-4.798 39.568,-7.362 60.394,-7.362 10.254,0 20.358,0.632 30.288,1.831 L -67.63,0 Z" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path33" /> </g> </g> </g> </g></svg>',
|
|
23362
|
+
github: '<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="#1B1F23"/></svg>',
|
|
23363
|
+
braces: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-braces-icon lucide-braces"><path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1"/><path d="M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"/></svg>',
|
|
23364
|
+
heart: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart-icon lucide-heart"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/></svg>'
|
|
23365
|
+
};
|
|
23366
|
+
for (const [name, svg] of Object.entries(defaultIcons)) {
|
|
23367
|
+
if (!KritzelIconRegistry.has(name)) {
|
|
23368
|
+
KritzelIconRegistry.register(name, svg);
|
|
23369
|
+
}
|
|
23370
|
+
}
|
|
22874
23371
|
|
|
22875
23372
|
class KritzelCursorHelper {
|
|
22876
23373
|
static _pointerCursor = null;
|
|
@@ -22889,7 +23386,7 @@ class KritzelCursorHelper {
|
|
|
22889
23386
|
* The icon is retrieved from the KritzelIconRegistry.
|
|
22890
23387
|
*/
|
|
22891
23388
|
static getCursor(options) {
|
|
22892
|
-
const iconName = options.iconName === 'default' ? '
|
|
23389
|
+
const iconName = options.iconName === 'default' ? 'mousePointer' : options.iconName;
|
|
22893
23390
|
const iconSvg = KritzelIconRegistry.get(iconName);
|
|
22894
23391
|
if (!iconSvg) {
|
|
22895
23392
|
console.warn(`Icon "${iconName}" not found in registry.`);
|
|
@@ -22898,7 +23395,7 @@ class KritzelCursorHelper {
|
|
|
22898
23395
|
const size = options.size || 24;
|
|
22899
23396
|
const rotation = options.rotation || 0;
|
|
22900
23397
|
const color = options.color || 'black';
|
|
22901
|
-
// Default cursor (
|
|
23398
|
+
// Default cursor (mousePointer) has hotspot at (4, 4), others at center
|
|
22902
23399
|
const hotspot = options.hotspot || (options.iconName === 'default' ? { x: 4, y: 4 } : { x: size / 2, y: size / 2 });
|
|
22903
23400
|
// Modify the SVG string to set size and color
|
|
22904
23401
|
// We replace width and height to match the requested size
|
|
@@ -22911,12 +23408,12 @@ class KritzelCursorHelper {
|
|
|
22911
23408
|
// We rotate around the center of the SVG canvas
|
|
22912
23409
|
const center = size / 2;
|
|
22913
23410
|
// We use a group to apply the rotation
|
|
22914
|
-
const svg = `
|
|
22915
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
|
|
22916
|
-
<g transform="rotate(${rotation} ${center} ${center})">
|
|
22917
|
-
${content}
|
|
22918
|
-
</g>
|
|
22919
|
-
</svg>
|
|
23411
|
+
const svg = `
|
|
23412
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
|
|
23413
|
+
<g transform="rotate(${rotation} ${center} ${center})">
|
|
23414
|
+
${content}
|
|
23415
|
+
</g>
|
|
23416
|
+
</svg>
|
|
22920
23417
|
`;
|
|
22921
23418
|
// Encode the SVG for use in a data URI
|
|
22922
23419
|
// We need to be careful with encoding to ensure it works across browsers
|
|
@@ -25132,9 +25629,8 @@ class KritzelSelectionTool extends KritzelBaseTool {
|
|
|
25132
25629
|
}
|
|
25133
25630
|
if (selectedObject && selectedObject.isSelected === false && selectedObject?.objects.length === 1) {
|
|
25134
25631
|
const firstObj = selectedObject.objects[0];
|
|
25135
|
-
if (
|
|
25136
|
-
// Selected
|
|
25137
|
-
// embedded DOM content. Unselected dynamic objects remain selectable.
|
|
25632
|
+
if (ObjectHelper.isKritzelEmbeddedObject(firstObj)) {
|
|
25633
|
+
// Selected embedded objects hand pointer interaction to their content.
|
|
25138
25634
|
if (firstObj.isSelected && this._core.store.selectionGroup?.objects.length === 1)
|
|
25139
25635
|
return;
|
|
25140
25636
|
}
|
|
@@ -28140,4 +28636,4 @@ const ABSOLUTE_SCALE_MIN = 0.0001;
|
|
|
28140
28636
|
/** Destination opened when the "Powered by Kritzel" watermark is clicked. */
|
|
28141
28637
|
const KRITZEL_WEBSITE_URL = 'https://kritzel.io';
|
|
28142
28638
|
|
|
28143
|
-
export {
|
|
28639
|
+
export { WORKSPACE_MIGRATIONS as $, AssetNotFoundError as A, KritzelAssetResolver as B, KritzelWorkspace as C, DEFAULT_STROKE_SIZES as D, KritzelAnchorManager as E, KritzelThemeManager as F, KritzelLocalizationManager as G, KritzelLicenseManager as H, IndexedDBAssetProvider as I, KritzelDynamicObjectRendererRegistry as J, KritzelBaseObject as K, KritzelFontRegistry as L, KritzelIconRegistry as M, defaultIcons as N, ObjectHelper as O, DEFAULT_SYNC_CONFIG as P, lightTheme as Q, darkTheme as R, ShapeType as S, ThemeHelper as T, EN_LOCALE as U, DE_LOCALE as V, WORKSPACE_EXPORT_VERSION as W, FR_LOCALE as X, KritzelAlignment as Y, runMigrations as Z, APP_STATE_MIGRATIONS as _, DEFAULT_COLOR_PALETTE as a, CURRENT_APP_STATE_SCHEMA_VERSION as a0, CURRENT_WORKSPACE_SCHEMA_VERSION as a1, resolveColor as a2, resolveTextToolAvailableFonts as a3, ABSOLUTE_SCALE_MAX as a4, ABSOLUTE_SCALE_MIN as a5, KRITZEL_WEBSITE_URL as a6, KritzelMouseButton as a7, KritzelBaseHandler as a8, KritzelClassHelper as a9, KritzelImageFileHelper as aa, imageCompression as ab, KritzelEventHelper as ac, DEFAULT_FONT_SIZES as b, DEFAULT_TEXT_TOOL_AVAILABLE_FONTS as c, KritzelText as d, KritzelPath as e, KritzelImage as f, KritzelLine as g, KritzelGroup as h, KritzelShape as i, KritzelDynamicObject as j, KritzelIframeObject as k, KritzelSelectionGroup as l, KritzelSelectionBox as m, KritzelBaseTool as n, KritzelBrushTool as o, KritzelLineTool as p, KritzelEraserTool as q, KritzelImageTool as r, KritzelTextTool as s, KritzelShapeTool as t, KritzelCursorHelper as u, KritzelKeyboardHelper as v, KritzelDevicesHelper as w, KritzelColorHelper as x, KritzelHTMLHelper as y, KritzelSelectionTool as z };
|