@node-projects/web-component-designer 0.0.126 → 0.0.127

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.
Files changed (135) hide show
  1. package/dist/elements/helper/contextMenu/{contextmenu.d.ts → ContextMenu.d.ts} +0 -0
  2. package/dist/elements/helper/contextMenu/{contextmenu.js → ContextMenu.js} +0 -0
  3. package/dist/elements/helper/contextMenu/{IContextmenuItem.d.ts → IContextMenuItem.d.ts} +0 -0
  4. package/dist/elements/helper/contextMenu/{IContextmenuItem.js → IContextMenuItem.js} +0 -0
  5. package/package.json +2 -2
  6. package/dist/elements/helper/KeyNameHelper.d.ts +0 -0
  7. package/dist/elements/helper/KeyNameHelper.js +0 -1
  8. package/dist/elements/helper/contextMenu/ContextMenuHelper.d.ts +0 -0
  9. package/dist/elements/helper/contextMenu/ContextMenuHelper.js +0 -245
  10. package/dist/elements/helper/contextMenu/IContextmenuItemTmp.d.ts +0 -8
  11. package/dist/elements/helper/contextMenu/IContextmenuItemTmp.js +0 -2
  12. package/dist/elements/helper/contextMenu/NewContextmenu.d.ts +0 -30
  13. package/dist/elements/helper/contextMenu/NewContextmenu.js +0 -274
  14. package/dist/elements/services/bindableObjectsService/IDragDropService.d.ts +0 -5
  15. package/dist/elements/services/bindableObjectsService/IDragDropService.js +0 -1
  16. package/dist/elements/services/elementsService/WebcomponentManifestParserService.d.ts +0 -25
  17. package/dist/elements/services/elementsService/WebcomponentManifestParserService.js +0 -94
  18. package/dist/elements/services/htmlParserService/NodeHtmlParserService copy.d.ts +0 -11
  19. package/dist/elements/services/htmlParserService/NodeHtmlParserService copy.js +0 -96
  20. package/dist/elements/services/initializationService/DefaultIntializationService.d.ts +0 -6
  21. package/dist/elements/services/initializationService/DefaultIntializationService.js +0 -22
  22. package/dist/elements/services/instanceService/IPrepareElementsForDesignerService.d.ts +0 -4
  23. package/dist/elements/services/instanceService/IPrepareElementsForDesignerService.js +0 -1
  24. package/dist/elements/services/instanceService/PrepareElementsForDesignerService.d.ts +0 -6
  25. package/dist/elements/services/instanceService/PrepareElementsForDesignerService.js +0 -32
  26. package/dist/elements/services/propertiesService/services/WebcomponentManifestParserService.d.ts +0 -25
  27. package/dist/elements/services/propertiesService/services/WebcomponentManifestParserService.js +0 -94
  28. package/dist/elements/services/undoService/transactionItems/MoveElementInDomAction.d.ts +0 -16
  29. package/dist/elements/services/undoService/transactionItems/MoveElementInDomAction.js +0 -31
  30. package/dist/elements/widgets/designerView/DesignerViewUseOverlayScollbars.d.ts +0 -7
  31. package/dist/elements/widgets/designerView/DesignerViewUseOverlayScollbars.js +0 -13
  32. package/dist/elements/widgets/designerView/designerCanvas.ts.BASE.d.ts +0 -92
  33. package/dist/elements/widgets/designerView/designerCanvas.ts.BASE.js +0 -734
  34. package/dist/elements/widgets/designerView/designerCanvas.ts.LOCAL.d.ts +0 -95
  35. package/dist/elements/widgets/designerView/designerCanvas.ts.LOCAL.js +0 -768
  36. package/dist/elements/widgets/designerView/designerCanvas.ts.REMOTE.d.ts +0 -94
  37. package/dist/elements/widgets/designerView/designerCanvas.ts.REMOTE.js +0 -745
  38. package/dist/elements/widgets/designerView/extensions/AltToEnterContainerExtension copy.d.ts +0 -12
  39. package/dist/elements/widgets/designerView/extensions/AltToEnterContainerExtension copy.js +0 -20
  40. package/dist/elements/widgets/designerView/extensions/AltToEnterContainerExtensionProvider copy.d.ts +0 -10
  41. package/dist/elements/widgets/designerView/extensions/AltToEnterContainerExtensionProvider copy.js +0 -14
  42. package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension copy.d.ts +0 -17
  43. package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension copy.js +0 -80
  44. package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider copy.d.ts +0 -9
  45. package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider copy.js +0 -11
  46. package/dist/elements/widgets/designerView/extensions/GrayOutDragOverExtension.d.ts +0 -11
  47. package/dist/elements/widgets/designerView/extensions/GrayOutDragOverExtension.js +0 -18
  48. package/dist/elements/widgets/designerView/extensions/IframeExtension.d.ts +0 -11
  49. package/dist/elements/widgets/designerView/extensions/IframeExtension.js +0 -46
  50. package/dist/elements/widgets/designerView/extensions/IframeExtensionProvider.d.ts +0 -9
  51. package/dist/elements/widgets/designerView/extensions/IframeExtensionProvider.js +0 -9
  52. package/dist/elements/widgets/designerView/extensions/PathExtension.d.ts +0 -23
  53. package/dist/elements/widgets/designerView/extensions/PathExtension.js +0 -251
  54. package/dist/elements/widgets/designerView/extensions/PathExtensionProvider.d.ts +0 -9
  55. package/dist/elements/widgets/designerView/extensions/PathExtensionProvider.js +0 -18
  56. package/dist/elements/widgets/designerView/extensions/PrimarySelectionDefaultExtension.d.ts +0 -13
  57. package/dist/elements/widgets/designerView/extensions/PrimarySelectionDefaultExtension.js +0 -21
  58. package/dist/elements/widgets/designerView/extensions/PrimarySelectionDefaultExtensionProvider.d.ts +0 -10
  59. package/dist/elements/widgets/designerView/extensions/PrimarySelectionDefaultExtensionProvider.js +0 -13
  60. package/dist/elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu copy.d.ts +0 -8
  61. package/dist/elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu copy.js +0 -15
  62. package/dist/elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu copy.d.ts +0 -8
  63. package/dist/elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu copy.js +0 -14
  64. package/dist/elements/widgets/designerView/toolBar/DrawElementTool.d.ts +0 -19
  65. package/dist/elements/widgets/designerView/toolBar/DrawElementTool.js +0 -79
  66. package/dist/elements/widgets/designerView/toolBar/DrawEllipsisTool.d.ts +0 -16
  67. package/dist/elements/widgets/designerView/toolBar/DrawEllipsisTool.js +0 -94
  68. package/dist/elements/widgets/designerView/toolBar/DrawLineTool.d.ts +0 -14
  69. package/dist/elements/widgets/designerView/toolBar/DrawLineTool.js +0 -79
  70. package/dist/elements/widgets/designerView/toolBar/DrawPathTool.d.ts +0 -20
  71. package/dist/elements/widgets/designerView/toolBar/DrawPathTool.js +0 -128
  72. package/dist/elements/widgets/designerView/toolBar/DrawRectTool.d.ts +0 -19
  73. package/dist/elements/widgets/designerView/toolBar/DrawRectTool.js +0 -109
  74. package/dist/elements/widgets/designerView/toolBar/ITool.d.ts +0 -9
  75. package/dist/elements/widgets/designerView/toolBar/ITool.js +0 -1
  76. package/dist/elements/widgets/designerView/toolBar/MagicWandSelectorTool.d.ts +0 -12
  77. package/dist/elements/widgets/designerView/toolBar/MagicWandSelectorTool.js +0 -64
  78. package/dist/elements/widgets/designerView/toolBar/NamedTools.d.ts +0 -15
  79. package/dist/elements/widgets/designerView/toolBar/NamedTools.js +0 -16
  80. package/dist/elements/widgets/designerView/toolBar/PanTool.d.ts +0 -10
  81. package/dist/elements/widgets/designerView/toolBar/PanTool.js +0 -26
  82. package/dist/elements/widgets/designerView/toolBar/PickColorTool.d.ts +0 -10
  83. package/dist/elements/widgets/designerView/toolBar/PickColorTool.js +0 -20
  84. package/dist/elements/widgets/designerView/toolBar/PointerTool.d.ts +0 -24
  85. package/dist/elements/widgets/designerView/toolBar/PointerTool.js +0 -283
  86. package/dist/elements/widgets/designerView/toolBar/RectangleSelectorTool.d.ts +0 -12
  87. package/dist/elements/widgets/designerView/toolBar/RectangleSelectorTool.js +0 -84
  88. package/dist/elements/widgets/designerView/toolBar/TextTool.d.ts +0 -11
  89. package/dist/elements/widgets/designerView/toolBar/TextTool.js +0 -33
  90. package/dist/elements/widgets/designerView/toolBar/ZoomTool.d.ts +0 -17
  91. package/dist/elements/widgets/designerView/toolBar/ZoomTool.js +0 -79
  92. package/dist/elements/widgets/designerView/toolBar/designerToolbarGenerics/designerToolRenderer.d.ts +0 -5
  93. package/dist/elements/widgets/designerView/toolBar/designerToolbarGenerics/designerToolRenderer.js +0 -19
  94. package/dist/elements/widgets/designerView/toolBar/designerToolbarGenerics/designerToolbarPopup.d.ts +0 -8
  95. package/dist/elements/widgets/designerView/toolBar/designerToolbarGenerics/designerToolbarPopup.js +0 -41
  96. package/dist/elements/widgets/designerView/toolBar/designerToolbarGenerics/designerToolbarPopupToolSelect.d.ts +0 -9
  97. package/dist/elements/widgets/designerView/toolBar/designerToolbarGenerics/designerToolbarPopupToolSelect.js +0 -42
  98. package/dist/elements/widgets/designerView/toolBar/designerToolbarGenerics/designerToolsButtons.d.ts +0 -36
  99. package/dist/elements/widgets/designerView/toolBar/designerToolbarGenerics/designerToolsButtons.js +0 -96
  100. package/dist/elements/widgets/designerView/toolBar/designerToolbarPopups/DrawToolPopup.d.ts +0 -5
  101. package/dist/elements/widgets/designerView/toolBar/designerToolbarPopups/DrawToolPopup.js +0 -21
  102. package/dist/elements/widgets/designerView/toolBar/designerToolbarPopups/SelectorToolsPopup.d.ts +0 -8
  103. package/dist/elements/widgets/designerView/toolBar/designerToolbarPopups/SelectorToolsPopup.js +0 -23
  104. package/dist/elements/widgets/designerView/toolBar/designerToolsDock.d.ts +0 -24
  105. package/dist/elements/widgets/designerView/toolBar/designerToolsDock.js +0 -115
  106. package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolRenderer.d.ts +0 -5
  107. package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolRenderer.js +0 -19
  108. package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolbarPopup.d.ts +0 -8
  109. package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolbarPopup.js +0 -41
  110. package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolbarPopupToolSelect.d.ts +0 -9
  111. package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolbarPopupToolSelect.js +0 -42
  112. package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolsButtons.d.ts +0 -36
  113. package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolsButtons.js +0 -87
  114. package/dist/elements/widgets/designerView/tools/designerToolbarPopups/DrawToolPopup copy.d.ts +0 -8
  115. package/dist/elements/widgets/designerView/tools/designerToolbarPopups/DrawToolPopup copy.js +0 -25
  116. package/dist/elements/widgets/designerView/tools/designerToolbarPopups/DrawToolPopup.d.ts +0 -5
  117. package/dist/elements/widgets/designerView/tools/designerToolbarPopups/DrawToolPopup.js +0 -21
  118. package/dist/elements/widgets/designerView/tools/designerToolbarPopups/SelectorToolsPopup.d.ts +0 -8
  119. package/dist/elements/widgets/designerView/tools/designerToolbarPopups/SelectorToolsPopup.js +0 -23
  120. package/dist/elements/widgets/designerView/tools/designerToolsDock.d.ts +0 -24
  121. package/dist/elements/widgets/designerView/tools/designerToolsDock.js +0 -115
  122. package/dist/elements/widgets/designerView/tools/toolBar/AbstractDesignerToolbarButton.d.ts +0 -5
  123. package/dist/elements/widgets/designerView/tools/toolBar/AbstractDesignerToolbarButton.js +0 -5
  124. package/dist/elements/widgets/designerView/tools/toolBar/IDesignViewConfigButtonsProvider.d.ts +0 -5
  125. package/dist/elements/widgets/designerView/tools/toolBar/IDesignViewConfigButtonsProvider.js +0 -1
  126. package/dist/elements/widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider copy.d.ts +0 -5
  127. package/dist/elements/widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider copy.js +0 -7
  128. package/dist/elements/widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider copy.d.ts +0 -5
  129. package/dist/elements/widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider copy.js +0 -10
  130. package/dist/elements/widgets/designerView/tools/toolBar/designerToolsDock.d.ts +0 -24
  131. package/dist/elements/widgets/designerView/tools/toolBar/designerToolsDock.js +0 -115
  132. package/dist/elements/widgets/designerView/tools/toolBar/popups/SelectorToolsPopup.d.ts +0 -7
  133. package/dist/elements/widgets/designerView/tools/toolBar/popups/SelectorToolsPopup.js +0 -23
  134. package/dist/elements/widgets/designerView/tools/toolBar/popups/designerToolbarPopup.d.ts +0 -8
  135. package/dist/elements/widgets/designerView/tools/toolBar/popups/designerToolbarPopup.js +0 -41
