@node-projects/web-component-designer 0.0.254 → 0.0.256
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/item/DesignItem.js +2 -0
- package/dist/elements/services/DefaultServiceBootstrap.js +2 -1
- package/dist/elements/services/ServiceContainer.d.ts +3 -0
- package/dist/elements/services/ServiceContainer.js +3 -0
- package/dist/elements/services/eventsService/EventsService.d.ts +17 -0
- package/dist/elements/services/eventsService/EventsService.js +91 -0
- package/dist/elements/services/eventsService/IEvent.d.ts +4 -0
- package/dist/elements/services/eventsService/IEvent.js +1 -0
- package/dist/elements/services/eventsService/IEventsService copy.d.ts +2 -0
- package/dist/elements/services/eventsService/IEventsService copy.js +1 -0
- package/dist/elements/services/eventsService/IEventsService.d.ts +6 -0
- package/dist/elements/services/eventsService/IEventsService.js +1 -0
- package/dist/elements/services/propertiesService/DefaultEditorTypesService.js +0 -10
- package/dist/elements/services/propertiesService/propertyEditors/GridAssignedRowColumnPropertyEditor.js +2 -1
- package/dist/elements/services/propertiesService/propertyEditors/special/GridAssignedRowColumnPropertyEditor.d.ts +8 -0
- package/dist/elements/services/propertiesService/propertyEditors/special/GridAssignedRowColumnPropertyEditor.js +46 -0
- package/dist/elements/services/propertiesService/propertyEditors/special/MetricsPropertyEditor.d.ts +8 -0
- package/dist/elements/services/propertiesService/propertyEditors/special/MetricsPropertyEditor.js +15 -0
- package/dist/elements/services/propertiesService/services/CssProperties.json +1 -4
- package/dist/elements/services/propertiesService/services/CssPropertiesService.d.ts +1 -0
- package/dist/elements/services/propertiesService/services/CssPropertiesService.js +22 -11
- package/dist/elements/widgets/debugView/debug-view.js +5 -3
- package/dist/elements/widgets/designerView/extensions/ExtensionManager.js +2 -2
- package/dist/elements/widgets/propertyGrid/PropertyGrid.js +4 -2
- package/dist/index.d.ts +5 -1
- package/dist/index.js +3 -1
- package/package.json +1 -1
|
@@ -473,6 +473,8 @@ export class DesignItem {
|
|
|
473
473
|
}
|
|
474
474
|
}
|
|
475
475
|
getPlacementService(style) {
|
|
476
|
+
if (this.nodeType != NodeType.Element)
|
|
477
|
+
return null;
|
|
476
478
|
style ??= getComputedStyle(this.element);
|
|
477
479
|
return this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this, style));
|
|
478
480
|
}
|
|
@@ -83,6 +83,7 @@ import { DesignItemDocumentPositionService } from './designItemDocumentPositionS
|
|
|
83
83
|
import { TransformToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/TransformToolButtonProvider.js';
|
|
84
84
|
import { MultipleSelectionRectExtensionProvider } from '../widgets/designerView/extensions/MultipleSelectionRectExtensionProvider.js';
|
|
85
85
|
import { DragDropService } from './dragDropService/DragDropService.js';
|
|
86
|
+
import { EventsService } from './eventsService/EventsService.js';
|
|
86
87
|
export function createDefaultServiceContainer() {
|
|
87
88
|
let serviceContainer = new ServiceContainer();
|
|
88
89
|
let defaultPlacementService = new DefaultPlacementService();
|
|
@@ -107,11 +108,11 @@ export function createDefaultServiceContainer() {
|
|
|
107
108
|
serviceContainer.register("copyPasteService", new CopyPasteService());
|
|
108
109
|
serviceContainer.register("modelCommandService", new DefaultModelCommandService());
|
|
109
110
|
serviceContainer.register("demoProviderService", new DemoProviderService());
|
|
111
|
+
serviceContainer.register("eventsService", new EventsService());
|
|
110
112
|
serviceContainer.register("undoService", (designerCanvas) => new UndoService(designerCanvas));
|
|
111
113
|
serviceContainer.register("selectionService", (designerCanvas) => new SelectionService(designerCanvas, false));
|
|
112
114
|
serviceContainer.register("contentService", (designerCanvas) => new ContentService(designerCanvas.rootDesignItem));
|
|
113
115
|
serviceContainer.register("designItemDocumentPositionService", (designerCanvas) => new DesignItemDocumentPositionService(designerCanvas));
|
|
114
|
-
//serviceContainer.register("stylesheetService", new DemoProviderService());
|
|
115
116
|
serviceContainer.designerExtensions.set(ExtensionType.Permanent, [
|
|
116
117
|
// new ResizeExtensionProvider(false),
|
|
117
118
|
new InvisibleElementExtensionProvider(),
|
|
@@ -41,6 +41,7 @@ import { IDesignerCanvas } from '../widgets/designerView/IDesignerCanvas.js';
|
|
|
41
41
|
import { IDesignItemDocumentPositionService } from './designItemDocumentPositionService/IDesignItemDocumentPositionService.js';
|
|
42
42
|
import { IDragDropService } from './dragDropService/IDragDropService.js';
|
|
43
43
|
import { IDesignItemService } from './designItemService/IDesignItemService.js';
|
|
44
|
+
import { IEventsService } from './eventsService/IEventsService.js';
|
|
44
45
|
interface ServiceNameMap {
|
|
45
46
|
"propertyService": IPropertiesService;
|
|
46
47
|
"containerService": IPlacementService;
|
|
@@ -63,6 +64,7 @@ interface ServiceNameMap {
|
|
|
63
64
|
"propertyGroupsService": IPropertyTabsService;
|
|
64
65
|
"dragDropService": IDragDropService;
|
|
65
66
|
"designItemService": IDesignItemService;
|
|
67
|
+
"eventsService": IEventsService;
|
|
66
68
|
"undoService": (designerCanvas: IDesignerCanvas) => IUndoService;
|
|
67
69
|
"selectionService": (designerCanvas: IDesignerCanvas) => ISelectionService;
|
|
68
70
|
"contentService": (designerCanvas: IDesignerCanvas) => IContentService;
|
|
@@ -96,6 +98,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
|
|
|
96
98
|
get containerServices(): IPlacementService[];
|
|
97
99
|
get snaplinesProviderService(): ISnaplinesProviderService;
|
|
98
100
|
get elementsServices(): IElementsService[];
|
|
101
|
+
get eventsService(): IEventsService[];
|
|
99
102
|
get instanceServices(): IInstanceService[];
|
|
100
103
|
get editorTypesServices(): IEditorTypesService[];
|
|
101
104
|
get htmlWriterService(): IHtmlWriterService;
|
|
@@ -55,6 +55,9 @@ export class ServiceContainer extends BaseServiceContainer {
|
|
|
55
55
|
get elementsServices() {
|
|
56
56
|
return this.getServices('elementsService');
|
|
57
57
|
}
|
|
58
|
+
get eventsService() {
|
|
59
|
+
return this.getServices('eventsService');
|
|
60
|
+
}
|
|
58
61
|
get instanceServices() {
|
|
59
62
|
return this.getServices('instanceService');
|
|
60
63
|
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { IDesignItem } from "../../item/IDesignItem.js";
|
|
2
|
+
import { IEvent } from "./IEvent.js";
|
|
3
|
+
import { IEventsService } from "./IEventsService.js";
|
|
4
|
+
export declare class EventsService implements IEventsService {
|
|
5
|
+
protected _windowEvents: string[];
|
|
6
|
+
protected _allElements: string[];
|
|
7
|
+
protected _focusableEvents: string[];
|
|
8
|
+
protected _form: string[];
|
|
9
|
+
protected _mouseEvents: string[];
|
|
10
|
+
protected _pointerEvents: string[];
|
|
11
|
+
protected _touchEvents: string[];
|
|
12
|
+
protected _dragEvents: string[];
|
|
13
|
+
protected _clipboard: string[];
|
|
14
|
+
protected _details: string[];
|
|
15
|
+
isHandledElement(designItem: IDesignItem): boolean;
|
|
16
|
+
getPossibleEvents(designItem: IDesignItem): IEvent[];
|
|
17
|
+
}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
export class EventsService {
|
|
2
|
+
_windowEvents = [
|
|
3
|
+
"afterprint",
|
|
4
|
+
"beforeprint",
|
|
5
|
+
"beforeunload",
|
|
6
|
+
"error",
|
|
7
|
+
"hashchange",
|
|
8
|
+
"load",
|
|
9
|
+
"message",
|
|
10
|
+
"offline",
|
|
11
|
+
"online",
|
|
12
|
+
"pageshow",
|
|
13
|
+
"popstate",
|
|
14
|
+
"resize",
|
|
15
|
+
"storage",
|
|
16
|
+
"unload"
|
|
17
|
+
];
|
|
18
|
+
_allElements = [
|
|
19
|
+
"contextmenu",
|
|
20
|
+
];
|
|
21
|
+
_focusableEvents = [
|
|
22
|
+
"blur",
|
|
23
|
+
"focus",
|
|
24
|
+
"keydown",
|
|
25
|
+
"keypress",
|
|
26
|
+
"keyup"
|
|
27
|
+
];
|
|
28
|
+
_form = [
|
|
29
|
+
"change",
|
|
30
|
+
"input",
|
|
31
|
+
"invalid",
|
|
32
|
+
"reset",
|
|
33
|
+
"search",
|
|
34
|
+
"select",
|
|
35
|
+
"submit"
|
|
36
|
+
];
|
|
37
|
+
_mouseEvents = [
|
|
38
|
+
"click",
|
|
39
|
+
"dblclick",
|
|
40
|
+
"mousedown",
|
|
41
|
+
"mouseup",
|
|
42
|
+
"mousemove",
|
|
43
|
+
"mouseover",
|
|
44
|
+
"mouseout",
|
|
45
|
+
"mousewheel",
|
|
46
|
+
"wheel"
|
|
47
|
+
];
|
|
48
|
+
_pointerEvents = [
|
|
49
|
+
"pointerdown",
|
|
50
|
+
"pointerup",
|
|
51
|
+
"pointerenter",
|
|
52
|
+
"pointerleave",
|
|
53
|
+
"pointermove",
|
|
54
|
+
"pointerover",
|
|
55
|
+
"pointerout",
|
|
56
|
+
"pointercancel"
|
|
57
|
+
];
|
|
58
|
+
_touchEvents = [
|
|
59
|
+
"touchstart",
|
|
60
|
+
"touchend",
|
|
61
|
+
"touchmove",
|
|
62
|
+
"touchcancel"
|
|
63
|
+
];
|
|
64
|
+
_dragEvents = [
|
|
65
|
+
"drag",
|
|
66
|
+
"dragend",
|
|
67
|
+
"dragenter",
|
|
68
|
+
"dragleave",
|
|
69
|
+
"dragover",
|
|
70
|
+
"dragstart",
|
|
71
|
+
"drop",
|
|
72
|
+
"scroll"
|
|
73
|
+
];
|
|
74
|
+
_clipboard = [
|
|
75
|
+
"copy",
|
|
76
|
+
"cut",
|
|
77
|
+
"paste"
|
|
78
|
+
];
|
|
79
|
+
_details = [
|
|
80
|
+
"toggle"
|
|
81
|
+
];
|
|
82
|
+
isHandledElement(designItem) {
|
|
83
|
+
return true;
|
|
84
|
+
}
|
|
85
|
+
getPossibleEvents(designItem) {
|
|
86
|
+
//Todo: create corret events list for all std. elements
|
|
87
|
+
let lst = [...this._mouseEvents, ...this._allElements, ...this._focusableEvents];
|
|
88
|
+
let events = lst.map(x => ({ name: x, propertyName: 'on' + x }));
|
|
89
|
+
return events;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -7,8 +7,6 @@ import { TextPropertyEditor } from './propertyEditors/TextPropertyEditor.js';
|
|
|
7
7
|
import { BooleanPropertyEditor } from './propertyEditors/BooleanPropertyEditor.js';
|
|
8
8
|
import { ImageButtonListPropertyEditor } from './propertyEditors/ImageButtonListPropertyEditor.js';
|
|
9
9
|
import { ThicknessPropertyEditor } from "./propertyEditors/ThicknessPropertyEditor.js";
|
|
10
|
-
import { MetricsPropertyEditor } from './propertyEditors/MetricsPropertyEditor.js';
|
|
11
|
-
import { GridAssignedRowColumnPropertyEditor } from './propertyEditors/GridAssignedRowColumnPropertyEditor.js';
|
|
12
10
|
export class DefaultEditorTypesService {
|
|
13
11
|
getEditorForProperty(property) {
|
|
14
12
|
if (property.createEditor)
|
|
@@ -50,14 +48,6 @@ export class DefaultEditorTypesService {
|
|
|
50
48
|
{
|
|
51
49
|
return new ThicknessPropertyEditor(property);
|
|
52
50
|
}
|
|
53
|
-
case "metrics":
|
|
54
|
-
{
|
|
55
|
-
return new MetricsPropertyEditor(property);
|
|
56
|
-
}
|
|
57
|
-
case "assigned-row-column":
|
|
58
|
-
{
|
|
59
|
-
return new GridAssignedRowColumnPropertyEditor(property);
|
|
60
|
-
}
|
|
61
51
|
case "css-length":
|
|
62
52
|
case "string":
|
|
63
53
|
default:
|
|
@@ -7,7 +7,7 @@ export class GridAssignedRowColumnPropertyEditor extends BasePropertyEditor {
|
|
|
7
7
|
this._root.style.display = 'grid';
|
|
8
8
|
this._root.style.padding = '4px 0px';
|
|
9
9
|
this._root.style.boxSizing = 'border-box';
|
|
10
|
-
this._root.style.
|
|
10
|
+
this._root.style.minHeight = '50px';
|
|
11
11
|
this.element = this._root;
|
|
12
12
|
}
|
|
13
13
|
refreshValue(valueType, value) {
|
|
@@ -28,6 +28,7 @@ export class GridAssignedRowColumnPropertyEditor extends BasePropertyEditor {
|
|
|
28
28
|
for (let p = 1; p <= cntRow; p++) {
|
|
29
29
|
for (let n = 1; n <= cntCol; n++) {
|
|
30
30
|
const b = document.createElement('button');
|
|
31
|
+
b.style.minHeight = '10px';
|
|
31
32
|
b.onclick = () => {
|
|
32
33
|
let grp = this.designItems[0].openGroup('Change grid row/column');
|
|
33
34
|
this.designItems[0].setStyle("grid-row", p + ' / ' + (p + 1));
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { IProperty } from '../../IProperty.js';
|
|
2
|
+
import { BasePropertyEditor } from '../BasePropertyEditor.js';
|
|
3
|
+
import { ValueType } from '../../ValueType.js';
|
|
4
|
+
export declare class GridAssignedRowColumnPropertyEditor extends BasePropertyEditor<HTMLDivElement> {
|
|
5
|
+
_root: HTMLDivElement;
|
|
6
|
+
constructor(property: IProperty);
|
|
7
|
+
refreshValue(valueType: ValueType, value: any): void;
|
|
8
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { BasePropertyEditor } from '../BasePropertyEditor.js';
|
|
2
|
+
export class GridAssignedRowColumnPropertyEditor extends BasePropertyEditor {
|
|
3
|
+
//Todo: multiple cell selection, grid area support, span support
|
|
4
|
+
_root;
|
|
5
|
+
constructor(property) {
|
|
6
|
+
super(property);
|
|
7
|
+
this._root = document.createElement('div');
|
|
8
|
+
this._root.style.display = 'grid';
|
|
9
|
+
this._root.style.padding = '4px 0px';
|
|
10
|
+
this._root.style.boxSizing = 'border-box';
|
|
11
|
+
this._root.style.minHeight = '50px';
|
|
12
|
+
this.element = this._root;
|
|
13
|
+
}
|
|
14
|
+
refreshValue(valueType, value) {
|
|
15
|
+
this._root.innerHTML = "";
|
|
16
|
+
if (this.designItems != null && this.designItems.length) {
|
|
17
|
+
let styleContainer = getComputedStyle(this.designItems[0].element.parentElement);
|
|
18
|
+
let style = getComputedStyle(this.designItems[0].element);
|
|
19
|
+
let cntCol = styleContainer.gridTemplateColumns.split(' ').length;
|
|
20
|
+
let cntRow = styleContainer.gridTemplateRows.split(' ').length;
|
|
21
|
+
this._root.style.gridTemplateColumns = 'repeat(' + cntCol + ', 1fr)';
|
|
22
|
+
this._root.style.gridTemplateRows = 'repeat(' + cntRow + ', 1fr)';
|
|
23
|
+
let rowStart = parseInt(style.gridRowStart);
|
|
24
|
+
let rowEnd = style.gridRowEnd == 'auto' ? rowStart : parseInt(style.gridRowEnd);
|
|
25
|
+
rowEnd = rowEnd <= rowStart ? rowStart + 1 : rowEnd;
|
|
26
|
+
let colStart = parseInt(style.gridColumnStart);
|
|
27
|
+
let colEnd = style.gridColumnEnd == 'auto' ? colStart : parseInt(style.gridColumnEnd);
|
|
28
|
+
colEnd = colEnd <= colStart ? colStart + 1 : colEnd;
|
|
29
|
+
for (let p = 1; p <= cntRow; p++) {
|
|
30
|
+
for (let n = 1; n <= cntCol; n++) {
|
|
31
|
+
const b = document.createElement('button');
|
|
32
|
+
b.style.minHeight = '10px';
|
|
33
|
+
b.onclick = () => {
|
|
34
|
+
let grp = this.designItems[0].openGroup('Change grid row/column');
|
|
35
|
+
this.designItems[0].setStyle("grid-row", p + ' / ' + (p + 1));
|
|
36
|
+
this.designItems[0].setStyle("grid-column", n + ' / ' + (n + 1));
|
|
37
|
+
grp.commit();
|
|
38
|
+
};
|
|
39
|
+
if (p >= rowStart && p < rowEnd && n >= colStart && n < colEnd)
|
|
40
|
+
b.style.backgroundColor = 'coral';
|
|
41
|
+
this._root.appendChild(b);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
package/dist/elements/services/propertiesService/propertyEditors/special/MetricsPropertyEditor.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { IProperty } from '../../IProperty.js';
|
|
2
|
+
import { BasePropertyEditor } from '../BasePropertyEditor.js';
|
|
3
|
+
import { ValueType } from '../../ValueType.js';
|
|
4
|
+
import { MetricsEditor } from '../../../../controls/MetricsEditor.js';
|
|
5
|
+
export declare class MetricsPropertyEditor extends BasePropertyEditor<MetricsEditor> {
|
|
6
|
+
constructor(property: IProperty);
|
|
7
|
+
refreshValue(valueType: ValueType, value: any): void;
|
|
8
|
+
}
|
package/dist/elements/services/propertiesService/propertyEditors/special/MetricsPropertyEditor.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { BasePropertyEditor } from '../BasePropertyEditor.js';
|
|
2
|
+
import { MetricsEditor } from '../../../../controls/MetricsEditor.js';
|
|
3
|
+
export class MetricsPropertyEditor extends BasePropertyEditor {
|
|
4
|
+
//Todo: metrics editor does not work at all yet
|
|
5
|
+
constructor(property) {
|
|
6
|
+
super(property);
|
|
7
|
+
const selector = new MetricsEditor();
|
|
8
|
+
selector.property = property.name;
|
|
9
|
+
//selector.valueLeftChanged.on((e) => this._valueChanged(e.newValue));
|
|
10
|
+
this.element = selector;
|
|
11
|
+
}
|
|
12
|
+
refreshValue(valueType, value) {
|
|
13
|
+
//this.element.valueLeft = value;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
@@ -16,5 +16,6 @@ export declare class CssPropertiesService extends CommonPropertiesService {
|
|
|
16
16
|
isHandledElement(designItem: IDesignItem): boolean;
|
|
17
17
|
getProperty(designItem: IDesignItem, name: string): IProperty;
|
|
18
18
|
getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
|
|
19
|
+
_getPropertyDef(name: string): IProperty;
|
|
19
20
|
getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
|
|
20
21
|
}
|
|
@@ -3,6 +3,8 @@ import { PropertyType } from '../PropertyType.js';
|
|
|
3
3
|
import { CommonPropertiesService } from './CommonPropertiesService.js';
|
|
4
4
|
import { RefreshMode } from '../IPropertiesService.js';
|
|
5
5
|
import { PropertiesHelper } from './PropertiesHelper.js';
|
|
6
|
+
import { GridAssignedRowColumnPropertyEditor } from '../propertyEditors/special/GridAssignedRowColumnPropertyEditor.js';
|
|
7
|
+
import { MetricsPropertyEditor } from '../propertyEditors/special/MetricsPropertyEditor.js';
|
|
6
8
|
//TODO: remove this code when import asserts are supported
|
|
7
9
|
let cssProperties;
|
|
8
10
|
//@ts-ignore
|
|
@@ -36,7 +38,8 @@ export class CssPropertiesService extends CommonPropertiesService {
|
|
|
36
38
|
"margin",
|
|
37
39
|
"border",
|
|
38
40
|
"padding",
|
|
39
|
-
"overflow"
|
|
41
|
+
"overflow",
|
|
42
|
+
"metrics"
|
|
40
43
|
];
|
|
41
44
|
grid = [
|
|
42
45
|
"display",
|
|
@@ -91,18 +94,26 @@ export class CssPropertiesService extends CommonPropertiesService {
|
|
|
91
94
|
}
|
|
92
95
|
getProperties(designItem) {
|
|
93
96
|
const propNames = this[this.name];
|
|
94
|
-
const propertiesList = propNames.map(x =>
|
|
95
|
-
const camelName = PropertiesHelper.dashToCamelCase(x);
|
|
96
|
-
return {
|
|
97
|
-
name: x,
|
|
98
|
-
type: cssProperties[camelName]?.type ?? 'string',
|
|
99
|
-
values: cssProperties[camelName]?.values ? [...cssProperties[camelName]?.values, 'initial', 'inherit', 'unset'] : ['initial', 'inherit', 'unset'],
|
|
100
|
-
service: this,
|
|
101
|
-
propertyType: PropertyType.cssValue
|
|
102
|
-
};
|
|
103
|
-
});
|
|
97
|
+
const propertiesList = propNames.map(x => this._getPropertyDef(x));
|
|
104
98
|
return propertiesList;
|
|
105
99
|
}
|
|
100
|
+
_getPropertyDef(name) {
|
|
101
|
+
const camelName = PropertiesHelper.dashToCamelCase(name);
|
|
102
|
+
switch (camelName) {
|
|
103
|
+
case 'assignedRowColumn':
|
|
104
|
+
return { name, service: this, propertyType: PropertyType.complex, createEditor: (p) => new GridAssignedRowColumnPropertyEditor(p) };
|
|
105
|
+
case 'metrics':
|
|
106
|
+
return { name, service: this, propertyType: PropertyType.complex, createEditor: (p) => new MetricsPropertyEditor(p) };
|
|
107
|
+
default:
|
|
108
|
+
return {
|
|
109
|
+
name,
|
|
110
|
+
type: cssProperties[camelName]?.type ?? 'string',
|
|
111
|
+
values: cssProperties[camelName]?.values ? [...cssProperties[camelName]?.values, 'initial', 'inherit', 'unset'] : ['initial', 'inherit', 'unset'],
|
|
112
|
+
service: this,
|
|
113
|
+
propertyType: PropertyType.cssValue
|
|
114
|
+
};
|
|
115
|
+
}
|
|
116
|
+
}
|
|
106
117
|
getPropertyTarget(designItem, property) {
|
|
107
118
|
return BindingTarget.css;
|
|
108
119
|
}
|
|
@@ -189,14 +189,16 @@ export class DebugView extends BaseCustomWebComponentConstructorAppend {
|
|
|
189
189
|
requestAnimationFrame(() => {
|
|
190
190
|
let element = designItem?.element;
|
|
191
191
|
if (element) {
|
|
192
|
-
|
|
193
|
-
|
|
192
|
+
if (element.nodeType == 3)
|
|
193
|
+
element = element.parentNode;
|
|
194
|
+
this.computedStyle = getComputedStyle(element);
|
|
195
|
+
this.selectedElementOffsetParent = element.offsetParent;
|
|
194
196
|
if (this.selectedElementOffsetParent == designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element) {
|
|
195
197
|
this.selectedElementOffsetParentText = null;
|
|
196
198
|
this.selectedElementOffsetParent = null;
|
|
197
199
|
}
|
|
198
200
|
else
|
|
199
|
-
this.selectedElementOffsetParentText = generateSelector(
|
|
201
|
+
this.selectedElementOffsetParentText = generateSelector(element.offsetParent);
|
|
200
202
|
if (element && element.nodeType === 1) {
|
|
201
203
|
const closest = getClosestStackingContext(element);
|
|
202
204
|
this.createsStackingContext = element === closest.node;
|
|
@@ -41,11 +41,11 @@ export class ExtensionManager {
|
|
|
41
41
|
if (selectionChangedEvent.selectedElements && selectionChangedEvent.selectedElements.length) {
|
|
42
42
|
this.applyExtensions(selectionChangedEvent.selectedElements, ExtensionType.Selection);
|
|
43
43
|
this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.PrimarySelection);
|
|
44
|
-
if (selectionChangedEvent.selectedElements[0].getPlacementService()
|
|
44
|
+
if (selectionChangedEvent.selectedElements[0].getPlacementService()?.isEnterableContainer(selectionChangedEvent.selectedElements[0]))
|
|
45
45
|
this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.PrimarySelectionAndCanBeEntered);
|
|
46
46
|
const primaryContainer = DesignItem.GetOrCreateDesignItem(selectionChangedEvent.selectedElements[0].parent.element, selectionChangedEvent.selectedElements[0].parent.element, this.designerCanvas.serviceContainer, this.designerCanvas.instanceServiceContainer);
|
|
47
47
|
this.applyExtension(primaryContainer, ExtensionType.PrimarySelectionContainer);
|
|
48
|
-
if (primaryContainer.getPlacementService()
|
|
48
|
+
if (primaryContainer.getPlacementService()?.isEnterableContainer(primaryContainer))
|
|
49
49
|
this.applyExtension(primaryContainer, ExtensionType.PrimarySelectionContainerAndCanBeEntered);
|
|
50
50
|
}
|
|
51
51
|
//this.refreshExtensions(selectionChangedEvent.selectedElements);
|
|
@@ -91,12 +91,14 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
|
|
|
91
91
|
if (this._designerTabControl.selectedIndex < 0)
|
|
92
92
|
this._designerTabControl.selectedIndex = 0;
|
|
93
93
|
for (const a of this._propertyGridPropertyLists) {
|
|
94
|
-
a.
|
|
94
|
+
if (visibleDict.has(a.title))
|
|
95
|
+
a.designItemsChanged(items);
|
|
95
96
|
}
|
|
96
97
|
if (items) {
|
|
97
98
|
if (items.length == 1) {
|
|
98
99
|
for (const a of this._propertyGridPropertyLists) {
|
|
99
|
-
a.
|
|
100
|
+
if (visibleDict.has(a.title))
|
|
101
|
+
a.refreshForDesignItems(items);
|
|
100
102
|
}
|
|
101
103
|
this._observeItems();
|
|
102
104
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -58,6 +58,9 @@ export type { IElementsService } from "./elements/services/elementsService/IElem
|
|
|
58
58
|
export * from "./elements/services/elementsService/JsonFileElementsService.js";
|
|
59
59
|
export * from "./elements/services/elementsService/PreDefinedElementsService.js";
|
|
60
60
|
export * from "./elements/services/elementsService/WebcomponentManifestElementsService.js";
|
|
61
|
+
export type { IEvent } from "./elements/services/eventsService/IEvent.js";
|
|
62
|
+
export type { IEventsService } from "./elements/services/eventsService/IEventsService.js";
|
|
63
|
+
export * from "./elements/services/eventsService/EventsService.js";
|
|
61
64
|
export type { IHtmlWriterService } from "./elements/services/htmlWriterService/IHtmlWriterService.js";
|
|
62
65
|
export type { IHtmlWriterOptions } from "./elements/services/htmlWriterService/IHtmlWriterOptions.js";
|
|
63
66
|
export * from "./elements/services/htmlWriterService/AbstractHtmlWriterService.js";
|
|
@@ -90,11 +93,12 @@ export * from "./elements/services/propertiesService/propertyEditors/DatePropert
|
|
|
90
93
|
export * from "./elements/services/propertiesService/propertyEditors/ImageButtonListPropertyEditor.js";
|
|
91
94
|
export * from "./elements/services/propertiesService/propertyEditors/JsonPropertyEditor.js";
|
|
92
95
|
export * from "./elements/services/propertiesService/propertyEditors/JsonPropertyPopupEditor.js";
|
|
93
|
-
export * from "./elements/services/propertiesService/propertyEditors/MetricsPropertyEditor.js";
|
|
94
96
|
export * from "./elements/services/propertiesService/propertyEditors/NumberPropertyEditor.js";
|
|
95
97
|
export * from "./elements/services/propertiesService/propertyEditors/SelectPropertyEditor.js";
|
|
96
98
|
export * from "./elements/services/propertiesService/propertyEditors/TextPropertyEditor.js";
|
|
97
99
|
export * from "./elements/services/propertiesService/propertyEditors/ThicknessPropertyEditor.js";
|
|
100
|
+
export * from "./elements/services/propertiesService/propertyEditors/special/MetricsPropertyEditor.js";
|
|
101
|
+
export * from "./elements/services/propertiesService/propertyEditors/special/GridAssignedRowColumnPropertyEditor.js";
|
|
98
102
|
export * from "./elements/services/propertiesService/services/PropertiesHelper.js";
|
|
99
103
|
export * from "./elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.js";
|
|
100
104
|
export * from "./elements/services/propertiesService/services/CommonPropertiesService.js";
|
package/dist/index.js
CHANGED
|
@@ -35,6 +35,7 @@ export * from "./elements/services/dragDropService/DragDropService.js";
|
|
|
35
35
|
export * from "./elements/services/elementsService/JsonFileElementsService.js";
|
|
36
36
|
export * from "./elements/services/elementsService/PreDefinedElementsService.js";
|
|
37
37
|
export * from "./elements/services/elementsService/WebcomponentManifestElementsService.js";
|
|
38
|
+
export * from "./elements/services/eventsService/EventsService.js";
|
|
38
39
|
export * from "./elements/services/htmlWriterService/AbstractHtmlWriterService.js";
|
|
39
40
|
export * from "./elements/services/htmlWriterService/FormatingHtmlWriterService.js";
|
|
40
41
|
export * from "./elements/services/htmlWriterService/HtmlWriterService.js";
|
|
@@ -55,11 +56,12 @@ export * from "./elements/services/propertiesService/propertyEditors/DatePropert
|
|
|
55
56
|
export * from "./elements/services/propertiesService/propertyEditors/ImageButtonListPropertyEditor.js";
|
|
56
57
|
export * from "./elements/services/propertiesService/propertyEditors/JsonPropertyEditor.js";
|
|
57
58
|
export * from "./elements/services/propertiesService/propertyEditors/JsonPropertyPopupEditor.js";
|
|
58
|
-
export * from "./elements/services/propertiesService/propertyEditors/MetricsPropertyEditor.js";
|
|
59
59
|
export * from "./elements/services/propertiesService/propertyEditors/NumberPropertyEditor.js";
|
|
60
60
|
export * from "./elements/services/propertiesService/propertyEditors/SelectPropertyEditor.js";
|
|
61
61
|
export * from "./elements/services/propertiesService/propertyEditors/TextPropertyEditor.js";
|
|
62
62
|
export * from "./elements/services/propertiesService/propertyEditors/ThicknessPropertyEditor.js";
|
|
63
|
+
export * from "./elements/services/propertiesService/propertyEditors/special/MetricsPropertyEditor.js";
|
|
64
|
+
export * from "./elements/services/propertiesService/propertyEditors/special/GridAssignedRowColumnPropertyEditor.js";
|
|
63
65
|
export * from "./elements/services/propertiesService/services/PropertiesHelper.js";
|
|
64
66
|
export * from "./elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.js";
|
|
65
67
|
export * from "./elements/services/propertiesService/services/CommonPropertiesService.js";
|