@node-projects/web-component-designer 0.0.239 → 0.0.241
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/ACKNOWLEDGMENTS +3 -1
- package/dist/elements/widgets/codeView/code-view-code-mirror.js +3 -3
- package/dist/elements/widgets/debugView/debug-view.d.ts +15 -0
- package/dist/elements/widgets/debugView/debug-view.js +163 -0
- package/dist/elements/widgets/designerView/designerCanvas.js +5 -5
- package/dist/index.d.ts +3 -0
- package/dist/index.js +2 -0
- package/package.json +3 -4
package/ACKNOWLEDGMENTS
CHANGED
|
@@ -10,4 +10,6 @@
|
|
|
10
10
|
- Levi Cole for parts of the cssUnits conversion code
|
|
11
11
|
https://stackoverflow.com/a/66569574/579623
|
|
12
12
|
- Domi for text-width code
|
|
13
|
-
https://stackoverflow.com/a/21015393
|
|
13
|
+
https://stackoverflow.com/a/21015393
|
|
14
|
+
- gwwar for getColsestStackingContext
|
|
15
|
+
https://github.com/gwwar/z-context
|
|
@@ -14,7 +14,7 @@ export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
|
|
|
14
14
|
width: 100%;
|
|
15
15
|
}`;
|
|
16
16
|
static template = html `
|
|
17
|
-
<div style="width: 100%; height: 100%;">
|
|
17
|
+
<div style="width: 100%; height: 100%; overflow: auto;">
|
|
18
18
|
<div id="textarea"></div>
|
|
19
19
|
</div>`;
|
|
20
20
|
constructor() {
|
|
@@ -22,10 +22,10 @@ export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
|
|
|
22
22
|
//@ts-ignore
|
|
23
23
|
if (window.importShim)
|
|
24
24
|
//@ts-ignore
|
|
25
|
-
importShim("
|
|
25
|
+
importShim("codemirror/lib/codemirror.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
|
|
26
26
|
else
|
|
27
27
|
//@ts-ignore
|
|
28
|
-
import("
|
|
28
|
+
import("codemirror/lib/codemirror.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
|
|
29
29
|
this.style.display = 'block';
|
|
30
30
|
this._editor = this._getDomElement('textarea');
|
|
31
31
|
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
|
|
2
|
+
import { IDesignItem } from "../../item/IDesignItem.js";
|
|
3
|
+
export declare class DebugView extends BaseCustomWebComponentConstructorAppend {
|
|
4
|
+
static readonly template: HTMLTemplateElement;
|
|
5
|
+
static readonly style: CSSStyleSheet;
|
|
6
|
+
private _ready;
|
|
7
|
+
computedStyle: CSSStyleDeclaration;
|
|
8
|
+
createsStackingContext: boolean;
|
|
9
|
+
createsStackingContextReason: any;
|
|
10
|
+
parentStackingContext: any;
|
|
11
|
+
selectedElementOffsetParent: Element;
|
|
12
|
+
constructor();
|
|
13
|
+
ready(): void;
|
|
14
|
+
update(designItem: IDesignItem): void;
|
|
15
|
+
}
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
|
|
2
|
+
function generateSelector(element) {
|
|
3
|
+
let selector, tag = element.nodeName.toLowerCase();
|
|
4
|
+
if (element.id) {
|
|
5
|
+
selector = '#' + element.getAttribute('id');
|
|
6
|
+
}
|
|
7
|
+
else if (element.getAttribute('class')) {
|
|
8
|
+
selector = '.' + element.getAttribute('class').split(' ').join('.');
|
|
9
|
+
}
|
|
10
|
+
return selector ? tag + selector : tag;
|
|
11
|
+
}
|
|
12
|
+
const getClosestStackingContext = function (node) {
|
|
13
|
+
// the root element (HTML).
|
|
14
|
+
if (!node || node.nodeName === 'HTML') {
|
|
15
|
+
return { node: document.documentElement, reason: 'root' };
|
|
16
|
+
}
|
|
17
|
+
// handle shadow root elements.
|
|
18
|
+
if (node.nodeName === '#document-fragment') {
|
|
19
|
+
return getClosestStackingContext(node.host);
|
|
20
|
+
}
|
|
21
|
+
const computedStyle = getComputedStyle(node);
|
|
22
|
+
// position: fixed or sticky.
|
|
23
|
+
if (computedStyle.position === 'fixed' || computedStyle.position === 'sticky') {
|
|
24
|
+
return { node: node, reason: `position: ${computedStyle.position}` };
|
|
25
|
+
}
|
|
26
|
+
// positioned (absolutely or relatively) with a z-index value other than "auto".
|
|
27
|
+
if (computedStyle.zIndex !== 'auto' && computedStyle.position !== 'static') {
|
|
28
|
+
return { node: node, reason: `position: ${computedStyle.position}; z-index: ${computedStyle.zIndex}` };
|
|
29
|
+
}
|
|
30
|
+
// elements with an opacity value less than 1.
|
|
31
|
+
if (computedStyle.opacity !== '1') {
|
|
32
|
+
return { node: node, reason: `opacity: ${computedStyle.opacity}` };
|
|
33
|
+
}
|
|
34
|
+
// elements with a transform value other than "none".
|
|
35
|
+
if (computedStyle.transform !== 'none') {
|
|
36
|
+
return { node: node, reason: `transform: ${computedStyle.transform}` };
|
|
37
|
+
}
|
|
38
|
+
// elements with a mix-blend-mode value other than "normal".
|
|
39
|
+
if (computedStyle.mixBlendMode !== 'normal') {
|
|
40
|
+
return { node: node, reason: `mixBlendMode: ${computedStyle.mixBlendMode}` };
|
|
41
|
+
}
|
|
42
|
+
// elements with a filter value other than "none".
|
|
43
|
+
if (computedStyle.filter !== 'none') {
|
|
44
|
+
return { node: node, reason: `filter: ${computedStyle.filter}` };
|
|
45
|
+
}
|
|
46
|
+
// elements with a perspective value other than "none".
|
|
47
|
+
if (computedStyle.perspective !== 'none') {
|
|
48
|
+
return { node: node, reason: `perspective: ${computedStyle.perspective}` };
|
|
49
|
+
}
|
|
50
|
+
// elements with a clip-path value other than "none".
|
|
51
|
+
if (computedStyle.clipPath !== 'none') {
|
|
52
|
+
return { node: node, reason: `clip-path: ${computedStyle.clipPath} ` };
|
|
53
|
+
}
|
|
54
|
+
// elements with a mask value other than "none".
|
|
55
|
+
const mask = computedStyle.mask || computedStyle.webkitMask;
|
|
56
|
+
if (mask !== 'none' && mask !== undefined) {
|
|
57
|
+
return { node: node, reason: `mask: ${mask}` };
|
|
58
|
+
}
|
|
59
|
+
// elements with a mask-image value other than "none".
|
|
60
|
+
const maskImage = computedStyle.maskImage || computedStyle.webkitMaskImage;
|
|
61
|
+
if (maskImage !== 'none' && maskImage !== undefined) {
|
|
62
|
+
return { node: node, reason: `mask-image: ${maskImage}` };
|
|
63
|
+
}
|
|
64
|
+
// elements with a mask-border value other than "none".
|
|
65
|
+
//@ts-ignore
|
|
66
|
+
const maskBorder = computedStyle.maskBorder || computedStyle.webkitMaskBorder;
|
|
67
|
+
if (maskBorder !== 'none' && maskBorder !== undefined) {
|
|
68
|
+
return { node: node, reason: `mask-border: ${maskBorder}` };
|
|
69
|
+
}
|
|
70
|
+
// elements with isolation set to "isolate".
|
|
71
|
+
if (computedStyle.isolation === 'isolate') {
|
|
72
|
+
return { node: node, reason: `isolation: ${computedStyle.isolation}` };
|
|
73
|
+
}
|
|
74
|
+
// transform or opacity in will-change even if you don't specify values for these attributes directly.
|
|
75
|
+
if (computedStyle.willChange === 'transform' || computedStyle.willChange === 'opacity') {
|
|
76
|
+
return { node: node, reason: `willChange: ${computedStyle.willChange}` };
|
|
77
|
+
}
|
|
78
|
+
// an item with a z-index value other than "auto".
|
|
79
|
+
if (computedStyle.zIndex !== 'auto') {
|
|
80
|
+
const parentStyle = getComputedStyle(node.parentNode);
|
|
81
|
+
// with a flex|inline-flex parent.
|
|
82
|
+
if (parentStyle.display === 'flex' || parentStyle.display === 'inline-flex') {
|
|
83
|
+
return {
|
|
84
|
+
node: node,
|
|
85
|
+
reason: `flex-item; z-index: ${computedStyle.zIndex}`,
|
|
86
|
+
};
|
|
87
|
+
// with a grid parent.
|
|
88
|
+
}
|
|
89
|
+
else if (parentStyle.grid !== 'none / none / none / row / auto / auto') {
|
|
90
|
+
return {
|
|
91
|
+
node: node,
|
|
92
|
+
reason: `child of grid container; z-index: ${computedStyle.zIndex}`,
|
|
93
|
+
};
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
// contain with a value of layout, or paint, or a composite value that includes either of them
|
|
97
|
+
const contain = computedStyle.contain;
|
|
98
|
+
if (['layout', 'paint', 'strict', 'content'].indexOf(contain) > -1 ||
|
|
99
|
+
contain.indexOf('paint') > -1 ||
|
|
100
|
+
contain.indexOf('layout') > -1) {
|
|
101
|
+
return {
|
|
102
|
+
node: node,
|
|
103
|
+
reason: `contain: ${contain}`,
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
return getClosestStackingContext(node.parentNode);
|
|
107
|
+
};
|
|
108
|
+
export class DebugView extends BaseCustomWebComponentConstructorAppend {
|
|
109
|
+
static template = html `
|
|
110
|
+
<div>
|
|
111
|
+
<table>
|
|
112
|
+
<tr><td colspan="2">Styling</td></tr>
|
|
113
|
+
<tr><td>display</td><td>[[this.computedStyle.display]]</td></tr>
|
|
114
|
+
<tr><td>position</td><td>[[this.computedStyle.position]]</td></tr>
|
|
115
|
+
<tr><td>visibility</td><td>[[this.computedStyle.visibity]]</td></tr>
|
|
116
|
+
<tr><td>pointerEvents</td><td>[[this.computedStyle.pointerEvents]]</td></tr>
|
|
117
|
+
<tr><td>zIndex</td><td>[[this.computedStyle.zIndex]]</td></tr>
|
|
118
|
+
<tr><td colspan="2">Context</td></tr>
|
|
119
|
+
<tr><td>offsetParent</td><td>[[this.selectedElementOffsetParent]]</td></tr>
|
|
120
|
+
<tr><td>createsStackingContext</td><td>[[this.createsStackingContext]]</td></tr>
|
|
121
|
+
<tr><td>stackingContextReason</td><td>[[this.createsStackingContextReason]]</td></tr>
|
|
122
|
+
<tr><td>stackingContextParent</td><td>[[this.parentStackingContext]]</td></tr>
|
|
123
|
+
</table>
|
|
124
|
+
</div>
|
|
125
|
+
`;
|
|
126
|
+
static style = css ``;
|
|
127
|
+
_ready;
|
|
128
|
+
computedStyle;
|
|
129
|
+
createsStackingContext;
|
|
130
|
+
createsStackingContextReason;
|
|
131
|
+
parentStackingContext;
|
|
132
|
+
selectedElementOffsetParent;
|
|
133
|
+
constructor() {
|
|
134
|
+
super();
|
|
135
|
+
this._restoreCachedInititalValues();
|
|
136
|
+
}
|
|
137
|
+
ready() {
|
|
138
|
+
this._parseAttributesToProperties();
|
|
139
|
+
this._bindingsParse();
|
|
140
|
+
this._ready = true;
|
|
141
|
+
}
|
|
142
|
+
update(designItem) {
|
|
143
|
+
if (this._ready) {
|
|
144
|
+
requestAnimationFrame(() => {
|
|
145
|
+
let element = designItem.element;
|
|
146
|
+
this.computedStyle = getComputedStyle(designItem.element);
|
|
147
|
+
this.selectedElementOffsetParent = generateSelector(designItem.element.offsetParent);
|
|
148
|
+
if (element && element.nodeType === 1) {
|
|
149
|
+
const closest = getClosestStackingContext(element);
|
|
150
|
+
this.createsStackingContext = element === closest.node;
|
|
151
|
+
this.createsStackingContextReason = this.createsStackingContext ? closest.reason : 'not a stacking context';
|
|
152
|
+
let parentContext = closest.node;
|
|
153
|
+
if (this.createsStackingContext && element.nodeName !== 'HTML') {
|
|
154
|
+
parentContext = getClosestStackingContext(element.parentNode).node;
|
|
155
|
+
}
|
|
156
|
+
this.parentStackingContext = generateSelector(parentContext);
|
|
157
|
+
}
|
|
158
|
+
this._bindingsRefresh();
|
|
159
|
+
});
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
customElements.define('node-projects-debug-view', DebugView);
|
|
@@ -233,7 +233,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
|
|
|
233
233
|
static template = html `
|
|
234
234
|
<div style="display: flex;flex-direction: column;width: 100%;height: 100%; margin: 0 !important; padding: 0 !important; border: none !important;">
|
|
235
235
|
<div style="width: 100%;height: 100%; margin: 0 !important; padding: 0 !important; border: none !important;">
|
|
236
|
-
<div id="node-projects-designer-canvas-outercanvas2" style="width:100%;height:100%;position:relative; margin: 0 !important; padding: 0 !important; border: none !important;">
|
|
236
|
+
<div id="node-projects-designer-canvas-outercanvas2" style="width:100%;height:100%;position:relative; margin: 0 !important; padding: 0 !important; border: none !important; isolation: isolate !important;">
|
|
237
237
|
<div id="node-projects-designer-canvas-canvasContainer"
|
|
238
238
|
style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;user-select: none; margin: 0 !important; padding: 0 !important; border: none !important;">
|
|
239
239
|
<div id="node-projects-designer-canvas-canvas" part="canvas" style=" margin: 0 !important; padding: 0 !important; border: none !important;"></div>
|
|
@@ -872,13 +872,13 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
|
|
|
872
872
|
{
|
|
873
873
|
let offset = { x: 0, y: 0 };
|
|
874
874
|
if (event.key == 'ArrowDown')
|
|
875
|
-
offset.y = moveOffset;
|
|
876
|
-
if (event.key == 'ArrowUp')
|
|
877
875
|
offset.y = -moveOffset;
|
|
876
|
+
if (event.key == 'ArrowUp')
|
|
877
|
+
offset.y = moveOffset;
|
|
878
878
|
if (event.key == 'ArrowRight')
|
|
879
|
-
offset.x = moveOffset;
|
|
880
|
-
if (event.key == 'ArrowLeft')
|
|
881
879
|
offset.x = -moveOffset;
|
|
880
|
+
if (event.key == 'ArrowLeft')
|
|
881
|
+
offset.x = moveOffset;
|
|
882
882
|
this.instanceServiceContainer.selectionService.selectedElements.forEach(x => {
|
|
883
883
|
const containerStyle = getComputedStyle(x.parent.element);
|
|
884
884
|
x.serviceContainer.getLastServiceWhere('containerService', y => y.serviceForContainer(x.parent, containerStyle)).moveElements([x], offset, false);
|
package/dist/index.d.ts
CHANGED
|
@@ -9,6 +9,7 @@ export * from "./elements/helper/PathDataPolyfill.js";
|
|
|
9
9
|
export * from "./elements/helper/Screenshot.js";
|
|
10
10
|
export * from "./elements/helper/ClipboardHelper.js";
|
|
11
11
|
export * from "./elements/loader/OldCustomElementsManifestLoader.js";
|
|
12
|
+
export type { ITextWriter } from "./elements/helper/ITextWriter.js";
|
|
12
13
|
export * from "./elements/helper/w3color.js";
|
|
13
14
|
export * from "./elements/helper/contextMenu/ContextMenu.js";
|
|
14
15
|
export * from "./elements/helper/Helper.js";
|
|
@@ -149,6 +150,7 @@ export * from "./elements/widgets/designerView/tools/toolBar/buttons/SelectorToo
|
|
|
149
150
|
export * from "./elements/widgets/designerView/tools/toolBar/buttons/SeperatorToolProvider.js";
|
|
150
151
|
export * from "./elements/widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.js";
|
|
151
152
|
export * from "./elements/widgets/designerView/tools/toolBar/buttons/ZoomToolButtonProvider.js";
|
|
153
|
+
export * from "./elements/widgets/designerView/tools/toolBar/buttons/TransformToolButtonProvider.js";
|
|
152
154
|
export * from "./elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup.js";
|
|
153
155
|
export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbar.js";
|
|
154
156
|
export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbarButton.js";
|
|
@@ -236,6 +238,7 @@ export type { IDesignerPointerExtensionProvider } from "./elements/widgets/desig
|
|
|
236
238
|
export * from "./elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.js";
|
|
237
239
|
export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtension.js";
|
|
238
240
|
export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.js";
|
|
241
|
+
export * from "./elements/widgets/debugView/debug-view.js";
|
|
239
242
|
export * from "./elements/widgets/demoView/demoView.js";
|
|
240
243
|
export * from "./elements/widgets/paletteView/paletteElements.js";
|
|
241
244
|
export * from "./elements/widgets/paletteView/paletteView.js";
|
package/dist/index.js
CHANGED
|
@@ -106,6 +106,7 @@ export * from "./elements/widgets/designerView/tools/toolBar/buttons/SelectorToo
|
|
|
106
106
|
export * from "./elements/widgets/designerView/tools/toolBar/buttons/SeperatorToolProvider.js";
|
|
107
107
|
export * from "./elements/widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.js";
|
|
108
108
|
export * from "./elements/widgets/designerView/tools/toolBar/buttons/ZoomToolButtonProvider.js";
|
|
109
|
+
export * from "./elements/widgets/designerView/tools/toolBar/buttons/TransformToolButtonProvider.js";
|
|
109
110
|
export * from "./elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup.js";
|
|
110
111
|
export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbar.js";
|
|
111
112
|
export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbarButton.js";
|
|
@@ -184,6 +185,7 @@ export * from "./elements/widgets/designerView/extensions/contextMenu/JumpToElem
|
|
|
184
185
|
export * from "./elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.js";
|
|
185
186
|
export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtension.js";
|
|
186
187
|
export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.js";
|
|
188
|
+
export * from "./elements/widgets/debugView/debug-view.js";
|
|
187
189
|
export * from "./elements/widgets/demoView/demoView.js";
|
|
188
190
|
export * from "./elements/widgets/paletteView/paletteElements.js";
|
|
189
191
|
export * from "./elements/widgets/paletteView/paletteView.js";
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"description": "A UI designer for Polymer apps",
|
|
3
3
|
"name": "@node-projects/web-component-designer",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.241",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"author": "",
|
|
@@ -13,8 +13,7 @@
|
|
|
13
13
|
"prepublishOnly": "npm run build"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@node-projects/base-custom-webcomponent": "^0.11.0"
|
|
17
|
-
"construct-style-sheets-polyfill": "^3.1.0"
|
|
16
|
+
"@node-projects/base-custom-webcomponent": "^0.11.0"
|
|
18
17
|
},
|
|
19
18
|
"devDependencies": {
|
|
20
19
|
"@adobe/css-tools": "4.3.0-beta.1",
|
|
@@ -27,7 +26,7 @@
|
|
|
27
26
|
"@types/jquery.fancytree": "0.0.7",
|
|
28
27
|
"@types/node": "^20.3.3",
|
|
29
28
|
"ace-builds": "^1.23.1",
|
|
30
|
-
"codemirror": "^
|
|
29
|
+
"codemirror": "^5.0.0",
|
|
31
30
|
"css-tree": "^2.3.1",
|
|
32
31
|
"esprima-next": "^5.8.4",
|
|
33
32
|
"html2canvas": "*",
|