@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
|
@@ -17,6 +17,19 @@ class ObjectHelper {
|
|
|
17
17
|
static isClass(object, className) {
|
|
18
18
|
return !!object && object.__class__ === className;
|
|
19
19
|
}
|
|
20
|
+
static isKritzelEmbeddedObject(object) {
|
|
21
|
+
if (!object || typeof object !== 'object') {
|
|
22
|
+
return false;
|
|
23
|
+
}
|
|
24
|
+
const candidate = object;
|
|
25
|
+
return (typeof candidate.isInteractive === 'boolean' &&
|
|
26
|
+
typeof candidate.isSelected === 'boolean' &&
|
|
27
|
+
typeof candidate.mount === 'function' &&
|
|
28
|
+
typeof candidate.unmount === 'function' &&
|
|
29
|
+
typeof candidate.setIsInteractive === 'function' &&
|
|
30
|
+
typeof candidate.hasFocusedInputElement === 'function' &&
|
|
31
|
+
typeof candidate.getEmbeddedContentRoots === 'function');
|
|
32
|
+
}
|
|
20
33
|
static isKritzelExportable(object) {
|
|
21
34
|
if (!object || typeof object !== 'object') {
|
|
22
35
|
return false;
|
|
@@ -1374,7 +1387,6 @@ class Mark {
|
|
|
1374
1387
|
if (!type)
|
|
1375
1388
|
throw new RangeError(`There is no mark type ${json.type} in this schema`);
|
|
1376
1389
|
let mark = type.create(json.attrs);
|
|
1377
|
-
type.checkAttrs(mark.attrs);
|
|
1378
1390
|
return mark;
|
|
1379
1391
|
}
|
|
1380
1392
|
/**
|
|
@@ -2354,11 +2366,11 @@ class Node {
|
|
|
2354
2366
|
*/
|
|
2355
2367
|
check() {
|
|
2356
2368
|
this.type.checkContent(this.content);
|
|
2357
|
-
this.type.
|
|
2369
|
+
checkAttrs(this.type.attrs, this.attrs, "node", this.type.name);
|
|
2358
2370
|
let copy = Mark.none;
|
|
2359
2371
|
for (let i = 0; i < this.marks.length; i++) {
|
|
2360
2372
|
let mark = this.marks[i];
|
|
2361
|
-
mark.type.
|
|
2373
|
+
checkAttrs(mark.type.attrs, mark.attrs, "mark", mark.type.name);
|
|
2362
2374
|
copy = mark.addToSet(copy);
|
|
2363
2375
|
}
|
|
2364
2376
|
if (!Mark.sameSet(copy, this.marks))
|
|
@@ -2399,7 +2411,6 @@ class Node {
|
|
|
2399
2411
|
}
|
|
2400
2412
|
let content = Fragment.fromJSON(schema, json.content);
|
|
2401
2413
|
let node = schema.nodeType(json.type).create(json.attrs, content, marks);
|
|
2402
|
-
node.type.checkAttrs(node.attrs);
|
|
2403
2414
|
return node;
|
|
2404
2415
|
}
|
|
2405
2416
|
}
|
|
@@ -2449,6 +2460,15 @@ function wrapMarks(marks, str) {
|
|
|
2449
2460
|
str = marks[i].type.name + "(" + str + ")";
|
|
2450
2461
|
return str;
|
|
2451
2462
|
}
|
|
2463
|
+
function checkAttrs(attrs, values, type, name) {
|
|
2464
|
+
for (let attr in values)
|
|
2465
|
+
if (!(attr in attrs))
|
|
2466
|
+
throw new RangeError(`Unsupported attribute ${attr} for ${type} of type ${name}`);
|
|
2467
|
+
for (let attr in attrs) {
|
|
2468
|
+
if (attrs[attr].validate)
|
|
2469
|
+
attrs[attr].validate(values[attr]);
|
|
2470
|
+
}
|
|
2471
|
+
}
|
|
2452
2472
|
|
|
2453
2473
|
/**
|
|
2454
2474
|
Instances of this class represent a match state of a node type's
|
|
@@ -2903,27 +2923,21 @@ function defaultAttrs(attrs) {
|
|
|
2903
2923
|
function computeAttrs(attrs, value) {
|
|
2904
2924
|
let built = Object.create(null);
|
|
2905
2925
|
for (let name in attrs) {
|
|
2926
|
+
let attr = attrs[name];
|
|
2906
2927
|
let given = value && value[name];
|
|
2907
2928
|
if (given === undefined) {
|
|
2908
|
-
let attr = attrs[name];
|
|
2909
2929
|
if (attr.hasDefault)
|
|
2910
2930
|
given = attr.default;
|
|
2911
2931
|
else
|
|
2912
2932
|
throw new RangeError("No value supplied for attribute " + name);
|
|
2913
2933
|
}
|
|
2934
|
+
else if (attr.validate) {
|
|
2935
|
+
attr.validate(given);
|
|
2936
|
+
}
|
|
2914
2937
|
built[name] = given;
|
|
2915
2938
|
}
|
|
2916
2939
|
return built;
|
|
2917
2940
|
}
|
|
2918
|
-
function checkAttrs(attrs, values, type, name) {
|
|
2919
|
-
for (let attr in values)
|
|
2920
|
-
if (!(attr in attrs))
|
|
2921
|
-
throw new RangeError(`Unsupported attribute ${attr} for ${type} of type ${name}`);
|
|
2922
|
-
for (let attr in attrs) {
|
|
2923
|
-
if (attrs[attr].validate)
|
|
2924
|
-
attrs[attr].validate(values[attr]);
|
|
2925
|
-
}
|
|
2926
|
-
}
|
|
2927
2941
|
function initAttrs(typeName, attrs) {
|
|
2928
2942
|
let result = Object.create(null);
|
|
2929
2943
|
if (attrs)
|
|
@@ -3095,11 +3109,9 @@ let NodeType$1 = class NodeType {
|
|
|
3095
3109
|
throw new RangeError(`Invalid content for node ${this.name}: ${content.toString().slice(0, 50)}`);
|
|
3096
3110
|
}
|
|
3097
3111
|
/**
|
|
3098
|
-
@internal
|
|
3112
|
+
@internal no longer useful, but called by old prosemirror-view versions
|
|
3099
3113
|
*/
|
|
3100
|
-
checkAttrs(attrs) {
|
|
3101
|
-
checkAttrs(this.attrs, attrs, "node", this.name);
|
|
3102
|
-
}
|
|
3114
|
+
checkAttrs(attrs) { }
|
|
3103
3115
|
/**
|
|
3104
3116
|
Check whether the given mark type is allowed in this node.
|
|
3105
3117
|
*/
|
|
@@ -3246,12 +3258,6 @@ class MarkType {
|
|
|
3246
3258
|
return set[i];
|
|
3247
3259
|
}
|
|
3248
3260
|
/**
|
|
3249
|
-
@internal
|
|
3250
|
-
*/
|
|
3251
|
-
checkAttrs(attrs) {
|
|
3252
|
-
checkAttrs(this.attrs, attrs, "mark", this.name);
|
|
3253
|
-
}
|
|
3254
|
-
/**
|
|
3255
3261
|
Queries whether a given mark type is
|
|
3256
3262
|
[excluded](https://prosemirror.net/docs/ref/#model.MarkSpec.excludes) by this one.
|
|
3257
3263
|
*/
|
|
@@ -9943,7 +9949,8 @@ function nodeLen(node) {
|
|
|
9943
9949
|
}
|
|
9944
9950
|
function isIgnorable(dom, dir) {
|
|
9945
9951
|
let desc = dom.pmViewDesc;
|
|
9946
|
-
return desc
|
|
9952
|
+
return desc ? desc.size == 0 && (dir < 0 || dom.nextSibling || dom.nodeName != "BR")
|
|
9953
|
+
: dom.nodeType == 1 && dom.contentEditable == "false";
|
|
9947
9954
|
}
|
|
9948
9955
|
function skipIgnoredNodes(view, dir) {
|
|
9949
9956
|
return dir < 0 ? skipIgnoredNodesBefore(view) : skipIgnoredNodesAfter(view);
|
|
@@ -10532,12 +10539,11 @@ function addContext(slice, context) {
|
|
|
10532
10539
|
if (!type || type.hasRequiredAttrs())
|
|
10533
10540
|
break;
|
|
10534
10541
|
try {
|
|
10535
|
-
type.
|
|
10542
|
+
content = Fragment.from(type.create(array[i + 1], content));
|
|
10536
10543
|
}
|
|
10537
10544
|
catch (e) {
|
|
10538
10545
|
break;
|
|
10539
10546
|
}
|
|
10540
|
-
content = Fragment.from(type.create(array[i + 1], content));
|
|
10541
10547
|
openStart++;
|
|
10542
10548
|
openEnd++;
|
|
10543
10549
|
}
|
|
@@ -11017,7 +11023,7 @@ editHandlers.compositionstart = editHandlers.compositionupdate = view => {
|
|
|
11017
11023
|
if (!view.composing) {
|
|
11018
11024
|
view.domObserver.flush();
|
|
11019
11025
|
let { state } = view, $pos = state.selection.$to;
|
|
11020
|
-
if (state.selection instanceof TextSelection &&
|
|
11026
|
+
if (state.selection instanceof TextSelection && state.selection.empty &&
|
|
11021
11027
|
(state.storedMarks ||
|
|
11022
11028
|
(!$pos.textOffset && $pos.parentOffset && $pos.nodeBefore.marks.some(m => m.type.spec.inclusive === false)) ||
|
|
11023
11029
|
chrome && windows$1 && selectionBeforeUneditable(view))) { // Issue #1500
|
|
@@ -12654,9 +12660,7 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
|
|
|
12654
12660
|
// as being an iOS enter press), just dispatch an Enter key instead.
|
|
12655
12661
|
if (((ios && view.input.lastIOSEnter > Date.now() - 225 &&
|
|
12656
12662
|
(!inlineChange || addedNodes.some(n => n.nodeName == "DIV" || n.nodeName == "P"))) ||
|
|
12657
|
-
(!inlineChange && $from.pos
|
|
12658
|
-
(!$from.sameParent($to) || !$from.parent.inlineContent) &&
|
|
12659
|
-
$from.pos < $to.pos && !/\S/.test(parse.doc.textBetween($from.pos, $to.pos, "", "")))) &&
|
|
12663
|
+
(!inlineChange && looksLikeEnter(parse.doc, $from.pos, $to.pos))) &&
|
|
12660
12664
|
view.someProp("handleKeyDown", f => f(view, keyEvent(13, "Enter")))) {
|
|
12661
12665
|
view.input.lastIOSEnter = 0;
|
|
12662
12666
|
return;
|
|
@@ -12807,6 +12811,16 @@ function looksLikeBackspace(old, start, end, $newStart, $newEnd) {
|
|
|
12807
12811
|
// The fragments after the join point must match
|
|
12808
12812
|
return $newStart.parent.content.cut($newStart.parentOffset).eq($next.parent.content);
|
|
12809
12813
|
}
|
|
12814
|
+
function looksLikeEnter(content, from, to) {
|
|
12815
|
+
let newTextlines = 0, newLeaves = 0;
|
|
12816
|
+
content.nodesBetween(from, to, (node, pos) => {
|
|
12817
|
+
if (node.isTextblock && pos >= from && pos < to)
|
|
12818
|
+
newTextlines++;
|
|
12819
|
+
else if (node.isText ? /\S/.test(node.text.slice(Math.max(0, from - pos), Math.min(node.nodeSize, to - pos))) : node.isLeaf)
|
|
12820
|
+
newLeaves++;
|
|
12821
|
+
});
|
|
12822
|
+
return newLeaves == 0 && newTextlines == 1;
|
|
12823
|
+
}
|
|
12810
12824
|
function skipClosingAndOpening($pos, fromEnd, mayOpen) {
|
|
12811
12825
|
let depth = $pos.depth, end = fromEnd ? $pos.end() : $pos.pos;
|
|
12812
12826
|
while (depth > 0 && (fromEnd || $pos.indexAfter(depth) == $pos.node(depth).childCount)) {
|
|
@@ -14468,6 +14482,7 @@ const lightTheme = {
|
|
|
14468
14482
|
dividerColor: '#e0e0e0',
|
|
14469
14483
|
focusColor: '#333333',
|
|
14470
14484
|
focusRingColor: '#333333',
|
|
14485
|
+
fontFamily: 'sans-serif',
|
|
14471
14486
|
iconColor: 'currentColor',
|
|
14472
14487
|
scrollbarThumbColor: '#ebebeb',
|
|
14473
14488
|
textPrimary: '#000000',
|
|
@@ -14556,7 +14571,6 @@ const lightTheme = {
|
|
|
14556
14571
|
closeButtonColor: '#333333',
|
|
14557
14572
|
closeButtonHoverBackground: 'hsl(0, 0%, 0%, 4.3%)',
|
|
14558
14573
|
closeButtonHoverColor: '#000000',
|
|
14559
|
-
fontFamily: 'inherit',
|
|
14560
14574
|
footerBorder: '1px solid #ebebeb',
|
|
14561
14575
|
headerBorder: '1px solid #ebebeb',
|
|
14562
14576
|
titleColor: '#000000',
|
|
@@ -14591,11 +14605,6 @@ const lightTheme = {
|
|
|
14591
14605
|
loadingOverlayColor: '#333333',
|
|
14592
14606
|
loadingOverlaySpinnerActiveColor: '#333333',
|
|
14593
14607
|
loadingOverlaySpinnerColor: '#cccccc',
|
|
14594
|
-
syncIndicatorBackground: 'rgba(255, 255, 255, 0.92)',
|
|
14595
|
-
syncIndicatorColor: '#334155',
|
|
14596
|
-
syncIndicatorSpinnerColor: '#007AFF',
|
|
14597
|
-
syncIndicatorSpinnerTrack: 'rgba(148, 163, 184, 0.35)',
|
|
14598
|
-
syncIndicatorZIndex: '10001',
|
|
14599
14608
|
},
|
|
14600
14609
|
snap: {
|
|
14601
14610
|
indicatorFill: 'rgba(59, 130, 246, 0.3)',
|
|
@@ -14815,6 +14824,7 @@ const darkTheme = {
|
|
|
14815
14824
|
dividerColor: '#3a3a3a',
|
|
14816
14825
|
focusColor: '#ffffff',
|
|
14817
14826
|
focusRingColor: '#ffffff',
|
|
14827
|
+
fontFamily: 'sans-serif',
|
|
14818
14828
|
iconColor: 'currentColor',
|
|
14819
14829
|
scrollbarThumbColor: '#555555',
|
|
14820
14830
|
textPrimary: '#ffffff',
|
|
@@ -14937,11 +14947,6 @@ const darkTheme = {
|
|
|
14937
14947
|
loadingOverlayColor: '#e0e0e0',
|
|
14938
14948
|
loadingOverlaySpinnerActiveColor: '#e0e0e0',
|
|
14939
14949
|
loadingOverlaySpinnerColor: '#555555',
|
|
14940
|
-
syncIndicatorBackground: 'rgba(30, 30, 30, 0.95)',
|
|
14941
|
-
syncIndicatorColor: '#e0e0e0',
|
|
14942
|
-
syncIndicatorSpinnerColor: '#0A84FF',
|
|
14943
|
-
syncIndicatorSpinnerTrack: 'rgba(160, 160, 160, 0.3)',
|
|
14944
|
-
syncIndicatorZIndex: '10001',
|
|
14945
14950
|
},
|
|
14946
14951
|
snap: {
|
|
14947
14952
|
indicatorFill: 'rgba(10, 132, 255, 0.35)',
|
|
@@ -15543,7 +15548,7 @@ class KritzelMathHelper {
|
|
|
15543
15548
|
|
|
15544
15549
|
const KRITZEL_FONT_REGISTRY_KEY = '__kritzelFontRegistry__';
|
|
15545
15550
|
const KRITZEL_FONT_REGISTRY_EVENT = 'kritzel-font-registry-change';
|
|
15546
|
-
const getGlobalRegistryStore$
|
|
15551
|
+
const getGlobalRegistryStore$2 = () => {
|
|
15547
15552
|
const globalScope = globalThis;
|
|
15548
15553
|
const existing = globalScope[KRITZEL_FONT_REGISTRY_KEY];
|
|
15549
15554
|
if (existing) {
|
|
@@ -15576,7 +15581,7 @@ const normalizeKey = (value) => value.trim().toLocaleLowerCase();
|
|
|
15576
15581
|
const normalizeFamily = (value) => value.trim().toLocaleLowerCase();
|
|
15577
15582
|
class KritzelFontRegistry {
|
|
15578
15583
|
static get _fonts() {
|
|
15579
|
-
return getGlobalRegistryStore$
|
|
15584
|
+
return getGlobalRegistryStore$2().fonts;
|
|
15580
15585
|
}
|
|
15581
15586
|
static getFontFaceSet() {
|
|
15582
15587
|
if (typeof document === 'undefined' || !document.fonts) {
|
|
@@ -20022,7 +20027,7 @@ class KritzelShape extends KritzelBaseObject {
|
|
|
20022
20027
|
}
|
|
20023
20028
|
|
|
20024
20029
|
const KRITZEL_RENDERER_REGISTRY_KEY = '__kritzelDynamicObjectRendererRegistry__';
|
|
20025
|
-
const getGlobalRegistryStore = () => {
|
|
20030
|
+
const getGlobalRegistryStore$1 = () => {
|
|
20026
20031
|
const globalScope = globalThis;
|
|
20027
20032
|
const existing = globalScope[KRITZEL_RENDERER_REGISTRY_KEY];
|
|
20028
20033
|
if (existing) {
|
|
@@ -20046,7 +20051,7 @@ const getGlobalRegistryStore = () => {
|
|
|
20046
20051
|
*/
|
|
20047
20052
|
class KritzelDynamicObjectRendererRegistry {
|
|
20048
20053
|
static get _renderers() {
|
|
20049
|
-
return getGlobalRegistryStore().renderers;
|
|
20054
|
+
return getGlobalRegistryStore$1().renderers;
|
|
20050
20055
|
}
|
|
20051
20056
|
/**
|
|
20052
20057
|
* Registers a renderer implementation for a given key.
|
|
@@ -20315,7 +20320,7 @@ class KritzelDynamicObject extends KritzelBaseObject {
|
|
|
20315
20320
|
}
|
|
20316
20321
|
applyInteractiveState() {
|
|
20317
20322
|
const pointerEvents = this.isInteractive ? 'auto' : 'none';
|
|
20318
|
-
const contentCursor = this.isInteractive ? 'auto' : '';
|
|
20323
|
+
const contentCursor = this.isInteractive ? 'var(--kritzel-global-default-cursor, auto)' : '';
|
|
20319
20324
|
if (this.element) {
|
|
20320
20325
|
this.element.style.pointerEvents = pointerEvents;
|
|
20321
20326
|
this.element.style.cursor = contentCursor;
|
|
@@ -20351,7 +20356,7 @@ class KritzelDynamicObject extends KritzelBaseObject {
|
|
|
20351
20356
|
if (!this.isInteractive) {
|
|
20352
20357
|
return false;
|
|
20353
20358
|
}
|
|
20354
|
-
const focusHosts = this.
|
|
20359
|
+
const focusHosts = this.getEmbeddedContentRoots();
|
|
20355
20360
|
// Primary path: locate the focused input-like element by walking from each host through
|
|
20356
20361
|
// `:focus` (piercing open shadow roots). This works in real browsers even when the engine
|
|
20357
20362
|
// and editor are nested web components, because it never relies on the document-level
|
|
@@ -20368,7 +20373,7 @@ class KritzelDynamicObject extends KritzelBaseObject {
|
|
|
20368
20373
|
}
|
|
20369
20374
|
return false;
|
|
20370
20375
|
}
|
|
20371
|
-
|
|
20376
|
+
getEmbeddedContentRoots() {
|
|
20372
20377
|
const hosts = [];
|
|
20373
20378
|
if (this.element) {
|
|
20374
20379
|
hosts.push(this.element);
|
|
@@ -20581,11 +20586,11 @@ class KritzelDynamicObject extends KritzelBaseObject {
|
|
|
20581
20586
|
* @returns A serializable object with htmlString and dimension snapshots
|
|
20582
20587
|
*/
|
|
20583
20588
|
serialize() {
|
|
20584
|
-
const { _core, _elementRef, element, totalWidth, totalHeight, isSelected, isHovered, isMounted, isInteractive, resizing, markedForRemoval, isVisible, ...props } = this;
|
|
20589
|
+
const { _core, _elementRef, element, totalWidth, totalHeight, isSelected, isHovered, isMounted, isInteractive, resizing, markedForRemoval, isVisible, rendererData, ...props } = this;
|
|
20585
20590
|
const cloned = structuredClone(props);
|
|
20586
20591
|
// Include rendererKey and rendererData for lifecycle-driven rendering
|
|
20587
20592
|
cloned.rendererKey = this.rendererKey;
|
|
20588
|
-
cloned.rendererData = this.
|
|
20593
|
+
cloned.rendererData = this.serializeRendererData();
|
|
20589
20594
|
// Store HTML as string for fallback/compatibility when renderer is unavailable
|
|
20590
20595
|
cloned.htmlString = element ? element.outerHTML : '';
|
|
20591
20596
|
// Capture dimension snapshot at serialization time
|
|
@@ -20593,6 +20598,19 @@ class KritzelDynamicObject extends KritzelBaseObject {
|
|
|
20593
20598
|
cloned.serializedHeight = this.height;
|
|
20594
20599
|
return cloned;
|
|
20595
20600
|
}
|
|
20601
|
+
serializeRendererData() {
|
|
20602
|
+
if (this.rendererKey) {
|
|
20603
|
+
const renderer = KritzelDynamicObjectRendererRegistry.get(this.rendererKey);
|
|
20604
|
+
if (renderer?.onSerialize) {
|
|
20605
|
+
return structuredClone(renderer.onSerialize({
|
|
20606
|
+
object: this,
|
|
20607
|
+
container: this.isMounted && this.elementRef instanceof HTMLElement ? this.elementRef : null,
|
|
20608
|
+
data: this.rendererData,
|
|
20609
|
+
}));
|
|
20610
|
+
}
|
|
20611
|
+
}
|
|
20612
|
+
return structuredClone(this.rendererData);
|
|
20613
|
+
}
|
|
20596
20614
|
/**
|
|
20597
20615
|
* Deserializes the dynamic object from a plain object.
|
|
20598
20616
|
* Reconstructs the element from stored HTML string with fallback to placeholder.
|
|
@@ -20625,6 +20643,452 @@ class KritzelDynamicObject extends KritzelBaseObject {
|
|
|
20625
20643
|
}
|
|
20626
20644
|
}
|
|
20627
20645
|
|
|
20646
|
+
const IFRAME_STATE_MESSAGE = 'kritzel-iframe-state';
|
|
20647
|
+
const IFRAME_PARENT_STATE_MESSAGE = 'kritzel-iframe-parent-state';
|
|
20648
|
+
const IFRAME_POINTER_MESSAGE = 'kritzel-iframe-pointer';
|
|
20649
|
+
const IFRAME_CONTEXT_MENU_MESSAGE = 'kritzel-iframe-contextmenu';
|
|
20650
|
+
const SUPPORTED_SANDBOX_TOKENS = new Set([
|
|
20651
|
+
'allow-downloads',
|
|
20652
|
+
'allow-forms',
|
|
20653
|
+
'allow-modals',
|
|
20654
|
+
'allow-orientation-lock',
|
|
20655
|
+
'allow-pointer-lock',
|
|
20656
|
+
'allow-popups',
|
|
20657
|
+
'allow-popups-to-escape-sandbox',
|
|
20658
|
+
'allow-presentation',
|
|
20659
|
+
'allow-same-origin',
|
|
20660
|
+
'allow-scripts',
|
|
20661
|
+
'allow-top-navigation-by-user-activation',
|
|
20662
|
+
]);
|
|
20663
|
+
const iframePointerBridgeStarts = new WeakMap();
|
|
20664
|
+
class KritzelIframeObject extends KritzelBaseObject {
|
|
20665
|
+
__class__ = 'KritzelIframeObject';
|
|
20666
|
+
content = { html: '', css: '', script: '' };
|
|
20667
|
+
loadingContent;
|
|
20668
|
+
isLoading = false;
|
|
20669
|
+
state = {};
|
|
20670
|
+
title = 'Embedded content';
|
|
20671
|
+
sandbox = ['allow-scripts'];
|
|
20672
|
+
borderRadius;
|
|
20673
|
+
boxShadow;
|
|
20674
|
+
get html() { return this.content.html; }
|
|
20675
|
+
set html(value) { this.content = { ...this.content, html: value }; }
|
|
20676
|
+
get css() { return this.content.css; }
|
|
20677
|
+
set css(value) { this.content = { ...this.content, css: value }; }
|
|
20678
|
+
get script() { return this.content.script; }
|
|
20679
|
+
set script(value) { this.content = { ...this.content, script: value }; }
|
|
20680
|
+
messageListener = null;
|
|
20681
|
+
constructor(config) {
|
|
20682
|
+
super();
|
|
20683
|
+
this.content = {
|
|
20684
|
+
html: config?.content?.html ?? config?.html ?? '',
|
|
20685
|
+
css: config?.content?.css ?? config?.css ?? '',
|
|
20686
|
+
script: config?.content?.script ?? config?.script ?? '',
|
|
20687
|
+
};
|
|
20688
|
+
this.loadingContent = config?.loadingContent ? {
|
|
20689
|
+
html: config.loadingContent.html ?? '',
|
|
20690
|
+
css: config.loadingContent.css ?? '',
|
|
20691
|
+
script: config.loadingContent.script ?? '',
|
|
20692
|
+
} : undefined;
|
|
20693
|
+
this.isLoading = config?.isLoading ?? false;
|
|
20694
|
+
this.state = structuredClone(config?.state ?? {});
|
|
20695
|
+
this.title = config?.title ?? 'Embedded content';
|
|
20696
|
+
this.sandbox = this.normalizeSandbox(config?.sandbox);
|
|
20697
|
+
this.borderRadius = config?.borderRadius;
|
|
20698
|
+
this.boxShadow = config?.boxShadow;
|
|
20699
|
+
this.translateX = config?.translateX ?? 0;
|
|
20700
|
+
this.translateY = config?.translateY ?? 0;
|
|
20701
|
+
this.rotation = KritzelMathHelper.degreesToRadians(config?.rotation ?? 0);
|
|
20702
|
+
this.scale = config?.scale ?? 1;
|
|
20703
|
+
this.width = config?.width ?? 0;
|
|
20704
|
+
this.height = config?.height ?? 0;
|
|
20705
|
+
}
|
|
20706
|
+
static create(core, config) {
|
|
20707
|
+
const object = new KritzelIframeObject(config);
|
|
20708
|
+
object._core = core;
|
|
20709
|
+
object.id = object.generateId();
|
|
20710
|
+
object.workspaceId = core.store.state.activeWorkspace.id;
|
|
20711
|
+
object.userId = core.user?.id;
|
|
20712
|
+
object.scale = config?.scale ?? core.store.state.scale;
|
|
20713
|
+
object.zIndex = core.store.currentZIndex;
|
|
20714
|
+
return object;
|
|
20715
|
+
}
|
|
20716
|
+
get sandboxAttribute() {
|
|
20717
|
+
return this.sandbox.join(' ');
|
|
20718
|
+
}
|
|
20719
|
+
mount(iframe) {
|
|
20720
|
+
if (this.isMounted && this.elementRef === iframe) {
|
|
20721
|
+
return;
|
|
20722
|
+
}
|
|
20723
|
+
if (this.isMounted) {
|
|
20724
|
+
this.unmount();
|
|
20725
|
+
}
|
|
20726
|
+
this.elementRef = iframe;
|
|
20727
|
+
this.isMounted = true;
|
|
20728
|
+
iframe.title = this.title;
|
|
20729
|
+
iframe.setAttribute('sandbox', this.sandboxAttribute);
|
|
20730
|
+
iframe.style.pointerEvents = this.isInteractive ? 'auto' : 'none';
|
|
20731
|
+
this.messageListener = event => this.handleMessage(event);
|
|
20732
|
+
window.addEventListener('message', this.messageListener);
|
|
20733
|
+
iframe.srcdoc = this.createSourceDocument();
|
|
20734
|
+
this.onMount(this.createLifecycleContext());
|
|
20735
|
+
}
|
|
20736
|
+
unmount() {
|
|
20737
|
+
if (!this.isMounted) {
|
|
20738
|
+
return;
|
|
20739
|
+
}
|
|
20740
|
+
const nextState = this.onUnmount(this.createLifecycleContext());
|
|
20741
|
+
if (nextState !== undefined) {
|
|
20742
|
+
this.state = structuredClone(nextState);
|
|
20743
|
+
}
|
|
20744
|
+
if (this.messageListener) {
|
|
20745
|
+
window.removeEventListener('message', this.messageListener);
|
|
20746
|
+
this.messageListener = null;
|
|
20747
|
+
}
|
|
20748
|
+
this.isMounted = false;
|
|
20749
|
+
this._elementRef = null;
|
|
20750
|
+
}
|
|
20751
|
+
setContent(content) {
|
|
20752
|
+
this.content = {
|
|
20753
|
+
html: content.html ?? this.content.html,
|
|
20754
|
+
css: content.css ?? this.content.css,
|
|
20755
|
+
script: content.script ?? this.content.script,
|
|
20756
|
+
};
|
|
20757
|
+
this.refreshDocument();
|
|
20758
|
+
this.persistUpdate();
|
|
20759
|
+
}
|
|
20760
|
+
setLoadingContent(content) {
|
|
20761
|
+
this.loadingContent = {
|
|
20762
|
+
html: content.html ?? this.loadingContent?.html ?? '',
|
|
20763
|
+
css: content.css ?? this.loadingContent?.css ?? '',
|
|
20764
|
+
script: content.script ?? this.loadingContent?.script ?? '',
|
|
20765
|
+
};
|
|
20766
|
+
this.refreshDocument();
|
|
20767
|
+
this.persistUpdate();
|
|
20768
|
+
}
|
|
20769
|
+
setLoading(isLoading) {
|
|
20770
|
+
this.isLoading = isLoading;
|
|
20771
|
+
this.refreshDocument();
|
|
20772
|
+
this.persistUpdate();
|
|
20773
|
+
}
|
|
20774
|
+
getActiveContent() {
|
|
20775
|
+
const activeLoadingContent = this.isLoading ? this.loadingContent : undefined;
|
|
20776
|
+
return {
|
|
20777
|
+
html: activeLoadingContent?.html ?? this.content.html,
|
|
20778
|
+
css: activeLoadingContent?.css ?? this.content.css,
|
|
20779
|
+
script: activeLoadingContent?.script ?? this.content.script,
|
|
20780
|
+
};
|
|
20781
|
+
}
|
|
20782
|
+
setState(state) {
|
|
20783
|
+
this.state = structuredClone(state);
|
|
20784
|
+
this.elementRef?.contentWindow?.postMessage({ type: IFRAME_PARENT_STATE_MESSAGE, state: this.state }, '*');
|
|
20785
|
+
this.persistUpdate();
|
|
20786
|
+
}
|
|
20787
|
+
setIsInteractive(isInteractive) {
|
|
20788
|
+
this.isInteractive = isInteractive;
|
|
20789
|
+
if (this.isMounted && this.elementRef) {
|
|
20790
|
+
this.elementRef.style.pointerEvents = isInteractive ? 'auto' : 'none';
|
|
20791
|
+
if (!isInteractive) {
|
|
20792
|
+
this.elementRef.blur();
|
|
20793
|
+
}
|
|
20794
|
+
}
|
|
20795
|
+
}
|
|
20796
|
+
hasFocusedInputElement() {
|
|
20797
|
+
return this.isInteractive && this.isMounted && document.activeElement === this.elementRef;
|
|
20798
|
+
}
|
|
20799
|
+
getEmbeddedContentRoots() {
|
|
20800
|
+
return this.isMounted && this.elementRef instanceof HTMLElement && this.elementRef.tagName === 'IFRAME' ? [this.elementRef] : [];
|
|
20801
|
+
}
|
|
20802
|
+
onMount(_context) { }
|
|
20803
|
+
onSerialize(context) {
|
|
20804
|
+
return context.state;
|
|
20805
|
+
}
|
|
20806
|
+
onUnmount(context) {
|
|
20807
|
+
return context.state;
|
|
20808
|
+
}
|
|
20809
|
+
serialize() {
|
|
20810
|
+
const nextState = this.onSerialize(this.createLifecycleContext());
|
|
20811
|
+
this.state = structuredClone(nextState);
|
|
20812
|
+
const messageListener = this.messageListener;
|
|
20813
|
+
this.messageListener = null;
|
|
20814
|
+
try {
|
|
20815
|
+
const serialized = super.serialize();
|
|
20816
|
+
delete serialized.messageListener;
|
|
20817
|
+
return serialized;
|
|
20818
|
+
}
|
|
20819
|
+
finally {
|
|
20820
|
+
this.messageListener = messageListener;
|
|
20821
|
+
}
|
|
20822
|
+
}
|
|
20823
|
+
deserialize(object) {
|
|
20824
|
+
super.deserialize(object);
|
|
20825
|
+
const nextContent = object.content && typeof object.content === 'object' ? object.content : {};
|
|
20826
|
+
const nextLoadingContent = object.loadingContent && typeof object.loadingContent === 'object' ? object.loadingContent : undefined;
|
|
20827
|
+
this.content = {
|
|
20828
|
+
html: typeof nextContent.html === 'string' ? nextContent.html : typeof object.html === 'string' ? object.html : '',
|
|
20829
|
+
css: typeof nextContent.css === 'string' ? nextContent.css : typeof object.css === 'string' ? object.css : '',
|
|
20830
|
+
script: typeof nextContent.script === 'string' ? nextContent.script : typeof object.script === 'string' ? object.script : '',
|
|
20831
|
+
};
|
|
20832
|
+
this.loadingContent = nextLoadingContent ? {
|
|
20833
|
+
html: typeof nextLoadingContent.html === 'string' ? nextLoadingContent.html : '',
|
|
20834
|
+
css: typeof nextLoadingContent.css === 'string' ? nextLoadingContent.css : '',
|
|
20835
|
+
script: typeof nextLoadingContent.script === 'string' ? nextLoadingContent.script : '',
|
|
20836
|
+
} : undefined;
|
|
20837
|
+
this.isLoading = typeof object.isLoading === 'boolean' ? object.isLoading : false;
|
|
20838
|
+
this.state = object.state && typeof object.state === 'object' ? structuredClone(object.state) : {};
|
|
20839
|
+
this.title = typeof object.title === 'string' ? object.title : 'Embedded content';
|
|
20840
|
+
this.sandbox = this.normalizeSandbox(Array.isArray(object.sandbox) ? object.sandbox.filter((token) => typeof token === 'string') : undefined);
|
|
20841
|
+
this.borderRadius = (typeof object.borderRadius === 'number' || typeof object.borderRadius === 'string') ? object.borderRadius : undefined;
|
|
20842
|
+
this.boxShadow = typeof object.boxShadow === 'string' ? object.boxShadow : undefined;
|
|
20843
|
+
this.messageListener = null;
|
|
20844
|
+
return this;
|
|
20845
|
+
}
|
|
20846
|
+
copy() {
|
|
20847
|
+
const copiedObject = super.copy();
|
|
20848
|
+
copiedObject.content = { ...this.content };
|
|
20849
|
+
copiedObject.loadingContent = this.loadingContent ? { ...this.loadingContent } : undefined;
|
|
20850
|
+
copiedObject.isLoading = this.isLoading;
|
|
20851
|
+
copiedObject.state = structuredClone(this.state);
|
|
20852
|
+
copiedObject.sandbox = [...this.sandbox];
|
|
20853
|
+
copiedObject.borderRadius = this.borderRadius;
|
|
20854
|
+
copiedObject.boxShadow = this.boxShadow;
|
|
20855
|
+
copiedObject.messageListener = null;
|
|
20856
|
+
copiedObject._elementRef = null;
|
|
20857
|
+
return copiedObject;
|
|
20858
|
+
}
|
|
20859
|
+
clone() {
|
|
20860
|
+
const clonedObject = super.clone();
|
|
20861
|
+
clonedObject.content = { ...this.content };
|
|
20862
|
+
clonedObject.loadingContent = this.loadingContent ? { ...this.loadingContent } : undefined;
|
|
20863
|
+
clonedObject.isLoading = this.isLoading;
|
|
20864
|
+
clonedObject.state = structuredClone(this.state);
|
|
20865
|
+
clonedObject.sandbox = [...this.sandbox];
|
|
20866
|
+
clonedObject.borderRadius = this.borderRadius;
|
|
20867
|
+
clonedObject.boxShadow = this.boxShadow;
|
|
20868
|
+
clonedObject.messageListener = null;
|
|
20869
|
+
clonedObject.isMounted = false;
|
|
20870
|
+
clonedObject._elementRef = null;
|
|
20871
|
+
return clonedObject;
|
|
20872
|
+
}
|
|
20873
|
+
adoptTransientStateFrom(previous) {
|
|
20874
|
+
if (!(previous instanceof KritzelIframeObject)) {
|
|
20875
|
+
return;
|
|
20876
|
+
}
|
|
20877
|
+
this.isInteractive = previous.isInteractive;
|
|
20878
|
+
this.isSelected = previous.isSelected;
|
|
20879
|
+
this.isHovered = previous.isHovered;
|
|
20880
|
+
if (!previous.isMounted || !(previous.elementRef instanceof HTMLElement) || previous.elementRef.tagName !== 'IFRAME') {
|
|
20881
|
+
return;
|
|
20882
|
+
}
|
|
20883
|
+
if (previous.messageListener) {
|
|
20884
|
+
window.removeEventListener('message', previous.messageListener);
|
|
20885
|
+
}
|
|
20886
|
+
this._elementRef = previous.elementRef;
|
|
20887
|
+
this.isMounted = true;
|
|
20888
|
+
this.messageListener = event => this.handleMessage(event);
|
|
20889
|
+
window.addEventListener('message', this.messageListener);
|
|
20890
|
+
this.elementRef.style.pointerEvents = this.isInteractive ? 'auto' : 'none';
|
|
20891
|
+
previous.messageListener = null;
|
|
20892
|
+
previous.isMounted = false;
|
|
20893
|
+
previous._elementRef = null;
|
|
20894
|
+
}
|
|
20895
|
+
createLifecycleContext() {
|
|
20896
|
+
return {
|
|
20897
|
+
object: this,
|
|
20898
|
+
iframe: this.isMounted ? this.elementRef : null,
|
|
20899
|
+
state: structuredClone(this.state),
|
|
20900
|
+
};
|
|
20901
|
+
}
|
|
20902
|
+
normalizeSandbox(tokens) {
|
|
20903
|
+
const requestedTokens = tokens ?? ['allow-scripts'];
|
|
20904
|
+
const normalized = requestedTokens.filter(token => SUPPORTED_SANDBOX_TOKENS.has(token));
|
|
20905
|
+
return [...new Set(normalized.length > 0 ? normalized : ['allow-scripts'])];
|
|
20906
|
+
}
|
|
20907
|
+
createSourceDocument() {
|
|
20908
|
+
const activeContent = this.getActiveContent();
|
|
20909
|
+
const state = JSON.stringify(this.state).replace(/</g, '\\u003c');
|
|
20910
|
+
const css = activeContent.css.replace(/<\/style/gi, '<\\/style');
|
|
20911
|
+
const script = activeContent.script.replace(/<\/script/gi, '<\\/script');
|
|
20912
|
+
const computedStyle = this.isMounted ? getComputedStyle(this.elementRef) : null;
|
|
20913
|
+
const defaultCursor = computedStyle?.getPropertyValue('--kritzel-global-default-cursor').trim() || 'auto';
|
|
20914
|
+
const pointerCursor = computedStyle?.getPropertyValue('--kritzel-global-pointer-cursor').trim() || defaultCursor;
|
|
20915
|
+
return `<!doctype html>
|
|
20916
|
+
<html>
|
|
20917
|
+
<head>
|
|
20918
|
+
<meta charset="utf-8">
|
|
20919
|
+
<style>
|
|
20920
|
+
:root {
|
|
20921
|
+
--kritzel-iframe-default-cursor: ${defaultCursor};
|
|
20922
|
+
--kritzel-iframe-pointer-cursor: ${pointerCursor};
|
|
20923
|
+
}
|
|
20924
|
+
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; cursor: var(--kritzel-iframe-default-cursor); }
|
|
20925
|
+
button, button *, a, a *, input, textarea, select { cursor: var(--kritzel-iframe-pointer-cursor) !important; }
|
|
20926
|
+
${css}
|
|
20927
|
+
</style>
|
|
20928
|
+
</head>
|
|
20929
|
+
<body>
|
|
20930
|
+
${activeContent.html}
|
|
20931
|
+
<script>
|
|
20932
|
+
const kritzel = globalThis.kritzel = {
|
|
20933
|
+
state: ${state},
|
|
20934
|
+
setState(nextState) {
|
|
20935
|
+
this.state = nextState;
|
|
20936
|
+
parent.postMessage({ type: '${IFRAME_STATE_MESSAGE}', state: nextState }, '*');
|
|
20937
|
+
},
|
|
20938
|
+
};
|
|
20939
|
+
globalThis.addEventListener('message', event => {
|
|
20940
|
+
if (event.data?.type === '${IFRAME_PARENT_STATE_MESSAGE}' && event.data.state && typeof event.data.state === 'object') {
|
|
20941
|
+
kritzel.state = event.data.state;
|
|
20942
|
+
globalThis.dispatchEvent(new CustomEvent('kritzelstatechange', { detail: kritzel.state }));
|
|
20943
|
+
}
|
|
20944
|
+
});
|
|
20945
|
+
let bridgedPointerId = null;
|
|
20946
|
+
const interactiveSelector = 'button, input, textarea, select, a[href], [contenteditable="true"], [contenteditable=""]';
|
|
20947
|
+
const bridgePointerEvent = event => parent.postMessage({
|
|
20948
|
+
type: '${IFRAME_POINTER_MESSAGE}',
|
|
20949
|
+
eventType: event.type,
|
|
20950
|
+
pointerId: event.pointerId,
|
|
20951
|
+
pointerType: event.pointerType,
|
|
20952
|
+
clientX: event.clientX,
|
|
20953
|
+
clientY: event.clientY,
|
|
20954
|
+
screenX: event.screenX,
|
|
20955
|
+
screenY: event.screenY,
|
|
20956
|
+
button: event.button,
|
|
20957
|
+
buttons: event.buttons,
|
|
20958
|
+
shiftKey: event.shiftKey,
|
|
20959
|
+
ctrlKey: event.ctrlKey,
|
|
20960
|
+
altKey: event.altKey,
|
|
20961
|
+
metaKey: event.metaKey,
|
|
20962
|
+
}, '*');
|
|
20963
|
+
document.addEventListener('pointerdown', event => {
|
|
20964
|
+
if (event.target instanceof Element && event.target.closest(interactiveSelector)) return;
|
|
20965
|
+
bridgedPointerId = event.pointerId;
|
|
20966
|
+
event.preventDefault();
|
|
20967
|
+
bridgePointerEvent(event);
|
|
20968
|
+
});
|
|
20969
|
+
document.addEventListener('pointermove', event => {
|
|
20970
|
+
if (event.pointerId !== bridgedPointerId) return;
|
|
20971
|
+
event.preventDefault();
|
|
20972
|
+
bridgePointerEvent(event);
|
|
20973
|
+
});
|
|
20974
|
+
const finishPointerBridge = event => {
|
|
20975
|
+
if (event.pointerId !== bridgedPointerId) return;
|
|
20976
|
+
event.preventDefault();
|
|
20977
|
+
bridgePointerEvent(event);
|
|
20978
|
+
bridgedPointerId = null;
|
|
20979
|
+
};
|
|
20980
|
+
document.addEventListener('pointerup', finishPointerBridge);
|
|
20981
|
+
document.addEventListener('pointercancel', finishPointerBridge);
|
|
20982
|
+
document.addEventListener('contextmenu', event => {
|
|
20983
|
+
event.preventDefault();
|
|
20984
|
+
parent.postMessage({
|
|
20985
|
+
type: '${IFRAME_CONTEXT_MENU_MESSAGE}',
|
|
20986
|
+
clientX: event.clientX,
|
|
20987
|
+
clientY: event.clientY,
|
|
20988
|
+
button: event.button,
|
|
20989
|
+
shiftKey: event.shiftKey,
|
|
20990
|
+
ctrlKey: event.ctrlKey,
|
|
20991
|
+
altKey: event.altKey,
|
|
20992
|
+
metaKey: event.metaKey,
|
|
20993
|
+
}, '*');
|
|
20994
|
+
});
|
|
20995
|
+
${script}
|
|
20996
|
+
<\/script>
|
|
20997
|
+
</body>
|
|
20998
|
+
</html>`;
|
|
20999
|
+
}
|
|
21000
|
+
handleMessage(event) {
|
|
21001
|
+
if (event.source !== this.elementRef?.contentWindow || !event.data || typeof event.data !== 'object') {
|
|
21002
|
+
return;
|
|
21003
|
+
}
|
|
21004
|
+
const message = event.data;
|
|
21005
|
+
if (message.type === IFRAME_POINTER_MESSAGE) {
|
|
21006
|
+
this.dispatchPointerMessage(event.data);
|
|
21007
|
+
return;
|
|
21008
|
+
}
|
|
21009
|
+
if (message.type === IFRAME_CONTEXT_MENU_MESSAGE) {
|
|
21010
|
+
this.dispatchContextMenuMessage(event.data);
|
|
21011
|
+
return;
|
|
21012
|
+
}
|
|
21013
|
+
if (message.type !== IFRAME_STATE_MESSAGE || !message.state || typeof message.state !== 'object') {
|
|
21014
|
+
return;
|
|
21015
|
+
}
|
|
21016
|
+
this.state = structuredClone(message.state);
|
|
21017
|
+
this.persistUpdate();
|
|
21018
|
+
}
|
|
21019
|
+
dispatchPointerMessage(message) {
|
|
21020
|
+
if (!this.isMounted || !this.elementRef || !['pointerdown', 'pointermove', 'pointerup', 'pointercancel'].includes(message.eventType)) {
|
|
21021
|
+
return;
|
|
21022
|
+
}
|
|
21023
|
+
const iframeRect = this.elementRef.getBoundingClientRect();
|
|
21024
|
+
if (message.eventType === 'pointerdown') {
|
|
21025
|
+
const scaleX = this.elementRef.offsetWidth > 0 ? iframeRect.width / this.elementRef.offsetWidth : 1;
|
|
21026
|
+
const scaleY = this.elementRef.offsetHeight > 0 ? iframeRect.height / this.elementRef.offsetHeight : 1;
|
|
21027
|
+
iframePointerBridgeStarts.set(this.elementRef, {
|
|
21028
|
+
pointerId: message.pointerId,
|
|
21029
|
+
clientX: iframeRect.left + message.clientX * scaleX,
|
|
21030
|
+
clientY: iframeRect.top + message.clientY * scaleY,
|
|
21031
|
+
screenX: message.screenX,
|
|
21032
|
+
screenY: message.screenY,
|
|
21033
|
+
});
|
|
21034
|
+
}
|
|
21035
|
+
const bridgeStart = iframePointerBridgeStarts.get(this.elementRef);
|
|
21036
|
+
const hasBridgeStart = bridgeStart?.pointerId === message.pointerId;
|
|
21037
|
+
const clientX = hasBridgeStart ? bridgeStart.clientX + message.screenX - bridgeStart.screenX : iframeRect.left + message.clientX;
|
|
21038
|
+
const clientY = hasBridgeStart ? bridgeStart.clientY + message.screenY - bridgeStart.screenY : iframeRect.top + message.clientY;
|
|
21039
|
+
this.elementRef.dispatchEvent(new PointerEvent(message.eventType, {
|
|
21040
|
+
bubbles: true,
|
|
21041
|
+
composed: true,
|
|
21042
|
+
cancelable: true,
|
|
21043
|
+
pointerId: message.pointerId,
|
|
21044
|
+
pointerType: message.pointerType,
|
|
21045
|
+
clientX,
|
|
21046
|
+
clientY,
|
|
21047
|
+
screenX: message.screenX,
|
|
21048
|
+
screenY: message.screenY,
|
|
21049
|
+
button: message.button,
|
|
21050
|
+
buttons: message.buttons,
|
|
21051
|
+
shiftKey: message.shiftKey,
|
|
21052
|
+
ctrlKey: message.ctrlKey,
|
|
21053
|
+
altKey: message.altKey,
|
|
21054
|
+
metaKey: message.metaKey,
|
|
21055
|
+
}));
|
|
21056
|
+
if (message.eventType === 'pointerup' || message.eventType === 'pointercancel') {
|
|
21057
|
+
iframePointerBridgeStarts.delete(this.elementRef);
|
|
21058
|
+
}
|
|
21059
|
+
}
|
|
21060
|
+
dispatchContextMenuMessage(message) {
|
|
21061
|
+
if (!this.isMounted || !this.elementRef) {
|
|
21062
|
+
return;
|
|
21063
|
+
}
|
|
21064
|
+
const iframeRect = this.elementRef.getBoundingClientRect();
|
|
21065
|
+
// Dispatched as a MouseEvent (not PointerEvent) to mirror how browsers
|
|
21066
|
+
// natively raise 'contextmenu' for both mouse right-click and touch long-press.
|
|
21067
|
+
this.elementRef.dispatchEvent(new MouseEvent('contextmenu', {
|
|
21068
|
+
bubbles: true,
|
|
21069
|
+
composed: true,
|
|
21070
|
+
cancelable: true,
|
|
21071
|
+
clientX: iframeRect.left + message.clientX,
|
|
21072
|
+
clientY: iframeRect.top + message.clientY,
|
|
21073
|
+
button: message.button,
|
|
21074
|
+
shiftKey: message.shiftKey,
|
|
21075
|
+
ctrlKey: message.ctrlKey,
|
|
21076
|
+
altKey: message.altKey,
|
|
21077
|
+
metaKey: message.metaKey,
|
|
21078
|
+
}));
|
|
21079
|
+
}
|
|
21080
|
+
refreshDocument() {
|
|
21081
|
+
if (this.isMounted && this.elementRef) {
|
|
21082
|
+
this.elementRef.srcdoc = this.createSourceDocument();
|
|
21083
|
+
}
|
|
21084
|
+
}
|
|
21085
|
+
persistUpdate() {
|
|
21086
|
+
if (this._core?.store?.objects) {
|
|
21087
|
+
this.update();
|
|
21088
|
+
}
|
|
21089
|
+
}
|
|
21090
|
+
}
|
|
21091
|
+
|
|
20628
21092
|
/**
|
|
20629
21093
|
* Represents a selection group that manages multiple selected objects on the canvas.
|
|
20630
21094
|
* The selection group allows batch operations like move, resize, and rotate on multiple objects simultaneously.
|
|
@@ -22755,13 +23219,38 @@ class KritzelShapeTool extends KritzelBaseTool {
|
|
|
22755
23219
|
}
|
|
22756
23220
|
}
|
|
22757
23221
|
|
|
23222
|
+
const KRITZEL_ICON_REGISTRY_KEY = '__kritzelIconRegistry__';
|
|
23223
|
+
const getGlobalRegistryStore = () => {
|
|
23224
|
+
const globalScope = globalThis;
|
|
23225
|
+
const existing = globalScope[KRITZEL_ICON_REGISTRY_KEY];
|
|
23226
|
+
if (existing) {
|
|
23227
|
+
return existing;
|
|
23228
|
+
}
|
|
23229
|
+
const created = {
|
|
23230
|
+
icons: new Map(),
|
|
23231
|
+
listeners: new Set(),
|
|
23232
|
+
};
|
|
23233
|
+
globalScope[KRITZEL_ICON_REGISTRY_KEY] = created;
|
|
23234
|
+
return created;
|
|
23235
|
+
};
|
|
22758
23236
|
/**
|
|
22759
23237
|
* A static registry for managing SVG icons throughout the Kritzel library.
|
|
22760
23238
|
* Icons are stored as name-to-SVG-content mappings and can be retrieved by name.
|
|
22761
23239
|
*/
|
|
22762
23240
|
class KritzelIconRegistry {
|
|
22763
23241
|
/** Internal storage for registered icons, mapping icon names to their SVG content. */
|
|
22764
|
-
static registry
|
|
23242
|
+
static get registry() {
|
|
23243
|
+
return getGlobalRegistryStore().icons;
|
|
23244
|
+
}
|
|
23245
|
+
static get listeners() {
|
|
23246
|
+
return getGlobalRegistryStore().listeners;
|
|
23247
|
+
}
|
|
23248
|
+
static subscribe(listener) {
|
|
23249
|
+
this.listeners.add(listener);
|
|
23250
|
+
return () => {
|
|
23251
|
+
this.listeners.delete(listener);
|
|
23252
|
+
};
|
|
23253
|
+
}
|
|
22765
23254
|
/**
|
|
22766
23255
|
* Registers a single icon with the given name and SVG content.
|
|
22767
23256
|
* If an icon with the same name already exists, it will be overwritten and a warning will be logged.
|
|
@@ -22774,6 +23263,9 @@ class KritzelIconRegistry {
|
|
|
22774
23263
|
console.warn(`[IconRegistry] Icon "${name}" is already registered. It will be overwritten.`);
|
|
22775
23264
|
}
|
|
22776
23265
|
this.registry.set(name, svgContent);
|
|
23266
|
+
for (const listener of this.listeners) {
|
|
23267
|
+
listener(name);
|
|
23268
|
+
}
|
|
22777
23269
|
}
|
|
22778
23270
|
/**
|
|
22779
23271
|
* Retrieves the SVG content for a registered icon by its name.
|
|
@@ -22807,72 +23299,77 @@ class KritzelIconRegistry {
|
|
|
22807
23299
|
return this.registry.has(name);
|
|
22808
23300
|
}
|
|
22809
23301
|
}
|
|
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
|
-
|
|
22874
|
-
|
|
22875
|
-
}
|
|
23302
|
+
const defaultIcons = {
|
|
23303
|
+
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>',
|
|
23304
|
+
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>',
|
|
23305
|
+
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>',
|
|
23306
|
+
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>',
|
|
23307
|
+
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>',
|
|
23308
|
+
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>',
|
|
23309
|
+
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>',
|
|
23310
|
+
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>',
|
|
23311
|
+
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>',
|
|
23312
|
+
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>',
|
|
23313
|
+
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>',
|
|
23314
|
+
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>',
|
|
23315
|
+
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>',
|
|
23316
|
+
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>',
|
|
23317
|
+
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>',
|
|
23318
|
+
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>',
|
|
23319
|
+
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>',
|
|
23320
|
+
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>',
|
|
23321
|
+
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>',
|
|
23322
|
+
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>',
|
|
23323
|
+
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>',
|
|
23324
|
+
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>',
|
|
23325
|
+
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>',
|
|
23326
|
+
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>',
|
|
23327
|
+
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>',
|
|
23328
|
+
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>',
|
|
23329
|
+
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>',
|
|
23330
|
+
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>',
|
|
23331
|
+
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>',
|
|
23332
|
+
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>',
|
|
23333
|
+
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>',
|
|
23334
|
+
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>',
|
|
23335
|
+
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>',
|
|
23336
|
+
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>',
|
|
23337
|
+
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>',
|
|
23338
|
+
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>',
|
|
23339
|
+
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>',
|
|
23340
|
+
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>',
|
|
23341
|
+
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>',
|
|
23342
|
+
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>',
|
|
23343
|
+
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>',
|
|
23344
|
+
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>',
|
|
23345
|
+
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>',
|
|
23346
|
+
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>',
|
|
23347
|
+
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>',
|
|
23348
|
+
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>',
|
|
23349
|
+
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>',
|
|
23350
|
+
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>',
|
|
23351
|
+
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>',
|
|
23352
|
+
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>',
|
|
23353
|
+
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>',
|
|
23354
|
+
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>',
|
|
23355
|
+
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>',
|
|
23356
|
+
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>',
|
|
23357
|
+
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>',
|
|
23358
|
+
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>',
|
|
23359
|
+
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>',
|
|
23360
|
+
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>',
|
|
23361
|
+
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>',
|
|
23362
|
+
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>',
|
|
23363
|
+
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>',
|
|
23364
|
+
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>',
|
|
23365
|
+
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>',
|
|
23366
|
+
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>'
|
|
23367
|
+
};
|
|
23368
|
+
for (const [name, svg] of Object.entries(defaultIcons)) {
|
|
23369
|
+
if (!KritzelIconRegistry.has(name)) {
|
|
23370
|
+
KritzelIconRegistry.register(name, svg);
|
|
23371
|
+
}
|
|
23372
|
+
}
|
|
22876
23373
|
|
|
22877
23374
|
class KritzelCursorHelper {
|
|
22878
23375
|
static _pointerCursor = null;
|
|
@@ -22891,7 +23388,7 @@ class KritzelCursorHelper {
|
|
|
22891
23388
|
* The icon is retrieved from the KritzelIconRegistry.
|
|
22892
23389
|
*/
|
|
22893
23390
|
static getCursor(options) {
|
|
22894
|
-
const iconName = options.iconName === 'default' ? '
|
|
23391
|
+
const iconName = options.iconName === 'default' ? 'mousePointer' : options.iconName;
|
|
22895
23392
|
const iconSvg = KritzelIconRegistry.get(iconName);
|
|
22896
23393
|
if (!iconSvg) {
|
|
22897
23394
|
console.warn(`Icon "${iconName}" not found in registry.`);
|
|
@@ -22900,7 +23397,7 @@ class KritzelCursorHelper {
|
|
|
22900
23397
|
const size = options.size || 24;
|
|
22901
23398
|
const rotation = options.rotation || 0;
|
|
22902
23399
|
const color = options.color || 'black';
|
|
22903
|
-
// Default cursor (
|
|
23400
|
+
// Default cursor (mousePointer) has hotspot at (4, 4), others at center
|
|
22904
23401
|
const hotspot = options.hotspot || (options.iconName === 'default' ? { x: 4, y: 4 } : { x: size / 2, y: size / 2 });
|
|
22905
23402
|
// Modify the SVG string to set size and color
|
|
22906
23403
|
// We replace width and height to match the requested size
|
|
@@ -22913,12 +23410,12 @@ class KritzelCursorHelper {
|
|
|
22913
23410
|
// We rotate around the center of the SVG canvas
|
|
22914
23411
|
const center = size / 2;
|
|
22915
23412
|
// We use a group to apply the rotation
|
|
22916
|
-
const svg = `
|
|
22917
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
|
|
22918
|
-
<g transform="rotate(${rotation} ${center} ${center})">
|
|
22919
|
-
${content}
|
|
22920
|
-
</g>
|
|
22921
|
-
</svg>
|
|
23413
|
+
const svg = `
|
|
23414
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
|
|
23415
|
+
<g transform="rotate(${rotation} ${center} ${center})">
|
|
23416
|
+
${content}
|
|
23417
|
+
</g>
|
|
23418
|
+
</svg>
|
|
22922
23419
|
`;
|
|
22923
23420
|
// Encode the SVG for use in a data URI
|
|
22924
23421
|
// We need to be careful with encoding to ensure it works across browsers
|
|
@@ -25134,9 +25631,8 @@ class KritzelSelectionTool extends KritzelBaseTool {
|
|
|
25134
25631
|
}
|
|
25135
25632
|
if (selectedObject && selectedObject.isSelected === false && selectedObject?.objects.length === 1) {
|
|
25136
25633
|
const firstObj = selectedObject.objects[0];
|
|
25137
|
-
if (
|
|
25138
|
-
// Selected
|
|
25139
|
-
// embedded DOM content. Unselected dynamic objects remain selectable.
|
|
25634
|
+
if (ObjectHelper.isKritzelEmbeddedObject(firstObj)) {
|
|
25635
|
+
// Selected embedded objects hand pointer interaction to their content.
|
|
25140
25636
|
if (firstObj.isSelected && this._core.store.selectionGroup?.objects.length === 1)
|
|
25141
25637
|
return;
|
|
25142
25638
|
}
|
|
@@ -28176,6 +28672,7 @@ exports.KritzelFontRegistry = KritzelFontRegistry;
|
|
|
28176
28672
|
exports.KritzelGroup = KritzelGroup;
|
|
28177
28673
|
exports.KritzelHTMLHelper = KritzelHTMLHelper;
|
|
28178
28674
|
exports.KritzelIconRegistry = KritzelIconRegistry;
|
|
28675
|
+
exports.KritzelIframeObject = KritzelIframeObject;
|
|
28179
28676
|
exports.KritzelImage = KritzelImage;
|
|
28180
28677
|
exports.KritzelImageFileHelper = KritzelImageFileHelper;
|
|
28181
28678
|
exports.KritzelImageTool = KritzelImageTool;
|
|
@@ -28199,6 +28696,7 @@ exports.ThemeHelper = ThemeHelper;
|
|
|
28199
28696
|
exports.WORKSPACE_EXPORT_VERSION = WORKSPACE_EXPORT_VERSION;
|
|
28200
28697
|
exports.WORKSPACE_MIGRATIONS = WORKSPACE_MIGRATIONS;
|
|
28201
28698
|
exports.darkTheme = darkTheme;
|
|
28699
|
+
exports.defaultIcons = defaultIcons;
|
|
28202
28700
|
exports.imageCompression = imageCompression;
|
|
28203
28701
|
exports.lightTheme = lightTheme;
|
|
28204
28702
|
exports.resolveColor = resolveColor;
|