@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.
@@ -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 (container.element.style.display === 'grid' || container.element.style.display === 'inline-grid' ||
7
- container.element.style.display === 'flex' || container.element.style.display === 'inline-flex')
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 (container.element.style.display == 'flex' || container.element.style.display == 'inline-flex')
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 (container.element.style.display == 'grid' || container.element.style.display == 'inline-grid')
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 containerService = this.designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this.extendedItem.parent));
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 currentContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent));
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
- newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem));
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
- newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem));
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
- let containerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent));
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);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "description": "A UI designer for Polymer apps",
3
3
  "name": "@node-projects/web-component-designer",
4
- "version": "0.0.56",
4
+ "version": "0.0.57",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "author": "",