@node-projects/web-component-designer 0.1.98 → 0.1.99
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/Screenshot.js +3 -1
- package/dist/elements/services/DefaultServiceBootstrap.js +2 -0
- package/dist/elements/services/propertiesService/services/MathMllElementsPropertiesService.d.ts +21 -0
- package/dist/elements/services/propertiesService/services/MathMllElementsPropertiesService.js +243 -0
- package/dist/elements/services/propertiesService/services/MathmlElementsPropertiesService.d.ts +15 -0
- package/dist/elements/services/propertiesService/services/MathmlElementsPropertiesService.js +72 -0
- package/dist/elements/services/propertiesService/services/NativeElementsPropertiesService copy.d.ts +21 -0
- package/dist/elements/services/propertiesService/services/NativeElementsPropertiesService copy.js +243 -0
- package/dist/elements/services/propertiesService/services/UnkownElementsPropertiesService.js +2 -0
- package/dist/elements/widgets/designerView/designerCanvas.js +28 -18
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +1 -1
|
@@ -24,7 +24,9 @@ export class Screenshot {
|
|
|
24
24
|
cursor: "never",
|
|
25
25
|
displaySurface: 'browser'
|
|
26
26
|
},
|
|
27
|
-
audio: false
|
|
27
|
+
audio: false,
|
|
28
|
+
selfBrowserSurface: "include",
|
|
29
|
+
preferCurrentTab: true
|
|
28
30
|
};
|
|
29
31
|
Screenshot._video.style.display = "none";
|
|
30
32
|
elementHostForVideo.appendChild(Screenshot._video);
|
|
@@ -86,6 +86,7 @@ import { EventsService } from './eventsService/EventsService.js';
|
|
|
86
86
|
import { SimpleDemoProviderService } from './demoProviderService/SimpleDemoProviderService.js';
|
|
87
87
|
import { DrawElementTool } from '../widgets/designerView/tools/DrawElementTool.js';
|
|
88
88
|
import { RoundPixelsDesignViewConfigButton } from '../widgets/designerView/extensions/buttons/RoundPixelsDesignViewConfigButton.js';
|
|
89
|
+
import { MathMLElementsPropertiesService } from './propertiesService/services/MathMLElementsPropertiesService.js';
|
|
89
90
|
export function createDefaultServiceContainer() {
|
|
90
91
|
let serviceContainer = new ServiceContainer();
|
|
91
92
|
let defaultPlacementService = new DefaultPlacementService();
|
|
@@ -96,6 +97,7 @@ export function createDefaultServiceContainer() {
|
|
|
96
97
|
serviceContainer.register("propertyService", new LitElementPropertiesService());
|
|
97
98
|
serviceContainer.register("propertyService", new NativeElementsPropertiesService());
|
|
98
99
|
serviceContainer.register("propertyService", new SVGElementsPropertiesService());
|
|
100
|
+
serviceContainer.register("propertyService", new MathMLElementsPropertiesService());
|
|
99
101
|
serviceContainer.register("propertyService", new Lit2PropertiesService());
|
|
100
102
|
serviceContainer.register("propertyService", new BaseCustomWebComponentPropertiesService());
|
|
101
103
|
serviceContainer.register("propertyGroupsService", new PropertyGroupsService());
|
package/dist/elements/services/propertiesService/services/MathMllElementsPropertiesService.d.ts
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { IProperty } from '../IProperty.js';
|
|
2
|
+
import { IDesignItem } from '../../../item/IDesignItem.js';
|
|
3
|
+
import { CommonPropertiesService } from './CommonPropertiesService.js';
|
|
4
|
+
import { RefreshMode } from '../IPropertiesService.js';
|
|
5
|
+
import { IPropertyGroup } from '../IPropertyGroup.js';
|
|
6
|
+
export declare class NativeElementsPropertiesService extends CommonPropertiesService {
|
|
7
|
+
private inputProperties;
|
|
8
|
+
private textareaProperties;
|
|
9
|
+
private selectProperties;
|
|
10
|
+
private buttonProperties;
|
|
11
|
+
private anchorProperties;
|
|
12
|
+
private divProperties;
|
|
13
|
+
private imgProperties;
|
|
14
|
+
private iframeProperties;
|
|
15
|
+
private formElementProperties;
|
|
16
|
+
name: string;
|
|
17
|
+
getRefreshMode(designItem: IDesignItem): RefreshMode;
|
|
18
|
+
isHandledElement(designItem: IDesignItem): boolean;
|
|
19
|
+
getProperty(designItem: IDesignItem, name: string): IProperty;
|
|
20
|
+
getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
|
|
21
|
+
}
|
|
@@ -0,0 +1,243 @@
|
|
|
1
|
+
import { CommonPropertiesService } from './CommonPropertiesService.js';
|
|
2
|
+
import { PropertyType } from '../PropertyType.js';
|
|
3
|
+
import { RefreshMode } from '../IPropertiesService.js';
|
|
4
|
+
export class NativeElementsPropertiesService extends CommonPropertiesService {
|
|
5
|
+
inputProperties = [
|
|
6
|
+
{
|
|
7
|
+
name: "type",
|
|
8
|
+
type: "list",
|
|
9
|
+
values: ["text", "number", "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "password", "radio", "range", "reset", "search", "submit", "tel", "time", "url", "week"],
|
|
10
|
+
service: this,
|
|
11
|
+
defaultValue: "text",
|
|
12
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
13
|
+
}, {
|
|
14
|
+
name: "value",
|
|
15
|
+
type: "string",
|
|
16
|
+
service: this,
|
|
17
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
18
|
+
}, {
|
|
19
|
+
name: "placeholder",
|
|
20
|
+
type: "string",
|
|
21
|
+
service: this,
|
|
22
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
23
|
+
}, {
|
|
24
|
+
name: "checked",
|
|
25
|
+
type: "boolean",
|
|
26
|
+
service: this,
|
|
27
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
28
|
+
}, {
|
|
29
|
+
name: "min",
|
|
30
|
+
type: "number",
|
|
31
|
+
service: this,
|
|
32
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
33
|
+
}, {
|
|
34
|
+
name: "max",
|
|
35
|
+
type: "number",
|
|
36
|
+
service: this,
|
|
37
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
38
|
+
}, {
|
|
39
|
+
name: "readonly",
|
|
40
|
+
type: "boolean",
|
|
41
|
+
service: this,
|
|
42
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
43
|
+
}, {
|
|
44
|
+
name: "valueAsDate",
|
|
45
|
+
type: "string",
|
|
46
|
+
service: this,
|
|
47
|
+
propertyType: PropertyType.property
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
name: "valueAsNumber",
|
|
51
|
+
type: "string",
|
|
52
|
+
service: this,
|
|
53
|
+
propertyType: PropertyType.property
|
|
54
|
+
}
|
|
55
|
+
];
|
|
56
|
+
textareaProperties = [
|
|
57
|
+
{
|
|
58
|
+
name: "value",
|
|
59
|
+
type: "string",
|
|
60
|
+
service: this,
|
|
61
|
+
propertyType: PropertyType.property
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
name: "placeholder",
|
|
65
|
+
type: "string",
|
|
66
|
+
service: this,
|
|
67
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
68
|
+
}, {
|
|
69
|
+
name: "maxlength",
|
|
70
|
+
type: "number",
|
|
71
|
+
service: this,
|
|
72
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
73
|
+
}, {
|
|
74
|
+
name: "cols",
|
|
75
|
+
type: "number",
|
|
76
|
+
service: this,
|
|
77
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
78
|
+
}, {
|
|
79
|
+
name: "rows",
|
|
80
|
+
type: "number",
|
|
81
|
+
service: this,
|
|
82
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
83
|
+
}, {
|
|
84
|
+
name: "readonly",
|
|
85
|
+
type: "boolean",
|
|
86
|
+
service: this,
|
|
87
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
88
|
+
}, {
|
|
89
|
+
name: "resize",
|
|
90
|
+
type: "list",
|
|
91
|
+
values: ["both", "none", "horizontal", "vertical"],
|
|
92
|
+
service: this,
|
|
93
|
+
propertyType: PropertyType.cssValue
|
|
94
|
+
}
|
|
95
|
+
];
|
|
96
|
+
selectProperties = [
|
|
97
|
+
{
|
|
98
|
+
name: "value",
|
|
99
|
+
type: "string",
|
|
100
|
+
service: this,
|
|
101
|
+
propertyType: PropertyType.property
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
name: "size",
|
|
105
|
+
type: "number",
|
|
106
|
+
service: this,
|
|
107
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
108
|
+
}, {
|
|
109
|
+
name: "multiple",
|
|
110
|
+
type: "boolean",
|
|
111
|
+
service: this,
|
|
112
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
113
|
+
}
|
|
114
|
+
];
|
|
115
|
+
buttonProperties = [
|
|
116
|
+
{
|
|
117
|
+
name: "type",
|
|
118
|
+
type: "list",
|
|
119
|
+
values: ["button", "submit", "reset"],
|
|
120
|
+
service: this,
|
|
121
|
+
defaultValue: "button",
|
|
122
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
123
|
+
}, {
|
|
124
|
+
name: "value",
|
|
125
|
+
type: "string",
|
|
126
|
+
service: this,
|
|
127
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
128
|
+
}
|
|
129
|
+
];
|
|
130
|
+
anchorProperties = [
|
|
131
|
+
{
|
|
132
|
+
name: "href",
|
|
133
|
+
type: "string",
|
|
134
|
+
service: this,
|
|
135
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
136
|
+
}
|
|
137
|
+
];
|
|
138
|
+
divProperties = [
|
|
139
|
+
{
|
|
140
|
+
name: "title",
|
|
141
|
+
type: "string",
|
|
142
|
+
service: this,
|
|
143
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
144
|
+
}
|
|
145
|
+
];
|
|
146
|
+
imgProperties = [
|
|
147
|
+
{
|
|
148
|
+
name: "src",
|
|
149
|
+
type: "string",
|
|
150
|
+
service: this,
|
|
151
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
152
|
+
}
|
|
153
|
+
];
|
|
154
|
+
iframeProperties = [
|
|
155
|
+
{
|
|
156
|
+
name: "src",
|
|
157
|
+
type: "string",
|
|
158
|
+
service: this,
|
|
159
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
160
|
+
}
|
|
161
|
+
];
|
|
162
|
+
formElementProperties = [
|
|
163
|
+
{
|
|
164
|
+
name: "autofocus",
|
|
165
|
+
type: "boolean",
|
|
166
|
+
service: this,
|
|
167
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
name: "disabled",
|
|
171
|
+
type: "boolean",
|
|
172
|
+
service: this,
|
|
173
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
name: "required",
|
|
177
|
+
type: "boolean",
|
|
178
|
+
service: this,
|
|
179
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
180
|
+
}
|
|
181
|
+
];
|
|
182
|
+
name = "native";
|
|
183
|
+
getRefreshMode(designItem) {
|
|
184
|
+
return RefreshMode.full;
|
|
185
|
+
}
|
|
186
|
+
isHandledElement(designItem) {
|
|
187
|
+
switch (designItem.element.localName) {
|
|
188
|
+
case 'input':
|
|
189
|
+
case 'textarea':
|
|
190
|
+
case 'select':
|
|
191
|
+
case 'button':
|
|
192
|
+
case 'a':
|
|
193
|
+
case 'div':
|
|
194
|
+
case 'span':
|
|
195
|
+
case 'br':
|
|
196
|
+
case 'img':
|
|
197
|
+
case 'iframe':
|
|
198
|
+
case 'h1':
|
|
199
|
+
case 'h2':
|
|
200
|
+
case 'h3':
|
|
201
|
+
case 'h4':
|
|
202
|
+
case 'h5':
|
|
203
|
+
case 'h6':
|
|
204
|
+
case 'p':
|
|
205
|
+
return true;
|
|
206
|
+
}
|
|
207
|
+
return false;
|
|
208
|
+
}
|
|
209
|
+
getProperty(designItem, name) {
|
|
210
|
+
return this.getProperties(designItem).find(x => x.name == name);
|
|
211
|
+
}
|
|
212
|
+
getProperties(designItem) {
|
|
213
|
+
if (!this.isHandledElement(designItem))
|
|
214
|
+
return null;
|
|
215
|
+
switch (designItem.element.localName) {
|
|
216
|
+
case 'input':
|
|
217
|
+
return [...this.inputProperties, ...this.formElementProperties];
|
|
218
|
+
case 'textarea':
|
|
219
|
+
return [...this.textareaProperties, ...this.formElementProperties];
|
|
220
|
+
case 'select':
|
|
221
|
+
return [...this.selectProperties, ...this.formElementProperties];
|
|
222
|
+
case 'button':
|
|
223
|
+
return [...this.buttonProperties, ...this.formElementProperties];
|
|
224
|
+
case 'a':
|
|
225
|
+
return this.anchorProperties;
|
|
226
|
+
case 'div':
|
|
227
|
+
return this.divProperties;
|
|
228
|
+
case 'img':
|
|
229
|
+
return this.imgProperties;
|
|
230
|
+
case 'iframe':
|
|
231
|
+
return this.iframeProperties;
|
|
232
|
+
case 'h1':
|
|
233
|
+
case 'h2':
|
|
234
|
+
case 'h3':
|
|
235
|
+
case 'h4':
|
|
236
|
+
case 'h5':
|
|
237
|
+
case 'h6':
|
|
238
|
+
case 'p':
|
|
239
|
+
return [];
|
|
240
|
+
}
|
|
241
|
+
return null;
|
|
242
|
+
}
|
|
243
|
+
}
|
package/dist/elements/services/propertiesService/services/MathmlElementsPropertiesService.d.ts
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { IProperty } from '../IProperty.js';
|
|
2
|
+
import { IDesignItem } from '../../../item/IDesignItem.js';
|
|
3
|
+
import { CommonPropertiesService } from './CommonPropertiesService.js';
|
|
4
|
+
import { RefreshMode } from '../IPropertiesService.js';
|
|
5
|
+
import { IPropertyGroup } from '../IPropertyGroup.js';
|
|
6
|
+
export declare class MathMLElementsPropertiesService extends CommonPropertiesService {
|
|
7
|
+
private commonMathProperties;
|
|
8
|
+
private mathProperties;
|
|
9
|
+
private mfracProperties;
|
|
10
|
+
name: string;
|
|
11
|
+
getRefreshMode(designItem: IDesignItem): RefreshMode;
|
|
12
|
+
isHandledElement(designItem: IDesignItem): boolean;
|
|
13
|
+
getProperty(designItem: IDesignItem, name: string): IProperty;
|
|
14
|
+
getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
|
|
15
|
+
}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { CommonPropertiesService } from './CommonPropertiesService.js';
|
|
2
|
+
import { PropertyType } from '../PropertyType.js';
|
|
3
|
+
import { RefreshMode } from '../IPropertiesService.js';
|
|
4
|
+
export class MathMLElementsPropertiesService extends CommonPropertiesService {
|
|
5
|
+
commonMathProperties = [
|
|
6
|
+
{
|
|
7
|
+
name: "displaystyle",
|
|
8
|
+
type: "boolean",
|
|
9
|
+
service: this,
|
|
10
|
+
defaultValue: true,
|
|
11
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
12
|
+
}
|
|
13
|
+
];
|
|
14
|
+
mathProperties = [
|
|
15
|
+
{
|
|
16
|
+
name: "display",
|
|
17
|
+
type: "list",
|
|
18
|
+
values: ["block", "inline"],
|
|
19
|
+
service: this,
|
|
20
|
+
defaultValue: "text",
|
|
21
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
22
|
+
}
|
|
23
|
+
];
|
|
24
|
+
mfracProperties = [
|
|
25
|
+
{
|
|
26
|
+
name: "denomalign",
|
|
27
|
+
type: "list",
|
|
28
|
+
values: ["left", "center", "right"],
|
|
29
|
+
service: this,
|
|
30
|
+
defaultValue: "center",
|
|
31
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
name: "linethickness",
|
|
35
|
+
type: "string",
|
|
36
|
+
service: this,
|
|
37
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
name: "numalign",
|
|
41
|
+
type: "list",
|
|
42
|
+
values: ["left", "center", "right"],
|
|
43
|
+
service: this,
|
|
44
|
+
defaultValue: "center",
|
|
45
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
46
|
+
},
|
|
47
|
+
];
|
|
48
|
+
name = "mathml";
|
|
49
|
+
getRefreshMode(designItem) {
|
|
50
|
+
return RefreshMode.full;
|
|
51
|
+
}
|
|
52
|
+
isHandledElement(designItem) {
|
|
53
|
+
return designItem.element instanceof MathMLElement;
|
|
54
|
+
}
|
|
55
|
+
getProperty(designItem, name) {
|
|
56
|
+
return this.getProperties(designItem).find(x => x.name == name);
|
|
57
|
+
}
|
|
58
|
+
getProperties(designItem) {
|
|
59
|
+
if (!this.isHandledElement(designItem))
|
|
60
|
+
return null;
|
|
61
|
+
switch (designItem.element.localName) {
|
|
62
|
+
case 'math':
|
|
63
|
+
return [...this.commonMathProperties, ...this.mathProperties];
|
|
64
|
+
case 'merror':
|
|
65
|
+
return [...this.commonMathProperties];
|
|
66
|
+
case 'mfrac':
|
|
67
|
+
return [...this.commonMathProperties, ...this.mfracProperties];
|
|
68
|
+
default:
|
|
69
|
+
return [...this.commonMathProperties];
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
package/dist/elements/services/propertiesService/services/NativeElementsPropertiesService copy.d.ts
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { IProperty } from '../IProperty.js';
|
|
2
|
+
import { IDesignItem } from '../../../item/IDesignItem.js';
|
|
3
|
+
import { CommonPropertiesService } from './CommonPropertiesService.js';
|
|
4
|
+
import { RefreshMode } from '../IPropertiesService.js';
|
|
5
|
+
import { IPropertyGroup } from '../IPropertyGroup.js';
|
|
6
|
+
export declare class NativeElementsPropertiesService extends CommonPropertiesService {
|
|
7
|
+
private inputProperties;
|
|
8
|
+
private textareaProperties;
|
|
9
|
+
private selectProperties;
|
|
10
|
+
private buttonProperties;
|
|
11
|
+
private anchorProperties;
|
|
12
|
+
private divProperties;
|
|
13
|
+
private imgProperties;
|
|
14
|
+
private iframeProperties;
|
|
15
|
+
private formElementProperties;
|
|
16
|
+
name: string;
|
|
17
|
+
getRefreshMode(designItem: IDesignItem): RefreshMode;
|
|
18
|
+
isHandledElement(designItem: IDesignItem): boolean;
|
|
19
|
+
getProperty(designItem: IDesignItem, name: string): IProperty;
|
|
20
|
+
getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
|
|
21
|
+
}
|
package/dist/elements/services/propertiesService/services/NativeElementsPropertiesService copy.js
ADDED
|
@@ -0,0 +1,243 @@
|
|
|
1
|
+
import { CommonPropertiesService } from './CommonPropertiesService.js';
|
|
2
|
+
import { PropertyType } from '../PropertyType.js';
|
|
3
|
+
import { RefreshMode } from '../IPropertiesService.js';
|
|
4
|
+
export class NativeElementsPropertiesService extends CommonPropertiesService {
|
|
5
|
+
inputProperties = [
|
|
6
|
+
{
|
|
7
|
+
name: "type",
|
|
8
|
+
type: "list",
|
|
9
|
+
values: ["text", "number", "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "password", "radio", "range", "reset", "search", "submit", "tel", "time", "url", "week"],
|
|
10
|
+
service: this,
|
|
11
|
+
defaultValue: "text",
|
|
12
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
13
|
+
}, {
|
|
14
|
+
name: "value",
|
|
15
|
+
type: "string",
|
|
16
|
+
service: this,
|
|
17
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
18
|
+
}, {
|
|
19
|
+
name: "placeholder",
|
|
20
|
+
type: "string",
|
|
21
|
+
service: this,
|
|
22
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
23
|
+
}, {
|
|
24
|
+
name: "checked",
|
|
25
|
+
type: "boolean",
|
|
26
|
+
service: this,
|
|
27
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
28
|
+
}, {
|
|
29
|
+
name: "min",
|
|
30
|
+
type: "number",
|
|
31
|
+
service: this,
|
|
32
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
33
|
+
}, {
|
|
34
|
+
name: "max",
|
|
35
|
+
type: "number",
|
|
36
|
+
service: this,
|
|
37
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
38
|
+
}, {
|
|
39
|
+
name: "readonly",
|
|
40
|
+
type: "boolean",
|
|
41
|
+
service: this,
|
|
42
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
43
|
+
}, {
|
|
44
|
+
name: "valueAsDate",
|
|
45
|
+
type: "string",
|
|
46
|
+
service: this,
|
|
47
|
+
propertyType: PropertyType.property
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
name: "valueAsNumber",
|
|
51
|
+
type: "string",
|
|
52
|
+
service: this,
|
|
53
|
+
propertyType: PropertyType.property
|
|
54
|
+
}
|
|
55
|
+
];
|
|
56
|
+
textareaProperties = [
|
|
57
|
+
{
|
|
58
|
+
name: "value",
|
|
59
|
+
type: "string",
|
|
60
|
+
service: this,
|
|
61
|
+
propertyType: PropertyType.property
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
name: "placeholder",
|
|
65
|
+
type: "string",
|
|
66
|
+
service: this,
|
|
67
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
68
|
+
}, {
|
|
69
|
+
name: "maxlength",
|
|
70
|
+
type: "number",
|
|
71
|
+
service: this,
|
|
72
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
73
|
+
}, {
|
|
74
|
+
name: "cols",
|
|
75
|
+
type: "number",
|
|
76
|
+
service: this,
|
|
77
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
78
|
+
}, {
|
|
79
|
+
name: "rows",
|
|
80
|
+
type: "number",
|
|
81
|
+
service: this,
|
|
82
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
83
|
+
}, {
|
|
84
|
+
name: "readonly",
|
|
85
|
+
type: "boolean",
|
|
86
|
+
service: this,
|
|
87
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
88
|
+
}, {
|
|
89
|
+
name: "resize",
|
|
90
|
+
type: "list",
|
|
91
|
+
values: ["both", "none", "horizontal", "vertical"],
|
|
92
|
+
service: this,
|
|
93
|
+
propertyType: PropertyType.cssValue
|
|
94
|
+
}
|
|
95
|
+
];
|
|
96
|
+
selectProperties = [
|
|
97
|
+
{
|
|
98
|
+
name: "value",
|
|
99
|
+
type: "string",
|
|
100
|
+
service: this,
|
|
101
|
+
propertyType: PropertyType.property
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
name: "size",
|
|
105
|
+
type: "number",
|
|
106
|
+
service: this,
|
|
107
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
108
|
+
}, {
|
|
109
|
+
name: "multiple",
|
|
110
|
+
type: "boolean",
|
|
111
|
+
service: this,
|
|
112
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
113
|
+
}
|
|
114
|
+
];
|
|
115
|
+
buttonProperties = [
|
|
116
|
+
{
|
|
117
|
+
name: "type",
|
|
118
|
+
type: "list",
|
|
119
|
+
values: ["button", "submit", "reset"],
|
|
120
|
+
service: this,
|
|
121
|
+
defaultValue: "button",
|
|
122
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
123
|
+
}, {
|
|
124
|
+
name: "value",
|
|
125
|
+
type: "string",
|
|
126
|
+
service: this,
|
|
127
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
128
|
+
}
|
|
129
|
+
];
|
|
130
|
+
anchorProperties = [
|
|
131
|
+
{
|
|
132
|
+
name: "href",
|
|
133
|
+
type: "string",
|
|
134
|
+
service: this,
|
|
135
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
136
|
+
}
|
|
137
|
+
];
|
|
138
|
+
divProperties = [
|
|
139
|
+
{
|
|
140
|
+
name: "title",
|
|
141
|
+
type: "string",
|
|
142
|
+
service: this,
|
|
143
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
144
|
+
}
|
|
145
|
+
];
|
|
146
|
+
imgProperties = [
|
|
147
|
+
{
|
|
148
|
+
name: "src",
|
|
149
|
+
type: "string",
|
|
150
|
+
service: this,
|
|
151
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
152
|
+
}
|
|
153
|
+
];
|
|
154
|
+
iframeProperties = [
|
|
155
|
+
{
|
|
156
|
+
name: "src",
|
|
157
|
+
type: "string",
|
|
158
|
+
service: this,
|
|
159
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
160
|
+
}
|
|
161
|
+
];
|
|
162
|
+
formElementProperties = [
|
|
163
|
+
{
|
|
164
|
+
name: "autofocus",
|
|
165
|
+
type: "boolean",
|
|
166
|
+
service: this,
|
|
167
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
name: "disabled",
|
|
171
|
+
type: "boolean",
|
|
172
|
+
service: this,
|
|
173
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
name: "required",
|
|
177
|
+
type: "boolean",
|
|
178
|
+
service: this,
|
|
179
|
+
propertyType: PropertyType.propertyAndAttribute
|
|
180
|
+
}
|
|
181
|
+
];
|
|
182
|
+
name = "native";
|
|
183
|
+
getRefreshMode(designItem) {
|
|
184
|
+
return RefreshMode.full;
|
|
185
|
+
}
|
|
186
|
+
isHandledElement(designItem) {
|
|
187
|
+
switch (designItem.element.localName) {
|
|
188
|
+
case 'input':
|
|
189
|
+
case 'textarea':
|
|
190
|
+
case 'select':
|
|
191
|
+
case 'button':
|
|
192
|
+
case 'a':
|
|
193
|
+
case 'div':
|
|
194
|
+
case 'span':
|
|
195
|
+
case 'br':
|
|
196
|
+
case 'img':
|
|
197
|
+
case 'iframe':
|
|
198
|
+
case 'h1':
|
|
199
|
+
case 'h2':
|
|
200
|
+
case 'h3':
|
|
201
|
+
case 'h4':
|
|
202
|
+
case 'h5':
|
|
203
|
+
case 'h6':
|
|
204
|
+
case 'p':
|
|
205
|
+
return true;
|
|
206
|
+
}
|
|
207
|
+
return false;
|
|
208
|
+
}
|
|
209
|
+
getProperty(designItem, name) {
|
|
210
|
+
return this.getProperties(designItem).find(x => x.name == name);
|
|
211
|
+
}
|
|
212
|
+
getProperties(designItem) {
|
|
213
|
+
if (!this.isHandledElement(designItem))
|
|
214
|
+
return null;
|
|
215
|
+
switch (designItem.element.localName) {
|
|
216
|
+
case 'input':
|
|
217
|
+
return [...this.inputProperties, ...this.formElementProperties];
|
|
218
|
+
case 'textarea':
|
|
219
|
+
return [...this.textareaProperties, ...this.formElementProperties];
|
|
220
|
+
case 'select':
|
|
221
|
+
return [...this.selectProperties, ...this.formElementProperties];
|
|
222
|
+
case 'button':
|
|
223
|
+
return [...this.buttonProperties, ...this.formElementProperties];
|
|
224
|
+
case 'a':
|
|
225
|
+
return this.anchorProperties;
|
|
226
|
+
case 'div':
|
|
227
|
+
return this.divProperties;
|
|
228
|
+
case 'img':
|
|
229
|
+
return this.imgProperties;
|
|
230
|
+
case 'iframe':
|
|
231
|
+
return this.iframeProperties;
|
|
232
|
+
case 'h1':
|
|
233
|
+
case 'h2':
|
|
234
|
+
case 'h3':
|
|
235
|
+
case 'h4':
|
|
236
|
+
case 'h5':
|
|
237
|
+
case 'h6':
|
|
238
|
+
case 'p':
|
|
239
|
+
return [];
|
|
240
|
+
}
|
|
241
|
+
return null;
|
|
242
|
+
}
|
|
243
|
+
}
|
package/dist/elements/services/propertiesService/services/UnkownElementsPropertiesService.js
CHANGED
|
@@ -12,6 +12,8 @@ export class UnkownElementsPropertiesService extends AbstractPropertiesService {
|
|
|
12
12
|
let list = Object.getOwnPropertyNames(Object.getPrototypeOf(designItem.element));
|
|
13
13
|
let props = [];
|
|
14
14
|
for (let p of list) {
|
|
15
|
+
if (p.startsWith('on'))
|
|
16
|
+
continue;
|
|
15
17
|
let desc = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(designItem.element), p);
|
|
16
18
|
if (desc.get || desc.set) {
|
|
17
19
|
let v = designItem.element[p];
|
|
@@ -118,7 +118,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
|
|
|
118
118
|
font-weight: inherit;
|
|
119
119
|
font-style: inherit;
|
|
120
120
|
line-height: inherit;
|
|
121
|
-
--node-projects-web-component-designer-background: inherit;
|
|
122
121
|
}
|
|
123
122
|
* {
|
|
124
123
|
touch-action: none;
|
|
@@ -363,24 +362,34 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
|
|
|
363
362
|
if (!this.instanceServiceContainer.selectionService.primarySelection) {
|
|
364
363
|
this.zoomToFit();
|
|
365
364
|
this.disableBackgroud();
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
365
|
+
try {
|
|
366
|
+
const el = this.rootDesignItem.element;
|
|
367
|
+
const sel = this.instanceServiceContainer.selectionService.selectedElements;
|
|
368
|
+
this.instanceServiceContainer.selectionService.setSelectedElements(null);
|
|
369
|
+
await sleep(100);
|
|
370
|
+
const screenshot = await Screenshot.takeScreenshot(el, el.clientWidth, el.clientHeight);
|
|
371
|
+
await exportData(dataURItoBlob(screenshot), "screenshot.png");
|
|
372
|
+
this.instanceServiceContainer.selectionService.setSelectedElements(sel);
|
|
373
|
+
}
|
|
374
|
+
catch (err) {
|
|
375
|
+
console.error(err);
|
|
376
|
+
}
|
|
373
377
|
this.enableBackground();
|
|
374
378
|
}
|
|
375
379
|
else {
|
|
376
380
|
this.disableBackgroud();
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
381
|
+
try {
|
|
382
|
+
const el = this.instanceServiceContainer.selectionService.primarySelection.element;
|
|
383
|
+
const sel = this.instanceServiceContainer.selectionService.selectedElements;
|
|
384
|
+
this.instanceServiceContainer.selectionService.setSelectedElements(null);
|
|
385
|
+
await sleep(100);
|
|
386
|
+
const screenshot = await Screenshot.takeScreenshot(el, el.clientWidth, el.clientHeight);
|
|
387
|
+
await exportData(dataURItoBlob(screenshot), "screenshot.png");
|
|
388
|
+
this.instanceServiceContainer.selectionService.setSelectedElements(sel);
|
|
389
|
+
}
|
|
390
|
+
catch (err) {
|
|
391
|
+
console.error(err);
|
|
392
|
+
}
|
|
384
393
|
this.enableBackground();
|
|
385
394
|
}
|
|
386
395
|
}
|
|
@@ -430,10 +439,10 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
|
|
|
430
439
|
}
|
|
431
440
|
}
|
|
432
441
|
disableBackgroud() {
|
|
433
|
-
this._canvasContainer.style.
|
|
442
|
+
this._canvasContainer.style.background = 'var(--node-projects-web-component-designer-screenshot-background, white)';
|
|
434
443
|
}
|
|
435
444
|
enableBackground() {
|
|
436
|
-
this._canvasContainer.style.
|
|
445
|
+
this._canvasContainer.style.background = '';
|
|
437
446
|
}
|
|
438
447
|
zoomToFit() {
|
|
439
448
|
const autoZomOffset = 10;
|
|
@@ -844,7 +853,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
|
|
|
844
853
|
}
|
|
845
854
|
_onDblClick(event) {
|
|
846
855
|
event.preventDefault();
|
|
847
|
-
this.
|
|
856
|
+
if (this.serviceContainer.globalContext.tool == null || this.serviceContainer.globalContext.tool === this.serviceContainer.designerTools.get(NamedTools.Pointer))
|
|
857
|
+
this.extensionManager.applyExtension(this.instanceServiceContainer.selectionService.primarySelection, ExtensionType.Doubleclick, event);
|
|
848
858
|
}
|
|
849
859
|
_searchShowOverlay() {
|
|
850
860
|
let divElement = this._getDomElement('node-projects-designer-search-container');
|
package/dist/index.d.ts
CHANGED
|
@@ -115,6 +115,7 @@ export * from "./elements/services/propertiesService/services/CssCurrentProperti
|
|
|
115
115
|
export * from "./elements/services/propertiesService/services/CssPropertiesService.js";
|
|
116
116
|
export * from "./elements/services/propertiesService/services/ListPropertiesService.js";
|
|
117
117
|
export * from "./elements/services/propertiesService/services/LitElementPropertiesService.js";
|
|
118
|
+
export * from "./elements/services/propertiesService/services/MathMLElementsPropertiesService.js";
|
|
118
119
|
export * from "./elements/services/propertiesService/services/NativeElementsPropertiesService.js";
|
|
119
120
|
export * from "./elements/services/propertiesService/services/SVGElementsPropertiesService.js";
|
|
120
121
|
export * from "./elements/services/propertiesService/services/PolymerPropertiesService.js";
|
package/dist/index.js
CHANGED
|
@@ -74,6 +74,7 @@ export * from "./elements/services/propertiesService/services/CssCurrentProperti
|
|
|
74
74
|
export * from "./elements/services/propertiesService/services/CssPropertiesService.js";
|
|
75
75
|
export * from "./elements/services/propertiesService/services/ListPropertiesService.js";
|
|
76
76
|
export * from "./elements/services/propertiesService/services/LitElementPropertiesService.js";
|
|
77
|
+
export * from "./elements/services/propertiesService/services/MathMLElementsPropertiesService.js";
|
|
77
78
|
export * from "./elements/services/propertiesService/services/NativeElementsPropertiesService.js";
|
|
78
79
|
export * from "./elements/services/propertiesService/services/SVGElementsPropertiesService.js";
|
|
79
80
|
export * from "./elements/services/propertiesService/services/PolymerPropertiesService.js";
|