@node-projects/web-component-designer 0.1.99 → 0.1.100

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 (20) hide show
  1. package/dist/elements/services/propertiesService/app.d.ts +2 -0
  2. package/dist/elements/services/propertiesService/app.js +71 -0
  3. package/dist/elements/widgets/designerView/extensions/CanvasExtension.js +8 -6
  4. package/dist/elements/widgets/designerView/tools/PanTool.js +1 -1
  5. package/dist/elements/widgets/designerView/tools/toolBar/popups/{PointerToolPopup copy.d.ts → DrawToolPopup copy.d.ts } +1 -1
  6. package/dist/elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup copy.js +102 -0
  7. package/package.json +24 -24
  8. package/dist/elements/services/placementService/DefaultPlacementService copy.d.ts +0 -19
  9. package/dist/elements/services/placementService/DefaultPlacementService copy.js +0 -151
  10. package/dist/elements/services/propertiesService/services/MathMllElementsPropertiesService.d.ts +0 -21
  11. package/dist/elements/services/propertiesService/services/MathMllElementsPropertiesService.js +0 -243
  12. package/dist/elements/services/propertiesService/services/NativeElementsPropertiesService copy.d.ts +0 -21
  13. package/dist/elements/services/propertiesService/services/NativeElementsPropertiesService copy.js +0 -243
  14. package/dist/elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons copy.d.ts +0 -5
  15. package/dist/elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons copy.js +0 -7
  16. package/dist/elements/widgets/designerView/tools/toolBar/popups/PointerToolPopup copy.js +0 -49
  17. package/dist/elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup copy.d.ts +0 -6
  18. package/dist/elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup copy.js +0 -49
  19. /package/dist/elements/services/propertiesService/services/{MathmlElementsPropertiesService.d.ts → MathMLElementsPropertiesService.d.ts} +0 -0
  20. /package/dist/elements/services/propertiesService/services/{MathmlElementsPropertiesService.js → MathMLElementsPropertiesService.js} +0 -0
package/dist/elements/services/propertiesService/app.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare function getProtoProperties(target: any): string[];
2
+ declare function getAttributesIfCustomElement(target: any): any;
package/dist/elements/services/propertiesService/app.js ADDED
@@ -0,0 +1,71 @@
1
+ "use strict";
2
+ function getProtoProperties(target) {
3
+ // If this is a custom element, you need to go up the prototype
4
+ // chain until you get proper HTMLElement, since everything under it
5
+ // is generated prototypes and will have propeties that are dupes (like:
6
+ // every observedAttribute is also mirrored as a property)
7
+ const isCustomElement = target.tagName.indexOf('-') !== -1;
8
+ let proto = target.__proto__;
9
+ if (isCustomElement) {
10
+ while (proto.constructor !== window.HTMLElement.prototype.constructor) {
11
+ proto = proto.__proto__;
12
+ }
13
+ }
14
+ let protoProps = {};
15
+ // We literally want nothing other than 'href' and 'target' from HTMLAnchorElement.
16
+ if (proto.constructor.name === 'HTMLAnchorElement') {
17
+ protoProps['href'] = Object.getOwnPropertyDescriptors(proto).href;
18
+ protoProps['target'] = Object.getOwnPropertyDescriptors(proto).target;
19
+ proto = proto.__proto__;
20
+ }
21
+ while (proto.constructor.name !== 'Element') {
22
+ Object.assign(protoProps, Object.getOwnPropertyDescriptors(proto));
23
+ proto = proto.__proto__;
24
+ }
25
+ let propNames = Object.keys(protoProps).sort();
26
+ // Skip some very specific Polymer/element properties.
27
+ let blacklist = [
28
+ // Polymer specific
29
+ 'isAttached',
30
+ 'constructor', 'created', 'ready', 'attached', 'detached',
31
+ 'attributeChanged', 'is', 'listeners', 'observers', 'properties',
32
+ // Native elements ones we don't care about
33
+ 'validity', 'useMap', 'innerText', 'outerText', 'style', 'accessKey',
34
+ 'draggable', 'lang', 'spellcheck', 'tabIndex', 'translate', 'align', 'dir',
35
+ 'isMap', 'useMap', 'hspace', 'vspace', 'referrerPolicy', 'crossOrigin',
36
+ 'lowsrc', 'longDesc',
37
+ // Specific elements stuff
38
+ 'receivedFocusFromKeyboard', 'pointerDown', 'valueAsNumber',
39
+ 'selectionDirection', 'selectionStart', 'selectionEnd'
40
+ ];
41
+ let i = 0;
42
+ while (i < propNames.length) {
43
+ let name = propNames[i];
44
+ // Skip everything that starts with a _ which is a Polymer private/protected
45
+ // and you probably don't care about it.
46
+ // Also anything in the blacklist. Or that starts with webkit.
47
+ if (name.charAt(0) === '_' ||
48
+ name === 'keyEventTarget' ||
49
+ blacklist.indexOf(name) !== -1 ||
50
+ name.indexOf('webkit') === 0 ||
51
+ name.indexOf('on') === 0) {
52
+ propNames.splice(i, 1);
53
+ continue;
54
+ }
55
+ // Skip everything that doesn't have a setter.
56
+ if (!protoProps[name].set) {
57
+ propNames.splice(i, 1);
58
+ continue;
59
+ }
60
+ i++;
61
+ }
62
+ return propNames || [];
63
+ }
64
+ function getAttributesIfCustomElement(target) {
65
+ if (target.tagName.indexOf('-') !== -1) {
66
+ return target.constructor.observedAttributes;
67
+ }
68
+ else {
69
+ return [];
70
+ }
71
+ }
package/dist/elements/widgets/designerView/extensions/CanvasExtension.js CHANGED
@@ -14,12 +14,14 @@ export class CanvasExtension extends AbstractExtension {
14
14
  const top = Number.parseFloat(computedStyle.marginTop.replace('px', ''));
15
15
  const right = Number.parseFloat(computedStyle.marginRight.replace('px', ''));
16
16
  const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', ''));
17
- if (this._valuesHaveChanges(left, top, right, bottom, itemRect.x, itemRect.y, itemRect.width, itemRect.height)) {
18
- this._removeAllOverlays();
19
- this._drawRect(itemRect.x - left, itemRect.y - top, left + itemRect.width + right, top, 'svg-margin');
20
- this._drawRect(itemRect.x - left, itemRect.y, left, itemRect.height, 'svg-margin');
21
- this._drawRect(itemRect.x + itemRect.width, itemRect.y, right, itemRect.height, 'svg-margin');
22
- this._drawRect(itemRect.x - left, itemRect.y + itemRect.height, left + itemRect.width + right, bottom, 'svg-margin');
17
+ if (!isNaN(left) && !isNaN(top) && !isNaN(right) && !isNaN(bottom)) {
18
+ if (this._valuesHaveChanges(left, top, right, bottom, itemRect.x, itemRect.y, itemRect.width, itemRect.height)) {
19
+ this._removeAllOverlays();
20
+ this._drawRect(itemRect.x - left, itemRect.y - top, left + itemRect.width + right, top, 'svg-margin');
21
+ this._drawRect(itemRect.x - left, itemRect.y, left, itemRect.height, 'svg-margin');
22
+ this._drawRect(itemRect.x + itemRect.width, itemRect.y, right, itemRect.height, 'svg-margin');
23
+ this._drawRect(itemRect.x - left, itemRect.y + itemRect.height, left + itemRect.width + right, bottom, 'svg-margin');
24
+ }
23
25
  }
24
26
  }
25
27
  }
