@node-projects/web-component-designer 0.0.289 → 0.0.291
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/NpmPackageHacks.json +11 -0
- package/dist/elements/helper/NpmPackageLoader.d.ts +3 -1
- package/dist/elements/helper/NpmPackageLoader.js +43 -9
- package/dist/elements/services/dragDropService/DragDropService.js +0 -3
- package/dist/elements/services/placementService/DefaultPlacementService.js +1 -0
- package/dist/elements/services/placementService/FlexBoxPlacementService.js +1 -0
- package/dist/elements/services/placementService/GridPlacementService.js +1 -0
- package/dist/elements/services/propertiesService/services/CssCustomPropertiesService.js +1 -1
- package/dist/elements/services/propertiesService/services/UnkownElementsPropertiesService.d.ts +10 -0
- package/dist/elements/services/propertiesService/services/UnkownElementsPropertiesService.js +28 -0
- package/dist/elements/services/propertiesService/services/UnkownElemntPropertiesService.d.ts +24 -0
- package/dist/elements/services/propertiesService/services/UnkownElemntPropertiesService.js +198 -0
- package/dist/elements/services/propertiesService/services/WebcomponentManifestPropertiesService.js +2 -1
- package/dist/elements/widgets/designerView/tools/PointerTool.js +4 -4
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
{
|
|
2
|
+
"@shoelace-style/shoelace": {
|
|
3
|
+
"html": "<link rel=\"stylesheet\" media=\"(prefers-color-scheme:light)\" href=\"${baseUrl}dist/themes/light.css\">\n<link rel=\"stylesheet\" media=\"(prefers-color-scheme:dark)\" href=\"${baseUrl}dist/themes/dark.css\" onload=\"document.documentElement.classList.add('sl-theme-dark');\">"
|
|
4
|
+
},
|
|
5
|
+
"@microsoft/fast-components": {
|
|
6
|
+
"script": "let res = await import('@microsoft/fast-components');\nres.provideFASTDesignSystem().register(res.allComponents);"
|
|
7
|
+
},
|
|
8
|
+
"@material/web": {
|
|
9
|
+
"import": "@material/web/all.js"
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -6,7 +6,9 @@ export declare class NpmPackageLoader {
|
|
|
6
6
|
private _dependecies;
|
|
7
7
|
constructor(packageSource?: string);
|
|
8
8
|
static patchCustomElementsRegistryToHandleErrors(): void;
|
|
9
|
-
loadNpmPackage(pkg: string, serviceContainer?: ServiceContainer, paletteTree?: PaletteTreeView, loadAllImports?: boolean, reportState?: (state: string) => void): Promise<
|
|
9
|
+
loadNpmPackage(pkg: string, serviceContainer?: ServiceContainer, paletteTree?: PaletteTreeView, loadAllImports?: boolean, reportState?: (state: string) => void): Promise<{
|
|
10
|
+
html: string;
|
|
11
|
+
}>;
|
|
10
12
|
loadDependency(dependency: string, version?: string, reportState?: (state: string) => void): Promise<void>;
|
|
11
13
|
addToImportmap(baseUrl: string, packageJsonObj: {
|
|
12
14
|
name?: string;
|
|
@@ -2,6 +2,19 @@ import { PreDefinedElementsService } from "../services/elementsService/PreDefine
|
|
|
2
2
|
import { WebcomponentManifestElementsService } from "../services/elementsService/WebcomponentManifestElementsService.js";
|
|
3
3
|
import { WebcomponentManifestPropertiesService } from "../services/propertiesService/services/WebcomponentManifestPropertiesService.js";
|
|
4
4
|
import { removeLeading, removeTrailing } from "./Helper.js";
|
|
5
|
+
//TODO: remove this code when import asserts are supported
|
|
6
|
+
let packageHacks;
|
|
7
|
+
//@ts-ignore
|
|
8
|
+
if (window.importShim) {
|
|
9
|
+
const packageHacksUrl = import.meta.resolve('./NpmPackageHacks.json');
|
|
10
|
+
//@ts-ignore
|
|
11
|
+
packageHacks = await importShim(packageHacksUrl, { assert: { type: 'json' } });
|
|
12
|
+
}
|
|
13
|
+
else
|
|
14
|
+
//@ts-ignore
|
|
15
|
+
packageHacks = await import("./NpmPackageHacks.json", { assert: { type: 'json' } });
|
|
16
|
+
if (packageHacks.default)
|
|
17
|
+
packageHacks = packageHacks.default;
|
|
5
18
|
export class NpmPackageLoader {
|
|
6
19
|
static registryPatchedTohandleErrors;
|
|
7
20
|
//packageSource = '//unpkg.com/';
|
|
@@ -121,24 +134,32 @@ export class NpmPackageLoader {
|
|
|
121
134
|
//todo: should be retriggered by service container, or changeing list in container
|
|
122
135
|
paletteTree.loadControls(serviceContainer, serviceContainer.elementsServices);
|
|
123
136
|
}
|
|
137
|
+
/* Package Hacks */
|
|
138
|
+
if (packageHacks[pkg]?.import) {
|
|
139
|
+
import(packageHacks[pkg]?.import);
|
|
140
|
+
}
|
|
141
|
+
if (packageHacks[pkg]?.script) {
|
|
142
|
+
const scriptUrl = URL.createObjectURL(new Blob([packageHacks[pkg]?.script], { type: 'application/javascript' }));
|
|
143
|
+
import(scriptUrl);
|
|
144
|
+
}
|
|
124
145
|
}
|
|
125
146
|
else {
|
|
126
147
|
console.warn('npm package: ' + pkg + ' - no custom-elements.json found, only loading javascript module');
|
|
127
|
-
let
|
|
148
|
+
let originalCustomElementsRegistry = window.customElements;
|
|
128
149
|
const registry = {};
|
|
129
150
|
const newElements = [];
|
|
130
151
|
registry.define = function (name, constructor, options) {
|
|
131
152
|
newElements.push(name);
|
|
132
|
-
|
|
153
|
+
originalCustomElementsRegistry.define(name, constructor, options);
|
|
133
154
|
};
|
|
134
155
|
registry.get = function (name) {
|
|
135
|
-
return
|
|
156
|
+
return originalCustomElementsRegistry.get(name);
|
|
136
157
|
};
|
|
137
158
|
registry.upgrade = function (node) {
|
|
138
|
-
return
|
|
159
|
+
return originalCustomElementsRegistry.upgrade(node);
|
|
139
160
|
};
|
|
140
161
|
registry.whenDefined = function (name) {
|
|
141
|
-
return
|
|
162
|
+
return originalCustomElementsRegistry.whenDefined(name);
|
|
142
163
|
};
|
|
143
164
|
Object.defineProperty(window, "customElements", {
|
|
144
165
|
get() {
|
|
@@ -160,6 +181,14 @@ export class NpmPackageLoader {
|
|
|
160
181
|
else {
|
|
161
182
|
console.warn('npm package: ' + pkg + ' - no entry point in package found.');
|
|
162
183
|
}
|
|
184
|
+
/* Package Hacks */
|
|
185
|
+
if (packageHacks[pkg]?.import) {
|
|
186
|
+
await import(packageHacks[pkg]?.import);
|
|
187
|
+
}
|
|
188
|
+
if (packageHacks[pkg]?.script) {
|
|
189
|
+
const scriptUrl = URL.createObjectURL(new Blob([packageHacks[pkg]?.script], { type: 'application/javascript' }));
|
|
190
|
+
await import(scriptUrl);
|
|
191
|
+
}
|
|
163
192
|
if (newElements.length > 0 && serviceContainer && paletteTree) {
|
|
164
193
|
const elementsCfg = {
|
|
165
194
|
elements: newElements
|
|
@@ -170,12 +199,17 @@ export class NpmPackageLoader {
|
|
|
170
199
|
}
|
|
171
200
|
Object.defineProperty(window, "customElements", {
|
|
172
201
|
get() {
|
|
173
|
-
return
|
|
202
|
+
return originalCustomElementsRegistry;
|
|
174
203
|
}
|
|
175
204
|
});
|
|
176
205
|
}
|
|
177
206
|
if (reportState)
|
|
178
207
|
reportState(pkg + ": done");
|
|
208
|
+
let retVal = {};
|
|
209
|
+
if (packageHacks[pkg]?.html) {
|
|
210
|
+
retVal.html = (packageHacks[pkg]?.html).replaceAll("${baseUrl}", baseUrl);
|
|
211
|
+
}
|
|
212
|
+
return retVal;
|
|
179
213
|
}
|
|
180
214
|
async loadDependency(dependency, version, reportState) {
|
|
181
215
|
if (this._dependecies.has(dependency))
|
|
@@ -295,10 +329,10 @@ export class NpmPackageLoader {
|
|
|
295
329
|
//Names to use: browser, import, default, node
|
|
296
330
|
let imp = getImportFlat(packageJsonObj.exports);
|
|
297
331
|
if (imp) {
|
|
298
|
-
importMap.imports[packageJsonObj.name] = baseUrl + removeLeading(
|
|
332
|
+
importMap.imports[packageJsonObj.name] = baseUrl + removeLeading(removeLeading(imp, '.'), '/');
|
|
299
333
|
}
|
|
300
334
|
else if (imp = getImportFlat(packageJsonObj.exports?.['.'])) {
|
|
301
|
-
importMap.imports[packageJsonObj.name] = baseUrl + removeLeading(
|
|
335
|
+
importMap.imports[packageJsonObj.name] = baseUrl + removeLeading(removeLeading(imp, '.'), '/');
|
|
302
336
|
}
|
|
303
337
|
}
|
|
304
338
|
let mainImport = packageJsonObj.main;
|
|
@@ -308,7 +342,7 @@ export class NpmPackageLoader {
|
|
|
308
342
|
mainImport = packageJsonObj.unpkg;
|
|
309
343
|
if (!importMap.imports[packageJsonObj.name]) {
|
|
310
344
|
if (mainImport)
|
|
311
|
-
importMap.imports[packageJsonObj.name] = baseUrl +
|
|
345
|
+
importMap.imports[packageJsonObj.name] = baseUrl + removeLeading(removeLeading(mainImport, '.'), '/');
|
|
312
346
|
else
|
|
313
347
|
console.warn('package: ' + baseUrl + 'no main import found');
|
|
314
348
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { DesignItem } from '../../item/DesignItem.js';
|
|
2
|
-
import { InsertAction } from "../undoService/transactionItems/InsertAction.js";
|
|
3
2
|
import { ExtensionType } from "../../widgets/designerView/extensions/ExtensionType.js";
|
|
4
3
|
import { dragDropFormatNameElementDefinition } from "../../../Constants.js";
|
|
5
4
|
export class DragDropService {
|
|
@@ -37,7 +36,6 @@ export class DragDropService {
|
|
|
37
36
|
let [newContainer] = this.getPossibleContainerForDragDrop(designerCanvas, event);
|
|
38
37
|
if (!newContainer)
|
|
39
38
|
newContainer = designerCanvas.rootDesignItem;
|
|
40
|
-
//TODO : we need to use container service for adding to element, so also grid and flexbox work correct
|
|
41
39
|
const transferData = event.dataTransfer.getData(dragDropFormatNameElementDefinition);
|
|
42
40
|
const elementDefinition = JSON.parse(transferData);
|
|
43
41
|
const di = await designerCanvas.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(elementDefinition, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer));
|
|
@@ -50,7 +48,6 @@ export class DragDropService {
|
|
|
50
48
|
const pos = { x: evCoord.x - containerPos.x, y: evCoord.y - containerPos.y };
|
|
51
49
|
containerService.place(event, designerCanvas, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, pos, [di]);
|
|
52
50
|
containerService.finishPlace(event, designerCanvas, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, pos, [di]);
|
|
53
|
-
designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(newContainer, newContainer.childCount, di));
|
|
54
51
|
requestAnimationFrame(() => {
|
|
55
52
|
designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([di]);
|
|
56
53
|
grp.commit();
|
|
@@ -121,6 +121,7 @@ export class DefaultPlacementService {
|
|
|
121
121
|
enterContainer(container, items) {
|
|
122
122
|
let filterdItems = filterChildPlaceItems(items);
|
|
123
123
|
for (let i of filterdItems) {
|
|
124
|
+
container.insertChild(i);
|
|
124
125
|
if (i.lastContainerSize) {
|
|
125
126
|
if (!i.hasStyle('width'))
|
|
126
127
|
i.setStyle('width', i.lastContainerSize.width + 'px');
|
|
@@ -17,7 +17,7 @@ export class CssCustomPropertiesService extends CommonPropertiesService {
|
|
|
17
17
|
return { name: name, type: 'string', service: this, propertyType: PropertyType.cssValue };
|
|
18
18
|
}
|
|
19
19
|
getProperties(designItem) {
|
|
20
|
-
if (!designItem
|
|
20
|
+
if (!designItem?.element?.computedStyleMap)
|
|
21
21
|
return null;
|
|
22
22
|
let rootMap = Array.from(designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element.computedStyleMap()).map(x => x[0]).filter(key => key.startsWith("--"));
|
|
23
23
|
let props = Array.from(designItem.element.computedStyleMap()).map(x => x[0]).filter(key => key.startsWith("--"));
|
package/dist/elements/services/propertiesService/services/UnkownElementsPropertiesService.d.ts
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { IProperty } from '../IProperty.js';
|
|
2
|
+
import { IDesignItem } from '../../../item/IDesignItem.js';
|
|
3
|
+
import { IPropertyGroup } from '../IPropertyGroup.js';
|
|
4
|
+
import { AbstractPropertiesService } from './AbstractPropertiesService.js';
|
|
5
|
+
import { RefreshMode } from '../IPropertiesService.js';
|
|
6
|
+
export declare class UnkownElementsPropertiesService extends AbstractPropertiesService {
|
|
7
|
+
getRefreshMode(designItem: IDesignItem): RefreshMode;
|
|
8
|
+
isHandledElement(designItem: IDesignItem): boolean;
|
|
9
|
+
getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
|
|
10
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { AbstractPropertiesService } from './AbstractPropertiesService.js';
|
|
2
|
+
import { RefreshMode } from '../IPropertiesService.js';
|
|
3
|
+
import { PropertyType } from '../PropertyType.js';
|
|
4
|
+
export class UnkownElementsPropertiesService extends AbstractPropertiesService {
|
|
5
|
+
getRefreshMode(designItem) {
|
|
6
|
+
return RefreshMode.full;
|
|
7
|
+
}
|
|
8
|
+
isHandledElement(designItem) {
|
|
9
|
+
return true;
|
|
10
|
+
}
|
|
11
|
+
getProperties(designItem) {
|
|
12
|
+
let list = Object.getOwnPropertyNames(Object.getPrototypeOf(designItem.element));
|
|
13
|
+
let props = [];
|
|
14
|
+
for (let p of list) {
|
|
15
|
+
let desc = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(designItem.element), p);
|
|
16
|
+
if (desc.get || desc.set) {
|
|
17
|
+
let v = designItem.element[p];
|
|
18
|
+
if (typeof v == 'boolean')
|
|
19
|
+
props.push({ name: p, type: 'boolean', service: this, propertyType: PropertyType.propertyAndAttribute });
|
|
20
|
+
else if (typeof v == 'number')
|
|
21
|
+
props.push({ name: p, type: 'bonumberolean', service: this, propertyType: PropertyType.propertyAndAttribute });
|
|
22
|
+
else
|
|
23
|
+
props.push({ name: p, type: 'string', service: this, propertyType: PropertyType.propertyAndAttribute });
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
return props;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/// <reference types="node" />
|
|
2
|
+
import { IPropertiesService, RefreshMode } from '../IPropertiesService.js';
|
|
3
|
+
import { IProperty } from '../IProperty.js';
|
|
4
|
+
import { IDesignItem } from '../../../item/IDesignItem.js';
|
|
5
|
+
import { ValueType } from '../ValueType.js';
|
|
6
|
+
import { BindingTarget } from '../../../item/BindingTarget.js';
|
|
7
|
+
import { IBinding } from '../../../item/IBinding.js';
|
|
8
|
+
import { IPropertyGroup } from '../IPropertyGroup.js';
|
|
9
|
+
export declare abstract class AbstractPropertiesService implements IPropertiesService {
|
|
10
|
+
_stylesCache: Map<IDesignItem, Set<string>>;
|
|
11
|
+
_cacheClearTimer: NodeJS.Timeout;
|
|
12
|
+
abstract getRefreshMode(designItem: IDesignItem): RefreshMode;
|
|
13
|
+
abstract isHandledElement(designItem: IDesignItem): boolean;
|
|
14
|
+
protected _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any): void;
|
|
15
|
+
getProperty(designItem: IDesignItem, name: string): IProperty;
|
|
16
|
+
getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
|
|
17
|
+
setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
|
|
18
|
+
getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
|
|
19
|
+
clearValue(designItems: IDesignItem[], property: IProperty, clearType: 'all' | 'binding' | 'value'): void;
|
|
20
|
+
isSet(designItems: IDesignItem[], property: IProperty): ValueType;
|
|
21
|
+
getValue(designItems: IDesignItem[], property: IProperty): string | boolean;
|
|
22
|
+
getBinding(designItems: IDesignItem[], property: IProperty): IBinding;
|
|
23
|
+
getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
|
|
24
|
+
}
|
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
import { ValueType } from '../ValueType.js';
|
|
2
|
+
import { PropertiesHelper } from './PropertiesHelper.js';
|
|
3
|
+
import { BindingTarget } from '../../../item/BindingTarget.js';
|
|
4
|
+
import { PropertyType } from '../PropertyType.js';
|
|
5
|
+
import { NodeType } from '../../../item/NodeType.js';
|
|
6
|
+
export class AbstractPropertiesService {
|
|
7
|
+
_stylesCache = new Map;
|
|
8
|
+
_cacheClearTimer;
|
|
9
|
+
_notifyChangedProperty(designItem, property, value) {
|
|
10
|
+
}
|
|
11
|
+
getProperty(designItem, name) {
|
|
12
|
+
let properties = this.getProperties(designItem);
|
|
13
|
+
if ('properties' in properties[0]) {
|
|
14
|
+
return properties.flatMap(x => x.properties).find(x => x.name == name);
|
|
15
|
+
}
|
|
16
|
+
else
|
|
17
|
+
return properties.find(x => x.name == name);
|
|
18
|
+
}
|
|
19
|
+
getProperties(designItem) {
|
|
20
|
+
Object.getOwnPropertyNames(Object.getPrototypeOf(designItem.element));
|
|
21
|
+
}
|
|
22
|
+
setValue(designItems, property, value) {
|
|
23
|
+
const cg = designItems[0].openGroup("property changed: " + property.name + " to " + value);
|
|
24
|
+
for (let d of designItems) {
|
|
25
|
+
if (property.propertyType == PropertyType.cssValue) {
|
|
26
|
+
d.updateStyleInSheetOrLocal(property.name, value);
|
|
27
|
+
//unkown css property names do not trigger the mutation observer of property grid,
|
|
28
|
+
//fixed by assinging stle again to the attribute
|
|
29
|
+
d.element.setAttribute('style', d.element.getAttribute('style'));
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
let attributeName = property.attributeName;
|
|
33
|
+
if (!attributeName)
|
|
34
|
+
attributeName = PropertiesHelper.camelToDashCase(property.name);
|
|
35
|
+
if (property.type === 'object') {
|
|
36
|
+
const json = JSON.stringify(value);
|
|
37
|
+
if (property.propertyType == PropertyType.attribute || property.propertyType == PropertyType.propertyAndAttribute)
|
|
38
|
+
d.setAttribute(attributeName, json);
|
|
39
|
+
if (property.propertyType == PropertyType.property || property.propertyType == PropertyType.propertyAndAttribute)
|
|
40
|
+
d.element[property.name] = value;
|
|
41
|
+
}
|
|
42
|
+
else if (property.type == 'boolean' && !value) {
|
|
43
|
+
if (property.propertyType == PropertyType.attribute || property.propertyType == PropertyType.propertyAndAttribute)
|
|
44
|
+
d.removeAttribute(attributeName);
|
|
45
|
+
if (property.propertyType == PropertyType.property || property.propertyType == PropertyType.propertyAndAttribute)
|
|
46
|
+
d.element[property.name] = false;
|
|
47
|
+
}
|
|
48
|
+
else if (property.type == 'boolean' && value) {
|
|
49
|
+
if (property.propertyType == PropertyType.attribute || property.propertyType == PropertyType.propertyAndAttribute)
|
|
50
|
+
d.setAttribute(attributeName, "");
|
|
51
|
+
if (property.propertyType == PropertyType.property || property.propertyType == PropertyType.propertyAndAttribute)
|
|
52
|
+
d.element[property.name] = true;
|
|
53
|
+
}
|
|
54
|
+
else {
|
|
55
|
+
if (property.propertyType == PropertyType.attribute || property.propertyType == PropertyType.propertyAndAttribute)
|
|
56
|
+
d.setAttribute(attributeName, value.toString());
|
|
57
|
+
if (property.propertyType == PropertyType.property || property.propertyType == PropertyType.propertyAndAttribute)
|
|
58
|
+
d.element[property.name] = value;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
this._notifyChangedProperty(d, property, value);
|
|
62
|
+
}
|
|
63
|
+
cg.commit();
|
|
64
|
+
}
|
|
65
|
+
getPropertyTarget(designItem, property) {
|
|
66
|
+
return BindingTarget.property;
|
|
67
|
+
}
|
|
68
|
+
clearValue(designItems, property, clearType) {
|
|
69
|
+
const cg = designItems[0].openGroup("property cleared: " + property.name);
|
|
70
|
+
for (let d of designItems) {
|
|
71
|
+
if (clearType != 'binding') {
|
|
72
|
+
if (property.propertyType == PropertyType.cssValue) {
|
|
73
|
+
d.removeStyle(property.name);
|
|
74
|
+
}
|
|
75
|
+
else {
|
|
76
|
+
let attributeName = property.attributeName;
|
|
77
|
+
if (!attributeName)
|
|
78
|
+
attributeName = PropertiesHelper.camelToDashCase(property.name);
|
|
79
|
+
d.removeAttribute(attributeName);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
if (clearType != 'value') {
|
|
83
|
+
d.serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
|
|
84
|
+
return s.clearBinding(d, property.name, this.getPropertyTarget(d, property));
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
this._notifyChangedProperty(d, property, undefined);
|
|
88
|
+
}
|
|
89
|
+
cg.commit();
|
|
90
|
+
}
|
|
91
|
+
isSet(designItems, property) {
|
|
92
|
+
let all = true;
|
|
93
|
+
let some = false;
|
|
94
|
+
if (designItems != null && designItems.length !== 0) {
|
|
95
|
+
let attributeName = property.attributeName;
|
|
96
|
+
if (!attributeName)
|
|
97
|
+
attributeName = PropertiesHelper.camelToDashCase(property.name);
|
|
98
|
+
for (let x of designItems) {
|
|
99
|
+
let has = false;
|
|
100
|
+
if (property.propertyType == PropertyType.cssValue)
|
|
101
|
+
has = x.hasStyle(property.name);
|
|
102
|
+
else
|
|
103
|
+
has = x.hasAttribute(attributeName);
|
|
104
|
+
all = all && has;
|
|
105
|
+
some = some || has;
|
|
106
|
+
if (!all && some)
|
|
107
|
+
break;
|
|
108
|
+
}
|
|
109
|
+
;
|
|
110
|
+
//todo: optimize perf, do not call bindings service for each property.
|
|
111
|
+
const bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
|
|
112
|
+
return s.getBindings(designItems[0]);
|
|
113
|
+
});
|
|
114
|
+
if (property.propertyType == PropertyType.cssValue) {
|
|
115
|
+
if (bindings && bindings.find(x => x.target == BindingTarget.css && x.targetName == property.name))
|
|
116
|
+
return ValueType.bound;
|
|
117
|
+
}
|
|
118
|
+
else {
|
|
119
|
+
if (bindings && bindings.find(x => x.target == BindingTarget.property && x.targetName == property.name))
|
|
120
|
+
return ValueType.bound;
|
|
121
|
+
}
|
|
122
|
+
if (!all && property.propertyType == PropertyType.cssValue) {
|
|
123
|
+
let styles = this._stylesCache.get(designItems[0]);
|
|
124
|
+
if (!styles) {
|
|
125
|
+
styles = new Set(designItems[0].getAllStyles().filter(x => x.selector != null).flatMap(x => x.declarations).map(x => x.name));
|
|
126
|
+
this._stylesCache.set(designItems[0], styles);
|
|
127
|
+
clearTimeout(this._cacheClearTimer);
|
|
128
|
+
this._cacheClearTimer = setTimeout(() => this._stylesCache.clear(), 30);
|
|
129
|
+
}
|
|
130
|
+
let cssValue = styles.has(property.name);
|
|
131
|
+
if (cssValue)
|
|
132
|
+
return ValueType.fromStylesheet;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
else
|
|
136
|
+
return ValueType.none;
|
|
137
|
+
return all ? ValueType.all : some ? ValueType.some : ValueType.none;
|
|
138
|
+
}
|
|
139
|
+
getValue(designItems, property) {
|
|
140
|
+
if (designItems != null && designItems.length !== 0) {
|
|
141
|
+
if (property.propertyType == PropertyType.cssValue) {
|
|
142
|
+
let lastValue = designItems[0].getStyle(property.name);
|
|
143
|
+
for (const d of designItems) {
|
|
144
|
+
let value = d.getStyle(property.name);
|
|
145
|
+
if (value != lastValue) {
|
|
146
|
+
lastValue = null;
|
|
147
|
+
break;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
return lastValue;
|
|
151
|
+
}
|
|
152
|
+
else {
|
|
153
|
+
let attributeName = property.attributeName;
|
|
154
|
+
if (!attributeName)
|
|
155
|
+
attributeName = PropertiesHelper.camelToDashCase(property.name);
|
|
156
|
+
if (property.type == 'boolean')
|
|
157
|
+
return designItems[0].hasAttribute(attributeName);
|
|
158
|
+
let lastValue = designItems[0].getAttribute(attributeName);
|
|
159
|
+
/*
|
|
160
|
+
for (const x of designItems) {
|
|
161
|
+
let value = x.attributes.get(attributeName);
|
|
162
|
+
if (value != lastValue) {
|
|
163
|
+
lastValue = null;
|
|
164
|
+
break;
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
*/
|
|
168
|
+
return lastValue;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
return null;
|
|
172
|
+
}
|
|
173
|
+
getBinding(designItems, property) {
|
|
174
|
+
//TODO: optimize perf, do not call bindings service for each property.
|
|
175
|
+
const bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
|
|
176
|
+
return s.getBindings(designItems[0]);
|
|
177
|
+
});
|
|
178
|
+
if (property.propertyType == PropertyType.cssValue) {
|
|
179
|
+
return bindings.find(x => (x.target == BindingTarget.css) && x.targetName == property.name);
|
|
180
|
+
}
|
|
181
|
+
else {
|
|
182
|
+
return bindings.find(x => (x.target == BindingTarget.property || x.target == BindingTarget.attribute) && x.targetName == property.name);
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
getUnsetValue(designItems, property) {
|
|
186
|
+
if (property.propertyType == PropertyType.cssValue) {
|
|
187
|
+
if (designItems != null && designItems.length !== 0) {
|
|
188
|
+
if (designItems[0].nodeType == NodeType.Element) {
|
|
189
|
+
let v = window.getComputedStyle(designItems[0].element)[property.name];
|
|
190
|
+
return v;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
return null;
|
|
194
|
+
}
|
|
195
|
+
else
|
|
196
|
+
return property.defaultValue;
|
|
197
|
+
}
|
|
198
|
+
}
|
package/dist/elements/services/propertiesService/services/WebcomponentManifestPropertiesService.js
CHANGED
|
@@ -34,7 +34,8 @@ 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
|
-
|
|
37
|
+
if (d.name)
|
|
38
|
+
properties.push({ name: d.name, service: this, propertyType: pType, type: p[0], values: p[1], description: d.description });
|
|
38
39
|
}
|
|
39
40
|
}
|
|
40
41
|
this._propertiesList[e.name] = properties;
|
|
@@ -207,16 +207,18 @@ export class PointerTool {
|
|
|
207
207
|
}
|
|
208
208
|
if (!this._actionStartedDesignItem)
|
|
209
209
|
return;
|
|
210
|
+
if (!this._changeGroup)
|
|
211
|
+
this._changeGroup = designerCanvas.rootDesignItem.openGroup("Move Elements");
|
|
210
212
|
if (event.ctrlKey && !this._copiedItemsInserted) {
|
|
213
|
+
this._changeGroup.title = "Copy Elements";
|
|
211
214
|
this._copiedItemsInserted = true;
|
|
212
|
-
if (!this._changeGroup)
|
|
213
|
-
this._changeGroup = designerCanvas.rootDesignItem.openGroup("Copy Elements");
|
|
214
215
|
for (let i = 0; i < this._clonedItems.length; i++) {
|
|
215
216
|
this._actionStartedDesignItems[i].insertAdjacentElement(this._clonedItems[i], 'beforebegin');
|
|
216
217
|
}
|
|
217
218
|
designerCanvas.instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'added', designItems: this._clonedItems });
|
|
218
219
|
}
|
|
219
220
|
else if (!event.ctrlKey && this._copiedItemsInserted) {
|
|
221
|
+
this._changeGroup.title = "Move Elements";
|
|
220
222
|
for (let d of this._clonedItems) {
|
|
221
223
|
d.remove();
|
|
222
224
|
}
|
|
@@ -270,8 +272,6 @@ export class PointerTool {
|
|
|
270
272
|
const newOffset = newContainerService.getElementOffset(newContainerElementDesignItem, this._actionStartedDesignItem);
|
|
271
273
|
this._moveItemsOffset = { x: newOffset.x - oldOffset.x + this._moveItemsOffset.x, y: newOffset.y - oldOffset.y + this._moveItemsOffset.y };
|
|
272
274
|
currentContainerService.leaveContainer(this._actionStartedDesignItem.parent, this._actionStartedDesignItems);
|
|
273
|
-
for (let di of this._actionStartedDesignItems)
|
|
274
|
-
newContainerElementDesignItem._insertChildInternal(di); //todo -> maybe in enter container???
|
|
275
275
|
const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
|
|
276
276
|
newContainerService.enterContainer(newContainerElementDesignItem, this._actionStartedDesignItems);
|
|
277
277
|
newContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, this._actionStartedDesignItems);
|
package/dist/index.d.ts
CHANGED
|
@@ -119,6 +119,7 @@ export * from "./elements/services/propertiesService/services/AbstractProperties
|
|
|
119
119
|
export * from "./elements/services/propertiesService/services/WebcomponentManifestPropertiesService.js";
|
|
120
120
|
export * from "./elements/services/propertiesService/services/AttributesPropertiesService.js";
|
|
121
121
|
export * from "./elements/services/propertiesService/services/CssCustomPropertiesService.js";
|
|
122
|
+
export * from "./elements/services/propertiesService/services/UnkownElementsPropertiesService.js";
|
|
122
123
|
export * from "./elements/services/propertiesService/PropertyType.js";
|
|
123
124
|
export * from "./elements/services/propertiesService/ValueType.js";
|
|
124
125
|
export * from "./elements/services/propertiesService/PropertyTabsService.js";
|
package/dist/index.js
CHANGED
|
@@ -79,6 +79,7 @@ export * from "./elements/services/propertiesService/services/AbstractProperties
|
|
|
79
79
|
export * from "./elements/services/propertiesService/services/WebcomponentManifestPropertiesService.js";
|
|
80
80
|
export * from "./elements/services/propertiesService/services/AttributesPropertiesService.js";
|
|
81
81
|
export * from "./elements/services/propertiesService/services/CssCustomPropertiesService.js";
|
|
82
|
+
export * from "./elements/services/propertiesService/services/UnkownElementsPropertiesService.js";
|
|
82
83
|
export * from "./elements/services/propertiesService/PropertyType.js";
|
|
83
84
|
export * from "./elements/services/propertiesService/ValueType.js";
|
|
84
85
|
export * from "./elements/services/propertiesService/PropertyTabsService.js";
|