@node-projects/web-component-designer 0.1.132 → 0.1.134
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/services/DefaultServiceBootstrap.js +2 -1
- package/dist/elements/services/ServiceContainer.d.ts +1 -0
- package/dist/elements/services/ServiceContainer.js +3 -1
- package/dist/elements/services/dragDropService/DragDropService.js +1 -1
- package/dist/elements/services/placementService/GridPlacementService.js +32 -7
- package/dist/elements/widgets/designerView/extensions/ResizeExtension.js +1 -1
- package/dist/elements/widgets/designerView/extensions/grid/GridChildResizeExtension.js +1 -1
- package/package.json +1 -1
|
@@ -92,6 +92,7 @@ import { ChildContextMenu } from '../widgets/designerView/extensions/contextMenu
|
|
|
92
92
|
import { GridChildToolbarExtensionProvider } from '../widgets/designerView/extensions/grid/GridChildToolbarExtensionProvider.js';
|
|
93
93
|
import { ToolbarExtensionsDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/ToolbarExtensionsDesignViewConfigButtons.js';
|
|
94
94
|
import { PaddingExtensionProvider } from '../widgets/designerView/extensions/PaddingExtensionProvider.js';
|
|
95
|
+
import { GridChildResizeExtensionProvider } from '../widgets/designerView/extensions/grid/GridChildResizeExtensionProvider.js';
|
|
95
96
|
export function createDefaultServiceContainer() {
|
|
96
97
|
let serviceContainer = new ServiceContainer();
|
|
97
98
|
let defaultPlacementService = new DefaultPlacementService();
|
|
@@ -132,7 +133,7 @@ export function createDefaultServiceContainer() {
|
|
|
132
133
|
new PaddingExtensionProvider(),
|
|
133
134
|
new PositionExtensionProvider(),
|
|
134
135
|
new SvgElementExtensionProvider(),
|
|
135
|
-
new ResizeExtensionProvider(true),
|
|
136
|
+
new ApplyFirstMachingExtensionProvider(new GridChildResizeExtensionProvider(), new ResizeExtensionProvider(true)),
|
|
136
137
|
new RotateExtensionProvider(),
|
|
137
138
|
new ConditionExtensionProvider(new MultipleSelectionRectExtensionProvider(), item => !(item.node instanceof SVGElement) || item.node instanceof SVGSVGElement),
|
|
138
139
|
]);
|
|
@@ -94,6 +94,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
|
|
|
94
94
|
readonly options: {
|
|
95
95
|
zoomDesignerBackground: boolean;
|
|
96
96
|
roundPixelsToDecimalPlaces: number;
|
|
97
|
+
resizerPixelSize: number;
|
|
97
98
|
};
|
|
98
99
|
readonly designerTools: Map<string | NamedTools, ITool | (new (IElementDefinition: any) => ITool)>;
|
|
99
100
|
get bindingService(): IBindingService;
|
|
@@ -2,6 +2,7 @@ import { BaseServiceContainer } from './BaseServiceContainer.js';
|
|
|
2
2
|
import { DemoView } from '../widgets/demoView/demoView.js';
|
|
3
3
|
import { GlobalContext } from './GlobalContext.js';
|
|
4
4
|
import { CodeViewSimple } from '../widgets/codeView/code-view-simple.js';
|
|
5
|
+
const isMobile = !!(navigator.maxTouchPoints && navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome'));
|
|
5
6
|
export class ServiceContainer extends BaseServiceContainer {
|
|
6
7
|
config = {
|
|
7
8
|
codeViewWidget: CodeViewSimple,
|
|
@@ -23,7 +24,8 @@ export class ServiceContainer extends BaseServiceContainer {
|
|
|
23
24
|
globalContext = new GlobalContext(this);
|
|
24
25
|
options = {
|
|
25
26
|
zoomDesignerBackground: true,
|
|
26
|
-
roundPixelsToDecimalPlaces: -1
|
|
27
|
+
roundPixelsToDecimalPlaces: -1,
|
|
28
|
+
resizerPixelSize: isMobile ? 8 : 3
|
|
27
29
|
};
|
|
28
30
|
designerTools = new Map();
|
|
29
31
|
get bindingService() {
|
|
@@ -57,7 +57,7 @@ export class DragDropService {
|
|
|
57
57
|
getPossibleContainerForDragDrop(designerCanvas, event) {
|
|
58
58
|
let newContainerElementDesignItem = null;
|
|
59
59
|
let newContainerService = null;
|
|
60
|
-
const elementsFromPoint = designerCanvas.elementsFromPoint(event.
|
|
60
|
+
const elementsFromPoint = designerCanvas.elementsFromPoint(event.clientX, event.clientY);
|
|
61
61
|
for (let e of elementsFromPoint) {
|
|
62
62
|
if (e == designerCanvas.rootDesignItem.element) {
|
|
63
63
|
newContainerElementDesignItem = designerCanvas.rootDesignItem;
|
|
@@ -71,8 +71,16 @@ export class GridPlacementService {
|
|
|
71
71
|
}
|
|
72
72
|
else {
|
|
73
73
|
items[0].element.style.gridArea = '';
|
|
74
|
-
|
|
75
|
-
|
|
74
|
+
if (info.colSpan <= 1) {
|
|
75
|
+
items[0].element.style.gridColumn = '' + (column + 1);
|
|
76
|
+
items[0].element.style.gridRow = '' + (row + 1);
|
|
77
|
+
}
|
|
78
|
+
else {
|
|
79
|
+
items[0].element.style.gridColumnStart = '' + (column + 1);
|
|
80
|
+
items[0].element.style.gridRowStart = '' + (row + 1);
|
|
81
|
+
items[0].element.style.gridColumnEnd = '' + (column + info.colSpan + 1);
|
|
82
|
+
items[0].element.style.gridRowEnd = '' + (row + info.rowSpan + 1);
|
|
83
|
+
}
|
|
76
84
|
}
|
|
77
85
|
}
|
|
78
86
|
column++;
|
|
@@ -97,16 +105,33 @@ export class GridPlacementService {
|
|
|
97
105
|
//Grid Area is shorthand for grid row/column, to make undo work correctly we need to set befor and after clear
|
|
98
106
|
if (cell.name) {
|
|
99
107
|
items[0].setStyle('grid-area', cell.name);
|
|
108
|
+
items[0].removeStyle('grid-row-start');
|
|
109
|
+
items[0].removeStyle('grid-row-end');
|
|
110
|
+
items[0].removeStyle('grid-column-start');
|
|
111
|
+
items[0].removeStyle('grid-column-end');
|
|
100
112
|
items[0].removeStyle('grid-column');
|
|
101
113
|
items[0].removeStyle('grid-row');
|
|
102
114
|
items[0].setStyle('grid-area', cell.name);
|
|
103
115
|
}
|
|
104
116
|
else {
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
117
|
+
if (info.colSpan <= 1) {
|
|
118
|
+
items[0].removeStyle('grid-area');
|
|
119
|
+
items[0].removeStyle('grid-row-start');
|
|
120
|
+
items[0].removeStyle('grid-row-end');
|
|
121
|
+
items[0].removeStyle('grid-column-start');
|
|
122
|
+
items[0].removeStyle('grid-column-end');
|
|
123
|
+
items[0].setStyle('grid-column', '' + (column + 1));
|
|
124
|
+
items[0].setStyle('grid-row', '' + (row + 1));
|
|
125
|
+
}
|
|
126
|
+
else {
|
|
127
|
+
items[0].removeStyle('grid-area');
|
|
128
|
+
items[0].removeStyle('grid-column');
|
|
129
|
+
items[0].removeStyle('grid-row');
|
|
130
|
+
items[0].setStyle('grid-column-start', '' + (column + 1));
|
|
131
|
+
items[0].setStyle('grid-row-start', '' + (row + 1));
|
|
132
|
+
items[0].setStyle('grid-column-end', '' + (column + info.colSpan + 1));
|
|
133
|
+
items[0].setStyle('grid-row-end', '' + (row + info.rowSpan + 1));
|
|
134
|
+
}
|
|
110
135
|
}
|
|
111
136
|
}
|
|
112
137
|
column++;
|
|
@@ -48,7 +48,7 @@ export class ResizeExtension extends AbstractExtension {
|
|
|
48
48
|
//#endregion Circles
|
|
49
49
|
}
|
|
50
50
|
_drawResizerOverlay(x, y, cursor, oldCircle) {
|
|
51
|
-
let circle = this._drawCircle(x, y,
|
|
51
|
+
let circle = this._drawCircle(x, y, this.designerCanvas.serviceContainer.options.resizerPixelSize / this.designerCanvas.zoomFactor, 'svg-primary-resizer', oldCircle);
|
|
52
52
|
circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
|
|
53
53
|
if (!oldCircle) {
|
|
54
54
|
circle.addEventListener(EventNames.PointerDown, event => this._pointerActionTypeResize(circle, event, cursor));
|
|
@@ -42,7 +42,7 @@ export class GridChildResizeExtension extends AbstractExtension {
|
|
|
42
42
|
//#endregion Circles
|
|
43
43
|
}
|
|
44
44
|
_drawResizerOverlay(x, y, cursor, oldCircle) {
|
|
45
|
-
let circle = this._drawCircle(x, y,
|
|
45
|
+
let circle = this._drawCircle(x, y, this.designerCanvas.serviceContainer.options.resizerPixelSize / this.designerCanvas.zoomFactor, 'svg-grid-resizer', oldCircle);
|
|
46
46
|
circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
|
|
47
47
|
if (!oldCircle) {
|
|
48
48
|
circle.addEventListener(EventNames.PointerDown, event => this._pointerActionTypeResize(circle, event, cursor));
|
package/package.json
CHANGED