package/dist/elements/widgets/designerView/tools/PanTool.js CHANGED
@@ -8,7 +8,7 @@ export class PanTool {
8
8
  designerCanvas.captureActiveTool(this);
9
9
  break;
10
10
  case EventNames.PointerMove:
11
- if (event.buttons == 1) {
11
+ if (event.buttons == 1 || event.buttons == 4) {
12
12
  designerCanvas.canvasOffset = { x: designerCanvas.canvasOffset.x + +event.movementX / designerCanvas.zoomFactor, y: designerCanvas.canvasOffset.y + event.movementY / designerCanvas.zoomFactor };
13
13
  }
14
14
  break;
package/dist/elements/widgets/designerView/tools/toolBar/popups/{PointerToolPopup copy.d.ts → DrawToolPopup copy.d.ts } RENAMED
@@ -1,5 +1,5 @@
1
1
  import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
2
- export declare class PointerToolPopup extends BaseCustomWebComponentConstructorAppend {
2
+ export declare class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
3
3
  static style: CSSStyleSheet;
4
4
  static template: HTMLTemplateElement;
5
5
  constructor();
package/dist/elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup copy.js ADDED
@@ -0,0 +1,102 @@
1
+ import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
2
+ import { assetsPath } from "../../../../../../Constants.js";
3
+ export class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
4
+ static style = css `
5
+ .container {
6
+ width: 220px;
7
+ min-height: 200px;
8
+ color: white;
9
+ background-color: rgb(64, 64, 64);
10
+ border: 1px solid black;
11
+ }
12
+ header {
13
+ text-align: center;
14
+ }
15
+ .tool {
16
+ height: 32px;
17
+ width: 32px;
18
+ background-color: rgb(255, 255, 255);
19
+ background-size: 65%;
20
+ background-repeat: no-repeat;
21
+ background-position: center center;
22
+ flex-shrink: 0;
23
+ border-bottom: 1px solid black;
24
+ }
25
+ .tools {
26
+ display: flex;
27
+ flex-wrap: wrap;
28
+ margin-bottom: 5px;
29
+ }
30
+ .inputs{
31
+ float: left;
32
+ margin-top: 5px;
33
+ align-items: center;
34
+ }
35
+ .input {
36
+ display: flex;
37
+ align-items: center;
38
+ margin-top: 5px;
39
+ }
40
+ .text {
41
+ margin-left: 5px;
42
+ font-size: 14px;
43
+ }
44
+ .strokecolor{
45
+ float: both;
46
+ }
47
+ .fillbrush{
48
+ float: both;
49
+ }
50
+ .strokethickness{
51
+ float: both;
52
+ }
53
+
54
+ `;
55
+ static template = html `
56
+ <div class="container">
57
+ <header><h2 id="title" style="margin: 0;">Draw</h2></header>
58
+ <main id="content-area">
59
+ <div class="tools">
60
+ <div class="tool" data-command="setTool" data-command-parameter="DrawLine" title="Draw Line" style="background-image: url('${assetsPath}images/layout/DrawLineTool.svg');"></div>
61
+ <div class="tool" data-command="setTool" data-command-parameter="DrawPath" title="Pointer Tool" style="background-image: url('${assetsPath}images/layout/DrawPathTool.svg');"></div>
62
+ <div class="tool" data-command="setTool" data-command-parameter="DrawRect" title="Draw Rectangle" style="background-image: url('${assetsPath}images/layout/DrawRectTool.svg');"></div>
63
+ <div class="tool" data-command="setTool" data-command-parameter="DrawEllipsis" title="Draw Ellipsis" style="background-image: url('${assetsPath}images/layout/DrawEllipTool.svg');"></div>
64
+ <div class="tool" data-command="setTool" data-command-parameter="PickColor" title="Pick Color" style="background-image: url('${assetsPath}images/layout/ColorPickerTool.svg');"></div>
65
+ </div>
66
+ <div class="inputs">
67
+ <div class="input">
68
+ <input id="strokecolor" class="strokecolor" type="color" title="stroke color" value="#000000" style="padding: 0; width:31px; height:31px;">
69
+ <text class="text">Stroke Color</text>
70
+ </div>
71
+ <div class="input">
72
+ <input id="fillbrush" class="fillbrush" type="color" title="fill brush" value="#ffffff" style="padding: 0; width:31px; height:31px;">
73
+ <text class="text">Fill Brush</text>
74
+ </div>
75
+ <div class="input">
76
+ <input id="strokethickness" class="strokethickness" type="range" title="stroke thickness" min="1" max="20" value="3" style="padding: 0; width:80px; height:20px; margin-right: 5px;">
77
+ <text class="text">Stroke Thickness</text>
78
+ </div>
79
+ </div>
80
+ </main>
81
+ </div>`;
82
+ constructor() {
83
+ super();
84
+ for (let e of [...this.shadowRoot.querySelectorAll("div.tool")]) {
85
+ let div = e;
86
+ div.onclick = () => this.getRootNode().host.setTool(div.dataset['commandParameter']);
87
+ }
88
+ if (this.shadowRoot.querySelector("input.strokecolor")) {
89
+ let input = this._getDomElement("strokecolor");
90
+ input.onchange = () => this.getRootNode().host.setStrokeColor(input.value);
91
+ }
92
+ if (this.shadowRoot.querySelector("input.fillbrush")) {
93
+ let input = this._getDomElement("fillbrush");
94
+ input.onchange = () => this.getRootNode().host.setFillBrush(input.value);
95
+ }
96
+ if (this.shadowRoot.querySelector("input.strokethickness")) {
97
+ let input = this._getDomElement("strokethickness");
98
+ input.onchange = () => this.getRootNode().host.setStrokeThickness(input.value);
99
+ }
100
+ }
101
+ }
102
+ customElements.define('node-projects-designer-drawtool-popup', DrawToolPopup);
package/package.json CHANGED
@@ -1,24 +1,24 @@
1
- {
2
- "description": "A UI designer for Polymer apps",
3
- "name": "@node-projects/web-component-designer",
4
- "version": "0.1.99",
5
- "type": "module",
6
- "main": "./dist/index.js",
7
- "author": "jochen.kuehner@gmx.de",
8
- "license": "MIT",
9
- "scripts": {
10
- "tsc": "tsc",
11
- "build": "tsc",
12
- "prepublishOnly": "npm run build"
13
- },
14
- "dependencies": {
15
- "@node-projects/base-custom-webcomponent": ">=0.23.0"
16
- },
17
- "devDependencies": {
18
- "mdn-data": "^2.4.2"
19
- },
20
- "repository": {
21
- "type": "git",
22
- "url": "git+https://github.com/node-projects/web-component-designer.git"
23
- }
24
- }
1
+ {
2
+ "description": "A UI designer for Polymer apps",
3
+ "name": "@node-projects/web-component-designer",
4
+ "version": "0.1.100",
5
+ "type": "module",
6
+ "main": "./dist/index.js",
7
+ "author": "jochen.kuehner@gmx.de",
8
+ "license": "MIT",
9
+ "scripts": {
10
+ "tsc": "tsc",
11
+ "build": "tsc",
12
+ "prepublishOnly": "npm run build"
13
+ },
14
+ "dependencies": {
15
+ "@node-projects/base-custom-webcomponent": ">=0.23.0"
16
+ },
17
+ "devDependencies": {
18
+ "mdn-data": "^2.4.2"
19
+ },
20
+ "repository": {
21
+ "type": "git",
22
+ "url": "git+https://github.com/node-projects/web-component-designer.git"
23
+ }
24
+ }
package/dist/elements/services/placementService/DefaultPlacementService copy.d.ts DELETED
@@ -1,19 +0,0 @@
1
- import type { IPoint } from '../../../interfaces/IPoint.js';
2
- import type { IPlacementService } from './IPlacementService.js';
3
- import type { IDesignItem } from '../../item/IDesignItem.js';
4
- import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
5
- export declare class DefaultPlacementService implements IPlacementService {
6
- serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
7
- isEnterableContainer(container: IDesignItem): boolean;
8
- canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
9
- canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
10
- getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
11
- private calculateTrack;
12
- placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;
13
- startPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
14
- place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
15
- moveElements(designItems: IDesignItem[], position: IPoint, absolute: boolean): void;
16
- enterContainer(container: IDesignItem, items: IDesignItem[]): void;
17
- leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
18
- finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
19
- }
package/dist/elements/services/placementService/DefaultPlacementService copy.js DELETED
@@ -1,151 +0,0 @@
1
- import { DomConverter } from '../../widgets/designerView/DomConverter.js';
2
- import { combineTransforms, extractTranslationFromDOMMatrix, getResultingTransformationBetweenElementAndAllAncestors } from '../../helper/TransformHelper.js';
3
- import { filterChildPlaceItems, getDesignItemCurrentPos, placeDesignItem } from '../../helper/LayoutHelper.js';
4
- import { ExtensionType } from '../../widgets/designerView/extensions/ExtensionType.js';
5
- import { straightenLine } from '../../helper/PathDataPolyfill.js';
6
- export class DefaultPlacementService {
7
- serviceForContainer(container, containerStyle) {
8
- if (containerStyle.display === 'grid' || containerStyle.display === 'inline-grid' ||
9
- containerStyle.display === 'flex' || containerStyle.display === 'inline-flex')
10
- return false;
11
- return true;
12
- }
13
- isEnterableContainer(container) {
14
- if (DomConverter.IsSelfClosingElement(container.element.localName))
15
- return false;
16
- if (!container.isRootItem && container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null)
17
- return false;
18
- return true;
19
- }
20
- canEnter(container, items) {
21
- if (!this.isEnterableContainer(container))
22
- return false;
23
- if (!items.every(x => !x.element.contains(container.element) && x !== container))
24
- return false;
25
- return true;
26
- }
27
- canLeave(container, items) {
28
- return true;
29
- }
30
- getElementOffset(container, designItem) {
31
- return container.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(container.element);
32
- }
33
- calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, item) {
34
- let trackX = newPoint.x - startPoint.x;
35
- let trackY = newPoint.y - startPoint.y;
36
- if (!event.ctrlKey) {
37
- if (placementView.alignOnGrid) {
38
- let p = getDesignItemCurrentPos(item, 'position');
39
- p.x = p.x % placementView.gridSize;
40
- p.y = p.y % placementView.gridSize;
41
- trackX = Math.round(trackX / placementView.gridSize) * placementView.gridSize - p.x;
42
- trackY = Math.round(trackY / placementView.gridSize) * placementView.gridSize - p.y;
43
- }
44
- else if (placementView.alignOnSnap) {
45
- let rect = item.element.getBoundingClientRect();
46
- let newPos = placementView.snapLines.snapToPosition({ x: (newPoint.x - offsetInControl.x), y: (newPoint.y - offsetInControl.y) }, { width: rect.width / placementView.scaleFactor, height: rect.height / placementView.scaleFactor }, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
47
- if (newPos.x !== null) {
48
- trackX = newPos.x - Math.round(startPoint.x) + Math.round(offsetInControl.x);
49
- }
50
- else {
51
- trackX = Math.round(trackX);
52
- }
53
- if (newPos.y !== null) {
54
- trackY = newPos.y - Math.round(startPoint.y) + Math.round(offsetInControl.y);
55
- }
56
- else {
57
- trackY = Math.round(trackY);
58
- }
59
- }
60
- }
61
- return { x: trackX, y: trackY };
62
- }
63
- placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
64
- let trackX = newPoint.x;
65
- let trackY = newPoint.y;
66
- if (!event.ctrlKey) {
67
- if (placementView.alignOnGrid) {
68
- trackX = Math.round(trackX / placementView.gridSize) * placementView.gridSize;
69
- trackY = Math.round(trackY / placementView.gridSize) * placementView.gridSize;
70
- }
71
- else if (placementView.alignOnSnap) {
72
- let newPos = placementView.snapLines.snapToPosition({ x: newPoint.x - offsetInControl.x, y: newPoint.y - offsetInControl.y }, null, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
73
- if (newPos.x !== null) {
74
- trackX = newPos.x;
75
- }
76
- else {
77
- trackX = Math.round(trackX);
78
- }
79
- if (newPos.y !== null) {
80
- trackY = newPos.y;
81
- }
82
- else {
83
- trackY = Math.round(trackY);
84
- }
85
- }
86
- }
87
- return { x: trackX, y: trackY };
88
- }
89
- startPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
90
- }
91
- place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
92
- //TODO: this should revert all undo actions while active
93
- //maybe a undo actions returns itself or an id so it could be changed?
94
- let track = this.calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, items[0]);
95
- if (event.shiftKey) {
96
- track = straightenLine({ x: 0, y: 0 }, track, true);
97
- }
98
- let filteredItems = filterChildPlaceItems(items);
99
- for (const designItem of filteredItems) {
100
- const canvas = designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element;
101
- let originalElementAndAllAncestorsMultipliedMatrix = getResultingTransformationBetweenElementAndAllAncestors(designItem.parent.element, canvas, true);
102
- let transformMatrixParentTransformsCompensated = null;
103
- if (originalElementAndAllAncestorsMultipliedMatrix) {
104
- transformMatrixParentTransformsCompensated = new DOMPoint(track.x, track.y, 0, 0).matrixTransform(originalElementAndAllAncestorsMultipliedMatrix.inverse());
105
- }
106
- else {
107
- transformMatrixParentTransformsCompensated = new DOMPoint(track.x, track.y, 0, 0);
108
- }
109
- const translationMatrix = new DOMMatrix().translate(transformMatrixParentTransformsCompensated.x, transformMatrixParentTransformsCompensated.y);
110
- combineTransforms(designItem.element, designItem.getStyle('transform'), translationMatrix.toString());
111
- }
112
- }
113
- moveElements(designItems, position, absolute) {
114
- //TODO: Check if we set left or right
115
- //TODO: Use CSS units
116
- for (let d of designItems) {
117
- if (position.x)
118
- d.setStyle('left', parseInt(d.element.style.left) - position.x + 'px');
119
- if (position.y)
120
- d.setStyle('top', parseInt(d.element.style.top) - position.y + 'px');
121
- }
122
- designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshExtensions(designItems);
123
- }
124
- enterContainer(container, items) {
125
- let filterdItems = filterChildPlaceItems(items);
126
- for (let i of filterdItems) {
127
- container.insertChild(i);
128
- if (i.lastContainerSize) {
129
- if (!i.hasStyle('width'))
130
- i.setStyle('width', i.lastContainerSize.width + 'px');
131
- if (!i.hasStyle('height'))
132
- i.setStyle('height', i.lastContainerSize.height + 'px');
133
- }
134
- }
135
- }
136
- leaveContainer(container, items) {
137
- }
138
- finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
139
- let filterdItems = filterChildPlaceItems(items);
140
- for (const designItem of filterdItems) {
141
- let translation = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.element.style.transform));
142
- const stylesMapOffset = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.getStyle('transform') ?? ''));
143
- designItem.element.style.transform = designItem.getStyle('transform') ?? '';
144
- let track = { x: translation.x, y: translation.y };
145
- placeDesignItem(container, designItem, { x: track.x - stylesMapOffset.x, y: track.y - stylesMapOffset.y }, 'position');
146
- }
147
- for (const item of items) {
148
- placementView.extensionManager.removeExtension(item, ExtensionType.Placement);
149
- }
150
- }
151
- }
package/dist/elements/services/propertiesService/services/MathMllElementsPropertiesService.d.ts DELETED
@@ -1,21 +0,0 @@
1
- import { IProperty } from '../IProperty.js';
2
- import { IDesignItem } from '../../../item/IDesignItem.js';
3
- import { CommonPropertiesService } from './CommonPropertiesService.js';
4
- import { RefreshMode } from '../IPropertiesService.js';
5
- import { IPropertyGroup } from '../IPropertyGroup.js';
6
- export declare class NativeElementsPropertiesService extends CommonPropertiesService {
7
- private inputProperties;
8
- private textareaProperties;
9
- private selectProperties;
10
- private buttonProperties;
11
- private anchorProperties;
12
- private divProperties;
13
- private imgProperties;
14
- private iframeProperties;
15
- private formElementProperties;
16
- name: string;
17
- getRefreshMode(designItem: IDesignItem): RefreshMode;
18
- isHandledElement(designItem: IDesignItem): boolean;
19
- getProperty(designItem: IDesignItem, name: string): IProperty;
20
- getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
21
- }
package/dist/elements/services/propertiesService/services/MathMllElementsPropertiesService.js DELETED
@@ -1,243 +0,0 @@
1
- import { CommonPropertiesService } from './CommonPropertiesService.js';
2
- import { PropertyType } from '../PropertyType.js';
3
- import { RefreshMode } from '../IPropertiesService.js';
4
- export class NativeElementsPropertiesService extends CommonPropertiesService {
5
- inputProperties = [
6
- {
7
- name: "type",
8
- type: "list",
9
- values: ["text", "number", "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "password", "radio", "range", "reset", "search", "submit", "tel", "time", "url", "week"],
10
- service: this,
11
- defaultValue: "text",
12
- propertyType: PropertyType.propertyAndAttribute
13
- }, {
14
- name: "value",
15
- type: "string",
16
- service: this,
17
- propertyType: PropertyType.propertyAndAttribute
18
- }, {
19
- name: "placeholder",
20
- type: "string",
21
- service: this,
22
- propertyType: PropertyType.propertyAndAttribute
23
- }, {
24
- name: "checked",
25
- type: "boolean",
26
- service: this,
27
- propertyType: PropertyType.propertyAndAttribute
28
- }, {
29
- name: "min",
30
- type: "number",
31
- service: this,
32
- propertyType: PropertyType.propertyAndAttribute
33
- }, {
34
- name: "max",
35
- type: "number",
36
- service: this,
37
- propertyType: PropertyType.propertyAndAttribute
38
- }, {
39
- name: "readonly",
40
- type: "boolean",
41
- service: this,
42
- propertyType: PropertyType.propertyAndAttribute
43
- }, {
44
- name: "valueAsDate",
45
- type: "string",
46
- service: this,
47
- propertyType: PropertyType.property
48
- },
49
- {
50
- name: "valueAsNumber",
51
- type: "string",
52
- service: this,
53
- propertyType: PropertyType.property
54
- }
55
- ];
56
- textareaProperties = [
57
- {
58
- name: "value",
59
- type: "string",
60
- service: this,
61
- propertyType: PropertyType.property
62
- },
63
- {
64
- name: "placeholder",
65
- type: "string",
66
- service: this,
67
- propertyType: PropertyType.propertyAndAttribute
68
- }, {
69
- name: "maxlength",
70
- type: "number",
71
- service: this,
72
- propertyType: PropertyType.propertyAndAttribute
73
- }, {
74
- name: "cols",
75
- type: "number",
76
- service: this,
77
- propertyType: PropertyType.propertyAndAttribute
78
- }, {
79
- name: "rows",
80
- type: "number",
81
- service: this,
82
- propertyType: PropertyType.propertyAndAttribute
83
- }, {
84
- name: "readonly",
85
- type: "boolean",
86
- service: this,
87
- propertyType: PropertyType.propertyAndAttribute
88
- }, {
89
- name: "resize",
90
- type: "list",
91
- values: ["both", "none", "horizontal", "vertical"],
92
- service: this,
93
- propertyType: PropertyType.cssValue
94
- }
95
- ];
96
- selectProperties = [
97
- {
98
- name: "value",
99
- type: "string",
100
- service: this,
101
- propertyType: PropertyType.property
102
- },
103
- {
104
- name: "size",
105
- type: "number",
106
- service: this,
107
- propertyType: PropertyType.propertyAndAttribute
108
- }, {
109
- name: "multiple",
110
- type: "boolean",
111
- service: this,
112
- propertyType: PropertyType.propertyAndAttribute
113
- }
114
- ];
115
- buttonProperties = [
116
- {
117
- name: "type",
118
- type: "list",
119
- values: ["button", "submit", "reset"],
120
- service: this,
121
- defaultValue: "button",
122
- propertyType: PropertyType.propertyAndAttribute
123
- }, {
124
- name: "value",
125
- type: "string",
126
- service: this,
127
- propertyType: PropertyType.propertyAndAttribute
128
- }
129
- ];
130
- anchorProperties = [
131
- {
132
- name: "href",
133
- type: "string",
134
- service: this,
135
- propertyType: PropertyType.propertyAndAttribute
136
- }
137
- ];
138
- divProperties = [
139
- {
140
- name: "title",
141
- type: "string",
142
- service: this,
143
- propertyType: PropertyType.propertyAndAttribute
144
- }
145
- ];
146
- imgProperties = [
147
- {
148
- name: "src",
149
- type: "string",
150
- service: this,
151
- propertyType: PropertyType.propertyAndAttribute
152
- }
153
- ];
154
- iframeProperties = [
155
- {
156
- name: "src",
157
- type: "string",
158
- service: this,
159
- propertyType: PropertyType.propertyAndAttribute
160
- }
161
- ];
162
- formElementProperties = [
163
- {
164
- name: "autofocus",
165
- type: "boolean",
166
- service: this,
167
- propertyType: PropertyType.propertyAndAttribute
168
- },
169
- {
170
- name: "disabled",
171
- type: "boolean",
172
- service: this,
173
- propertyType: PropertyType.propertyAndAttribute
174
- },
175
- {
176
- name: "required",
177
- type: "boolean",
178
- service: this,
179
- propertyType: PropertyType.propertyAndAttribute
180
- }
181
- ];
182
- name = "native";
183
- getRefreshMode(designItem) {
184
- return RefreshMode.full;
185
- }
186
- isHandledElement(designItem) {
187
- switch (designItem.element.localName) {
188
- case 'input':
189
- case 'textarea':
190
- case 'select':
191
- case 'button':
192
- case 'a':
193
- case 'div':
194
- case 'span':
195
- case 'br':
196
- case 'img':
197
- case 'iframe':
198
- case 'h1':
199
- case 'h2':
200
- case 'h3':
201
- case 'h4':
202
- case 'h5':
203
- case 'h6':
204
- case 'p':
205
- return true;
206
- }
207
- return false;
208
- }
209
- getProperty(designItem, name) {
210
- return this.getProperties(designItem).find(x => x.name == name);
211
- }
212
- getProperties(designItem) {
213
- if (!this.isHandledElement(designItem))
214
- return null;
215
- switch (designItem.element.localName) {
216
- case 'input':
217
- return [...this.inputProperties, ...this.formElementProperties];
218
- case 'textarea':
219
- return [...this.textareaProperties, ...this.formElementProperties];
220
- case 'select':
221
- return [...this.selectProperties, ...this.formElementProperties];
222
- case 'button':
223
- return [...this.buttonProperties, ...this.formElementProperties];
224
- case 'a':
225
- return this.anchorProperties;
226
- case 'div':
227
- return this.divProperties;
228
- case 'img':
229
- return this.imgProperties;
230
- case 'iframe':
231
- return this.iframeProperties;
232
- case 'h1':
233
- case 'h2':
234
- case 'h3':
235
- case 'h4':
236
- case 'h5':
237
- case 'h6':
238
- case 'p':
239
- return [];
240
- }
241
- return null;
242
- }
243
- }
package/dist/elements/services/propertiesService/services/NativeElementsPropertiesService copy.d.ts DELETED
@@ -1,21 +0,0 @@
1
- import { IProperty } from '../IProperty.js';
2
- import { IDesignItem } from '../../../item/IDesignItem.js';
3
- import { CommonPropertiesService } from './CommonPropertiesService.js';
4
- import { RefreshMode } from '../IPropertiesService.js';
5
- import { IPropertyGroup } from '../IPropertyGroup.js';
6
- export declare class NativeElementsPropertiesService extends CommonPropertiesService {
7
- private inputProperties;
8
- private textareaProperties;
9
- private selectProperties;
10
- private buttonProperties;
11
- private anchorProperties;
12
- private divProperties;
13
- private imgProperties;
14
- private iframeProperties;
15
- private formElementProperties;
16
- name: string;
17
- getRefreshMode(designItem: IDesignItem): RefreshMode;
18
- isHandledElement(designItem: IDesignItem): boolean;
19
- getProperty(designItem: IDesignItem, name: string): IProperty;
20
- getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
21
- }
package/dist/elements/services/propertiesService/services/NativeElementsPropertiesService copy.js DELETED
@@ -1,243 +0,0 @@
1
- import { CommonPropertiesService } from './CommonPropertiesService.js';
2
- import { PropertyType } from '../PropertyType.js';
3
- import { RefreshMode } from '../IPropertiesService.js';
4
- export class NativeElementsPropertiesService extends CommonPropertiesService {
5
- inputProperties = [
6
- {
7
- name: "type",
8
- type: "list",
9
- values: ["text", "number", "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "password", "radio", "range", "reset", "search", "submit", "tel", "time", "url", "week"],
10
- service: this,
11
- defaultValue: "text",
12
- propertyType: PropertyType.propertyAndAttribute
13
- }, {
14
- name: "value",
15
- type: "string",
16
- service: this,
17
- propertyType: PropertyType.propertyAndAttribute
18
- }, {
19
- name: "placeholder",
20
- type: "string",
21
- service: this,
22
- propertyType: PropertyType.propertyAndAttribute
23
- }, {
24
- name: "checked",
25
- type: "boolean",
26
- service: this,
27
- propertyType: PropertyType.propertyAndAttribute
28
- }, {
29
- name: "min",
30
- type: "number",
31
- service: this,
32
- propertyType: PropertyType.propertyAndAttribute
33
- }, {
34
- name: "max",
35
- type: "number",
36
- service: this,
37
- propertyType: PropertyType.propertyAndAttribute
38
- }, {
39
- name: "readonly",
40
- type: "boolean",
41
- service: this,
42
- propertyType: PropertyType.propertyAndAttribute
43
- }, {
44
- name: "valueAsDate",
45
- type: "string",
46
- service: this,
47
- propertyType: PropertyType.property
48
- },
49
- {
50
- name: "valueAsNumber",
51
- type: "string",
52
- service: this,
53
- propertyType: PropertyType.property
54
- }
55
- ];
56
- textareaProperties = [
57
- {
58
- name: "value",
59
- type: "string",
60
- service: this,
61
- propertyType: PropertyType.property
62
- },
63
- {
64
- name: "placeholder",
65
- type: "string",
66
- service: this,
67
- propertyType: PropertyType.propertyAndAttribute
68
- }, {
69
- name: "maxlength",
70
- type: "number",
71
- service: this,
72
- propertyType: PropertyType.propertyAndAttribute
73
- }, {
74
- name: "cols",
75
- type: "number",
76
- service: this,
77
- propertyType: PropertyType.propertyAndAttribute
78
- }, {
79
- name: "rows",
80
- type: "number",
81
- service: this,
82
- propertyType: PropertyType.propertyAndAttribute
83
- }, {
84
- name: "readonly",
85
- type: "boolean",
86
- service: this,
87
- propertyType: PropertyType.propertyAndAttribute
88
- }, {
89
- name: "resize",
90
- type: "list",
91
- values: ["both", "none", "horizontal", "vertical"],
92
- service: this,
93
- propertyType: PropertyType.cssValue
94
- }
95
- ];
96
- selectProperties = [
97
- {
98
- name: "value",
99
- type: "string",
100
- service: this,
101
- propertyType: PropertyType.property
102
- },
103
- {
104
- name: "size",
105
- type: "number",
106
- service: this,
107
- propertyType: PropertyType.propertyAndAttribute
108
- }, {
109
- name: "multiple",
110
- type: "boolean",
111
- service: this,
112
- propertyType: PropertyType.propertyAndAttribute
113
- }
114
- ];
115
- buttonProperties = [
116
- {
117
- name: "type",
118
- type: "list",
119
- values: ["button", "submit", "reset"],
120
- service: this,
121
- defaultValue: "button",
122
- propertyType: PropertyType.propertyAndAttribute
123
- }, {
124
- name: "value",
125
- type: "string",
126
- service: this,
127
- propertyType: PropertyType.propertyAndAttribute
128
- }
129
- ];
130
- anchorProperties = [
131
- {
132
- name: "href",
133
- type: "string",
134
- service: this,
135
- propertyType: PropertyType.propertyAndAttribute
136
- }
137
- ];
138
- divProperties = [
139
- {
140
- name: "title",
141
- type: "string",
142
- service: this,
143
- propertyType: PropertyType.propertyAndAttribute
144
- }
145
- ];
146
- imgProperties = [
147
- {
148
- name: "src",
149
- type: "string",
150
- service: this,
151
- propertyType: PropertyType.propertyAndAttribute
152
- }
153
- ];
154
- iframeProperties = [
155
- {
156
- name: "src",
157
- type: "string",
158
- service: this,
159
- propertyType: PropertyType.propertyAndAttribute
160
- }
161
- ];
162
- formElementProperties = [
163
- {
164
- name: "autofocus",
165
- type: "boolean",
166
- service: this,
167
- propertyType: PropertyType.propertyAndAttribute
168
- },
169
- {
170
- name: "disabled",
171
- type: "boolean",
172
- service: this,
173
- propertyType: PropertyType.propertyAndAttribute
174
- },
175
- {
176
- name: "required",
177
- type: "boolean",
178
- service: this,
179
- propertyType: PropertyType.propertyAndAttribute
180
- }
181
- ];
182
- name = "native";
183
- getRefreshMode(designItem) {
184
- return RefreshMode.full;
185
- }
186
- isHandledElement(designItem) {
187
- switch (designItem.element.localName) {
188
- case 'input':
189
- case 'textarea':
190
- case 'select':
191
- case 'button':
192
- case 'a':
193
- case 'div':
194
- case 'span':
195
- case 'br':
196
- case 'img':
197
- case 'iframe':
198
- case 'h1':
199
- case 'h2':
200
- case 'h3':
201
- case 'h4':
202
- case 'h5':
203
- case 'h6':
204
- case 'p':
205
- return true;
206
- }
207
- return false;
208
- }
209
- getProperty(designItem, name) {
210
- return this.getProperties(designItem).find(x => x.name == name);
211
- }
212
- getProperties(designItem) {
213
- if (!this.isHandledElement(designItem))
214
- return null;
215
- switch (designItem.element.localName) {
216
- case 'input':
217
- return [...this.inputProperties, ...this.formElementProperties];
218
- case 'textarea':
219
- return [...this.textareaProperties, ...this.formElementProperties];
220
- case 'select':
221
- return [...this.selectProperties, ...this.formElementProperties];
222
- case 'button':
223
- return [...this.buttonProperties, ...this.formElementProperties];
224
- case 'a':
225
- return this.anchorProperties;
226
- case 'div':
227
- return this.divProperties;
228
- case 'img':
229
- return this.imgProperties;
230
- case 'iframe':
231
- return this.iframeProperties;
232
- case 'h1':
233
- case 'h2':
234
- case 'h3':
235
- case 'h4':
236
- case 'h5':
237
- case 'h6':
238
- case 'p':
239
- return [];
240
- }
241
- return null;
242
- }
243
- }
package/dist/elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons copy.d.ts DELETED
@@ -1,5 +0,0 @@
1
- import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
2
- export declare const enableStylesheetService = "enableStylesheetService";
3
- export declare class StylesheetServiceDesignViewConfigButtons extends AbstractDesignViewConfigButton {
4
- constructor();
5
- }
package/dist/elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons copy.js DELETED
@@ -1,7 +0,0 @@
1
- import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
2
- export const enableStylesheetService = 'enableStylesheetService';
3
- export class StylesheetServiceDesignViewConfigButtons extends AbstractDesignViewConfigButton {
4
- constructor() {
5
- super(enableStylesheetService, "ss", "modify Stylesheet");
6
- }
7
- }
package/dist/elements/widgets/designerView/tools/toolBar/popups/PointerToolPopup copy.js DELETED
@@ -1,49 +0,0 @@
1
- import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
2
- import { assetsPath } from "../../../../../../Constants.js";
3
- export class PointerToolPopup extends BaseCustomWebComponentConstructorAppend {
4
- static style = css `
5
- .container {
6
- width: 120px;
7
- min-height: 100px;
8
- color: white;
9
- background-color: rgb(64, 64, 64);
10
- border: 1px solid black;
11
- }
12
- header {
13
- text-align: center;
14
- }
15
- .tool {
16
- height: 32px;
17
- width: 32px;
18
- background-color: rgb(255, 255, 255);
19
- background-size: 65%;
20
- background-repeat: no-repeat;
21
- background-position: center center;
22
- flex-shrink: 0;
23
- border-bottom: 1px solid black;
24
- }
25
- .tools {
26
- display: flex;
27
- flex-wrap: wrap;
28
- margin-bottom: 5px;
29
- gap: 3px;
30
- }`;
31
- static template = html `
32
- <div class="container">
33
- <header><h2 id="title" style="margin: 0;">Selection</h2></header>
34
- <main id="content-area">
35
- <div class="tools">
36
- <div class="tool" data-command="setTool" data-command-parameter="RectangleSelector" title="Rectangle Selector" style="background-image: url('${assetsPath}images/tools/SelectRectTool.svg');"></div>
37
- <div class="tool" data-command="setTool" data-command-parameter="MagicWandSelector" title="Magic Wand Selector" style="background-image: url('${assetsPath}images/tools/MagicWandTool.svg');"></div>
38
- </div>
39
- </main>
40
- </div>`;
41
- constructor() {
42
- super();
43
- for (let e of [...this.shadowRoot.querySelectorAll("div.tool")]) {
44
- let div = e;
45
- div.onclick = () => this.getRootNode().host.setTool(div.dataset['commandParameter']);
46
- }
47
- }
48
- }
49
- customElements.define('node-projects-designer-selection-tool-popup', SelectionToolPopup);
package/dist/elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup copy.d.ts DELETED
@@ -1,6 +0,0 @@
1
- import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
2
- export declare class SelectionToolPopup extends BaseCustomWebComponentConstructorAppend {
3
- static style: CSSStyleSheet;
4
- static template: HTMLTemplateElement;
5
- constructor();
6
- }
package/dist/elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup copy.js DELETED
@@ -1,49 +0,0 @@
1
- import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
2
- import { assetsPath } from "../../../../../../Constants.js";
3
- export class SelectionToolPopup extends BaseCustomWebComponentConstructorAppend {
4
- static style = css `
5
- .container {
6
- width: 120px;
7
- min-height: 100px;
8
- color: white;
9
- background-color: rgb(64, 64, 64);
10
- border: 1px solid black;
11
- }
12
- header {
13
- text-align: center;
14
- }
15
- .tool {
16
- height: 32px;
17
- width: 32px;
18
- background-color: rgb(255, 255, 255);
19
- background-size: 65%;
20
- background-repeat: no-repeat;
21
- background-position: center center;
22
- flex-shrink: 0;
23
- border-bottom: 1px solid black;
24
- }
25
- .tools {
26
- display: flex;
27
- flex-wrap: wrap;
28
- margin-bottom: 5px;
29
- gap: 3px;
30
- }`;
31
- static template = html `
32
- <div class="container">
33
- <header><h2 id="title" style="margin: 0;">Selection</h2></header>
34
- <main id="content-area">
35
- <div class="tools">
36
- <div class="tool" data-command="setTool" data-command-parameter="RectangleSelector" title="Rectangle Selector" style="background-image: url('${assetsPath}images/tools/SelectRectTool.svg');"></div>
37
- <div class="tool" data-command="setTool" data-command-parameter="MagicWandSelector" title="Magic Wand Selector" style="background-image: url('${assetsPath}images/tools/MagicWandTool.svg');"></div>
38
- </div>
39
- </main>
40
- </div>`;
41
- constructor() {
42
- super();
43
- for (let e of [...this.shadowRoot.querySelectorAll("div.tool")]) {
44
- let div = e;
45
- div.onclick = () => this.getRootNode().host.setTool(div.dataset['commandParameter']);
46
- }
47
- }
48
- }
49
- customElements.define('node-projects-designer-selection-tool-popup', SelectionToolPopup);