@node-projects/web-component-designer 0.0.56 → 0.0.57
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/placementService/DefaultPlacementService.d.ts +1 -1
- package/dist/elements/services/placementService/DefaultPlacementService.js +3 -3
- package/dist/elements/services/placementService/FlexBoxPlacementService.d.ts +1 -1
- package/dist/elements/services/placementService/FlexBoxPlacementService.js +2 -2
- package/dist/elements/services/placementService/GridPlacementService.d.ts +1 -1
- package/dist/elements/services/placementService/GridPlacementService.js +2 -2
- package/dist/elements/services/placementService/IPlacementService.d.ts +1 -1
- package/dist/elements/widgets/designerView/extensions/ResizeExtension.js +2 -1
- package/dist/elements/widgets/designerView/tools/PointerTool.js +8 -4
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@ import type { IPlacementService } from './IPlacementService.js';
|
|
|
3
3
|
import type { IDesignItem } from '../../item/IDesignItem.js';
|
|
4
4
|
import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
|
|
5
5
|
export declare class DefaultPlacementService implements IPlacementService {
|
|
6
|
-
serviceForContainer(container: IDesignItem): boolean;
|
|
6
|
+
serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
|
|
7
7
|
canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
|
|
8
8
|
canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
|
|
9
9
|
getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
|
|
@@ -2,9 +2,9 @@ import { DomConverter } from '../../widgets/designerView/DomConverter.js';
|
|
|
2
2
|
import { combineTransforms } from '../../helper/TransformHelper.js';
|
|
3
3
|
import { filterChildPlaceItems, placeDesignItem } from '../../helper/LayoutHelper.js';
|
|
4
4
|
export class DefaultPlacementService {
|
|
5
|
-
serviceForContainer(container) {
|
|
6
|
-
if (
|
|
7
|
-
|
|
5
|
+
serviceForContainer(container, containerStyle) {
|
|
6
|
+
if (containerStyle.display === 'grid' || containerStyle.display === 'inline-grid' ||
|
|
7
|
+
containerStyle.display === 'flex' || containerStyle.display === 'inline-flex')
|
|
8
8
|
return false;
|
|
9
9
|
return true;
|
|
10
10
|
}
|
|
@@ -5,7 +5,7 @@ import { IPlacementService } from './IPlacementService.js';
|
|
|
5
5
|
export declare class FlexBoxPlacementService implements IPlacementService {
|
|
6
6
|
enterContainer(container: IDesignItem, items: IDesignItem[]): void;
|
|
7
7
|
leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
|
|
8
|
-
serviceForContainer(container: IDesignItem): boolean;
|
|
8
|
+
serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
|
|
9
9
|
canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
|
|
10
10
|
canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
|
|
11
11
|
getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
|
|
@@ -10,8 +10,8 @@ export class FlexBoxPlacementService {
|
|
|
10
10
|
}
|
|
11
11
|
leaveContainer(container, items) {
|
|
12
12
|
}
|
|
13
|
-
serviceForContainer(container) {
|
|
14
|
-
if (
|
|
13
|
+
serviceForContainer(container, containerStyle) {
|
|
14
|
+
if (containerStyle.display == 'flex' || containerStyle.display == 'inline-flex')
|
|
15
15
|
return true;
|
|
16
16
|
return false;
|
|
17
17
|
}
|
|
@@ -5,7 +5,7 @@ import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
|
|
|
5
5
|
export declare class GridPlacementService implements IPlacementService {
|
|
6
6
|
enterContainer(container: IDesignItem, items: IDesignItem[]): void;
|
|
7
7
|
leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
|
|
8
|
-
serviceForContainer(container: IDesignItem): boolean;
|
|
8
|
+
serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
|
|
9
9
|
canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
|
|
10
10
|
canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
|
|
11
11
|
getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
|
|
@@ -20,8 +20,8 @@ export class GridPlacementService {
|
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
|
-
serviceForContainer(container) {
|
|
24
|
-
if (
|
|
23
|
+
serviceForContainer(container, containerStyle) {
|
|
24
|
+
if (containerStyle.display == 'grid' || containerStyle.display == 'inline-grid')
|
|
25
25
|
return true;
|
|
26
26
|
return false;
|
|
27
27
|
}
|
|
@@ -3,7 +3,7 @@ import { IDesignItem } from "../../item/IDesignItem";
|
|
|
3
3
|
import { IPlacementView } from "../../widgets/designerView/IPlacementView";
|
|
4
4
|
import { IPoint } from "../../../interfaces/IPoint";
|
|
5
5
|
export interface IPlacementService extends IService {
|
|
6
|
-
serviceForContainer(container: IDesignItem): any;
|
|
6
|
+
serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): any;
|
|
7
7
|
canEnter(container: IDesignItem, items: IDesignItem[]): any;
|
|
8
8
|
canLeave(container: IDesignItem, items: IDesignItem[]): any;
|
|
9
9
|
enterContainer(container: IDesignItem, items: IDesignItem[]): any;
|
|
@@ -74,7 +74,8 @@ export class ResizeExtension extends AbstractExtension {
|
|
|
74
74
|
break;
|
|
75
75
|
case EventNames.PointerMove:
|
|
76
76
|
if (this._initialPoint) {
|
|
77
|
-
const
|
|
77
|
+
const containerStyle = getComputedStyle(this.extendedItem.parent.element);
|
|
78
|
+
const containerService = this.designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this.extendedItem.parent, containerStyle));
|
|
78
79
|
const diff = containerService.placePoint(event, this.designerCanvas, this.extendedItem.parent, this._initialPoint, { x: 0, y: 0 }, currentPoint, this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
|
|
79
80
|
let trackX = diff.x - this._initialPoint.x;
|
|
80
81
|
let trackY = diff.y - this._initialPoint.y;
|
|
@@ -140,7 +140,8 @@ export class PointerTool {
|
|
|
140
140
|
this._actionType = PointerActionType.Drag;
|
|
141
141
|
}
|
|
142
142
|
if (this._movedSinceStartedAction) {
|
|
143
|
-
const
|
|
143
|
+
const containerStyle = getComputedStyle(this._actionStartedDesignItem.parent.element);
|
|
144
|
+
const currentContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent, containerStyle));
|
|
144
145
|
if (currentContainerService) {
|
|
145
146
|
const dragItem = this._actionStartedDesignItem.parent;
|
|
146
147
|
if (this._dragExtensionItem != dragItem) {
|
|
@@ -166,7 +167,8 @@ export class PointerTool {
|
|
|
166
167
|
}
|
|
167
168
|
else if (newContainerElement == designerCanvas.rootDesignItem.element) {
|
|
168
169
|
newContainerElementDesignItem = designerCanvas.rootDesignItem;
|
|
169
|
-
|
|
170
|
+
const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
|
|
171
|
+
newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
|
|
170
172
|
break;
|
|
171
173
|
}
|
|
172
174
|
else if (newContainerElement.getRootNode() !== designerCanvas.shadowRoot || newContainerElement === designerCanvas.overlayLayer || newContainerElement.parentElement === designerCanvas.overlayLayer) {
|
|
@@ -208,7 +210,8 @@ export class PointerTool {
|
|
|
208
210
|
}
|
|
209
211
|
//end check
|
|
210
212
|
newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(newContainerElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
|
|
211
|
-
|
|
213
|
+
const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
|
|
214
|
+
newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
|
|
212
215
|
if (newContainerService) {
|
|
213
216
|
if (newContainerService.canEnter(newContainerElementDesignItem, [this._actionStartedDesignItem])) {
|
|
214
217
|
break;
|
|
@@ -293,7 +296,8 @@ export class PointerTool {
|
|
|
293
296
|
return;
|
|
294
297
|
}
|
|
295
298
|
if (this._movedSinceStartedAction) {
|
|
296
|
-
|
|
299
|
+
const containerStyle = getComputedStyle(this._actionStartedDesignItem.parent.element);
|
|
300
|
+
let containerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent, containerStyle));
|
|
297
301
|
const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
|
|
298
302
|
if (containerService) {
|
|
299
303
|
let cg = designerCanvas.rootDesignItem.openGroup("Move Elements", designerCanvas.instanceServiceContainer.selectionService.selectedElements);
|