@node-projects/web-component-designer 0.1.124 → 0.1.126

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 (54) hide show
  1. package/dist/elements/item/DesignItem.d.ts +5 -1
  2. package/dist/elements/item/DesignItem.js +30 -8
  3. package/dist/elements/item/IDesignItem.d.ts +2 -1
  4. package/dist/elements/services/designItemService/BaseCustomWebcomponentDesignItemService.d.ts +8 -0
  5. package/dist/elements/services/designItemService/BaseCustomWebcomponentDesignItemService.js +36 -0
  6. package/dist/elements/services/designItemService/DesignItemService copy.d.ts +7 -0
  7. package/dist/elements/services/designItemService/DesignItemService copy.js +6 -0
  8. package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension.d.ts +1 -0
  9. package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension.js +12 -3
  10. package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.js +2 -0
  11. package/dist/elements/widgets/designerView/extensions/ElementDragTitleExtensionProvider.js +1 -1
  12. package/dist/elements/widgets/designerView/extensions/HighlightElementExtensionProvider.js +1 -1
  13. package/dist/elements/widgets/designerView/extensions/MultipleSelectionRectExtensionProvider.js +3 -3
  14. package/dist/elements/widgets/designerView/extensions/PositionExtensionProvider.js +1 -1
  15. package/dist/elements/widgets/designerView/extensions/ResizeExtensionProvider.js +1 -1
  16. package/dist/elements/widgets/designerView/extensions/RotateExtensionProvider.js +1 -1
  17. package/dist/elements/widgets/designerView/extensions/SelectionDefaultExtensionProvider.js +1 -1
  18. package/dist/index.d.ts +1 -0
  19. package/dist/index.js +1 -0
  20. package/package.json +1 -1
  21. package/dist/elements/services/selectionService/ISelectionChangedEvent copy.d.ts +0 -6
  22. package/dist/elements/services/selectionService/ISelectionChangedEvent copy.js +0 -1
  23. package/dist/elements/widgets/designerView/extensions/AbstractToolbarExtension.d.ts +0 -9
  24. package/dist/elements/widgets/designerView/extensions/AbstractToolbarExtension.js +0 -30
  25. package/dist/elements/widgets/designerView/extensions/BasicDisplayToolbarExtension.d.ts +0 -20
  26. package/dist/elements/widgets/designerView/extensions/BasicDisplayToolbarExtension.js +0 -68
  27. package/dist/elements/widgets/designerView/extensions/BlockToolbarExtension.d.ts +0 -12
  28. package/dist/elements/widgets/designerView/extensions/BlockToolbarExtension.js +0 -40
  29. package/dist/elements/widgets/designerView/extensions/ConditionExtensionProvider.d.ts +0 -13
  30. package/dist/elements/widgets/designerView/extensions/ConditionExtensionProvider.js +0 -18
  31. package/dist/elements/widgets/designerView/extensions/EditTextExtension.d.ts +0 -18
  32. package/dist/elements/widgets/designerView/extensions/EditTextExtension.js +0 -107
  33. package/dist/elements/widgets/designerView/extensions/GridToolbarExtension.d.ts +0 -12
  34. package/dist/elements/widgets/designerView/extensions/GridToolbarExtension.js +0 -58
  35. package/dist/elements/widgets/designerView/extensions/block/FlexToolbarExtension.d.ts +0 -12
  36. package/dist/elements/widgets/designerView/extensions/block/FlexToolbarExtension.js +0 -34
  37. package/dist/elements/widgets/designerView/extensions/block/FlexToolbarExtensionProvider.d.ts +0 -9
  38. package/dist/elements/widgets/designerView/extensions/block/FlexToolbarExtensionProvider.js +0 -12
  39. package/dist/elements/widgets/designerView/extensions/flex/GridToolbarExtension.d.ts +0 -12
  40. package/dist/elements/widgets/designerView/extensions/flex/GridToolbarExtension.js +0 -66
  41. package/dist/elements/widgets/designerView/extensions/flex/GridToolbarExtensionProvider.d.ts +0 -10
  42. package/dist/elements/widgets/designerView/extensions/flex/GridToolbarExtensionProvider.js +0 -17
  43. package/dist/elements/widgets/designerView/extensions/grid/GridToolbarExtension copy.d.ts +0 -12
  44. package/dist/elements/widgets/designerView/extensions/grid/GridToolbarExtension copy.js +0 -66
  45. package/dist/elements/widgets/designerView/extensions/grid/GridToolbarExtensionProvider copy.d.ts +0 -10
  46. package/dist/elements/widgets/designerView/extensions/grid/GridToolbarExtensionProvider copy.js +0 -17
  47. package/dist/elements/widgets/designerView/extensions/grid/ResizeExtension.d.ts +0 -28
  48. package/dist/elements/widgets/designerView/extensions/grid/ResizeExtension.js +0 -355
  49. package/dist/elements/widgets/designerView/extensions/grid/ResizeExtensionProvider.d.ts +0 -12
  50. package/dist/elements/widgets/designerView/extensions/grid/ResizeExtensionProvider.js +0 -20
  51. package/dist/elements/widgets/designerView/extensions/svg/RectExtensionProvider copy.d.ts +0 -9
  52. package/dist/elements/widgets/designerView/extensions/svg/RectExtensionProvider copy.js +0 -14
  53. package/dist/elements/widgets/designerView/extensions/svg/SvgBaseExtension.d.ts +0 -30
  54. package/dist/elements/widgets/designerView/extensions/svg/SvgBaseExtension.js +0 -181
