@node-projects/web-component-designer 0.1.194 → 0.1.197
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.js +1 -1
- package/dist/elements/item/DesignItem.js.map +1 -1
- package/dist/elements/services/eventsService/EventsService.d.ts +15 -15
- package/dist/elements/services/eventsService/EventsService.js +18 -19
- package/dist/elements/services/eventsService/EventsService.js.map +1 -1
- package/dist/elements/services/eventsService/IEventsService.d.ts +2 -2
- package/dist/elements/services/eventsService/WebcomponentManifestEventsService.d.ts +11 -0
- package/dist/elements/services/eventsService/WebcomponentManifestEventsService.js +47 -0
- package/dist/elements/services/eventsService/WebcomponentManifestEventsService.js.map +1 -0
- package/dist/elements/services/manifestParsers/WebcomponentManifestParserService.d.ts +5 -0
- package/dist/elements/services/manifestParsers/WebcomponentManifestParserService.js +22 -0
- package/dist/elements/services/manifestParsers/WebcomponentManifestParserService.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/elements/services/propertiesService/services/BasicWebcomponentPropertiesService copy.d.ts +0 -21
- package/dist/elements/services/propertiesService/services/BasicWebcomponentPropertiesService copy.js +0 -243
- package/dist/elements/services/propertiesService/services/CssPropertiesService copy.d.ts +0 -25
- package/dist/elements/services/propertiesService/services/CssPropertiesService copy.js +0 -126
- package/dist/elements/services/propertiesService/services/NativeElementsPropertiesService copy.d.ts +0 -21
- package/dist/elements/services/propertiesService/services/NativeElementsPropertiesService copy.js +0 -243
- package/dist/elements/services/selectionService/ISelectionChangedEvent copy.d.ts +0 -6
- package/dist/elements/services/selectionService/ISelectionChangedEvent copy.js +0 -1
- package/dist/elements/services/stylesheetService/ISpecifity.d.ts +0 -0
- package/dist/elements/services/stylesheetService/ISpecifity.js +0 -1
- package/dist/elements/services/stylesheetService/SpecifityCalculator.d.ts +0 -3
- package/dist/elements/services/stylesheetService/SpecifityCalculator.js +0 -123
- 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/CanvasExtension.d.ts +0 -10
- package/dist/elements/widgets/designerView/extensions/CanvasExtension.js +0 -31
- package/dist/elements/widgets/designerView/extensions/CanvasExtensionProvider.d.ts +0 -10
- package/dist/elements/widgets/designerView/extensions/CanvasExtensionProvider.js +0 -15
- 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/ElementDragTitleExtension copy.d.ts +0 -15
- package/dist/elements/widgets/designerView/extensions/ElementDragTitleExtension copy.js +0 -68
- package/dist/elements/widgets/designerView/extensions/ElementDragTitleExtensionProvider copy.d.ts +0 -10
- package/dist/elements/widgets/designerView/extensions/ElementDragTitleExtensionProvider copy.js +0 -13
- 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/buttons/GridExtensionDesignViewConfigButtons copy.d.ts +0 -4
- package/dist/elements/widgets/designerView/extensions/buttons/GridExtensionDesignViewConfigButtons copy.js +0 -7
- package/dist/elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu copy.d.ts +0 -9
- package/dist/elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu copy.js +0 -17
- package/dist/elements/widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu copy.d.ts +0 -8
- package/dist/elements/widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu copy.js +0 -13
- 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
package/dist/elements/widgets/designerView/extensions/ElementDragTitleExtensionProvider 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 ElementDragTitleExtensionProvider implements IDesignerExtensionProvider {
|
|
7
|
-
shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
|
|
8
|
-
getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
|
|
9
|
-
static readonly style: CSSStyleSheet;
|
|
10
|
-
}
|
package/dist/elements/widgets/designerView/extensions/ElementDragTitleExtensionProvider copy.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { ElementDragTitleExtension } from './ElementDragTitleExtension.js';
|
|
2
|
-
import { css } from "@node-projects/base-custom-webcomponent";
|
|
3
|
-
export class ElementDragTitleExtensionProvider {
|
|
4
|
-
shouldExtend(extensionManager, designerView, designItem) {
|
|
5
|
-
return !designItem.isRootItem && !(designItem.element instanceof HTMLTemplateElement);
|
|
6
|
-
}
|
|
7
|
-
getExtension(extensionManager, designerView, designItem) {
|
|
8
|
-
return new ElementDragTitleExtension(extensionManager, designerView, designItem);
|
|
9
|
-
}
|
|
10
|
-
static style = css `
|
|
11
|
-
.svg-text-primary { stroke: none; color: white; font-family: monospace; }
|
|
12
|
-
`;
|
|
13
|
-
}
|
|
@@ -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,7 +0,0 @@
|
|
|
1
|
-
import { gridExtensionShowOverlayOptionName } from "../grid/DisplayGridExtensionProvider.js";
|
|
2
|
-
import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
|
|
3
|
-
export class GridExtensionDesignViewConfigButtons extends AbstractDesignViewConfigButton {
|
|
4
|
-
constructor() {
|
|
5
|
-
super(gridExtensionShowOverlayOptionName, "G", "show grid overlay");
|
|
6
|
-
}
|
|
7
|
-
}
|
package/dist/elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu copy.d.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js';
|
|
2
|
-
import { IDesignItem } from '../../../../item/IDesignItem.js';
|
|
3
|
-
import { IDesignerCanvas } from '../../IDesignerCanvas.js';
|
|
4
|
-
import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js';
|
|
5
|
-
export declare class ItemsBelowContextMenu implements IContextMenuExtension {
|
|
6
|
-
shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
|
|
7
|
-
provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
|
|
8
|
-
private _select;
|
|
9
|
-
}
|
package/dist/elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu copy.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { DesignItem } from '../../../../item/DesignItem.js';
|
|
2
|
-
export class ItemsBelowContextMenu {
|
|
3
|
-
shouldProvideContextmenu(event, designerView, designItem, initiator) {
|
|
4
|
-
return initiator == 'designer';
|
|
5
|
-
}
|
|
6
|
-
provideContextMenuItems(event, designerCanvas, designItem) {
|
|
7
|
-
const lstItems = designerCanvas.elementsFromPoint(event.x, event.y);
|
|
8
|
-
if (lstItems.length > 0) {
|
|
9
|
-
return [{ title: 'items below', children: [...lstItems.map(x => ({ title: 'select: ' + x.localName + (x.id ? ' (' + x.id + ')' : ''), action: () => this._select(designerCanvas, x) }))] }];
|
|
10
|
-
}
|
|
11
|
-
return [];
|
|
12
|
-
}
|
|
13
|
-
_select(designerView, element) {
|
|
14
|
-
const item = DesignItem.GetOrCreateDesignItem(element, element, designerView.serviceContainer, designerView.instanceServiceContainer);
|
|
15
|
-
designerView.instanceServiceContainer.selectionService.setSelectedElements([item]);
|
|
16
|
-
}
|
|
17
|
-
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js';
|
|
2
|
-
import { IDesignItem } from '../../../../item/IDesignItem.js';
|
|
3
|
-
import { IDesignerCanvas } from '../../IDesignerCanvas.js';
|
|
4
|
-
import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js';
|
|
5
|
-
export declare class RotateLeftAndRight implements IContextMenuExtension {
|
|
6
|
-
shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
|
|
7
|
-
provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
|
|
8
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { CommandType } from '../../../../../commandHandling/CommandType.js';
|
|
2
|
-
import { NodeType } from '../../../../item/NodeType.js';
|
|
3
|
-
export class RotateLeftAndRight {
|
|
4
|
-
shouldProvideContextmenu(event, designerView, designItem, initiator) {
|
|
5
|
-
return !designItem?.isRootItem && designItem?.nodeType == NodeType.Element;
|
|
6
|
-
}
|
|
7
|
-
provideContextMenuItems(event, designerView, designItem) {
|
|
8
|
-
return [
|
|
9
|
-
{ title: 'rotate right', icon: `<img src="${new URL('../../../../../../assets/icons/rotateRight.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.rotateClockwise }); }, shortCut: 'Ctrl + R' },
|
|
10
|
-
{ title: 'rotate left', icon: `<img src="${new URL('../../../../../../assets/icons/rotateLeft.svg', import.meta.url)}">`, action: () => { designerView.executeCommand({ type: CommandType.rotateCounterClockwise }); }, shortCut: 'Ctrl + Shift + R' }
|
|
11
|
-
];
|
|
12
|
-
}
|
|
13
|
-
}
|
|
@@ -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
|
-
}
|