@node-projects/web-component-designer 0.0.184 → 0.0.186
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/ClipboardHelper.d.ts +4 -0
- package/dist/elements/helper/ClipboardHelper.js +84 -0
- package/dist/elements/helper/NpmPackageLoader.d.ts +17 -0
- package/dist/elements/helper/NpmPackageLoader.js +207 -0
- package/dist/elements/services/copyPasteService/CopyPasteService.js +19 -19
- 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/manifestParsers/WebcomponentManifestParserService.js +1 -1
- package/dist/elements/services/propertiesService/services/WebcomponentManifestPropertiesService.js +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/package.json +7 -7
- 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/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
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare function copyTextToClipboard(text: any): Promise<void>;
|
|
2
|
+
export declare function copyToClipboard(items: [format: string, data: string][]): Promise<void>;
|
|
3
|
+
export declare function getTextFromClipboard(): Promise<string>;
|
|
4
|
+
export declare function getFromClipboard(): Promise<ClipboardItems>;
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
export async function copyTextToClipboard(text) {
|
|
2
|
+
copyToClipboard(['text/plain', text]);
|
|
3
|
+
}
|
|
4
|
+
export async function copyToClipboard(items) {
|
|
5
|
+
if (navigator.clipboard) {
|
|
6
|
+
try {
|
|
7
|
+
let data = [];
|
|
8
|
+
for (let n of items) {
|
|
9
|
+
data.push(new ClipboardItem({ [n[0]]: new Blob([n[1]], { type: n[0] }) }));
|
|
10
|
+
}
|
|
11
|
+
await navigator.clipboard.write(data);
|
|
12
|
+
}
|
|
13
|
+
catch (err) {
|
|
14
|
+
await navigator.clipboard.writeText(items[0][1]);
|
|
15
|
+
}
|
|
16
|
+
console.info('Copy to clipboard successful');
|
|
17
|
+
}
|
|
18
|
+
else {
|
|
19
|
+
const textArea = document.createElement('textarea');
|
|
20
|
+
textArea.style.position = 'fixed';
|
|
21
|
+
textArea.style.top = '0';
|
|
22
|
+
textArea.style.left = '0';
|
|
23
|
+
textArea.style.width = '2em';
|
|
24
|
+
textArea.style.height = '2em';
|
|
25
|
+
textArea.style.padding = '0';
|
|
26
|
+
textArea.style.border = 'none';
|
|
27
|
+
textArea.style.outline = 'none';
|
|
28
|
+
textArea.style.boxShadow = 'none';
|
|
29
|
+
textArea.style.background = 'transparent';
|
|
30
|
+
textArea.value = items[0][1];
|
|
31
|
+
document.body.appendChild(textArea);
|
|
32
|
+
textArea.select();
|
|
33
|
+
try {
|
|
34
|
+
document.execCommand('copy');
|
|
35
|
+
}
|
|
36
|
+
catch (err) {
|
|
37
|
+
try {
|
|
38
|
+
document.execCommand('copy');
|
|
39
|
+
}
|
|
40
|
+
catch (err) {
|
|
41
|
+
console.error(err);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
document.body.removeChild(textArea);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
export async function getTextFromClipboard() {
|
|
48
|
+
if (navigator.clipboard) {
|
|
49
|
+
return new Promise(async (resolve, reject) => {
|
|
50
|
+
const clipText = await navigator.clipboard.readText();
|
|
51
|
+
resolve(clipText);
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
else {
|
|
55
|
+
return new Promise(async (resolve, reject) => {
|
|
56
|
+
const textArea = document.createElement('textarea');
|
|
57
|
+
textArea.style.position = 'fixed';
|
|
58
|
+
textArea.style.top = '0';
|
|
59
|
+
textArea.style.left = '0';
|
|
60
|
+
textArea.style.width = '2em';
|
|
61
|
+
textArea.style.height = '2em';
|
|
62
|
+
textArea.style.padding = '0';
|
|
63
|
+
textArea.style.border = 'none';
|
|
64
|
+
textArea.style.outline = 'none';
|
|
65
|
+
textArea.style.boxShadow = 'none';
|
|
66
|
+
textArea.style.background = 'transparent';
|
|
67
|
+
document.body.appendChild(textArea);
|
|
68
|
+
textArea.focus();
|
|
69
|
+
textArea.select();
|
|
70
|
+
document.execCommand('paste');
|
|
71
|
+
let value = textArea.value;
|
|
72
|
+
document.body.removeChild(textArea);
|
|
73
|
+
resolve(value);
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
export async function getFromClipboard() {
|
|
78
|
+
if (navigator.clipboard) {
|
|
79
|
+
return await navigator.clipboard.read();
|
|
80
|
+
}
|
|
81
|
+
else {
|
|
82
|
+
return null;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
@@ -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
|
+
}
|
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
import { DomConverter } from "../../widgets/designerView/DomConverter.js";
|
|
2
|
+
import { copyToClipboard, getFromClipboard, getTextFromClipboard } from "../../helper/ClipboardHelper.js";
|
|
2
3
|
export const positionsJsonMime = 'web text/positions';
|
|
3
4
|
export class CopyPasteService {
|
|
4
5
|
async copyItems(designItems) {
|
|
5
6
|
const copyText = DomConverter.ConvertToString(designItems, null, false);
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
const data = [new ClipboardItem({ ["text/html"]: new Blob([copyText], { type: 'text/html' }), [positionsJsonMime]: new Blob([JSON.stringify(positions)], { type: positionsJsonMime }) })];
|
|
9
|
-
await navigator.clipboard.write(data);
|
|
10
|
-
}
|
|
11
|
-
catch (err) {
|
|
12
|
-
await navigator.clipboard.writeText(copyText);
|
|
13
|
-
}
|
|
7
|
+
const positions = designItems.map(x => x.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(x.element));
|
|
8
|
+
copyToClipboard([["text/html", copyText], [positionsJsonMime, JSON.stringify(positions)]]);
|
|
14
9
|
}
|
|
15
10
|
async getPasteItems(serviceContainer, instanceServiceContainer) {
|
|
16
|
-
const items = await navigator.clipboard.read();
|
|
17
11
|
let html = '';
|
|
18
|
-
try {
|
|
19
|
-
html = await (await items[0].getType('text/html'))?.text();
|
|
20
|
-
}
|
|
21
|
-
catch { }
|
|
22
|
-
if (!html)
|
|
23
|
-
html = await (await items[0].getType('text/plain'))?.text();
|
|
24
12
|
let positions = null;
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
13
|
+
const items = await getFromClipboard();
|
|
14
|
+
if (items != null) {
|
|
15
|
+
try {
|
|
16
|
+
html = await (await items[0].getType('text/html'))?.text();
|
|
17
|
+
}
|
|
18
|
+
catch { }
|
|
19
|
+
if (!html)
|
|
20
|
+
html = await (await items[0].getType('text/plain'))?.text();
|
|
21
|
+
try {
|
|
22
|
+
let positionsJson = await (await items[0].getType(positionsJsonMime))?.text();
|
|
23
|
+
positions = JSON.parse(positionsJson);
|
|
24
|
+
}
|
|
25
|
+
catch { }
|
|
26
|
+
}
|
|
27
|
+
else {
|
|
28
|
+
html = await getTextFromClipboard();
|
|
28
29
|
}
|
|
29
|
-
catch { }
|
|
30
30
|
const parserService = serviceContainer.htmlParserService;
|
|
31
31
|
return [await parserService.parse(html, serviceContainer, instanceServiceContainer), positions];
|
|
32
32
|
}
|
|
File without changes
|
|
@@ -52,7 +52,7 @@ export class WebcomponentManifestParserService extends AbstractPropertiesService
|
|
|
52
52
|
if (declaration.attributes)
|
|
53
53
|
pType = declaration.attributes.find(x => x.fieldName == d.name) != null ? PropertyType.propertyAndAttribute : PropertyType.property;
|
|
54
54
|
const p = this.manifestClassPropertyTypeToEditorPropertyType(d.type?.text);
|
|
55
|
-
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 });
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
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
|
@@ -7,10 +7,12 @@ export * from "./elements/helper/ElementHelper.js";
|
|
|
7
7
|
export * from "./elements/helper/IndentedTextWriter.js";
|
|
8
8
|
export * from "./elements/helper/PathDataPolyfill.js";
|
|
9
9
|
export * from "./elements/helper/Screenshot.js";
|
|
10
|
+
export * from "./elements/helper/ClipboardHelper.js";
|
|
10
11
|
export * from "./elements/loader/OldCustomElementsManifestLoader.js";
|
|
11
12
|
export * from "./elements/helper/w3color.js";
|
|
12
13
|
export * from "./elements/helper/contextMenu/ContextMenu.js";
|
|
13
14
|
export * from "./elements/helper/Helper.js";
|
|
15
|
+
export * from "./elements/helper/NpmPackageLoader.js";
|
|
14
16
|
export type { IContextMenuItem } from "./elements/helper/contextMenu/IContextMenuItem.js";
|
|
15
17
|
export * from "./elements/item/DesignItem.js";
|
|
16
18
|
export type { IDesignItem } from "./elements/item/IDesignItem.js";
|
package/dist/index.js
CHANGED
|
@@ -7,10 +7,12 @@ export * from "./elements/helper/ElementHelper.js";
|
|
|
7
7
|
export * from "./elements/helper/IndentedTextWriter.js";
|
|
8
8
|
export * from "./elements/helper/PathDataPolyfill.js";
|
|
9
9
|
export * from "./elements/helper/Screenshot.js";
|
|
10
|
+
export * from "./elements/helper/ClipboardHelper.js";
|
|
10
11
|
export * from "./elements/loader/OldCustomElementsManifestLoader.js";
|
|
11
12
|
export * from "./elements/helper/w3color.js";
|
|
12
13
|
export * from "./elements/helper/contextMenu/ContextMenu.js";
|
|
13
14
|
export * from "./elements/helper/Helper.js";
|
|
15
|
+
export * from "./elements/helper/NpmPackageLoader.js";
|
|
14
16
|
export * from "./elements/item/DesignItem.js";
|
|
15
17
|
export * from "./elements/item/BindingMode.js";
|
|
16
18
|
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.186",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"author": "",
|
|
@@ -14,7 +14,6 @@
|
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"@node-projects/base-custom-webcomponent": "^0.10.9",
|
|
17
|
-
"@types/node": "^18.11.18",
|
|
18
17
|
"construct-style-sheets-polyfill": "^3.1.0"
|
|
19
18
|
},
|
|
20
19
|
"devDependencies": {
|
|
@@ -23,19 +22,20 @@
|
|
|
23
22
|
"@node-projects/node-html-parser-esm": "^2.5.1",
|
|
24
23
|
"@papyrs/stylo": "^0.0.42",
|
|
25
24
|
"@types/codemirror": "^5.60.7",
|
|
26
|
-
"@types/css-tree": "^2.0
|
|
25
|
+
"@types/css-tree": "^2.3.0",
|
|
27
26
|
"@types/jquery": "^3.5.16",
|
|
28
27
|
"@types/jquery.fancytree": "0.0.7",
|
|
28
|
+
"@types/node": "^18.13.0",
|
|
29
29
|
"ace-builds": "^1.15.0",
|
|
30
30
|
"codemirror": "^6.0.1",
|
|
31
31
|
"css-tree": "^2.3.1",
|
|
32
32
|
"esprima-next": "^5.8.4",
|
|
33
33
|
"html2canvas": "*",
|
|
34
|
-
"jest": "^29.4.
|
|
34
|
+
"jest": "^29.4.2",
|
|
35
35
|
"jquery": "^3.6.3",
|
|
36
|
-
"jquery.fancytree": "^2.38.
|
|
37
|
-
"mdn-data": "^2.0.
|
|
38
|
-
"monaco-editor": "^0.
|
|
36
|
+
"jquery.fancytree": "^2.38.3",
|
|
37
|
+
"mdn-data": "^2.0.31",
|
|
38
|
+
"monaco-editor": "^0.35.0",
|
|
39
39
|
"ts-jest": "^29.0.5",
|
|
40
40
|
"typescript": "^4.9.5",
|
|
41
41
|
"typescript-lit-html-plugin": "^0.9.0"
|
|
@@ -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
|
-
}
|