@@ -1,12 +0,0 @@
1
- import { IDesignItem } from "../../../item/IDesignItem";
2
- import { IDesignerCanvas } from "../IDesignerCanvas";
3
- import { AbstractExtension } from "./AbstractExtension";
4
- import { IExtensionManager } from "./IExtensionManger";
5
- export declare class AltToEnterContainerExtension extends AbstractExtension {
6
- private _text;
7
- private _rect;
8
- constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
9
- extend(): void;
10
- refresh(): void;
11
- dispose(): void;
12
- }
@@ -1,20 +0,0 @@
1
- import { AbstractExtension } from "./AbstractExtension";
2
- import { OverlayLayer } from "./OverlayLayer.js";
3
- export class AltToEnterContainerExtension extends AbstractExtension {
4
- _text;
5
- _rect;
6
- constructor(extensionManager, designerView, extendedItem) {
7
- super(extensionManager, designerView, extendedItem);
8
- }
9
- extend() {
10
- this.refresh();
11
- }
12
- refresh() {
13
- let itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
14
- this._text = this._drawText("Press ALT to enter container", itemRect.x + 5, itemRect.y + 12, 'svg-text-enter-container', this._text, OverlayLayer.Foregorund);
15
- this._rect = this._drawRect(itemRect.x, itemRect.y, itemRect.width, itemRect.height, 'svg-rect-enter-container', this._rect, OverlayLayer.Foregorund);
16
- }
17
- dispose() {
18
- this._removeAllOverlays();
19
- }
20
- }
@@ -1,10 +0,0 @@
1
- import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
2
- import { IDesignItem } from "../../../item/IDesignItem";
3
- import { IDesignerCanvas } from "../IDesignerCanvas";
4
- import { IDesignerExtension } from "./IDesignerExtension";
5
- import { IExtensionManager } from "./IExtensionManger";
6
- export declare class AltToEnterContainerExtensionProvider implements IDesignerExtensionProvider {
7
- shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
8
- getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
9
- readonly style: CSSStyleSheet;
10
- }
@@ -1,14 +0,0 @@
1
- import { AltToEnterContainerExtension } from './AltToEnterContainerExtension';
2
- import { css } from "@node-projects/base-custom-webcomponent";
3
- export class AltToEnterContainerExtensionProvider {
4
- shouldExtend(extensionManager, designerView, designItem) {
5
- return true;
6
- }
7
- getExtension(extensionManager, designerView, designItem) {
8
- return new AltToEnterContainerExtension(extensionManager, designerView, designItem);
9
- }
10
- style = css `
11
- .svg-text-enter-container { stroke: none; fill: black; stroke-width: 1; font-size: 14px; font-weight:800; font-family: monospace; }
12
- .svg-rect-enter-container { stroke: none; fill: #aa00ff2e; }
13
- `;
14
- }
@@ -1,17 +0,0 @@
1
- import { IDesignItem } from "../../../../item/IDesignItem";
2
- import { IDesignerCanvas } from "../../IDesignerCanvas";
3
- import { AbstractExtension } from "../AbstractExtension.js";
4
- import { IExtensionManager } from "../IExtensionManger";
5
- export declare class EditTextExtension extends AbstractExtension {
6
- private _contentEditedBound;
7
- private _blurBound;
8
- private static template;
9
- private _blurTimeout;
10
- constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
11
- extend(): void;
12
- refresh(): void;
13
- dispose(): void;
14
- _contentEdited(): void;
15
- _blur(): void;
16
- _formatSelection(type: string): void;
17
- }
@@ -1,80 +0,0 @@
1
- import { html } from "@node-projects/base-custom-webcomponent";
2
- import { AbstractExtension } from "../AbstractExtension.js";
3
- import { ExtensionType } from "../ExtensionType.js";
4
- import { OverlayLayer } from "../OverlayLayer.js";
5
- export class EditTextExtension extends AbstractExtension {
6
- _contentEditedBound;
7
- _blurBound;
8
- static template = html `
9
- <div style="height: 24px; display: flex;">
10
- <button data-command="bold" style="pointer-events: all; height: 24px; width: 24px; padding: 0; font-weight: 900;">b</button>
11
- <button data-command="italic" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><em>i</em></button>
12
- <button data-command="underline" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><ins>u</ins></button>
13
- <button data-command="strikeThrough" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><del>s</del></button>
14
- </div>
15
- `;
16
- _blurTimeout;
17
- constructor(extensionManager, designerView, extendedItem) {
18
- super(extensionManager, designerView, extendedItem);
19
- this._contentEditedBound = this._contentEdited.bind(this);
20
- this._blurBound = this._blur.bind(this);
21
- }
22
- extend() {
23
- //todo -> check what to do with extensions, do not loose edit on mouse click,...
24
- //maybe use a html edit framework
25
- this.extendedItem.instanceServiceContainer.selectionService.clearSelectedElements();
26
- //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.PrimarySelection);
27
- //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Selection);
28
- this.extendedItem.element.setAttribute('contenteditable', '');
29
- this.extendedItem.element.addEventListener('input', this._contentEditedBound);
30
- this.extendedItem.element.addEventListener('blur', this._blurBound);
31
- this.extendedItem.element.focus();
32
- this.designerCanvas.eatEvents = this.extendedItem.element;
33
- let itemRect = this.extendedItem.element.getBoundingClientRect();
34
- const elements = EditTextExtension.template.content.cloneNode(true);
35
- elements.querySelectorAll('button').forEach(x => x.onclick = () => this._formatSelection(x.dataset['command']));
36
- let foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
37
- foreignObject.setAttribute('x', '' + (itemRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor);
38
- foreignObject.setAttribute('y', '' + ((itemRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 30));
39
- foreignObject.setAttribute('width', '96');
40
- foreignObject.setAttribute('height', '24');
41
- foreignObject.appendChild(elements);
42
- this.overlayLayerView.addOverlay(foreignObject, OverlayLayer.Foregorund);
43
- this.overlays.push(foreignObject);
44
- this.designerCanvas.clickOverlay.style.pointerEvents = 'none';
45
- }
46
- refresh() {
47
- this.dispose();
48
- }
49
- dispose() {
50
- this._removeAllOverlays();
51
- this.extendedItem.element.removeAttribute('contenteditable');
52
- this.extendedItem.element.removeEventListener('input', this._contentEditedBound);
53
- this.extendedItem.element.removeEventListener('blur', this._blurBound);
54
- this.designerCanvas.eatEvents = null;
55
- this.extendedItem.updateChildrenFromNodesChildren();
56
- this.designerCanvas.clickOverlay.style.pointerEvents = 'auto';
57
- }
58
- _contentEdited() {
59
- //todo -> save???
60
- //this.extendedItem.content = this.extendedItem.element.innerHTML;
61
- //console.log(this.extendedItem.element.innerHTML)
62
- }
63
- _blur() {
64
- if (!this._blurTimeout) {
65
- this._blurTimeout = setTimeout(() => {
66
- //todo, don't remove doubleclick extension (another type could be used), remove extension itself
67
- //maybe also configureable when when to remove the extension
68
- this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Doubleclick);
69
- }, 150);
70
- }
71
- }
72
- _formatSelection(type) {
73
- if (this._blurTimeout)
74
- clearTimeout(this._blurTimeout);
75
- this._blurTimeout = null;
76
- //const selection = <Selection>(<any>this.designerView.shadowRoot).getSelection()
77
- document.execCommand(type, false, null);
78
- this.extendedItem.element.focus();
79
- }
80
- }
@@ -1,9 +0,0 @@
1
- import { IDesignerExtensionProvider } from "../IDesignerExtensionProvider";
2
- import { IDesignItem } from "../../../../item/IDesignItem";
3
- import { IDesignerCanvas } from "../../IDesignerCanvas";
4
- import { IDesignerExtension } from "../IDesignerExtension";
5
- import { IExtensionManager } from "../IExtensionManger";
6
- export declare class EditTextExtensionProvider implements IDesignerExtensionProvider {
7
- shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
8
- getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
9
- }
@@ -1,11 +0,0 @@
1
- import { EditTextExtension } from "./EditTextExtension.js";
2
- export class EditTextExtensionProvider {
3
- shouldExtend(extensionManager, designerView, designItem) {
4
- if (designItem.name === 'button' || designItem.name === 'input')
5
- return false;
6
- return true;
7
- }
8
- getExtension(extensionManager, designerView, designItem) {
9
- return new EditTextExtension(extensionManager, designerView, designItem);
10
- }
11
- }
@@ -1,11 +0,0 @@
1
- import { IDesignItem } from "../../../item/IDesignItem";
2
- import { IDesignerCanvas } from "../IDesignerCanvas";
3
- import { AbstractExtension } from "./AbstractExtension";
4
- import { IExtensionManager } from "./IExtensionManger";
5
- export declare class GrayOutDragOverExtension extends AbstractExtension {
6
- private _rect;
7
- constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
8
- extend(): void;
9
- refresh(): void;
10
- dispose(): void;
11
- }
@@ -1,18 +0,0 @@
1
- import { AbstractExtension } from "./AbstractExtension";
2
- import { OverlayLayer } from "./OverlayLayer.js";
3
- export class GrayOutDragOverExtension extends AbstractExtension {
4
- _rect;
5
- constructor(extensionManager, designerView, extendedItem) {
6
- super(extensionManager, designerView, extendedItem);
7
- }
8
- extend() {
9
- this.refresh();
10
- }
11
- refresh() {
12
- let itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
13
- this._rect = this._drawRect(itemRect.x, itemRect.y, itemRect.width, itemRect.height, 'svg-rect-enter-container', this._rect, OverlayLayer.Foregorund);
14
- }
15
- dispose() {
16
- this._removeAllOverlays();
17
- }
18
- }
@@ -1,11 +0,0 @@
1
- import { IDesignItem } from "../../../item/IDesignItem";
2
- import { IDesignerCanvas } from "../IDesignerCanvas";
3
- import { AbstractExtension } from './AbstractExtension';
4
- import { IExtensionManager } from "./IExtensionManger";
5
- export declare class IframeExtension extends AbstractExtension {
6
- constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
7
- extend(): void;
8
- _pointerEvent(event: PointerEvent): void;
9
- refresh(): void;
10
- dispose(): void;
11
- }
@@ -1,46 +0,0 @@
1
- import { AbstractExtension } from './AbstractExtension';
2
- export class IframeExtension extends AbstractExtension {
3
- constructor(extensionManager, designerView, extendedItem) {
4
- super(extensionManager, designerView, extendedItem);
5
- }
6
- extend() {
7
- // forward events to designer, so iframe is selectable via click
8
- let iframe = this.extendedItem.element;
9
- iframe.contentWindow.addEventListener('pointerdown', (e) => this._pointerEvent(e), { capture: true });
10
- iframe.contentWindow.addEventListener('pointermove', (e) => this._pointerEvent(e), { capture: true });
11
- iframe.contentWindow.addEventListener('pointerup', (e) => this._pointerEvent(e), { capture: true });
12
- }
13
- _pointerEvent(event) {
14
- const rect = this.extendedItem.element.getBoundingClientRect();
15
- const that = this;
16
- const handler = {
17
- get(target, property) {
18
- switch (property) {
19
- case 'composedPath':
20
- return () => [that.extendedItem.element];
21
- case 'x':
22
- case 'clientX':
23
- case 'offsetX':
24
- case 'pageX':
25
- return target[property] + rect.x;
26
- case 'y':
27
- case 'clientY':
28
- case 'offsetY':
29
- case 'pageY':
30
- return target[property] + rect.y;
31
- }
32
- return target[property];
33
- }
34
- };
35
- event.preventDefault();
36
- event.stopPropagation();
37
- const proxy = new Proxy(event, handler);
38
- //@ts-ignore
39
- this.designerCanvas._pointerEventHandlerBound(proxy);
40
- }
41
- refresh() {
42
- }
43
- dispose() {
44
- this._removeAllOverlays();
45
- }
46
- }
@@ -1,9 +0,0 @@
1
- import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
2
- import { IDesignItem } from "../../../item/IDesignItem";
3
- import { IDesignerCanvas } from "../IDesignerCanvas";
4
- import { IDesignerExtension } from "./IDesignerExtension";
5
- import { IExtensionManager } from "./IExtensionManger";
6
- export declare class IframeExtensionProvider implements IDesignerExtensionProvider {
7
- shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
8
- getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
9
- }
@@ -1,9 +0,0 @@
1
- import { IframeExtension } from "./IframeExtension.js";
2
- export class IframeExtensionProvider {
3
- shouldExtend(extensionManager, designerCanvas, designItem) {
4
- return designItem.name == 'iframe';
5
- }
6
- getExtension(extensionManager, designerCanvas, designItem) {
7
- return new IframeExtension(extensionManager, designerCanvas, designItem);
8
- }
9
- }
@@ -1,23 +0,0 @@
1
- import { IDesignItem } from "../../../item/IDesignItem";
2
- import { IDesignerCanvas } from "../IDesignerCanvas";
3
- import { AbstractExtension } from "./AbstractExtension";
4
- import "../../../helper/PathDataPolyfill";
5
- import { IPoint } from "../../../../interfaces/IPoint";
6
- import { IExtensionManager } from "./IExtensionManger";
7
- import { PathData } from "../../../helper/PathDataPolyfill";
8
- export declare class PathExtension extends AbstractExtension {
9
- private _lastPos;
10
- private _parentRect;
11
- private _startPos;
12
- private _circlePos;
13
- private _originalPathPoint;
14
- private _pathdata;
15
- constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
16
- extend(): void;
17
- pointerEvent(event: PointerEvent, circle: SVGCircleElement, p: PathData, index: number): void;
18
- _drawPathCircle(x: number, y: number, p: PathData, index: number): void;
19
- _drawPathLine(x1: number, y1: number, x2: number, y2: number): void;
20
- _checkCircleIndex(p: PathData, circlePos: IPoint): boolean;
21
- refresh(): void;
22
- dispose(): void;
23
- }
@@ -1,251 +0,0 @@
1
- import { AbstractExtension } from "./AbstractExtension";
2
- import "../../../helper/PathDataPolyfill";
3
- import { EventNames } from "../../../../enums/EventNames";
4
- import { createPathD } from "../../../helper/PathDataPolyfill";
5
- import { ContextMenuHelper } from "../../../helper/contextMenu/ContextMenuHelper";
6
- export class PathExtension extends AbstractExtension {
7
- _lastPos;
8
- _parentRect;
9
- _startPos;
10
- _circlePos;
11
- _originalPathPoint;
12
- _pathdata;
13
- constructor(extensionManager, designerView, extendedItem) {
14
- super(extensionManager, designerView, extendedItem);
15
- }
16
- extend() {
17
- this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
18
- this._pathdata = this.extendedItem.node.getPathData({ normalize: false });
19
- for (let p of this._pathdata) {
20
- switch (p.type) {
21
- case 'M':
22
- this._drawPathCircle(p.values[0], p.values[1], p, 0);
23
- this._lastPos = { x: p.values[0], y: p.values[1] };
24
- break;
25
- case 'L':
26
- this._drawPathCircle(p.values[0], p.values[1], p, 0);
27
- this._lastPos = { x: p.values[0], y: p.values[1] };
28
- break;
29
- case 'l':
30
- this._drawPathCircle(p.values[0] + this._lastPos.x, p.values[1] + this._lastPos.y, p, 0);
31
- this._lastPos = { x: p.values[0] + this._lastPos.x, y: p.values[1] + this._lastPos.y };
32
- break;
33
- case 'H':
34
- break;
35
- case 'V':
36
- break;
37
- case 'Z':
38
- break;
39
- case 'C':
40
- this._drawPathLine(this._lastPos.x, this._lastPos.y, p.values[0], p.values[1]);
41
- this._drawPathLine(p.values[4], p.values[5], p.values[2], p.values[3]);
42
- this._drawPathCircle(p.values[0], p.values[1], p, 0);
43
- this._drawPathCircle(p.values[2], p.values[3], p, 2);
44
- this._drawPathCircle(p.values[4], p.values[5], p, 4);
45
- this._lastPos = { x: p.values[4], y: p.values[5] };
46
- break;
47
- case 'c':
48
- this._drawPathLine(this._lastPos.x, this._lastPos.y, p.values[0], p.values[1]);
49
- this._drawPathLine(this._lastPos.x + p.values[4], this._lastPos.y + p.values[5], p.values[2], p.values[3]);
50
- this._drawPathCircle(p.values[0], p.values[1], p, 0);
51
- this._drawPathCircle(p.values[2], p.values[3], p, 2);
52
- this._drawPathCircle(this._lastPos.x + p.values[4], this._lastPos.y + p.values[5], p, 4);
53
- this._lastPos = { x: p.values[4], y: p.values[5] };
54
- break;
55
- case 'S':
56
- this._drawPathCircle(p.values[0], p.values[1], p, 0);
57
- this._drawPathCircle(p.values[2], p.values[3], p, 2);
58
- this._lastPos = { x: p.values[2], y: p.values[3] };
59
- break;
60
- case 'Q':
61
- this._drawPathLine(this._lastPos.x, this._lastPos.y, p.values[0], p.values[1]);
62
- this._drawPathLine(p.values[0], p.values[1], p.values[2], p.values[3]);
63
- this._drawPathCircle(p.values[0], p.values[1], p, 0);
64
- this._drawPathCircle(p.values[2], p.values[3], p, 2);
65
- this._lastPos = { x: p.values[2], y: p.values[3] };
66
- break;
67
- case 'T':
68
- this._drawPathCircle(p.values[0], p.values[1], p, 0);
69
- this._lastPos = { x: p.values[0], y: p.values[1] };
70
- break;
71
- case 'A':
72
- this._drawPathCircle(p.values[0], p.values[1], p, 0);
73
- this._drawPathCircle(p.values[5], p.values[6], p, 5);
74
- this._lastPos = { x: p.values[0], y: p.values[1] };
75
- break;
76
- }
77
- }
78
- }
79
- pointerEvent(event, circle, p, index) {
80
- event.stopPropagation();
81
- const cursorPos = this.designerCanvas.getNormalizedEventCoordinates(event);
82
- switch (event.type) {
83
- case EventNames.PointerDown:
84
- event.target.setPointerCapture(event.pointerId);
85
- this._startPos = cursorPos;
86
- this._circlePos = { x: parseFloat(circle.getAttribute("cx")), y: parseFloat(circle.getAttribute("cy")) };
87
- this._originalPathPoint = { x: p.values[index], y: p.values[index + 1] };
88
- break;
89
- case EventNames.PointerMove:
90
- if (this._startPos && event.buttons > 0) {
91
- this._lastPos = { x: this._startPos.x, y: this._startPos.y };
92
- const cx = cursorPos.x - this._lastPos.x + this._circlePos.x;
93
- const cy = cursorPos.y - this._lastPos.y + this._circlePos.y;
94
- const dx = cx - this._circlePos.x;
95
- const dy = cy - this._circlePos.y;
96
- if (event.shiftKey) {
97
- if (Math.abs(dx) >= Math.abs(dy)) {
98
- p.values[index] = this._originalPathPoint.x + dx;
99
- circle.setAttribute("cx", (this._circlePos.x + dx).toString());
100
- p.values[index + 1] = this._originalPathPoint.y;
101
- circle.setAttribute("cy", (this._circlePos.y).toString());
102
- }
103
- else {
104
- p.values[index] = this._originalPathPoint.x;
105
- circle.setAttribute("cx", (this._circlePos.x).toString());
106
- p.values[index + 1] = this._originalPathPoint.y + dy;
107
- circle.setAttribute("cy", (this._circlePos.y + dy).toString());
108
- }
109
- }
110
- else {
111
- p.values[index] = this._originalPathPoint.x + dx;
112
- p.values[index + 1] = this._originalPathPoint.y + dy;
113
- circle.setAttribute("cx", (this._circlePos.x + dx).toString());
114
- circle.setAttribute("cy", (this._circlePos.y + dy).toString());
115
- }
116
- this.extendedItem.element.setAttribute("d", createPathD(this._pathdata));
117
- }
118
- break;
119
- case EventNames.PointerUp:
120
- event.target.releasePointerCapture(event.pointerId);
121
- this._startPos = null;
122
- this._circlePos = null;
123
- this._lastPos = null;
124
- this.extendedItem.setAttribute('d', createPathD(this._pathdata));
125
- break;
126
- }
127
- }
128
- _drawPathCircle(x, y, p, index) {
129
- let circle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y, 5 / this.designerCanvas.scaleFactor, 'svg-path');
130
- circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
131
- let circlePos = { x: x, y: y };
132
- const items = [];
133
- const pidx = this._pathdata.indexOf(p);
134
- items.push({
135
- title: 'delete point', action: () => {
136
- this._pathdata.splice(pidx, 1);
137
- if (pidx == 0)
138
- this._pathdata[0].type = 'M';
139
- this.extendedItem.setAttribute('d', createPathD(this._pathdata));
140
- }
141
- });
142
- items.push({
143
- title: 'insert point after', action: () => {
144
- const l = { type: 'L', values: [p.values[0], p.values[1]] };
145
- this._pathdata.splice(pidx + 1, 0, l);
146
- this.extendedItem.setAttribute('d', createPathD(this._pathdata));
147
- }
148
- });
149
- if (pidx != 0 && this._checkCircleIndex(p, circlePos)) {
150
- items.push({
151
- title: 'convert to quadratic bézier', action: () => {
152
- let p1x = this._pathdata[pidx - 1].values[0];
153
- let p1y = this._pathdata[pidx - 1].values[1];
154
- if (this._pathdata[pidx - 1].type === 'C') {
155
- p1x = this._pathdata[pidx - 1].values[4];
156
- p1y = this._pathdata[pidx - 1].values[5];
157
- }
158
- else if (this._pathdata[pidx - 1].type === 'Q') {
159
- p1x = this._pathdata[pidx - 1].values[2];
160
- p1y = this._pathdata[pidx - 1].values[3];
161
- }
162
- const p2x = this._pathdata[pidx].values[0];
163
- const p2y = this._pathdata[pidx].values[1];
164
- const mpx = (p2x + p1x) * 0.5;
165
- const mpy = (p2y + p1y) * 0.5;
166
- const theta = Math.atan2(p2y - p1y, p2x - p1x) - Math.PI / 2;
167
- const offset = 50;
168
- const c1x = mpx + offset * Math.cos(theta);
169
- const c1y = mpy + offset * Math.sin(theta);
170
- this._pathdata[pidx].type = 'Q';
171
- this._pathdata[pidx].values[0] = c1x;
172
- this._pathdata[pidx].values[1] = c1y;
173
- this._pathdata[pidx].values[2] = p2x;
174
- this._pathdata[pidx].values[3] = p2y;
175
- this.extendedItem.setAttribute('d', createPathD(this._pathdata));
176
- }
177
- });
178
- }
179
- if (pidx != 0 && this._checkCircleIndex(p, circlePos)) {
180
- items.push({
181
- title: 'convert to cubic bézier', action: () => {
182
- let p1x = this._pathdata[pidx - 1].values[0];
183
- let p1y = this._pathdata[pidx - 1].values[1];
184
- if (this._pathdata[pidx - 1].type === 'C') {
185
- p1x = this._pathdata[pidx - 1].values[4];
186
- p1y = this._pathdata[pidx - 1].values[5];
187
- }
188
- else if (this._pathdata[pidx - 1].type === 'Q') {
189
- p1x = this._pathdata[pidx - 1].values[2];
190
- p1y = this._pathdata[pidx - 1].values[3];
191
- }
192
- const p2x = this._pathdata[pidx].values[0];
193
- const p2y = this._pathdata[pidx].values[1];
194
- const mpx = (p2x + p1x) * 0.5;
195
- const mpy = (p2y + p1y) * 0.5;
196
- const theta = Math.atan2(p2y - p1y, p2x - p1x) - Math.PI / 2;
197
- const offset = 50;
198
- let c1x = mpx + offset * Math.cos(theta);
199
- let c1y = mpy + offset * Math.sin(theta);
200
- c1x = p.values[0] + 2 * (p1x - p.values[0]) / 3;
201
- c1y = p.values[1] + 2 * (p1y - p.values[1]) / 3;
202
- const c2x = x + 2 * (p1x - x) / 3;
203
- const c2y = y + 2 * (p1y - y) / 3;
204
- this._pathdata[pidx].type = 'C';
205
- this._pathdata[pidx].values[0] = c1x;
206
- this._pathdata[pidx].values[1] = c1y;
207
- this._pathdata[pidx].values[2] = c2x;
208
- this._pathdata[pidx].values[3] = c2y;
209
- this._pathdata[pidx].values[4] = p2x;
210
- this._pathdata[pidx].values[5] = p2y;
211
- this.extendedItem.setAttribute('d', createPathD(this._pathdata));
212
- }
213
- });
214
- }
215
- circle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event, circle, p, index));
216
- circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event, circle, p, index));
217
- circle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event, circle, p, index));
218
- circle.addEventListener(EventNames.ContextMenu, event => {
219
- event.preventDefault();
220
- ContextMenuHelper.showContextMenu(null, event, null, items);
221
- });
222
- }
223
- _drawPathLine(x1, y1, x2, y2) {
224
- this._drawLine(this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x1, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y1, this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x2, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y2, 'svg-path-line');
225
- }
226
- _checkCircleIndex(p, circlePos) {
227
- switch (p.type) {
228
- case 'M':
229
- case 'L':
230
- if (p.values[0] == circlePos.x && p.values[1] == circlePos.y)
231
- return true;
232
- break;
233
- case 'Q':
234
- if (p.values[2] == circlePos.x && p.values[3] == circlePos.y)
235
- return true;
236
- break;
237
- case 'C':
238
- if (p.values[4] == circlePos.x && p.values[5] == circlePos.y)
239
- return true;
240
- break;
241
- }
242
- return false;
243
- }
244
- refresh() {
245
- this._removeAllOverlays();
246
- this.extend();
247
- }
248
- dispose() {
249
- this._removeAllOverlays();
250
- }
251
- }
@@ -1,9 +0,0 @@
1
- import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
2
- import { IDesignItem } from "../../../item/IDesignItem";
3
- import { IDesignerCanvas } from "../IDesignerCanvas";
4
- import { IDesignerExtension } from "./IDesignerExtension";
5
- import { IExtensionManager } from "./IExtensionManger";
6
- export declare class PathExtensionProvider implements IDesignerExtensionProvider {
7
- shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
8
- getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
9
- }
@@ -1,18 +0,0 @@
1
- import { PathExtension } from "./PathExtension";
2
- export class PathExtensionProvider {
3
- shouldExtend(extensionManager, designerView, designItem) {
4
- if (designItem.node instanceof SVGPathElement ||
5
- designItem.node instanceof SVGRectElement ||
6
- designItem.node instanceof SVGCircleElement ||
7
- designItem.node instanceof SVGEllipseElement ||
8
- designItem.node instanceof SVGLineElement ||
9
- designItem.node instanceof SVGPolylineElement ||
10
- designItem.node instanceof SVGPolygonElement) {
11
- return true;
12
- }
13
- return false;
14
- }
15
- getExtension(extensionManager, designerView, designItem) {
16
- return new PathExtension(extensionManager, designerView, designItem);
17
- }
18
- }
@@ -1,13 +0,0 @@
1
- import { IDesignItem } from "../../../item/IDesignItem";
2
- import { IDesignerCanvas } from "../IDesignerCanvas";
3
- import { AbstractExtension } from './AbstractExtension';
4
- import { IExtensionManager } from "./IExtensionManger";
5
- export declare class PrimarySelectionDefaultExtension extends AbstractExtension {
6
- private _rect;
7
- private _text;
8
- constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
9
- extend(): void;
10
- _drawMoveOverlay(itemRect: DOMRect): void;
11
- refresh(): void;
12
- dispose(): void;
13
- }
@@ -1,21 +0,0 @@
1
- import { AbstractExtension } from './AbstractExtension';
2
- export class PrimarySelectionDefaultExtension extends AbstractExtension {
3
- _rect;
4
- _text;
5
- constructor(extensionManager, designerView, extendedItem) {
6
- super(extensionManager, designerView, extendedItem);
7
- }
8
- extend() {
9
- this.refresh();
10
- }
11
- _drawMoveOverlay(itemRect) {
12
- }
13
- refresh() {
14
- const boundRect = this.extendedItem.element.getBoundingClientRect();
15
- this._rect = this._drawRect((boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 16, 60, 15, 'svg-primary-selection-move', this._rect);
16
- this._text = this._drawText(this.extendedItem.name.substring(0, 10) + '…', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5, 'svg-text-primary', this._text);
17
- }
18
- dispose() {
19
- this._removeAllOverlays();
20
- }
21
- }