@node-projects/web-component-designer 0.0.28 → 0.0.29
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/debug.log +8 -0
- package/dist/elements/controls/DesignerTabControl.d.ts +5 -1
- package/dist/elements/controls/DesignerTabControl.js +85 -8
- package/dist/elements/helper/CssCombiner.d.ts +1 -2
- package/dist/elements/helper/CssPropertiesList.d.ts +0 -0
- package/dist/elements/helper/CssPropertiesList.js +1 -0
- package/dist/elements/item/Binding.d.ts +14 -0
- package/dist/elements/item/Binding.js +4 -0
- package/dist/elements/item/BindingMode.d.ts +4 -0
- package/dist/elements/item/BindingMode.js +5 -0
- package/dist/elements/item/BindingTarget.d.ts +8 -0
- package/dist/elements/item/BindingTarget.js +9 -0
- package/dist/elements/item/DesignItem.d.ts +4 -7
- package/dist/elements/item/DesignItem.js +0 -15
- package/dist/elements/item/IBinding copy.d.ts +14 -0
- package/dist/elements/item/IBinding copy.js +1 -0
- package/dist/elements/item/IBinding.d.ts +15 -0
- package/dist/elements/item/IBinding.js +1 -0
- package/dist/elements/item/IDesignItem.d.ts +4 -5
- package/dist/elements/services/DefaultServiceBootstrap.js +0 -3
- package/dist/elements/services/bindingsService/BaseCustomWebcomponentBindingsService.d.ts +8 -0
- package/dist/elements/services/bindingsService/BaseCustomWebcomponentBindingsService.js +69 -0
- package/dist/elements/services/bindingsService/BaseCustomeWebcomponentBindingsService copy.d.ts +9 -0
- package/dist/elements/services/bindingsService/BaseCustomeWebcomponentBindingsService copy.js +31 -0
- package/dist/elements/services/bindingsService/BaseCustomeWebcomponentBindingsService.d.ts +1 -1
- package/dist/elements/services/bindingsService/BaseCustomeWebcomponentBindingsService.js +1 -1
- package/dist/elements/services/bindingsService/IBindingService.d.ts +3 -6
- package/dist/elements/services/bindingsService/PolymerBindingsService copy.d.ts +9 -0
- package/dist/elements/services/bindingsService/PolymerBindingsService copy.js +31 -0
- package/dist/elements/services/bindingsService/SpecialTagsBindingService.d.ts +14 -0
- package/dist/elements/services/bindingsService/SpecialTagsBindingService.js +40 -0
- package/dist/elements/services/bindingsService/VueBindingsService.d.ts +0 -0
- package/dist/elements/services/bindingsService/VueBindingsService.js +7 -0
- package/dist/elements/services/htmlParserService/NodeHtmlParserService.d.ts +2 -0
- package/dist/elements/services/htmlParserService/NodeHtmlParserService.js +3 -2
- package/dist/elements/services/htmlParserService/NodeHtmlParserService.ts.BASE.d.ts +9 -0
- package/dist/elements/services/htmlParserService/NodeHtmlParserService.ts.BASE.js +100 -0
- package/dist/elements/services/htmlParserService/NodeHtmlParserService.ts.LOCAL.d.ts +11 -0
- package/dist/elements/services/htmlParserService/NodeHtmlParserService.ts.LOCAL.js +84 -0
- package/dist/elements/services/htmlParserService/NodeHtmlParserService.ts.REMOTE.d.ts +9 -0
- package/dist/elements/services/htmlParserService/NodeHtmlParserService.ts.REMOTE.js +83 -0
- package/dist/elements/services/propertiesService/services/CommonPropertiesService copy.d.ts +16 -0
- package/dist/elements/services/propertiesService/services/CommonPropertiesService copy.js +94 -0
- package/dist/elements/services/propertiesService/services/CommonPropertiesService.d.ts +1 -1
- package/dist/elements/services/propertiesService/services/CssPropertiesService.d.ts +1 -1
- package/dist/elements/services/propertiesService/services/CssPropertiesService.js +9 -1
- package/dist/elements/services/propertiesService/services/UnkownElementPropertiesService.d.ts +1 -1
- package/dist/elements/services/undoService/transactionItems/AttributeChangeAction.d.ts +1 -1
- package/dist/elements/widgets/designerView/designerView copy.d.ts +82 -0
- package/dist/elements/widgets/designerView/designerView copy.js +671 -0
- package/dist/elements/widgets/designerView/extensions/EditText/EditTextCkEditorExtension.d.ts +14 -0
- package/dist/elements/widgets/designerView/extensions/EditText/EditTextCkEditorExtension.js +42 -0
- package/dist/elements/widgets/designerView/extensions/EditText/EditTextCkEditorExtensionProvider.d.ts +9 -0
- package/dist/elements/widgets/designerView/extensions/EditText/EditTextCkEditorExtensionProvider.js +9 -0
- package/dist/elements/widgets/designerView/extensions/EditText/EditTextTinyMceExtension.d.ts +27 -0
- package/dist/elements/widgets/designerView/extensions/EditText/EditTextTinyMceExtension.js +61 -0
- package/dist/elements/widgets/designerView/extensions/EditText/EditTextTinyMceExtensionProvider.d.ts +9 -0
- package/dist/elements/widgets/designerView/extensions/EditText/EditTextTinyMceExtensionProvider.js +9 -0
- package/dist/elements/widgets/designerView/extensions/PositionExtension.js +12 -4
- package/dist/index.d.ts +4 -0
- package/dist/index.js +2 -0
- package/package.json +6 -7
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { BindingTarget } from "../../item/BindingTarget.js";
|
|
2
|
+
import { BindingMode } from "../../item/BindingMode.js";
|
|
3
|
+
/* Service wich read binings from special HTMl elements -> like tag-binding */
|
|
4
|
+
export class SpecialTagsBindingService {
|
|
5
|
+
constructor() {
|
|
6
|
+
this._bindingTagName = "visu-tagbinding";
|
|
7
|
+
this._elementIdAttribute = "elemnt-id";
|
|
8
|
+
this._propertyNameAttribute = "property";
|
|
9
|
+
this._isStyleNameAttribute = "is-style";
|
|
10
|
+
}
|
|
11
|
+
getBindings(designItem) {
|
|
12
|
+
const bindings = [];
|
|
13
|
+
const directBindings = designItem.element.querySelectorAll(':scope > ' + this._bindingTagName);
|
|
14
|
+
for (let b of directBindings) {
|
|
15
|
+
bindings.push(this._parseBindingElement(b));
|
|
16
|
+
}
|
|
17
|
+
if (designItem.id) {
|
|
18
|
+
const nameBindings = designItem.instanceServiceContainer.contentService.rootDesignItem.element.querySelectorAll(this._bindingTagName + "[" + this._elementIdAttribute + "='" + designItem.id + "]");
|
|
19
|
+
for (let b of nameBindings) {
|
|
20
|
+
const bnd = this._parseBindingElement(b);
|
|
21
|
+
bnd.targetId = designItem.id;
|
|
22
|
+
bindings.push(bnd);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
return null;
|
|
26
|
+
}
|
|
27
|
+
_parseBindingElement(b) {
|
|
28
|
+
let bnd = { targetName: b.getAttribute(this._propertyNameAttribute) };
|
|
29
|
+
bnd.target = b.hasAttribute(this._isStyleNameAttribute) ? BindingTarget.css : BindingTarget.property;
|
|
30
|
+
bnd.invert = b.hasAttribute('negative-logic');
|
|
31
|
+
bnd.rawValue = b.outerHTML;
|
|
32
|
+
bnd.type = SpecialTagsBindingService.type;
|
|
33
|
+
bnd.mode = b.hasAttribute('two-way') ? BindingMode.twoWay : BindingMode.oneWay;
|
|
34
|
+
return bnd;
|
|
35
|
+
}
|
|
36
|
+
setBinding(designItem, binding) {
|
|
37
|
+
return true;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
SpecialTagsBindingService.type = 'visu-tagbinding-binding';
|
|
File without changes
|
|
@@ -3,6 +3,8 @@ import { ServiceContainer } from "../ServiceContainer";
|
|
|
3
3
|
import { IHtmlParserService } from "./IHtmlParserService";
|
|
4
4
|
import { IDesignItem } from '../../item/IDesignItem';
|
|
5
5
|
export declare class NodeHtmlParserService implements IHtmlParserService {
|
|
6
|
+
private _parserUrl;
|
|
7
|
+
constructor(parserUrl?: string);
|
|
6
8
|
parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
|
|
7
9
|
private _parseDiv;
|
|
8
10
|
_createDesignItemsRecursive(item: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, namespace: string): IDesignItem;
|
|
@@ -4,12 +4,13 @@ import { newElementFromString } from "../../helper/ElementHelper";
|
|
|
4
4
|
// Alternative Parser, cause when you use the Browser, it instanciates the CusomElements, and some Elemnts remove
|
|
5
5
|
// attributes from their DOM, so you loose Data
|
|
6
6
|
export class NodeHtmlParserService {
|
|
7
|
-
constructor() {
|
|
7
|
+
constructor(parserUrl = '../../../../../node-html-parser-esm/dist/index.js') {
|
|
8
8
|
this._parseDiv = document.createElement("div");
|
|
9
|
+
this._parserUrl = parserUrl;
|
|
9
10
|
}
|
|
10
11
|
async parse(html, serviceContainer, instanceServiceContainer) {
|
|
11
12
|
//@ts-ignore
|
|
12
|
-
let parser = await import(
|
|
13
|
+
let parser = await import(this._parserUrl);
|
|
13
14
|
const parsed = parser.parse(html, { comment: true });
|
|
14
15
|
let designItems = [];
|
|
15
16
|
for (let p of parsed.childNodes) {
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { InstanceServiceContainer } from "../InstanceServiceContainer";
|
|
2
|
+
import { ServiceContainer } from "../ServiceContainer";
|
|
3
|
+
import { IHtmlParserService } from "./IHtmlParserService";
|
|
4
|
+
import { IDesignItem } from '../../item/IDesignItem';
|
|
5
|
+
export declare class NodeHtmlParserService implements IHtmlParserService {
|
|
6
|
+
parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
|
|
7
|
+
private _parseDiv;
|
|
8
|
+
_createDesignItemsRecursive(item: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, namespace: string): IDesignItem;
|
|
9
|
+
}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import { DesignItem } from '../../item/DesignItem';
|
|
2
|
+
import { CssAttributeParser } from "../../helper/CssAttributeParser";
|
|
3
|
+
import { newElementFromString } from "../../helper/ElementHelper";
|
|
4
|
+
// Alternative Parser, cause when you use the Browser, it instanciates the CusomElements, and some Elemnts remove
|
|
5
|
+
// attributes from their DOM, so you loose Data
|
|
6
|
+
export class NodeHtmlParserService {
|
|
7
|
+
constructor() {
|
|
8
|
+
this._parseDiv = document.createElement("div");
|
|
9
|
+
}
|
|
10
|
+
async parse(html, serviceContainer, instanceServiceContainer) {
|
|
11
|
+
//@ts-ignore
|
|
12
|
+
let parser = await import('../../../../../node-html-parser-esm/dist/index.js');
|
|
13
|
+
const parsed = parser.parse(html, { comment: true });
|
|
14
|
+
let designItems = [];
|
|
15
|
+
for (let p of parsed.childNodes) {
|
|
16
|
+
let di = this._createDesignItemsRecursive(p, serviceContainer, instanceServiceContainer, null);
|
|
17
|
+
if (di != null)
|
|
18
|
+
designItems.push(di);
|
|
19
|
+
else
|
|
20
|
+
console.warn("NodeHtmlParserService - could not parse element", p);
|
|
21
|
+
}
|
|
22
|
+
return designItems;
|
|
23
|
+
}
|
|
24
|
+
_createDesignItemsRecursive(item, serviceContainer, instanceServiceContainer, namespace) {
|
|
25
|
+
let designItem = null;
|
|
26
|
+
if (item.nodeType == 1) {
|
|
27
|
+
let element;
|
|
28
|
+
if (!namespace)
|
|
29
|
+
element = newElementFromString('<' + item.rawTagName + ' ' + item.rawAttrs + '></' + item.rawTagName + '>'); // some custom elements only parse attributes during constructor call
|
|
30
|
+
if (!element) {
|
|
31
|
+
if (namespace)
|
|
32
|
+
element = document.createElementNS(namespace, item.rawTagName);
|
|
33
|
+
else
|
|
34
|
+
element = document.createElement(item.rawTagName);
|
|
35
|
+
}
|
|
36
|
+
designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
|
|
37
|
+
let hideAtDesignTime = false;
|
|
38
|
+
let hideAtRunTime = false;
|
|
39
|
+
let lockAtDesignTime = false;
|
|
40
|
+
let style = '';
|
|
41
|
+
let attr = item.attributes;
|
|
42
|
+
for (let a in attr) {
|
|
43
|
+
let bnd;
|
|
44
|
+
if (serviceContainer.bindingService) {
|
|
45
|
+
bnd = serviceContainer.bindingService.parseBindingAttribute(a, attr[a]);
|
|
46
|
+
}
|
|
47
|
+
if (bnd) {
|
|
48
|
+
designItem.setAttribute(a, bnd);
|
|
49
|
+
}
|
|
50
|
+
else if (a !== 'style') {
|
|
51
|
+
designItem.setAttribute(a, attr[a]);
|
|
52
|
+
if (a === 'node-projects-hide-at-design-time')
|
|
53
|
+
hideAtDesignTime = true;
|
|
54
|
+
else if (a === 'node-projects-hide-at-run-time')
|
|
55
|
+
hideAtRunTime = true;
|
|
56
|
+
else if (a === 'node-projects-lock-at-design-time')
|
|
57
|
+
lockAtDesignTime = true;
|
|
58
|
+
}
|
|
59
|
+
else {
|
|
60
|
+
style = attr[a];
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
if ((element instanceof HTMLElement || element instanceof SVGElement) && style) {
|
|
64
|
+
let styleParser = new CssAttributeParser();
|
|
65
|
+
styleParser.parse(style);
|
|
66
|
+
for (let s of styleParser.entries) {
|
|
67
|
+
let bnd;
|
|
68
|
+
if (serviceContainer.bindingService) {
|
|
69
|
+
bnd = serviceContainer.bindingService.parseBindingAttribute(s.name, s.value);
|
|
70
|
+
}
|
|
71
|
+
if (bnd) {
|
|
72
|
+
designItem.setStyle(s.name, bnd);
|
|
73
|
+
}
|
|
74
|
+
else {
|
|
75
|
+
designItem.setStyle(s.name, s.value);
|
|
76
|
+
}
|
|
77
|
+
//designItem.styles.set(s.name, s.value);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
designItem.hideAtDesignTime = hideAtDesignTime;
|
|
81
|
+
designItem.hideAtRunTime = hideAtRunTime;
|
|
82
|
+
designItem.lockAtDesignTime = lockAtDesignTime;
|
|
83
|
+
element.draggable = false; //even if it should be true, for better designer exp.
|
|
84
|
+
for (let c of item.childNodes) {
|
|
85
|
+
let di = this._createDesignItemsRecursive(c, serviceContainer, instanceServiceContainer, element instanceof SVGElement ? 'http://www.w3.org/2000/svg' : null);
|
|
86
|
+
designItem.insertChild(di);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
else if (item.nodeType == 3) {
|
|
90
|
+
this._parseDiv.innerHTML = item.rawText;
|
|
91
|
+
let element = this._parseDiv.childNodes[0];
|
|
92
|
+
designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
|
|
93
|
+
}
|
|
94
|
+
else if (item.nodeType == 8) {
|
|
95
|
+
let element = document.createComment(item.rawText);
|
|
96
|
+
designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
|
|
97
|
+
}
|
|
98
|
+
return designItem;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { InstanceServiceContainer } from "../InstanceServiceContainer";
|
|
2
|
+
import { ServiceContainer } from "../ServiceContainer";
|
|
3
|
+
import { IHtmlParserService } from "./IHtmlParserService";
|
|
4
|
+
import { IDesignItem } from '../../item/IDesignItem';
|
|
5
|
+
export declare class NodeHtmlParserService implements IHtmlParserService {
|
|
6
|
+
private _parserUrl;
|
|
7
|
+
constructor(parserUrl?: string);
|
|
8
|
+
parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
|
|
9
|
+
private _parseDiv;
|
|
10
|
+
_createDesignItemsRecursive(item: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, namespace: string): IDesignItem;
|
|
11
|
+
}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { DesignItem } from '../../item/DesignItem';
|
|
2
|
+
import { CssAttributeParser } from "../../helper/CssAttributeParser";
|
|
3
|
+
import { newElementFromString } from "../../helper/ElementHelper";
|
|
4
|
+
// Alternative Parser, cause when you use the Browser, it instanciates the CusomElements, and some Elemnts remove
|
|
5
|
+
// attributes from their DOM, so you loose Data
|
|
6
|
+
export class NodeHtmlParserService {
|
|
7
|
+
constructor(parserUrl = '../../../../../node-html-parser-esm/dist/index.js') {
|
|
8
|
+
this._parseDiv = document.createElement("div");
|
|
9
|
+
this._parserUrl = parserUrl;
|
|
10
|
+
}
|
|
11
|
+
async parse(html, serviceContainer, instanceServiceContainer) {
|
|
12
|
+
//@ts-ignore
|
|
13
|
+
let parser = await import(this._parserUrl);
|
|
14
|
+
const parsed = parser.parse(html, { comment: true });
|
|
15
|
+
let designItems = [];
|
|
16
|
+
for (let p of parsed.childNodes) {
|
|
17
|
+
let di = this._createDesignItemsRecursive(p, serviceContainer, instanceServiceContainer, null);
|
|
18
|
+
if (di != null)
|
|
19
|
+
designItems.push(di);
|
|
20
|
+
else
|
|
21
|
+
console.warn("NodeHtmlParserService - could not parse element", p);
|
|
22
|
+
}
|
|
23
|
+
return designItems;
|
|
24
|
+
}
|
|
25
|
+
_createDesignItemsRecursive(item, serviceContainer, instanceServiceContainer, namespace) {
|
|
26
|
+
let designItem = null;
|
|
27
|
+
if (item.nodeType == 1) {
|
|
28
|
+
let element;
|
|
29
|
+
if (!namespace)
|
|
30
|
+
element = newElementFromString('<' + item.rawTagName + ' ' + item.rawAttrs + '></' + item.rawTagName + '>'); // some custom elements only parse attributes during constructor call
|
|
31
|
+
if (!element) {
|
|
32
|
+
if (namespace)
|
|
33
|
+
element = document.createElementNS(namespace, item.rawTagName);
|
|
34
|
+
else
|
|
35
|
+
element = document.createElement(item.rawTagName);
|
|
36
|
+
}
|
|
37
|
+
designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
|
|
38
|
+
let hideAtDesignTime = false;
|
|
39
|
+
let hideAtRunTime = false;
|
|
40
|
+
let lockAtDesignTime = false;
|
|
41
|
+
let style = '';
|
|
42
|
+
let attr = item.attributes;
|
|
43
|
+
for (let a in attr) {
|
|
44
|
+
if (a !== 'style') {
|
|
45
|
+
designItem.setAttribute(a, attr[a]);
|
|
46
|
+
if (a === 'node-projects-hide-at-design-time')
|
|
47
|
+
hideAtDesignTime = true;
|
|
48
|
+
else if (a === 'node-projects-hide-at-run-time')
|
|
49
|
+
hideAtRunTime = true;
|
|
50
|
+
else if (a === 'node-projects-lock-at-design-time')
|
|
51
|
+
lockAtDesignTime = true;
|
|
52
|
+
}
|
|
53
|
+
else {
|
|
54
|
+
style = attr[a];
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
if ((element instanceof HTMLElement || element instanceof SVGElement) && style) {
|
|
58
|
+
let styleParser = new CssAttributeParser();
|
|
59
|
+
styleParser.parse(style);
|
|
60
|
+
for (let s of styleParser.entries) {
|
|
61
|
+
designItem.setStyle(s.name, s.value);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
designItem.hideAtDesignTime = hideAtDesignTime;
|
|
65
|
+
designItem.hideAtRunTime = hideAtRunTime;
|
|
66
|
+
designItem.lockAtDesignTime = lockAtDesignTime;
|
|
67
|
+
element.draggable = false; //even if it should be true, for better designer exp.
|
|
68
|
+
for (let c of item.childNodes) {
|
|
69
|
+
let di = this._createDesignItemsRecursive(c, serviceContainer, instanceServiceContainer, element instanceof SVGElement ? 'http://www.w3.org/2000/svg' : null);
|
|
70
|
+
designItem.insertChild(di);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
else if (item.nodeType == 3) {
|
|
74
|
+
this._parseDiv.innerHTML = item.rawText;
|
|
75
|
+
let element = this._parseDiv.childNodes[0];
|
|
76
|
+
designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
|
|
77
|
+
}
|
|
78
|
+
else if (item.nodeType == 8) {
|
|
79
|
+
let element = document.createComment(item.rawText);
|
|
80
|
+
designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
|
|
81
|
+
}
|
|
82
|
+
return designItem;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { InstanceServiceContainer } from "../InstanceServiceContainer";
|
|
2
|
+
import { ServiceContainer } from "../ServiceContainer";
|
|
3
|
+
import { IHtmlParserService } from "./IHtmlParserService";
|
|
4
|
+
import { IDesignItem } from '../../item/IDesignItem';
|
|
5
|
+
export declare class NodeHtmlParserService implements IHtmlParserService {
|
|
6
|
+
parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
|
|
7
|
+
private _parseDiv;
|
|
8
|
+
_createDesignItemsRecursive(item: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, namespace: string): IDesignItem;
|
|
9
|
+
}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { DesignItem } from '../../item/DesignItem';
|
|
2
|
+
import { CssAttributeParser } from "../../helper/CssAttributeParser";
|
|
3
|
+
import { newElementFromString } from "../../helper/ElementHelper";
|
|
4
|
+
// Alternative Parser, cause when you use the Browser, it instanciates the CusomElements, and some Elemnts remove
|
|
5
|
+
// attributes from their DOM, so you loose Data
|
|
6
|
+
export class NodeHtmlParserService {
|
|
7
|
+
constructor() {
|
|
8
|
+
this._parseDiv = document.createElement("div");
|
|
9
|
+
}
|
|
10
|
+
async parse(html, serviceContainer, instanceServiceContainer) {
|
|
11
|
+
//@ts-ignore
|
|
12
|
+
let parser = await import('../../../../../node-html-parser-esm/dist/index.js');
|
|
13
|
+
const parsed = parser.parse(html, { comment: true });
|
|
14
|
+
let designItems = [];
|
|
15
|
+
for (let p of parsed.childNodes) {
|
|
16
|
+
let di = this._createDesignItemsRecursive(p, serviceContainer, instanceServiceContainer, null);
|
|
17
|
+
if (di != null)
|
|
18
|
+
designItems.push(di);
|
|
19
|
+
else
|
|
20
|
+
console.warn("NodeHtmlParserService - could not parse element", p);
|
|
21
|
+
}
|
|
22
|
+
return designItems;
|
|
23
|
+
}
|
|
24
|
+
_createDesignItemsRecursive(item, serviceContainer, instanceServiceContainer, namespace) {
|
|
25
|
+
let designItem = null;
|
|
26
|
+
if (item.nodeType == 1) {
|
|
27
|
+
let element;
|
|
28
|
+
if (!namespace)
|
|
29
|
+
element = newElementFromString('<' + item.rawTagName + ' ' + item.rawAttrs + '></' + item.rawTagName + '>'); // some custom elements only parse attributes during constructor call
|
|
30
|
+
if (!element) {
|
|
31
|
+
if (namespace)
|
|
32
|
+
element = document.createElementNS(namespace, item.rawTagName);
|
|
33
|
+
else
|
|
34
|
+
element = document.createElement(item.rawTagName);
|
|
35
|
+
}
|
|
36
|
+
designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
|
|
37
|
+
let hideAtDesignTime = false;
|
|
38
|
+
let hideAtRunTime = false;
|
|
39
|
+
let lockAtDesignTime = false;
|
|
40
|
+
let style = '';
|
|
41
|
+
let attr = item.attributes;
|
|
42
|
+
for (let a in attr) {
|
|
43
|
+
if (a !== 'style') {
|
|
44
|
+
designItem.setAttribute(a, attr[a]);
|
|
45
|
+
if (a === 'node-projects-hide-at-design-time')
|
|
46
|
+
hideAtDesignTime = true;
|
|
47
|
+
else if (a === 'node-projects-hide-at-run-time')
|
|
48
|
+
hideAtRunTime = true;
|
|
49
|
+
else if (a === 'node-projects-lock-at-design-time')
|
|
50
|
+
lockAtDesignTime = true;
|
|
51
|
+
}
|
|
52
|
+
else {
|
|
53
|
+
style = attr[a];
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
if ((element instanceof HTMLElement || element instanceof SVGElement) && style) {
|
|
57
|
+
let styleParser = new CssAttributeParser();
|
|
58
|
+
styleParser.parse(style);
|
|
59
|
+
for (let s of styleParser.entries) {
|
|
60
|
+
designItem.setStyle(s.name, s.value);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
designItem.hideAtDesignTime = hideAtDesignTime;
|
|
64
|
+
designItem.hideAtRunTime = hideAtRunTime;
|
|
65
|
+
designItem.lockAtDesignTime = lockAtDesignTime;
|
|
66
|
+
element.draggable = false; //even if it should be true, for better designer exp.
|
|
67
|
+
for (let c of item.childNodes) {
|
|
68
|
+
let di = this._createDesignItemsRecursive(c, serviceContainer, instanceServiceContainer, element instanceof SVGElement ? 'http://www.w3.org/2000/svg' : null);
|
|
69
|
+
designItem.insertChild(di);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
else if (item.nodeType == 3) {
|
|
73
|
+
this._parseDiv.innerHTML = item.rawText;
|
|
74
|
+
let element = this._parseDiv.childNodes[0];
|
|
75
|
+
designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
|
|
76
|
+
}
|
|
77
|
+
else if (item.nodeType == 8) {
|
|
78
|
+
let element = document.createComment(item.rawText);
|
|
79
|
+
designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
|
|
80
|
+
}
|
|
81
|
+
return designItem;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { IPropertiesService } from "../IPropertiesService";
|
|
2
|
+
import { IProperty } from '../IProperty';
|
|
3
|
+
import { IDesignItem } from '../../../item/IDesignItem';
|
|
4
|
+
import { ValueType } from "../ValueType";
|
|
5
|
+
export declare class CommonPropertiesService implements IPropertiesService {
|
|
6
|
+
private commonProperties;
|
|
7
|
+
name: string;
|
|
8
|
+
isHandledElement(designItem: IDesignItem): boolean;
|
|
9
|
+
getProperty(designItem: IDesignItem, name: string): IProperty;
|
|
10
|
+
getProperties(designItem: IDesignItem): IProperty[];
|
|
11
|
+
setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
|
|
12
|
+
clearValue(designItems: IDesignItem[], property: IProperty): void;
|
|
13
|
+
isSet(designItems: IDesignItem[], property: IProperty): ValueType;
|
|
14
|
+
getValue(designItems: IDesignItem[], property: IProperty): string | boolean | import("../../bindingsService/IBinding").IBinding;
|
|
15
|
+
getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
|
|
16
|
+
}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { ValueType } from "../ValueType";
|
|
2
|
+
export class CommonPropertiesService {
|
|
3
|
+
constructor() {
|
|
4
|
+
//@ts-ignore
|
|
5
|
+
this.commonProperties = [
|
|
6
|
+
{
|
|
7
|
+
name: "id",
|
|
8
|
+
type: "string",
|
|
9
|
+
service: this
|
|
10
|
+
}, {
|
|
11
|
+
name: "class",
|
|
12
|
+
type: "string",
|
|
13
|
+
service: this
|
|
14
|
+
}, {
|
|
15
|
+
name: "title",
|
|
16
|
+
type: "string",
|
|
17
|
+
service: this
|
|
18
|
+
}, {
|
|
19
|
+
name: "tabindex",
|
|
20
|
+
type: "number",
|
|
21
|
+
service: this
|
|
22
|
+
}
|
|
23
|
+
];
|
|
24
|
+
this.name = "common";
|
|
25
|
+
}
|
|
26
|
+
isHandledElement(designItem) {
|
|
27
|
+
return true;
|
|
28
|
+
}
|
|
29
|
+
getProperty(designItem, name) {
|
|
30
|
+
return this.commonProperties[name];
|
|
31
|
+
}
|
|
32
|
+
getProperties(designItem) {
|
|
33
|
+
return this.commonProperties;
|
|
34
|
+
}
|
|
35
|
+
setValue(designItems, property, value) {
|
|
36
|
+
for (let d of designItems) {
|
|
37
|
+
if (property.type == 'boolean' && !value) {
|
|
38
|
+
d.attributes.delete(property.name);
|
|
39
|
+
d.element.removeAttribute(property.name);
|
|
40
|
+
}
|
|
41
|
+
else if (property.type == 'boolean' && value) {
|
|
42
|
+
d.attributes.set(property.name, "");
|
|
43
|
+
d.element.setAttribute(property.name, "");
|
|
44
|
+
}
|
|
45
|
+
else {
|
|
46
|
+
d.attributes.set(property.name, value);
|
|
47
|
+
d.element.setAttribute(property.name, value);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
clearValue(designItems, property) {
|
|
52
|
+
for (let d of designItems) {
|
|
53
|
+
d.attributes.delete(property.name);
|
|
54
|
+
d.element.removeAttribute(property.name);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
isSet(designItems, property) {
|
|
58
|
+
let all = true;
|
|
59
|
+
let some = false;
|
|
60
|
+
if (designItems != null && designItems.length !== 0) {
|
|
61
|
+
let attributeName = property.name;
|
|
62
|
+
designItems.forEach((x) => {
|
|
63
|
+
let has = x.attributes.has(attributeName);
|
|
64
|
+
all = all && has;
|
|
65
|
+
some = some || has;
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
else
|
|
69
|
+
return ValueType.none;
|
|
70
|
+
return all ? ValueType.all : some ? ValueType.some : ValueType.none;
|
|
71
|
+
}
|
|
72
|
+
getValue(designItems, property) {
|
|
73
|
+
if (designItems != null && designItems.length !== 0) {
|
|
74
|
+
let attributeName = property.name;
|
|
75
|
+
if (property.type == 'boolean')
|
|
76
|
+
return designItems[0].attributes.has(attributeName);
|
|
77
|
+
let lastValue = designItems[0].attributes.get(attributeName);
|
|
78
|
+
/*
|
|
79
|
+
for (const x of designItems) {
|
|
80
|
+
let value = x.attributes.get(attributeName);
|
|
81
|
+
if (value != lastValue) {
|
|
82
|
+
lastValue = null;
|
|
83
|
+
break;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
*/
|
|
87
|
+
return lastValue;
|
|
88
|
+
}
|
|
89
|
+
return null;
|
|
90
|
+
}
|
|
91
|
+
getUnsetValue(designItems, property) {
|
|
92
|
+
return property.defaultValue;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
@@ -11,6 +11,6 @@ export declare class CommonPropertiesService implements IPropertiesService {
|
|
|
11
11
|
setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
|
|
12
12
|
clearValue(designItems: IDesignItem[], property: IProperty): void;
|
|
13
13
|
isSet(designItems: IDesignItem[], property: IProperty): ValueType;
|
|
14
|
-
getValue(designItems: IDesignItem[], property: IProperty): string | boolean
|
|
14
|
+
getValue(designItems: IDesignItem[], property: IProperty): string | boolean;
|
|
15
15
|
getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
|
|
16
16
|
}
|
|
@@ -14,6 +14,6 @@ export declare class CssPropertiesService implements IPropertiesService {
|
|
|
14
14
|
setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
|
|
15
15
|
clearValue(designItems: IDesignItem[], property: IProperty): void;
|
|
16
16
|
isSet(designItems: IDesignItem[], property: IProperty): ValueType;
|
|
17
|
-
getValue(designItems: IDesignItem[], property: IProperty): string
|
|
17
|
+
getValue(designItems: IDesignItem[], property: IProperty): string;
|
|
18
18
|
getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
|
|
19
19
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ValueType } from '../ValueType';
|
|
2
2
|
import { NodeType } from '../../../item/NodeType';
|
|
3
|
+
import { BindingTarget } from '../../../item/BindingTarget.js';
|
|
3
4
|
export class CssPropertiesService {
|
|
4
5
|
constructor(name) {
|
|
5
6
|
//@ts-ignore
|
|
@@ -214,12 +215,19 @@ export class CssPropertiesService {
|
|
|
214
215
|
isSet(designItems, property) {
|
|
215
216
|
let all = true;
|
|
216
217
|
let some = false;
|
|
217
|
-
if (designItems != null && designItems.length !== 0)
|
|
218
|
+
if (designItems != null && designItems.length !== 0) {
|
|
218
219
|
designItems.forEach((x) => {
|
|
219
220
|
let has = x.styles.has(property.name);
|
|
220
221
|
all = all && has;
|
|
221
222
|
some = some || has;
|
|
222
223
|
});
|
|
224
|
+
//todo: optimize perf, do not call bindings service for each property.
|
|
225
|
+
const bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
|
|
226
|
+
return s.getBindings(designItems[0]);
|
|
227
|
+
});
|
|
228
|
+
if (bindings && bindings.find(x => x.target == BindingTarget.css && x.targetName == property.name))
|
|
229
|
+
return ValueType.bound;
|
|
230
|
+
}
|
|
223
231
|
else
|
|
224
232
|
return ValueType.none;
|
|
225
233
|
return all ? ValueType.all : some ? ValueType.some : ValueType.none;
|
package/dist/elements/services/propertiesService/services/UnkownElementPropertiesService.d.ts
CHANGED
|
@@ -11,6 +11,6 @@ export declare class UnkownElementPropertiesService implements IPropertiesServic
|
|
|
11
11
|
setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
|
|
12
12
|
clearValue(designItems: IDesignItem[], property: IProperty): void;
|
|
13
13
|
isSet(designItems: IDesignItem[], property: IProperty): ValueType;
|
|
14
|
-
getValue(designItems: IDesignItem[], property: IProperty): string | boolean
|
|
14
|
+
getValue(designItems: IDesignItem[], property: IProperty): string | boolean;
|
|
15
15
|
getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
|
|
16
16
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ITransactionItem } from '../ITransactionItem';
|
|
2
2
|
import { IDesignItem } from '../../../item/IDesignItem';
|
|
3
|
-
import { IBinding } from '
|
|
3
|
+
import { IBinding } from '../../../item/IBinding.js';
|
|
4
4
|
export declare class AttributeChangeAction implements ITransactionItem {
|
|
5
5
|
constructor(designItem: IDesignItem, name: string, newValue: string | IBinding | null, oldValue: string | IBinding | null);
|
|
6
6
|
title?: string;
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { ServiceContainer } from '../../services/ServiceContainer';
|
|
2
|
+
import { InstanceServiceContainer } from '../../services/InstanceServiceContainer';
|
|
3
|
+
import { IDesignItem } from '../../item/IDesignItem';
|
|
4
|
+
import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
|
|
5
|
+
import { IDesignerView } from './IDesignerView';
|
|
6
|
+
import { Snaplines } from './Snaplines';
|
|
7
|
+
import { IDesignerMousePoint } from '../../../interfaces/IDesignerMousePoint';
|
|
8
|
+
import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper';
|
|
9
|
+
import { IPlacementView } from './IPlacementView';
|
|
10
|
+
import { IStringPosition } from '../../services/htmlWriterService/IStringPosition';
|
|
11
|
+
import { CommandType } from '../../../commandHandling/CommandType';
|
|
12
|
+
import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler';
|
|
13
|
+
import { IUiCommand } from '../../../commandHandling/IUiCommand';
|
|
14
|
+
import { IExtensionManager } from "./extensions/IExtensionManger";
|
|
15
|
+
import { IPoint } from "../../../interfaces/IPoint";
|
|
16
|
+
import { OverlayLayer } from "./extensions/OverlayLayer";
|
|
17
|
+
import { OverlayLayerView } from './overlayLayerView';
|
|
18
|
+
export declare class DesignerView extends BaseCustomWebComponentLazyAppend implements IDesignerView, IPlacementView, IUiCommandHandler {
|
|
19
|
+
serviceContainer: ServiceContainer;
|
|
20
|
+
instanceServiceContainer: InstanceServiceContainer;
|
|
21
|
+
containerBoundingRect: DOMRect;
|
|
22
|
+
gridSize: number;
|
|
23
|
+
alignOnGrid: boolean;
|
|
24
|
+
alignOnSnap: boolean;
|
|
25
|
+
snapLines: Snaplines;
|
|
26
|
+
overlayLayer: OverlayLayerView;
|
|
27
|
+
rootDesignItem: IDesignItem;
|
|
28
|
+
eatEvents: Element;
|
|
29
|
+
private _zoomFactor;
|
|
30
|
+
private _canvas;
|
|
31
|
+
private _canvasContainer;
|
|
32
|
+
private _outercanvas2;
|
|
33
|
+
private _lastHoverDesignItem;
|
|
34
|
+
private _zoomInput;
|
|
35
|
+
private _onContextMenuBound;
|
|
36
|
+
private _pointerEventHandlerBound;
|
|
37
|
+
private _firstConnect;
|
|
38
|
+
private _onKeyDownBound;
|
|
39
|
+
private _onKeyUpBound;
|
|
40
|
+
static readonly style: CSSStyleSheet;
|
|
41
|
+
static readonly template: HTMLTemplateElement;
|
|
42
|
+
extensionManager: IExtensionManager;
|
|
43
|
+
private _onDblClickBound;
|
|
44
|
+
constructor();
|
|
45
|
+
get designerWidth(): string;
|
|
46
|
+
set designerWidth(value: string);
|
|
47
|
+
get designerHeight(): string;
|
|
48
|
+
set designerHeight(value: string);
|
|
49
|
+
set additionalStyle(value: CSSStyleSheet);
|
|
50
|
+
executeCommand(command: IUiCommand): Promise<void>;
|
|
51
|
+
canExecuteCommand(command: IUiCommand): boolean;
|
|
52
|
+
handleCopyCommand(): void;
|
|
53
|
+
handlePasteCommand(): Promise<void>;
|
|
54
|
+
handleDeleteCommand(): void;
|
|
55
|
+
handleMoveCommand(command: CommandType): void;
|
|
56
|
+
initialize(serviceContainer: ServiceContainer): void;
|
|
57
|
+
elementFromPoint(x: number, y: number): Element;
|
|
58
|
+
static wrapInDesigner(elements: HTMLCollection | HTMLElement[], serviceContainer: ServiceContainer): DesignerView;
|
|
59
|
+
connectedCallback(): void;
|
|
60
|
+
zoomFactorChanged(): void;
|
|
61
|
+
getHTML(designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): string;
|
|
62
|
+
parseHTML(html: string): Promise<void>;
|
|
63
|
+
setDesignItems(designItems: IDesignItem[]): void;
|
|
64
|
+
private _addDesignItems;
|
|
65
|
+
private _onDragEnter;
|
|
66
|
+
private _onDragLeave;
|
|
67
|
+
private _onDragOver;
|
|
68
|
+
private _onDrop;
|
|
69
|
+
private _onWheel;
|
|
70
|
+
private _onContextMenu;
|
|
71
|
+
showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): ContextMenuHelper;
|
|
72
|
+
private _onDblClick;
|
|
73
|
+
private onKeyUp;
|
|
74
|
+
private onKeyDown;
|
|
75
|
+
getDesignerMousepoint(event: MouseEvent, target: Element, startPoint?: IDesignerMousePoint): IDesignerMousePoint;
|
|
76
|
+
static getHost(node: Node): Element;
|
|
77
|
+
getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): HTMLElement;
|
|
78
|
+
private _pointerEventHandler;
|
|
79
|
+
private _fillCalculationrects;
|
|
80
|
+
addOverlay(element: SVGGraphicsElement, overlayLayer?: OverlayLayer): void;
|
|
81
|
+
removeOverlay(element: SVGGraphicsElement): void;
|
|
82
|
+
}
|