@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.
- package/dist/elements/item/DesignItem.d.ts +5 -1
- package/dist/elements/item/DesignItem.js +30 -8
- package/dist/elements/item/IDesignItem.d.ts +2 -1
- package/dist/elements/services/designItemService/BaseCustomWebcomponentDesignItemService.d.ts +8 -0
- package/dist/elements/services/designItemService/BaseCustomWebcomponentDesignItemService.js +36 -0
- package/dist/elements/services/designItemService/DesignItemService copy.d.ts +7 -0
- package/dist/elements/services/designItemService/DesignItemService copy.js +6 -0
- package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension.d.ts +1 -0
- package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension.js +12 -3
- package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.js +2 -0
- package/dist/elements/widgets/designerView/extensions/ElementDragTitleExtensionProvider.js +1 -1
- package/dist/elements/widgets/designerView/extensions/HighlightElementExtensionProvider.js +1 -1
- package/dist/elements/widgets/designerView/extensions/MultipleSelectionRectExtensionProvider.js +3 -3
- package/dist/elements/widgets/designerView/extensions/PositionExtensionProvider.js +1 -1
- package/dist/elements/widgets/designerView/extensions/ResizeExtensionProvider.js +1 -1
- package/dist/elements/widgets/designerView/extensions/RotateExtensionProvider.js +1 -1
- package/dist/elements/widgets/designerView/extensions/SelectionDefaultExtensionProvider.js +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +1 -1
- package/dist/elements/services/selectionService/ISelectionChangedEvent copy.d.ts +0 -6
- package/dist/elements/services/selectionService/ISelectionChangedEvent copy.js +0 -1
- package/dist/elements/widgets/designerView/extensions/AbstractToolbarExtension.d.ts +0 -9
- package/dist/elements/widgets/designerView/extensions/AbstractToolbarExtension.js +0 -30
- package/dist/elements/widgets/designerView/extensions/BasicDisplayToolbarExtension.d.ts +0 -20
- package/dist/elements/widgets/designerView/extensions/BasicDisplayToolbarExtension.js +0 -68
- package/dist/elements/widgets/designerView/extensions/BlockToolbarExtension.d.ts +0 -12
- package/dist/elements/widgets/designerView/extensions/BlockToolbarExtension.js +0 -40
- package/dist/elements/widgets/designerView/extensions/ConditionExtensionProvider.d.ts +0 -13
- package/dist/elements/widgets/designerView/extensions/ConditionExtensionProvider.js +0 -18
- package/dist/elements/widgets/designerView/extensions/EditTextExtension.d.ts +0 -18
- package/dist/elements/widgets/designerView/extensions/EditTextExtension.js +0 -107
- package/dist/elements/widgets/designerView/extensions/GridToolbarExtension.d.ts +0 -12
- package/dist/elements/widgets/designerView/extensions/GridToolbarExtension.js +0 -58
- package/dist/elements/widgets/designerView/extensions/block/FlexToolbarExtension.d.ts +0 -12
- package/dist/elements/widgets/designerView/extensions/block/FlexToolbarExtension.js +0 -34
- package/dist/elements/widgets/designerView/extensions/block/FlexToolbarExtensionProvider.d.ts +0 -9
- package/dist/elements/widgets/designerView/extensions/block/FlexToolbarExtensionProvider.js +0 -12
- package/dist/elements/widgets/designerView/extensions/flex/GridToolbarExtension.d.ts +0 -12
- package/dist/elements/widgets/designerView/extensions/flex/GridToolbarExtension.js +0 -66
- package/dist/elements/widgets/designerView/extensions/flex/GridToolbarExtensionProvider.d.ts +0 -10
- package/dist/elements/widgets/designerView/extensions/flex/GridToolbarExtensionProvider.js +0 -17
- package/dist/elements/widgets/designerView/extensions/grid/GridToolbarExtension copy.d.ts +0 -12
- package/dist/elements/widgets/designerView/extensions/grid/GridToolbarExtension copy.js +0 -66
- package/dist/elements/widgets/designerView/extensions/grid/GridToolbarExtensionProvider copy.d.ts +0 -10
- package/dist/elements/widgets/designerView/extensions/grid/GridToolbarExtensionProvider copy.js +0 -17
- package/dist/elements/widgets/designerView/extensions/grid/ResizeExtension.d.ts +0 -28
- package/dist/elements/widgets/designerView/extensions/grid/ResizeExtension.js +0 -355
- package/dist/elements/widgets/designerView/extensions/grid/ResizeExtensionProvider.d.ts +0 -12
- package/dist/elements/widgets/designerView/extensions/grid/ResizeExtensionProvider.js +0 -20
- package/dist/elements/widgets/designerView/extensions/svg/RectExtensionProvider copy.d.ts +0 -9
- package/dist/elements/widgets/designerView/extensions/svg/RectExtensionProvider copy.js +0 -14
- package/dist/elements/widgets/designerView/extensions/svg/SvgBaseExtension.d.ts +0 -30
- 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
|
-
}
|
package/dist/elements/widgets/designerView/extensions/block/FlexToolbarExtensionProvider.d.ts
DELETED
|
@@ -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
|
-
}
|
package/dist/elements/widgets/designerView/extensions/flex/GridToolbarExtensionProvider.d.ts
DELETED
|
@@ -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
|
-
}
|
package/dist/elements/widgets/designerView/extensions/grid/GridToolbarExtensionProvider copy.d.ts
DELETED
|
@@ -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
|
-
}
|
package/dist/elements/widgets/designerView/extensions/grid/GridToolbarExtensionProvider copy.js
DELETED
|
@@ -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
|
-
}
|