@node-projects/web-component-designer 0.0.240 → 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 +2 -0
- package/dist/index.js +1 -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";
|
|
@@ -237,6 +238,7 @@ export type { IDesignerPointerExtensionProvider } from "./elements/widgets/desig
|
|
|
237
238
|
export * from "./elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.js";
|
|
238
239
|
export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtension.js";
|
|
239
240
|
export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.js";
|
|
241
|
+
export * from "./elements/widgets/debugView/debug-view.js";
|
|
240
242
|
export * from "./elements/widgets/demoView/demoView.js";
|
|
241
243
|
export * from "./elements/widgets/paletteView/paletteElements.js";
|
|
242
244
|
export * from "./elements/widgets/paletteView/paletteView.js";
|
package/dist/index.js
CHANGED
|
@@ -185,6 +185,7 @@ export * from "./elements/widgets/designerView/extensions/contextMenu/JumpToElem
|
|
|
185
185
|
export * from "./elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.js";
|
|
186
186
|
export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtension.js";
|
|
187
187
|
export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.js";
|
|
188
|
+
export * from "./elements/widgets/debugView/debug-view.js";
|
|
188
189
|
export * from "./elements/widgets/demoView/demoView.js";
|
|
189
190
|
export * from "./elements/widgets/paletteView/paletteElements.js";
|
|
190
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": "*",
|