@@ -1,107 +0,0 @@
1
- import { html } from "@node-projects/base-custom-webcomponent";
2
- import { AbstractExtension } from "../AbstractExtension.js";
3
- import { OverlayLayer } from "../OverlayLayer.js";
4
- import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from "../../../../helper/TransformHelper.js";
5
- import { shadowrootGetSelection, wrapSelectionInSpans } from "../../../../helper/SelectionHelper.js";
6
- import { FontPropertyEditor } from "../../../../services/propertiesService/propertyEditors/FontPropertyEditor.js";
7
- export class EditTextExtension extends AbstractExtension {
8
- static template = html `
9
- <div style="height: 24px; display: flex; gap: 2px;">
10
- <button data-command="font-weight" data-command-parameter="800" style="pointer-events: all; height: 24px; width: 24px; padding: 0; font-weight: 900;">b</button>
11
- <button data-command="font-style" data-command-parameter="italic" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><em>i</em></button>
12
- <button data-command="text-decoration" data-command-parameter="underline" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><ins>u</ins></button>
13
- <button data-command="text-decoration" data-command-parameter="line-through" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><del>s</del></button>
14
- <button data-command="text-decoration" data-command-parameter="overline" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><span style="text-decoration: overline">o</span></button>
15
- <select data-command="fontSize" style="pointer-events: all; height: 24px; width: 60px; padding: 0;">
16
- <option>8px</option>
17
- <option>9px</option>
18
- <option>10px</option>
19
- <option>11px</option>
20
- <option>12px</option>
21
- <option>14px</option>
22
- <option>16px</option>
23
- <option>18px</option>
24
- <option>20px</option>
25
- <option>24px</option>
26
- <option>28px</option>
27
- <option>32px</option>
28
- <option>36px</option>
29
- </select>
30
- <select id="fontFamily" data-command="font-family" style="pointer-events: all; height: 24px; width: 90px; padding: 0;">
31
-
32
- </select>
33
- </div>
34
- `;
35
- _foreignObject;
36
- _path;
37
- constructor(extensionManager, designerView, extendedItem) {
38
- super(extensionManager, designerView, extendedItem);
39
- }
40
- extend() {
41
- //TODO: -> check what to do with extensions, do not loose edit on mouse click,...
42
- //maybe use a html edit framework
43
- this.extendedItem.instanceServiceContainer.selectionService.clearSelectedElements();
44
- this.extendedItem.removeDesignerAttributesAndStylesFromChildren();
45
- this.extendedItem.element.setAttribute('contenteditable', '');
46
- this.extendedItem.element.focus();
47
- let itemRect = this.extendedItem.element.getBoundingClientRect();
48
- const elements = EditTextExtension.template.content.cloneNode(true);
49
- FontPropertyEditor.addFontsToSelect(elements.querySelector('#fontFamily'));
50
- elements.querySelectorAll('button').forEach(x => x.onpointerdown = (e) => {
51
- this.designerCanvas.ignoreEvent(e);
52
- this._formatSelection(x.dataset['command'], x.dataset['commandParameter']);
53
- });
54
- elements.querySelectorAll('select').forEach(x => x.onpointerdown = (e) => this.designerCanvas.ignoreEvent(e));
55
- elements.querySelectorAll('select').forEach(x => x.onchange = () => this._formatSelection(x.dataset['command'], x.value));
56
- //Button overlay
57
- const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
58
- this._foreignObject = foreignObject;
59
- foreignObject.setAttribute('x', '' + (itemRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor);
60
- foreignObject.setAttribute('y', '' + ((itemRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 30));
61
- foreignObject.setAttribute('width', '300');
62
- foreignObject.setAttribute('height', '24');
63
- foreignObject.appendChild(elements);
64
- this._addOverlay(foreignObject, OverlayLayer.Foreground);
65
- //TODO - nice way to disable click overlay
66
- this.designerCanvas.clickOverlay.style.pointerEvents = 'none';
67
- //overlay to detect click outside
68
- this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
69
- this._path.setAttribute('class', 'svg-edit-text-clickoutside');
70
- this._path.setAttribute('fill-rule', 'evenodd');
71
- this._path.style.pointerEvents = 'auto';
72
- this._path.onpointerdown = (e) => {
73
- this.extensionManager.removeExtensionInstance(this.extendedItem, this);
74
- };
75
- this._addOverlay(this._path, OverlayLayer.Background);
76
- let points = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
77
- let outsideRect = { width: this.designerCanvas.containerBoundingRect.width / this.designerCanvas.scaleFactor, height: this.designerCanvas.containerBoundingRect.height / this.designerCanvas.scaleFactor };
78
- let data = "M0 0 L" + outsideRect.width + " 0 L" + outsideRect.width + ' ' + outsideRect.height + " L0 " + outsideRect.height + " Z ";
79
- data += "M" + points[0].x + " " + points[0].y + " L" + points[1].x + " " + points[1].y + " L" + points[3].x + " " + points[3].y + " L" + points[2].x + " " + points[2].y + " Z";
80
- this._path.setAttribute("d", data);
81
- }
82
- refresh() {
83
- let points = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
84
- let outsideRect = { width: this.designerCanvas.containerBoundingRect.width / this.designerCanvas.scaleFactor, height: this.designerCanvas.containerBoundingRect.height / this.designerCanvas.scaleFactor };
85
- let data = "M0 0 L" + outsideRect.width + " 0 L" + outsideRect.width + ' ' + outsideRect.height + " L0 " + outsideRect.height + " Z ";
86
- data += "M" + points[0].x + " " + points[0].y + " L" + points[1].x + " " + points[1].y + " L" + points[3].x + " " + points[3].y + " L" + points[2].x + " " + points[2].y + " Z";
87
- this._path.setAttribute("d", data);
88
- }
89
- dispose() {
90
- this._removeAllOverlays();
91
- this.extendedItem.element.removeAttribute('contenteditable');
92
- this.extendedItem.updateChildrenFromNodesChildren();
93
- this.designerCanvas.clickOverlay.style.pointerEvents = 'auto';
94
- }
95
- handlesPointerEvent(designerCanvas, event, currentElement) {
96
- const p = event.composedPath();
97
- const stylo = this._foreignObject.querySelector('stylo-editor');
98
- return p.indexOf(stylo) >= 0;
99
- }
100
- _formatSelection(type, value) {
101
- const selection = shadowrootGetSelection(this.designerCanvas.rootDesignItem.element.shadowRoot);
102
- const spans = wrapSelectionInSpans(selection);
103
- for (const span of spans)
104
- span.style[type] = value;
105
- this.extendedItem.element.focus();
106
- }
107
- }
@@ -1,12 +0,0 @@
1
- import { IDesignItem } from '../../../../item/IDesignItem.js';
2
- import { IDesignerCanvas } from '../../IDesignerCanvas.js';
3
- import { AbstractExtension } from "../AbstractExtension.js";
4
- import { IExtensionManager } from '../IExtensionManger.js';
5
- export declare class GridToolbarExtension extends AbstractExtension {
6
- private static template;
7
- private _foreignObject;
8
- constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
9
- extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
10
- refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
11
- dispose(): void;
12
- }
@@ -1,58 +0,0 @@
1
- import { html } from "@node-projects/base-custom-webcomponent";
2
- import { AbstractExtension } from "../AbstractExtension.js";
3
- import { OverlayLayer } from "../OverlayLayer.js";
4
- export class GridToolbarExtension extends AbstractExtension {
5
- static template = html `
6
- <div style="height: 30px; width: 200px;">
7
- <span>GRID</span>
8
- <select id="gridType" style="pointer-events: all; height: 24px; width: 60px; padding: 0;">
9
- <option>1x1</option>
10
- <option>1x16</option>
11
- <option>2x8</option>
12
- <option>4x4</option>
13
- <option>8x2</option>
14
- <option>16x1</option>
15
- <option>custom</option>
16
- </select>
17
- </div>
18
- `;
19
- _foreignObject;
20
- constructor(extensionManager, designerView, extendedItem) {
21
- super(extensionManager, designerView, extendedItem);
22
- }
23
- extend(cache, event) {
24
- const element = GridToolbarExtension.template.content.cloneNode(true);
25
- element.querySelectorAll('*').forEach(x => x.onpointerdown = (e) => {
26
- this.designerCanvas.ignoreEvent(e);
27
- //this._formatSelection(x.dataset['command'], x.dataset['commandParameter'])
28
- });
29
- //element.querySelectorAll('select').forEach(x => x.onpointerdown = (e) => this.designerCanvas.ignoreEvent(e));
30
- const gridTypeEl = element.querySelector('#gridType');
31
- gridTypeEl.onchange = () => {
32
- const parts = gridTypeEl.value.split('x');
33
- this.extendedItem.updateStyleInSheetOrLocal('grid-template-columns', '1fr '.repeat(parseInt(parts[0])).trim());
34
- this.extendedItem.updateStyleInSheetOrLocal('grid-template-rows', '1fr '.repeat(parseInt(parts[1])).trim());
35
- };
36
- //elements.querySelectorAll('select').forEach(x => x.onchange = () => this._formatSelection(x.dataset['command'], x.value));
37
- //overlay
38
- const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
39
- this._foreignObject = foreignObject;
40
- foreignObject.classList.add('svg-toolbar');
41
- foreignObject.setAttribute('width', '1');
42
- foreignObject.setAttribute('height', '1');
43
- foreignObject.appendChild(element);
44
- this.refresh(cache, event);
45
- this._addOverlay(foreignObject, OverlayLayer.Foreground);
46
- }
47
- refresh(cache, event) {
48
- if (event) {
49
- const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
50
- //debugger;
51
- this._foreignObject.setAttribute('x', '' + (pos.x - 16));
52
- this._foreignObject.setAttribute('y', '' + (pos.y - 36));
53
- }
54
- }
55
- dispose() {
56
- this._removeAllOverlays();
57
- }
58
- }
@@ -1,12 +0,0 @@
1
- import { IDesignItem } from '../../../../item/IDesignItem.js';
2
- import { IDesignerCanvas } from '../../IDesignerCanvas.js';
3
- import { AbstractExtension } from "../AbstractExtension.js";
4
- import { IExtensionManager } from '../IExtensionManger.js';
5
- export declare class FlexToolbarExtension extends AbstractExtension {
6
- private static template;
7
- private _toolbar;
8
- constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
9
- extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
10
- refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
11
- dispose(): void;
12
- }
@@ -1,34 +0,0 @@
1
- import { html } from "@node-projects/base-custom-webcomponent";
2
- import { AbstractExtension } from "../AbstractExtension.js";
3
- export class FlexToolbarExtension extends AbstractExtension {
4
- static template = html `
5
- <div style="height: 100%; width: 100%;">
6
- <select id="displayType" style="pointer-events: all; height: 24px; width: 70px; padding: 0; font-weight: 900; text-transform: uppercase; margin-right: 10px;">
7
- <option>block</option>
8
- <option selected>flex</option>
9
- <option>grid</option>
10
- </select>
11
- </div>
12
- `;
13
- _toolbar;
14
- constructor(extensionManager, designerView, extendedItem) {
15
- super(extensionManager, designerView, extendedItem);
16
- }
17
- extend(cache, event) {
18
- this._toolbar = this.createToolbar(FlexToolbarExtension.template, 200, 30);
19
- const displayTypeEl = this._toolbar.getById('displayType');
20
- displayTypeEl.onchange = () => {
21
- this.extendedItem.updateStyleInSheetOrLocal('display', displayTypeEl.value);
22
- };
23
- this.refresh(cache, event);
24
- }
25
- refresh(cache, event) {
26
- if (event) {
27
- const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
28
- this._toolbar.updatePosition({ x: (pos.x - 16), y: (pos.y - 36) });
29
- }
30
- }
31
- dispose() {
32
- this._removeAllOverlays();
33
- }
34
- }
@@ -1,9 +0,0 @@
1
- import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js';
2
- import { IDesignItem } from '../../../../item/IDesignItem.js';
3
- import { IDesignerCanvas } from '../../IDesignerCanvas.js';
4
- import { IDesignerExtension } from '../IDesignerExtension.js';
5
- import { IExtensionManager } from '../IExtensionManger.js';
6
- export declare class GridToolbarExtensionProvider implements IDesignerExtensionProvider {
7
- shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
8
- getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
9
- }
@@ -1,12 +0,0 @@
1
- import { FlexToolbarExtension } from './FlexToolbarExtension.js';
2
- import { NodeType } from '../../../../item/NodeType.js';
3
- export class GridToolbarExtensionProvider {
4
- shouldExtend(extensionManager, designerView, designItem) {
5
- if (designItem.nodeType === NodeType.Element && getComputedStyle(designItem.element).display === 'grid')
6
- return true;
7
- return false;
8
- }
9
- getExtension(extensionManager, designerView, designItem) {
10
- return new FlexToolbarExtension(extensionManager, designerView, designItem);
11
- }
12
- }
@@ -1,12 +0,0 @@
1
- import { IDesignItem } from '../../../../item/IDesignItem.js';
2
- import { IDesignerCanvas } from '../../IDesignerCanvas.js';
3
- import { AbstractExtension } from "../AbstractExtension.js";
4
- import { IExtensionManager } from '../IExtensionManger.js';
5
- export declare class GridToolbarExtension extends AbstractExtension {
6
- private static template;
7
- private _toolbar;
8
- constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
9
- extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
10
- refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
11
- dispose(): void;
12
- }
@@ -1,66 +0,0 @@
1
- import { html } from "@node-projects/base-custom-webcomponent";
2
- import { AbstractExtension } from "../AbstractExtension.js";
3
- export class GridToolbarExtension extends AbstractExtension {
4
- static template = html `
5
- <div style="height: 100%; width: 100%;">
6
- <select id="displayType" style="pointer-events: all; height: 24px; width: 70px; padding: 0; font-weight: 900; text-transform: uppercase; margin-right: 10px;">
7
- <option>block</option>
8
- <option>flex</option>
9
- <option selected>grid</option>
10
- </select>
11
- <select id="gridType" style="pointer-events: all; height: 24px; width: 60px; padding: 0;">
12
- <option>1x1</option>
13
- <option>1x16</option>
14
- <option>2x8</option>
15
- <option>4x4</option>
16
- <option>8x2</option>
17
- <option>16x1</option>
18
- <option>custom</option>
19
- </select>
20
- </div>
21
- `;
22
- _toolbar;
23
- constructor(extensionManager, designerView, extendedItem) {
24
- super(extensionManager, designerView, extendedItem);
25
- }
26
- extend(cache, event) {
27
- const style = getComputedStyle(this.extendedItem.element);
28
- this._toolbar = this.createToolbar(GridToolbarExtension.template, 200, 30);
29
- const displayTypeEl = this._toolbar.getById('displayType');
30
- displayTypeEl.onchange = () => {
31
- this.extendedItem.updateStyleInSheetOrLocal('display', displayTypeEl.value);
32
- };
33
- const gridTypeEl = this._toolbar.getById('gridType');
34
- let op = document.createElement('option');
35
- op.innerText = style.gridTemplateColumns.split(' ').length + 'x' + style.gridTemplateRows.split(' ').length;
36
- gridTypeEl.insertAdjacentElement('afterbegin', op);
37
- gridTypeEl.selectedIndex = 0;
38
- gridTypeEl.onchange = () => {
39
- if (gridTypeEl.value == 'custom') {
40
- const columns = prompt("Number of columns?", '4');
41
- if (!columns)
42
- return;
43
- const rows = prompt("Number of rows?", '4');
44
- if (!rows)
45
- return;
46
- this.extendedItem.updateStyleInSheetOrLocal('grid-template-columns', '1fr '.repeat(parseInt(columns)).trim());
47
- this.extendedItem.updateStyleInSheetOrLocal('grid-template-rows', '1fr '.repeat(parseInt(rows)).trim());
48
- }
49
- else {
50
- const parts = gridTypeEl.value.split('x');
51
- this.extendedItem.updateStyleInSheetOrLocal('grid-template-columns', '1fr '.repeat(parseInt(parts[0])).trim());
52
- this.extendedItem.updateStyleInSheetOrLocal('grid-template-rows', '1fr '.repeat(parseInt(parts[1])).trim());
53
- }
54
- };
55
- this.refresh(cache, event);
56
- }
57
- refresh(cache, event) {
58
- if (event) {
59
- const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
60
- this._toolbar.updatePosition({ x: (pos.x - 16), y: (pos.y - 36) });
61
- }
62
- }
63
- dispose() {
64
- this._removeAllOverlays();
65
- }
66
- }
@@ -1,10 +0,0 @@
1
- import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js';
2
- import { IDesignItem } from '../../../../item/IDesignItem.js';
3
- import { IDesignerCanvas } from '../../IDesignerCanvas.js';
4
- import { IDesignerExtension } from '../IDesignerExtension.js';
5
- import { IExtensionManager } from '../IExtensionManger.js';
6
- export declare class GridToolbarExtensionProvider 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,17 +0,0 @@
1
- import { css } from '@node-projects/base-custom-webcomponent';
2
- import { GridToolbarExtension } from './GridToolbarExtension.js';
3
- import { NodeType } from '../../../../item/NodeType.js';
4
- export class GridToolbarExtensionProvider {
5
- shouldExtend(extensionManager, designerView, designItem) {
6
- if (designItem.nodeType === NodeType.Element && getComputedStyle(designItem.element).display === 'grid')
7
- return true;
8
- return false;
9
- }
10
- getExtension(extensionManager, designerView, designItem) {
11
- return new GridToolbarExtension(extensionManager, designerView, designItem);
12
- }
13
- style = css `
14
- .svg-toolbar-container { overflow: visible }
15
- .svg-toolbar-container div { padding: 5px; display: flex; gap: 2px; background: white; border-radius: 4px; box-shadow: 0 2px 10px 0 rgba(19,23,32,.2); align-items: center; }
16
- `;
17
- }
@@ -1,12 +0,0 @@
1
- import { IDesignItem } from '../../../../item/IDesignItem.js';
2
- import { IDesignerCanvas } from '../../IDesignerCanvas.js';
3
- import { AbstractExtension } from "../AbstractExtension.js";
4
- import { IExtensionManager } from '../IExtensionManger.js';
5
- export declare class GridToolbarExtension extends AbstractExtension {
6
- private static template;
7
- private _toolbar;
8
- constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
9
- extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
10
- refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
11
- dispose(): void;
12
- }
@@ -1,66 +0,0 @@
1
- import { html } from "@node-projects/base-custom-webcomponent";
2
- import { AbstractExtension } from "../AbstractExtension.js";
3
- export class GridToolbarExtension extends AbstractExtension {
4
- static template = html `
5
- <div style="height: 100%; width: 100%;">
6
- <select id="displayType" style="pointer-events: all; height: 24px; width: 70px; padding: 0; font-weight: 900; text-transform: uppercase; margin-right: 10px;">
7
- <option>block</option>
8
- <option>flex</option>
9
- <option selected>grid</option>
10
- </select>
11
- <select id="gridType" style="pointer-events: all; height: 24px; width: 60px; padding: 0;">
12
- <option>1x1</option>
13
- <option>1x16</option>
14
- <option>2x8</option>
15
- <option>4x4</option>
16
- <option>8x2</option>
17
- <option>16x1</option>
18
- <option>custom</option>
19
- </select>
20
- </div>
21
- `;
22
- _toolbar;
23
- constructor(extensionManager, designerView, extendedItem) {
24
- super(extensionManager, designerView, extendedItem);
25
- }
26
- extend(cache, event) {
27
- const style = getComputedStyle(this.extendedItem.element);
28
- this._toolbar = this.createToolbar(GridToolbarExtension.template, 200, 30);
29
- const displayTypeEl = this._toolbar.getById('displayType');
30
- displayTypeEl.onchange = () => {
31
- this.extendedItem.updateStyleInSheetOrLocal('display', displayTypeEl.value);
32
- };
33
- const gridTypeEl = this._toolbar.getById('gridType');
34
- let op = document.createElement('option');
35
- op.innerText = style.gridTemplateColumns.split(' ').length + 'x' + style.gridTemplateRows.split(' ').length;
36
- gridTypeEl.insertAdjacentElement('afterbegin', op);
37
- gridTypeEl.selectedIndex = 0;
38
- gridTypeEl.onchange = () => {
39
- if (gridTypeEl.value == 'custom') {
40
- const columns = prompt("Number of columns?", '4');
41
- if (!columns)
42
- return;
43
- const rows = prompt("Number of rows?", '4');
44
- if (!rows)
45
- return;
46
- this.extendedItem.updateStyleInSheetOrLocal('grid-template-columns', '1fr '.repeat(parseInt(columns)).trim());
47
- this.extendedItem.updateStyleInSheetOrLocal('grid-template-rows', '1fr '.repeat(parseInt(rows)).trim());
48
- }
49
- else {
50
- const parts = gridTypeEl.value.split('x');
51
- this.extendedItem.updateStyleInSheetOrLocal('grid-template-columns', '1fr '.repeat(parseInt(parts[0])).trim());
52
- this.extendedItem.updateStyleInSheetOrLocal('grid-template-rows', '1fr '.repeat(parseInt(parts[1])).trim());
53
- }
54
- };
55
- this.refresh(cache, event);
56
- }
57
- refresh(cache, event) {
58
- if (event) {
59
- const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
60
- this._toolbar.updatePosition({ x: (pos.x - 16), y: (pos.y - 44) });
61
- }
62
- }
63
- dispose() {
64
- this._removeAllOverlays();
65
- }
66
- }
@@ -1,10 +0,0 @@
1
- import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js';
2
- import { IDesignItem } from '../../../../item/IDesignItem.js';
3
- import { IDesignerCanvas } from '../../IDesignerCanvas.js';
4
- import { IDesignerExtension } from '../IDesignerExtension.js';
5
- import { IExtensionManager } from '../IExtensionManger.js';
6
- export declare class GridToolbarExtensionProvider 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,17 +0,0 @@
1
- import { css } from '@node-projects/base-custom-webcomponent';
2
- import { GridToolbarExtension } from './GridToolbarExtension.js';
3
- import { NodeType } from '../../../../item/NodeType.js';
4
- export class GridToolbarExtensionProvider {
5
- shouldExtend(extensionManager, designerView, designItem) {
6
- if (designItem.nodeType === NodeType.Element && getComputedStyle(designItem.element).display === 'grid')
7
- return true;
8
- return false;
9
- }
10
- getExtension(extensionManager, designerView, designItem) {
11
- return new GridToolbarExtension(extensionManager, designerView, designItem);
12
- }
13
- style = css `
14
- .svg-toolbar-container { overflow: visible }
15
- .svg-toolbar-container div { padding: 5px; display: flex; gap: 2px; background: white; border-radius: 4px; box-shadow: 0 2px 10px 0 rgba(19,23,32,.2); align-items: center; }
16
- `;
17
- }
@@ -1,28 +0,0 @@
1
- import { IDesignItem } from '../../../item/IDesignItem.js';
2
- import { IDesignerCanvas } from '../IDesignerCanvas.js';
3
- import { AbstractExtension } from './AbstractExtension.js';
4
- import { IExtensionManager } from './IExtensionManger.js';
5
- export declare class ResizeExtension extends AbstractExtension {
6
- private resizeAllSelected;
7
- private _initialSizes;
8
- private _actionModeStarted;
9
- private _initialPoint;
10
- private _offsetPoint;
11
- private _circle1;
12
- private _circle2;
13
- private _circle3;
14
- private _circle4;
15
- private _circle5;
16
- private _circle6;
17
- private _circle7;
18
- private _circle8;
19
- private _initialComputedTransformOrigins;
20
- private _initialTransformOrigins;
21
- constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, extendedItem: IDesignItem, resizeAllSelected: boolean);
22
- extend(cache: Record<string | symbol, any>, event?: Event): void;
23
- refresh(cache: Record<string | symbol, any>, event?: Event): void;
24
- _drawResizerOverlay(x: number, y: number, cursor: string, oldCircle?: SVGCircleElement): SVGCircleElement;
25
- _pointerActionTypeResize(circle: SVGCircleElement, event: PointerEvent, actionMode: string): void;
26
- private prepareResize;
27
- dispose(): void;
28
- }