@node-projects/web-component-designer 0.0.183 → 0.0.185
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/helper/Helper.d.ts +2 -0
- package/dist/elements/helper/Helper.js +10 -0
- package/dist/elements/helper/NpmPackageLoader.d.ts +17 -0
- package/dist/elements/helper/NpmPackageLoader.js +207 -0
- package/dist/elements/services/designerAddons/IDesignerAddonJson.d.ts +6 -0
- package/dist/elements/services/{propertiesService/IProperty copy.js → designerAddons/IDesignerAddonJson.js} +0 -0
- package/dist/elements/services/elementsService/WebcomponentManifestElementsService.js +2 -1
- package/dist/elements/services/manifestParsers/WebcomponentManifestParserService.js +3 -2
- package/dist/elements/services/propertiesService/services/WebcomponentManifestPropertiesService.js +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +4 -4
- package/dist/elements/controls/ThicknessEditor copy.d.ts +0 -33
- package/dist/elements/controls/ThicknessEditor copy.js +0 -145
- package/dist/elements/helper/IndentedTextWriter copy.d.ts +0 -14
- package/dist/elements/helper/IndentedTextWriter copy.js +0 -34
- package/dist/elements/helper/SimpleTextWriter copy.d.ts +0 -12
- package/dist/elements/helper/SimpleTextWriter copy.js +0 -26
- package/dist/elements/services/htmlParserService/AbstractClassElementParserService.d.ts +0 -12
- package/dist/elements/services/htmlParserService/AbstractClassElementParserService.js +0 -120
- package/dist/elements/services/htmlParserService/LitElementParserService copy.d.ts +0 -12
- package/dist/elements/services/htmlParserService/LitElementParserService copy.js +0 -120
- package/dist/elements/services/propertiesService/IProperty copy.d.ts +0 -22
- package/dist/elements/services/propertiesService/IPropertyGroupsService.d.ts +0 -8
- package/dist/elements/services/propertiesService/IPropertyGroupsService.js +0 -1
- package/dist/elements/services/propertiesService/PropertyGroupsService.d.ts +0 -17
- package/dist/elements/services/propertiesService/PropertyGroupsService.js +0 -29
- package/dist/elements/services/propertiesService/propertyEditors/MetricsEditor.d.ts +0 -0
- package/dist/elements/services/propertiesService/propertyEditors/MetricsEditor.js +0 -1
- package/dist/elements/services/propertiesService/services/AbstractBasePropertiesService.d.ts +0 -7
- package/dist/elements/services/propertiesService/services/AbstractBasePropertiesService.js +0 -44
- package/dist/elements/services/propertiesService/services/CssCurrentPropertiesService copy.d.ts +0 -18
- package/dist/elements/services/propertiesService/services/CssCurrentPropertiesService copy.js +0 -221
- package/dist/elements/services/propertiesService/services/CssPropertiesService copy.d.ts +0 -18
- package/dist/elements/services/propertiesService/services/CssPropertiesService copy.js +0 -221
- package/dist/elements/services/propertiesService/services/UnkownElementPropertiesService.d.ts +0 -20
- package/dist/elements/services/propertiesService/services/UnkownElementPropertiesService.js +0 -162
- package/dist/elements/services/stylesheetService/CssTreeStylesheetService copy.d.ts +0 -48
- package/dist/elements/services/stylesheetService/CssTreeStylesheetService copy.js +0 -185
- package/dist/elements/services/stylesheetService/StylesheetService.d.ts +0 -28
- package/dist/elements/services/stylesheetService/StylesheetService.js +0 -108
- package/dist/elements/services/undoService/transactionItems/PropertyChangeAction.d.ts +0 -15
- package/dist/elements/services/undoService/transactionItems/PropertyChangeAction.js +0 -36
- package/dist/elements/widgets/codeView/code-view-monaco copy.d.ts +0 -25
- package/dist/elements/widgets/codeView/code-view-monaco copy.js +0 -119
- package/dist/elements/widgets/designerView/ButtonSeperatorProvider.d.ts +0 -8
- package/dist/elements/widgets/designerView/ButtonSeperatorProvider.js +0 -11
- package/dist/elements/widgets/designerView/IDesignViewConfigButtonsProvider.d.ts +0 -5
- package/dist/elements/widgets/designerView/IDesignViewConfigButtonsProvider.js +0 -1
- package/dist/elements/widgets/designerView/extensions/FlexboxExtensionDesignViewConfigButtons.d.ts +0 -6
- package/dist/elements/widgets/designerView/extensions/FlexboxExtensionDesignViewConfigButtons.js +0 -22
- package/dist/elements/widgets/designerView/extensions/GridExtension copy.d.ts +0 -10
- package/dist/elements/widgets/designerView/extensions/GridExtension copy.js +0 -30
- package/dist/elements/widgets/designerView/extensions/GridExtensionDesignViewConfigButtons copy.d.ts +0 -6
- package/dist/elements/widgets/designerView/extensions/GridExtensionDesignViewConfigButtons copy.js +0 -21
- package/dist/elements/widgets/designerView/extensions/GridExtensionDesignViewConfigButtons.d.ts +0 -6
- package/dist/elements/widgets/designerView/extensions/GridExtensionDesignViewConfigButtons.js +0 -22
- package/dist/elements/widgets/designerView/extensions/GridExtensionProvider copy.d.ts +0 -11
- package/dist/elements/widgets/designerView/extensions/GridExtensionProvider copy.js +0 -18
- package/dist/elements/widgets/designerView/extensions/InvisibleDivExtension.d.ts +0 -11
- package/dist/elements/widgets/designerView/extensions/InvisibleDivExtension.js +0 -19
- package/dist/elements/widgets/designerView/extensions/InvisibleDivExtensionDesignViewConfigButtons.d.ts +0 -6
- package/dist/elements/widgets/designerView/extensions/InvisibleDivExtensionDesignViewConfigButtons.js +0 -22
- package/dist/elements/widgets/designerView/extensions/InvisibleDivExtensionProvider.d.ts +0 -11
- package/dist/elements/widgets/designerView/extensions/InvisibleDivExtensionProvider.js +0 -20
- package/dist/elements/widgets/designerView/extensions/InvisibleElementExtensionDesignViewConfigButtons.d.ts +0 -6
- package/dist/elements/widgets/designerView/extensions/InvisibleElementExtensionDesignViewConfigButtons.js +0 -22
- package/dist/elements/widgets/designerView/extensions/MouseOverExtension.d.ts +0 -11
- package/dist/elements/widgets/designerView/extensions/MouseOverExtension.js +0 -20
- package/dist/elements/widgets/designerView/extensions/MouseOverExtensionProvider.d.ts +0 -10
- package/dist/elements/widgets/designerView/extensions/MouseOverExtensionProvider.js +0 -13
- package/dist/elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons copy.d.ts +0 -7
- package/dist/elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons copy.js +0 -21
|
@@ -4,3 +4,5 @@ export declare function sleep(ms: any): Promise<unknown>;
|
|
|
4
4
|
export declare function exportData(blob: Blob, fileName: string): Promise<void>;
|
|
5
5
|
export declare function dataURItoBlob(dataURI: any): Blob;
|
|
6
6
|
export declare function pointInRect(point: IPoint, rect: IRect): boolean;
|
|
7
|
+
export declare function removeTrailing(text: string, char: string): string;
|
|
8
|
+
export declare function removeLeading(text: string, char: string): string;
|
|
@@ -24,3 +24,13 @@ export function dataURItoBlob(dataURI) {
|
|
|
24
24
|
export function pointInRect(point, rect) {
|
|
25
25
|
return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
|
|
26
26
|
}
|
|
27
|
+
export function removeTrailing(text, char) {
|
|
28
|
+
if (text.endsWith('/'))
|
|
29
|
+
return text.substring(0, text.length - 1);
|
|
30
|
+
return text;
|
|
31
|
+
}
|
|
32
|
+
export function removeLeading(text, char) {
|
|
33
|
+
if (text.startsWith('/'))
|
|
34
|
+
return text.substring(1);
|
|
35
|
+
return text;
|
|
36
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ServiceContainer } from "../services/ServiceContainer.js";
|
|
2
|
+
import { PaletteTreeView } from "../widgets/paletteView/paletteTreeView.js";
|
|
3
|
+
export declare class NpmPackageLoader {
|
|
4
|
+
private static registryPatchedTohandleErrors;
|
|
5
|
+
private _packageSource;
|
|
6
|
+
private _dependecies;
|
|
7
|
+
constructor(packageSource?: string);
|
|
8
|
+
static patchCustomElementsRegistryToHandleErrors(): void;
|
|
9
|
+
loadNpmPackage(pkg: string, serviceContainer: ServiceContainer, paletteTree: PaletteTreeView, reportState?: (state: string) => void): Promise<void>;
|
|
10
|
+
loadDependency(dependency: string, version?: string, reportState?: (state: string) => void): Promise<void>;
|
|
11
|
+
addToImportmap(baseUrl: string, packageJsonObj: {
|
|
12
|
+
name?: string;
|
|
13
|
+
module?: string;
|
|
14
|
+
main?: string;
|
|
15
|
+
exports?: Record<string, string>;
|
|
16
|
+
}): Promise<void>;
|
|
17
|
+
}
|
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
import { PreDefinedElementsService } from "../services/elementsService/PreDefinedElementsService.js";
|
|
2
|
+
import { WebcomponentManifestElementsService } from "../services/elementsService/WebcomponentManifestElementsService.js";
|
|
3
|
+
import { WebcomponentManifestPropertiesService } from "../services/propertiesService/services/WebcomponentManifestPropertiesService.js";
|
|
4
|
+
import { removeLeading, removeTrailing } from "./Helper.js";
|
|
5
|
+
export class NpmPackageLoader {
|
|
6
|
+
static registryPatchedTohandleErrors;
|
|
7
|
+
//packageSource = '//unpkg.com/';
|
|
8
|
+
_packageSource;
|
|
9
|
+
_dependecies = new Map();
|
|
10
|
+
constructor(packageSource = '//cdn.jsdelivr.net/npm/') {
|
|
11
|
+
this._packageSource = packageSource;
|
|
12
|
+
NpmPackageLoader.patchCustomElementsRegistryToHandleErrors();
|
|
13
|
+
}
|
|
14
|
+
static patchCustomElementsRegistryToHandleErrors() {
|
|
15
|
+
if (!NpmPackageLoader.registryPatchedTohandleErrors) {
|
|
16
|
+
NpmPackageLoader.registryPatchedTohandleErrors = true;
|
|
17
|
+
let customElementsRegistry = window.customElements;
|
|
18
|
+
const registry = {};
|
|
19
|
+
registry.define = function (name, constructor, options) {
|
|
20
|
+
try {
|
|
21
|
+
customElementsRegistry.define(name, constructor, options);
|
|
22
|
+
}
|
|
23
|
+
catch (err) {
|
|
24
|
+
console.warn(err);
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
registry.get = function (name) {
|
|
28
|
+
return customElementsRegistry.get(name);
|
|
29
|
+
};
|
|
30
|
+
registry.upgrade = function (node) {
|
|
31
|
+
return customElementsRegistry.upgrade(node);
|
|
32
|
+
};
|
|
33
|
+
registry.whenDefined = function (name) {
|
|
34
|
+
return customElementsRegistry.whenDefined(name);
|
|
35
|
+
};
|
|
36
|
+
Object.defineProperty(window, "customElements", {
|
|
37
|
+
get() {
|
|
38
|
+
return registry;
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
//TODO: remove paletteTree form params. elements should be added to serviceconatiner, and the container should notify
|
|
44
|
+
async loadNpmPackage(pkg, serviceContainer, paletteTree, reportState) {
|
|
45
|
+
const baseUrl = window.location.protocol + this._packageSource + pkg + '/';
|
|
46
|
+
const packageJsonUrl = baseUrl + 'package.json';
|
|
47
|
+
if (reportState)
|
|
48
|
+
reportState(pkg + ": loading package.json");
|
|
49
|
+
const packageJson = await fetch(packageJsonUrl);
|
|
50
|
+
const packageJsonObj = await packageJson.json();
|
|
51
|
+
this.addToImportmap(baseUrl, packageJsonObj);
|
|
52
|
+
const depPromises = [];
|
|
53
|
+
if (packageJsonObj.dependencies) {
|
|
54
|
+
for (let d in packageJsonObj.dependencies) {
|
|
55
|
+
depPromises.push(this.loadDependency(d, packageJsonObj.dependencies[d]));
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
await Promise.all(depPromises);
|
|
59
|
+
let customElementsUrl = baseUrl + 'custom-elements.json';
|
|
60
|
+
let elementsRootPath = baseUrl;
|
|
61
|
+
if (packageJsonObj.customElements) {
|
|
62
|
+
customElementsUrl = baseUrl + removeTrailing(packageJsonObj.customElements, '/');
|
|
63
|
+
if (customElementsUrl.includes('/')) {
|
|
64
|
+
let idx = customElementsUrl.lastIndexOf('/');
|
|
65
|
+
elementsRootPath = customElementsUrl.substring(0, idx + 1);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
let webComponentDesignerUrl = baseUrl + 'web-component-designer.json';
|
|
69
|
+
if (packageJsonObj.webComponentDesigner) {
|
|
70
|
+
webComponentDesignerUrl = baseUrl + removeLeading(packageJsonObj.webComponentDesigner, '/');
|
|
71
|
+
}
|
|
72
|
+
if (reportState)
|
|
73
|
+
reportState(pkg + ": loading custom-elements.json");
|
|
74
|
+
let customElementsJson = await fetch(customElementsUrl);
|
|
75
|
+
if (!customElementsJson.ok && packageJsonObj.homepage) {
|
|
76
|
+
try {
|
|
77
|
+
const url = new URL(packageJsonObj.homepage);
|
|
78
|
+
const newurl = 'https://raw.githubusercontent.com/' + url.pathname + '/master/custom-elements.json';
|
|
79
|
+
customElementsJson = await fetch(newurl);
|
|
80
|
+
console.warn("custom-elements.json was missing from npm package, but was loaded from github as a fallback.");
|
|
81
|
+
}
|
|
82
|
+
catch (err) {
|
|
83
|
+
console.warn("github custom elments json fallback", err);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
fetch(webComponentDesignerUrl).then(async (x) => {
|
|
87
|
+
if (x.ok) {
|
|
88
|
+
const webComponentDesignerJson = await x.json();
|
|
89
|
+
if (webComponentDesignerJson.services) {
|
|
90
|
+
for (let o in webComponentDesignerJson.services) {
|
|
91
|
+
for (let s of webComponentDesignerJson.services[o]) {
|
|
92
|
+
if (s.startsWith('./'))
|
|
93
|
+
s = s.substring(2);
|
|
94
|
+
//@ts-ignore
|
|
95
|
+
const classDefinition = (await importShim(baseUrl + s)).default;
|
|
96
|
+
//@ts-ignore
|
|
97
|
+
serviceContainer.register(o, new classDefinition());
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
});
|
|
103
|
+
if (customElementsJson.ok) {
|
|
104
|
+
const customElementsJsonObj = await customElementsJson.json();
|
|
105
|
+
let elements = new WebcomponentManifestElementsService(packageJsonObj.name, elementsRootPath, customElementsJsonObj);
|
|
106
|
+
serviceContainer.register('elementsService', elements);
|
|
107
|
+
let properties = new WebcomponentManifestPropertiesService(packageJsonObj.name, customElementsJsonObj);
|
|
108
|
+
serviceContainer.register('propertyService', properties);
|
|
109
|
+
if (window.location.search.includes("loadAllImports")) {
|
|
110
|
+
for (let e of await elements.getElements()) {
|
|
111
|
+
//@ts-ignore
|
|
112
|
+
importShim(e.import);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
//todo: should be retriggered by service container, or changeing list in container
|
|
116
|
+
paletteTree.loadControls(serviceContainer, serviceContainer.elementsServices);
|
|
117
|
+
}
|
|
118
|
+
else {
|
|
119
|
+
console.warn('npm package: ' + pkg + ' - no custom-elements.json found, only loading javascript module');
|
|
120
|
+
let customElementsRegistry = window.customElements;
|
|
121
|
+
const registry = {};
|
|
122
|
+
const newElements = [];
|
|
123
|
+
registry.define = function (name, constructor, options) {
|
|
124
|
+
newElements.push(name);
|
|
125
|
+
customElementsRegistry.define(name, constructor, options);
|
|
126
|
+
};
|
|
127
|
+
registry.get = function (name) {
|
|
128
|
+
return customElementsRegistry.get(name);
|
|
129
|
+
};
|
|
130
|
+
registry.upgrade = function (node) {
|
|
131
|
+
return customElementsRegistry.upgrade(node);
|
|
132
|
+
};
|
|
133
|
+
registry.whenDefined = function (name) {
|
|
134
|
+
return customElementsRegistry.whenDefined(name);
|
|
135
|
+
};
|
|
136
|
+
Object.defineProperty(window, "customElements", {
|
|
137
|
+
get() {
|
|
138
|
+
return registry;
|
|
139
|
+
}
|
|
140
|
+
});
|
|
141
|
+
if (packageJsonObj.module) {
|
|
142
|
+
//@ts-ignore
|
|
143
|
+
await importShim(baseUrl + removeLeading(packageJsonObj.module, '/'));
|
|
144
|
+
}
|
|
145
|
+
else if (packageJsonObj.main) {
|
|
146
|
+
//@ts-ignore
|
|
147
|
+
await importShim(baseUrl + removeLeading(packageJsonObj.main, '/'));
|
|
148
|
+
}
|
|
149
|
+
else if (packageJsonObj.unpkg) {
|
|
150
|
+
//@ts-ignore
|
|
151
|
+
await importShim(baseUrl + removeLeading(packageJsonObj.unpkg, '/'));
|
|
152
|
+
}
|
|
153
|
+
else {
|
|
154
|
+
console.warn('npm package: ' + pkg + ' - no entry point in package found.');
|
|
155
|
+
}
|
|
156
|
+
if (newElements.length > 0) {
|
|
157
|
+
const elementsCfg = {
|
|
158
|
+
elements: newElements
|
|
159
|
+
};
|
|
160
|
+
let elService = new PreDefinedElementsService(pkg, elementsCfg);
|
|
161
|
+
serviceContainer.register('elementsService', elService);
|
|
162
|
+
paletteTree.loadControls(serviceContainer, serviceContainer.elementsServices);
|
|
163
|
+
}
|
|
164
|
+
Object.defineProperty(window, "customElements", {
|
|
165
|
+
get() {
|
|
166
|
+
return customElementsRegistry;
|
|
167
|
+
}
|
|
168
|
+
});
|
|
169
|
+
}
|
|
170
|
+
if (reportState)
|
|
171
|
+
reportState(pkg + ": done");
|
|
172
|
+
}
|
|
173
|
+
async loadDependency(dependency, version, reportState) {
|
|
174
|
+
if (this._dependecies.has(dependency))
|
|
175
|
+
return;
|
|
176
|
+
this._dependecies.set(dependency, true);
|
|
177
|
+
if (dependency.startsWith('@types')) {
|
|
178
|
+
console.warn('ignoring wrong dependency: ', dependency);
|
|
179
|
+
return;
|
|
180
|
+
}
|
|
181
|
+
if (reportState)
|
|
182
|
+
reportState(dependency + ": loading dependency: " + dependency);
|
|
183
|
+
const baseUrl = window.location.protocol + this._packageSource + dependency + '/';
|
|
184
|
+
const packageJsonUrl = baseUrl + 'package.json';
|
|
185
|
+
const packageJson = await fetch(packageJsonUrl);
|
|
186
|
+
const packageJsonObj = await packageJson.json();
|
|
187
|
+
const depPromises = [];
|
|
188
|
+
if (packageJsonObj.dependencies) {
|
|
189
|
+
for (let d in packageJsonObj.dependencies) {
|
|
190
|
+
depPromises.push(this.loadDependency(d, packageJsonObj.dependencies[d]));
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
await Promise.all(depPromises);
|
|
194
|
+
this.addToImportmap(baseUrl, packageJsonObj);
|
|
195
|
+
}
|
|
196
|
+
async addToImportmap(baseUrl, packageJsonObj) {
|
|
197
|
+
//todo - use exports of package.json for importMap
|
|
198
|
+
const importMap = { imports: {}, scopes: {} };
|
|
199
|
+
let mainImport = packageJsonObj.main;
|
|
200
|
+
if (packageJsonObj.module)
|
|
201
|
+
mainImport = packageJsonObj.module;
|
|
202
|
+
importMap.imports[packageJsonObj.name] = baseUrl + removeTrailing(mainImport, '/');
|
|
203
|
+
importMap.imports[packageJsonObj.name + '/'] = baseUrl;
|
|
204
|
+
//@ts-ignore
|
|
205
|
+
importShim.addImportMap(importMap);
|
|
206
|
+
}
|
|
207
|
+
}
|
|
File without changes
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { removeLeading, removeTrailing } from "../../helper/Helper.js";
|
|
1
2
|
export class WebcomponentManifestElementsService {
|
|
2
3
|
_name;
|
|
3
4
|
get name() { return this._name; }
|
|
@@ -15,7 +16,7 @@ export class WebcomponentManifestElementsService {
|
|
|
15
16
|
for (let m of manifest.modules) {
|
|
16
17
|
for (let e of m.exports) {
|
|
17
18
|
if (e.kind == 'custom-element-definition') {
|
|
18
|
-
let elDef = { tag: e.name, import: this._importPrefix
|
|
19
|
+
let elDef = { tag: e.name, import: removeTrailing(this._importPrefix, '/') + '/' + removeLeading(e.declaration.module, '/'), defaultWidth: "200px", defaultHeight: "200px", className: e.declaration.name };
|
|
19
20
|
this._elementList.push(elDef);
|
|
20
21
|
}
|
|
21
22
|
}
|
|
@@ -2,6 +2,7 @@ import { BindingTarget } from '../../item/BindingTarget.js';
|
|
|
2
2
|
import { RefreshMode } from '../propertiesService/IPropertiesService.js';
|
|
3
3
|
import { PropertyType } from '../propertiesService/PropertyType.js';
|
|
4
4
|
import { AbstractPropertiesService } from '../propertiesService/services/AbstractPropertiesService.js';
|
|
5
|
+
import { removeLeading, removeTrailing } from '../../helper/Helper.js';
|
|
5
6
|
export class WebcomponentManifestParserService extends AbstractPropertiesService {
|
|
6
7
|
getRefreshMode(designItem) {
|
|
7
8
|
return RefreshMode.none;
|
|
@@ -42,7 +43,7 @@ export class WebcomponentManifestParserService extends AbstractPropertiesService
|
|
|
42
43
|
for (let m of this._packageData.modules) {
|
|
43
44
|
for (let e of m.exports) {
|
|
44
45
|
if (e.kind == 'custom-element-definition') {
|
|
45
|
-
this._elementList.push({ tag: e.name, import: this._importPrefix
|
|
46
|
+
this._elementList.push({ tag: e.name, import: removeTrailing(this._importPrefix, '/') + '/' + removeLeading(e.declaration.module, '/') });
|
|
46
47
|
let properties = [];
|
|
47
48
|
let declaration = m.declarations.find(x => x.name == e.declaration.name);
|
|
48
49
|
for (let d of declaration.members) {
|
|
@@ -51,7 +52,7 @@ export class WebcomponentManifestParserService extends AbstractPropertiesService
|
|
|
51
52
|
if (declaration.attributes)
|
|
52
53
|
pType = declaration.attributes.find(x => x.fieldName == d.name) != null ? PropertyType.propertyAndAttribute : PropertyType.property;
|
|
53
54
|
const p = this.manifestClassPropertyTypeToEditorPropertyType(d.type?.text);
|
|
54
|
-
properties.push({ name: d.name, service: this, propertyType: pType, type: p[0], values: p[1] });
|
|
55
|
+
properties.push({ name: d.name, service: this, propertyType: pType, type: p[0], values: p[1], description: d.description });
|
|
55
56
|
}
|
|
56
57
|
}
|
|
57
58
|
this._propertiesList[e.name] = properties;
|
package/dist/elements/services/propertiesService/services/WebcomponentManifestPropertiesService.js
CHANGED
|
@@ -34,7 +34,7 @@ export class WebcomponentManifestPropertiesService extends AbstractPropertiesSer
|
|
|
34
34
|
if (declaration.attributes)
|
|
35
35
|
pType = declaration.attributes.find(x => x.fieldName == d.name) != null ? PropertyType.propertyAndAttribute : PropertyType.property;
|
|
36
36
|
const p = this.manifestClassPropertyTypeToEditorPropertyType(d.type?.text);
|
|
37
|
-
properties.push({ name: d.name, service: this, propertyType: pType, type: p[0], values: p[1] });
|
|
37
|
+
properties.push({ name: d.name, service: this, propertyType: pType, type: p[0], values: p[1], description: d.description });
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
40
|
this._propertiesList[e.name] = properties;
|
package/dist/index.d.ts
CHANGED
|
@@ -11,6 +11,7 @@ export * from "./elements/loader/OldCustomElementsManifestLoader.js";
|
|
|
11
11
|
export * from "./elements/helper/w3color.js";
|
|
12
12
|
export * from "./elements/helper/contextMenu/ContextMenu.js";
|
|
13
13
|
export * from "./elements/helper/Helper.js";
|
|
14
|
+
export * from "./elements/helper/NpmPackageLoader.js";
|
|
14
15
|
export type { IContextMenuItem } from "./elements/helper/contextMenu/IContextMenuItem.js";
|
|
15
16
|
export * from "./elements/item/DesignItem.js";
|
|
16
17
|
export type { IDesignItem } from "./elements/item/IDesignItem.js";
|
package/dist/index.js
CHANGED
|
@@ -11,6 +11,7 @@ export * from "./elements/loader/OldCustomElementsManifestLoader.js";
|
|
|
11
11
|
export * from "./elements/helper/w3color.js";
|
|
12
12
|
export * from "./elements/helper/contextMenu/ContextMenu.js";
|
|
13
13
|
export * from "./elements/helper/Helper.js";
|
|
14
|
+
export * from "./elements/helper/NpmPackageLoader.js";
|
|
14
15
|
export * from "./elements/item/DesignItem.js";
|
|
15
16
|
export * from "./elements/item/BindingMode.js";
|
|
16
17
|
export * from "./elements/item/BindingTarget.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.185",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"author": "",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"@node-projects/base-custom-webcomponent": "^0.10.9",
|
|
17
|
-
"@types/node": "^18.11.
|
|
17
|
+
"@types/node": "^18.11.19",
|
|
18
18
|
"construct-style-sheets-polyfill": "^3.1.0"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
"html2canvas": "*",
|
|
34
34
|
"jest": "^29.4.1",
|
|
35
35
|
"jquery": "^3.6.3",
|
|
36
|
-
"jquery.fancytree": "^2.38.
|
|
37
|
-
"mdn-data": "^2.0.
|
|
36
|
+
"jquery.fancytree": "^2.38.3",
|
|
37
|
+
"mdn-data": "^2.0.31",
|
|
38
38
|
"monaco-editor": "^0.34.1",
|
|
39
39
|
"ts-jest": "^29.0.5",
|
|
40
40
|
"typescript": "^4.9.5",
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
|
|
2
|
-
export declare type ThicknessEditorValueChangedEventArgs = {
|
|
3
|
-
newValue?: string;
|
|
4
|
-
oldValue?: string;
|
|
5
|
-
};
|
|
6
|
-
export declare class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
|
|
7
|
-
static readonly style: CSSStyleSheet;
|
|
8
|
-
static readonly template: HTMLTemplateElement;
|
|
9
|
-
private _leftInput;
|
|
10
|
-
private _topInput;
|
|
11
|
-
private _rightInput;
|
|
12
|
-
private _bottomInput;
|
|
13
|
-
private _valueLeft;
|
|
14
|
-
get valueLeft(): string;
|
|
15
|
-
set valueLeft(value: string);
|
|
16
|
-
valueLeftChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
|
|
17
|
-
private _valueTop;
|
|
18
|
-
get valueTop(): string;
|
|
19
|
-
set valueTop(value: string);
|
|
20
|
-
valueTopChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
|
|
21
|
-
private _valueRight;
|
|
22
|
-
get valueRight(): string;
|
|
23
|
-
set valueRight(value: string);
|
|
24
|
-
valueRightChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
|
|
25
|
-
private _valueBottom;
|
|
26
|
-
get valueBottom(): string;
|
|
27
|
-
set valueBottom(value: string);
|
|
28
|
-
valueBottomChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
|
|
29
|
-
property: string;
|
|
30
|
-
unsetValue: string;
|
|
31
|
-
_updateValue(): void;
|
|
32
|
-
ready(): void;
|
|
33
|
-
}
|
|
@@ -1,145 +0,0 @@
|
|
|
1
|
-
import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
|
|
2
|
-
export class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
|
|
3
|
-
static style = css `
|
|
4
|
-
:host {
|
|
5
|
-
margin: 4px;
|
|
6
|
-
margin-left: auto;
|
|
7
|
-
margin-right: auto;
|
|
8
|
-
}
|
|
9
|
-
#container {
|
|
10
|
-
display: grid;
|
|
11
|
-
grid-template-columns: minmax(30px, 40px) minmax(30px, 60px) minmax(30px, 40px);
|
|
12
|
-
grid-template-rows: auto;
|
|
13
|
-
grid-template-areas:
|
|
14
|
-
" . top ."
|
|
15
|
-
"left middle right"
|
|
16
|
-
" . bottom .";
|
|
17
|
-
column-gap: 2px;
|
|
18
|
-
row-gap: 2px;
|
|
19
|
-
}
|
|
20
|
-
input {
|
|
21
|
-
width: 20px;
|
|
22
|
-
text-align: center;
|
|
23
|
-
font-size: 10px;
|
|
24
|
-
height: 20px;
|
|
25
|
-
padding: 0;
|
|
26
|
-
}
|
|
27
|
-
#left {
|
|
28
|
-
grid-area: left;
|
|
29
|
-
justify-self: end;
|
|
30
|
-
}
|
|
31
|
-
#top {
|
|
32
|
-
grid-area: top;
|
|
33
|
-
align-self: end;
|
|
34
|
-
justify-self: center;
|
|
35
|
-
}
|
|
36
|
-
#right {
|
|
37
|
-
grid-area: right;
|
|
38
|
-
justify-self: start;
|
|
39
|
-
}
|
|
40
|
-
#bottom {
|
|
41
|
-
grid-area: bottom;
|
|
42
|
-
align-self: start;
|
|
43
|
-
justify-self: center;
|
|
44
|
-
}
|
|
45
|
-
#rect {
|
|
46
|
-
grid-area: middle;
|
|
47
|
-
border: 1px solid black;
|
|
48
|
-
background: lightgray;
|
|
49
|
-
}
|
|
50
|
-
`;
|
|
51
|
-
static template = html `
|
|
52
|
-
<div id="container">
|
|
53
|
-
<input id="left">
|
|
54
|
-
<input id="top">
|
|
55
|
-
<input id="right">
|
|
56
|
-
<input id="bottom">
|
|
57
|
-
<div id="rect"></div>
|
|
58
|
-
</div>
|
|
59
|
-
`;
|
|
60
|
-
_leftInput;
|
|
61
|
-
_topInput;
|
|
62
|
-
_rightInput;
|
|
63
|
-
_bottomInput;
|
|
64
|
-
_valueLeft;
|
|
65
|
-
get valueLeft() {
|
|
66
|
-
return this._valueLeft;
|
|
67
|
-
}
|
|
68
|
-
set valueLeft(value) {
|
|
69
|
-
const oldValue = this._valueLeft;
|
|
70
|
-
this._valueLeft = value;
|
|
71
|
-
if (oldValue !== value) {
|
|
72
|
-
this._updateValue();
|
|
73
|
-
this.valueLeftChanged.emit({ newValue: value, oldValue: oldValue });
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
valueLeftChanged = new TypedEvent();
|
|
77
|
-
_valueTop;
|
|
78
|
-
get valueTop() {
|
|
79
|
-
return this._valueTop;
|
|
80
|
-
}
|
|
81
|
-
set valueTop(value) {
|
|
82
|
-
const oldValue = this._valueTop;
|
|
83
|
-
this._valueTop = value;
|
|
84
|
-
if (oldValue !== value) {
|
|
85
|
-
this._updateValue();
|
|
86
|
-
this.valueTopChanged.emit({ newValue: value, oldValue: oldValue });
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
valueTopChanged = new TypedEvent();
|
|
90
|
-
_valueRight;
|
|
91
|
-
get valueRight() {
|
|
92
|
-
return this._valueRight;
|
|
93
|
-
}
|
|
94
|
-
set valueRight(value) {
|
|
95
|
-
const oldValue = this._valueRight;
|
|
96
|
-
this._valueRight = value;
|
|
97
|
-
if (oldValue !== value) {
|
|
98
|
-
this._updateValue();
|
|
99
|
-
this.valueRightChanged.emit({ newValue: value, oldValue: oldValue });
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
valueRightChanged = new TypedEvent();
|
|
103
|
-
_valueBottom;
|
|
104
|
-
get valueBottom() {
|
|
105
|
-
return this._valueBottom;
|
|
106
|
-
}
|
|
107
|
-
set valueBottom(value) {
|
|
108
|
-
const oldValue = this._valueBottom;
|
|
109
|
-
this._valueBottom = value;
|
|
110
|
-
if (oldValue !== value) {
|
|
111
|
-
this._updateValue();
|
|
112
|
-
this.valueBottomChanged.emit({ newValue: value, oldValue: oldValue });
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
valueBottomChanged = new TypedEvent();
|
|
116
|
-
property;
|
|
117
|
-
unsetValue;
|
|
118
|
-
_updateValue() {
|
|
119
|
-
this._leftInput.value = this.valueLeft;
|
|
120
|
-
this._topInput.value = this.valueTop;
|
|
121
|
-
this._rightInput.value = this.valueRight;
|
|
122
|
-
this._bottomInput.value = this._valueBottom;
|
|
123
|
-
}
|
|
124
|
-
ready() {
|
|
125
|
-
this._parseAttributesToProperties();
|
|
126
|
-
this._leftInput = this._getDomElement('left');
|
|
127
|
-
this._topInput = this._getDomElement('top');
|
|
128
|
-
this._rightInput = this._getDomElement('right');
|
|
129
|
-
this._bottomInput = this._getDomElement('bottom');
|
|
130
|
-
this._leftInput.onkeyup = (e) => { if (e.key === 'Enter')
|
|
131
|
-
this._valueLeft = this._leftInput.value; };
|
|
132
|
-
this._topInput.onkeyup = (e) => { if (e.key === 'Enter')
|
|
133
|
-
this._valueTop = this._topInput.value; };
|
|
134
|
-
this._rightInput.onkeyup = (e) => { if (e.key === 'Enter')
|
|
135
|
-
this._valueRight = this._rightInput.value; };
|
|
136
|
-
this._bottomInput.onkeyup = (e) => { if (e.key === 'Enter')
|
|
137
|
-
this._valueBottom = this._bottomInput.value; };
|
|
138
|
-
this._leftInput.onblur = (e) => this._valueLeft = this._leftInput.value;
|
|
139
|
-
this._topInput.onblur = (e) => this._valueTop = this._topInput.value;
|
|
140
|
-
this._rightInput.onblur = (e) => this._valueRight = this._rightInput.value;
|
|
141
|
-
this._bottomInput.onblur = (e) => this._valueBottom = this._bottomInput.value;
|
|
142
|
-
this._updateValue();
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
customElements.define('node-projects-thickness-editor', ThicknessEditor);
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
export declare class IndentedTextWriter {
|
|
2
|
-
private _textHolder;
|
|
3
|
-
readonly indent: number;
|
|
4
|
-
level: number;
|
|
5
|
-
get position(): number;
|
|
6
|
-
isLastCharNewline(): boolean;
|
|
7
|
-
levelRaise(): void;
|
|
8
|
-
levelShrink(): void;
|
|
9
|
-
write(text: string): void;
|
|
10
|
-
writeLine(text: string): void;
|
|
11
|
-
writeIndent(): void;
|
|
12
|
-
writeNewline(): void;
|
|
13
|
-
getString(): string;
|
|
14
|
-
}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
export class IndentedTextWriter {
|
|
2
|
-
_textHolder = '';
|
|
3
|
-
indent = 4;
|
|
4
|
-
level = 0;
|
|
5
|
-
get position() {
|
|
6
|
-
return this._textHolder.length;
|
|
7
|
-
}
|
|
8
|
-
isLastCharNewline() {
|
|
9
|
-
return this._textHolder[this._textHolder.length - 1] === '\n';
|
|
10
|
-
}
|
|
11
|
-
levelRaise() {
|
|
12
|
-
this.level++;
|
|
13
|
-
}
|
|
14
|
-
levelShrink() {
|
|
15
|
-
this.level--;
|
|
16
|
-
}
|
|
17
|
-
write(text) {
|
|
18
|
-
this._textHolder += text;
|
|
19
|
-
}
|
|
20
|
-
writeLine(text) {
|
|
21
|
-
this.writeIndent();
|
|
22
|
-
this._textHolder += text;
|
|
23
|
-
this.writeNewline();
|
|
24
|
-
}
|
|
25
|
-
writeIndent() {
|
|
26
|
-
this._textHolder += ''.padEnd(this.level * this.indent, ' ');
|
|
27
|
-
}
|
|
28
|
-
writeNewline() {
|
|
29
|
-
this._textHolder += '\n';
|
|
30
|
-
}
|
|
31
|
-
getString() {
|
|
32
|
-
return this._textHolder;
|
|
33
|
-
}
|
|
34
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
export declare class SimpleTextWriter {
|
|
2
|
-
private _textHolder;
|
|
3
|
-
get position(): number;
|
|
4
|
-
isLastCharNewline(): boolean;
|
|
5
|
-
levelRaise(): void;
|
|
6
|
-
levelShrink(): void;
|
|
7
|
-
write(text: string): void;
|
|
8
|
-
writeLine(text: string): void;
|
|
9
|
-
writeIndent(): void;
|
|
10
|
-
writeNewline(): void;
|
|
11
|
-
getString(): string;
|
|
12
|
-
}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
export class SimpleTextWriter {
|
|
2
|
-
_textHolder = '';
|
|
3
|
-
get position() {
|
|
4
|
-
return this._textHolder.length;
|
|
5
|
-
}
|
|
6
|
-
isLastCharNewline() {
|
|
7
|
-
return this._textHolder[this._textHolder.length - 1] === '\n';
|
|
8
|
-
}
|
|
9
|
-
levelRaise() {
|
|
10
|
-
}
|
|
11
|
-
levelShrink() {
|
|
12
|
-
}
|
|
13
|
-
write(text) {
|
|
14
|
-
this._textHolder += text;
|
|
15
|
-
}
|
|
16
|
-
writeLine(text) {
|
|
17
|
-
this._textHolder += text;
|
|
18
|
-
}
|
|
19
|
-
writeIndent() {
|
|
20
|
-
}
|
|
21
|
-
writeNewline() {
|
|
22
|
-
}
|
|
23
|
-
getString() {
|
|
24
|
-
return this._textHolder;
|
|
25
|
-
}
|
|
26
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { InstanceServiceContainer } from '../InstanceServiceContainer.js';
|
|
2
|
-
import { ServiceContainer } from '../ServiceContainer.js';
|
|
3
|
-
import { IHtmlParserService } from './IHtmlParserService.js';
|
|
4
|
-
import { IDesignItem } from '../../item/IDesignItem.js';
|
|
5
|
-
export declare abstract class AbstractClassElementParserService implements IHtmlParserService {
|
|
6
|
-
private _parserUrl;
|
|
7
|
-
private _esprimaUrl;
|
|
8
|
-
constructor(parserUrl?: string, esprimaUrl?: string);
|
|
9
|
-
parse(module: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
|
|
10
|
-
private _parseDiv;
|
|
11
|
-
_createDesignItemsRecursive(item: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, namespace: string): IDesignItem;
|
|
12
|
-
}
|