@node-projects/web-component-designer 0.1.112 → 0.1.113

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.
Files changed (6) hide show
  1. package/dist/elements/services/DefaultServiceBootstrap.js +1 -1
  2. package/dist/elements/widgets/designerView/extensions/grid/DisplayGridExtension.d.ts +4 -1
  3. package/dist/elements/widgets/designerView/extensions/grid/DisplayGridExtension.js +44 -33
  4. package/dist/elements/widgets/designerView/extensions/grid/DisplayGridExtensionProvider.d.ts +3 -0
  5. package/dist/elements/widgets/designerView/extensions/grid/DisplayGridExtensionProvider.js +11 -5
  6. package/package.json +1 -1
package/dist/elements/services/DefaultServiceBootstrap.js CHANGED
@@ -148,7 +148,7 @@ export function createDefaultServiceContainer() {
148
148
  new ConditionExtensionProvider(new SelectionDefaultExtensionProvider(), item => !(item.node instanceof SVGElement) || item.node instanceof SVGSVGElement),
149
149
  ]);
150
150
  serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionContainerAndCanBeEntered, [
151
- new DisplayGridExtensionProvider(),
151
+ new DisplayGridExtensionProvider('lightgray', '#8080807d'),
152
152
  new EditGridColumnRowSizesExtensionProvider(),
153
153
  new FlexboxExtensionProvider()
154
154
  ]);
package/dist/elements/widgets/designerView/extensions/grid/DisplayGridExtension.d.ts CHANGED
@@ -8,8 +8,11 @@ export declare class DisplayGridExtension extends AbstractExtension {
8
8
  private _gaps;
9
9
  private _group;
10
10
  private gridInformation;
11
+ private gridInformationString;
11
12
  private _lastEvent;
12
- constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
13
+ private gridColor;
14
+ private gridFillColor;
15
+ constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem, gridColor: string, gridFillColor: string);
13
16
  extend(cache: Record<string | symbol, any>, event?: Event): void;
14
17
  refresh(cache: Record<string | symbol, any>, event?: Event): void;
15
18
  dispose(): void;
package/dist/elements/widgets/designerView/extensions/grid/DisplayGridExtension.js CHANGED
@@ -8,9 +8,14 @@ export class DisplayGridExtension extends AbstractExtension {
8
8
  _gaps;
9
9
  _group;
10
10
  gridInformation;
11
+ gridInformationString;
11
12
  _lastEvent;
12
- constructor(extensionManager, designerView, extendedItem) {
13
+ gridColor;
14
+ gridFillColor;
15
+ constructor(extensionManager, designerView, extendedItem, gridColor, gridFillColor) {
13
16
  super(extensionManager, designerView, extendedItem);
17
+ this.gridColor = gridColor;
18
+ this.gridFillColor = gridFillColor;
14
19
  }
15
20
  extend(cache, event) {
16
21
  this._initSVGArrays();
@@ -18,40 +23,46 @@ export class DisplayGridExtension extends AbstractExtension {
18
23
  }
19
24
  refresh(cache, event) {
20
25
  this.gridInformation = calculateGridInformation(this.extendedItem);
21
- let cells = this.gridInformation.cells;
22
- if (event)
23
- this._lastEvent = event;
24
- if (cells[0][0] && !isNaN(cells[0][0].height) && !isNaN(cells[0][0].width)) {
25
- if (this.gridInformation.cells.length != this._cells.length || this.gridInformation.cells[0].length != this._cells[0].length)
26
- this._initSVGArrays();
27
- if (!this._group) {
28
- this._group = this._drawGroup(null, this._group, OverlayLayer.Background);
29
- this._group.style.transform = getElementCombinedTransform(this.extendedItem.element).toString();
30
- this._group.style.transformOrigin = '0 0';
31
- this._group.style.transformBox = 'fill-box';
32
- }
33
- //draw gaps
34
- this.gridInformation.gaps.forEach((gap, i) => {
35
- this._gaps[i] = this._drawRect(gap.x, gap.y, gap.width, gap.height, 'svg-grid-gap', this._gaps[i], OverlayLayer.Background);
36
- this._group.appendChild(this._gaps[i]);
37
- });
38
- //draw cells
39
- cells.forEach((row, i) => {
40
- row.forEach((cell, j) => {
41
- this._cells[i][j] = this._drawRect(cell.x, cell.y, cell.width, cell.height, 'svg-grid', this._cells[i][j], OverlayLayer.Background);
42
- this._group.appendChild(this._cells[i][j]);
43
- if (cell.name) {
44
- this._texts[i][j] = this._drawText(cell.name, cell.x, cell.y, 'svg-grid-area', this._texts[i][j], OverlayLayer.Background);
45
- this._texts[i][j].setAttribute("dominant-baseline", "hanging");
46
- }
47
- if (this._lastEvent && this._lastEvent instanceof MouseEvent) {
48
- let crd = this.designerCanvas.getNormalizedEventCoordinates(this._lastEvent);
49
- if (crd.x >= cell.x && crd.y >= cell.y && crd.x <= cell.x + cell.width && crd.y <= cell.y + cell.height) {
50
- this._cells[i][j].setAttribute("class", "svg-grid-current-cell");
26
+ const gridInformationString = JSON.stringify(this.gridInformation);
27
+ if (gridInformationString !== this.gridInformationString || (event != null && this._lastEvent !== event)) {
28
+ if (event)
29
+ this._lastEvent = event;
30
+ this.gridInformationString = gridInformationString;
31
+ let cells = this.gridInformation.cells;
32
+ if (cells[0][0] && !isNaN(cells[0][0].height) && !isNaN(cells[0][0].width)) {
33
+ if (this.gridInformation.cells.length != this._cells.length || this.gridInformation.cells[0].length != this._cells[0].length)
34
+ this._initSVGArrays();
35
+ if (!this._group) {
36
+ this._group = this._drawGroup(null, this._group, OverlayLayer.Background);
37
+ this._group.style.transform = getElementCombinedTransform(this.extendedItem.element).toString();
38
+ this._group.style.transformOrigin = '0 0';
39
+ this._group.style.transformBox = 'fill-box';
40
+ this._group.style.setProperty("--svg-grid-stroke-color", this.gridColor);
41
+ this._group.style.setProperty("--svg-grid-fill-color", this.gridFillColor);
42
+ }
43
+ //draw gaps
44
+ this.gridInformation.gaps.forEach((gap, i) => {
45
+ this._gaps[i] = this._drawRect(gap.x, gap.y, gap.width, gap.height, 'svg-grid-gap', this._gaps[i], OverlayLayer.Background);
46
+ this._group.appendChild(this._gaps[i]);
47
+ });
48
+ //draw cells
49
+ cells.forEach((row, i) => {
50
+ row.forEach((cell, j) => {
51
+ this._cells[i][j] = this._drawRect(cell.x, cell.y, cell.width, cell.height, 'svg-grid', this._cells[i][j], OverlayLayer.Background);
52
+ this._group.appendChild(this._cells[i][j]);
53
+ if (cell.name) {
54
+ this._texts[i][j] = this._drawText(cell.name, cell.x, cell.y, 'svg-grid-area', this._texts[i][j], OverlayLayer.Background);
55
+ this._texts[i][j].setAttribute("dominant-baseline", "hanging");
51
56
  }
52
- }
57
+ if (this._lastEvent && this._lastEvent instanceof MouseEvent) {
58
+ let crd = this.designerCanvas.getNormalizedEventCoordinates(this._lastEvent);
59
+ if (crd.x >= cell.x && crd.y >= cell.y && crd.x <= cell.x + cell.width && crd.y <= cell.y + cell.height) {
60
+ this._cells[i][j].setAttribute("class", "svg-grid-current-cell");
61
+ }
62
+ }
63
+ });
53
64
  });
54
- });
65
+ }
55
66
  }
56
67
  }
57
68
  dispose() {
package/dist/elements/widgets/designerView/extensions/grid/DisplayGridExtensionProvider.d.ts CHANGED
@@ -5,6 +5,9 @@ import { IDesignerExtension } from '../IDesignerExtension.js';
5
5
  import { IExtensionManager } from '../IExtensionManger.js';
6
6
  export declare const gridExtensionShowOverlayOptionName = "gridExtensionShowOverlay";
7
7
  export declare class DisplayGridExtensionProvider implements IDesignerExtensionProvider {
8
+ gridColor: string;
9
+ gridFillColor: string;
10
+ constructor(gridColor?: string, gridFillColor?: string);
8
11
  shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
9
12
  getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
10
13
  readonly style: CSSStyleSheet;
package/dist/elements/widgets/designerView/extensions/grid/DisplayGridExtensionProvider.js CHANGED
@@ -2,6 +2,12 @@ import { css } from "@node-projects/base-custom-webcomponent";
2
2
  import { DisplayGridExtension } from './DisplayGridExtension.js';
3
3
  export const gridExtensionShowOverlayOptionName = 'gridExtensionShowOverlay';
4
4
  export class DisplayGridExtensionProvider {
5
+ gridColor;
6
+ gridFillColor;
7
+ constructor(gridColor = 'orange', gridFillColor = '#ff944722') {
8
+ this.gridColor = gridColor;
9
+ this.gridFillColor = gridFillColor;
10
+ }
5
11
  shouldExtend(extensionManager, designerCanvas, designItem) {
6
12
  const display = getComputedStyle(designItem.element).display;
7
13
  if (display == 'grid' || display == 'inline-grid')
@@ -9,14 +15,14 @@ export class DisplayGridExtensionProvider {
9
15
  return false;
10
16
  }
11
17
  getExtension(extensionManager, designerCanvas, designItem) {
12
- return new DisplayGridExtension(extensionManager, designerCanvas, designItem);
18
+ return new DisplayGridExtension(extensionManager, designerCanvas, designItem, this.gridColor, this.gridFillColor);
13
19
  }
14
20
  style = css `
15
- .svg-grid { stroke: orange; stroke-dasharray: 5; fill: #ff944722; }
16
- .svg-grid-current-cell { stroke: orange; stroke-dasharray: 5; fill: #e3ff4722; }
21
+ .svg-grid { stroke: var(--svg-grid-stroke-color); stroke-dasharray: 5; fill: var(--svg-grid-fill-color); }
22
+ .svg-grid-current-cell { stroke: var(--svg-grid-stroke-color); stroke-dasharray: 5; fill: #e3ff4722; }
17
23
  .svg-grid-area { font-size: 8px; }
18
- .svg-grid-gap { stroke: orange; stroke-dasharray: 5; fill: #0000ff22; }
19
- .svg-grid-header { fill: #ff944722; stroke: orange; }
24
+ .svg-grid-gap { stroke: var(--svg-grid-stroke-color); stroke-dasharray: 5; fill: #0000ff22; }
25
+ .svg-grid-header { fill: var(--svg-grid-fill-color); stroke: var(--svg-grid-stroke-color); }
20
26
  .svg-grid-plus-sign { stroke: black; }
21
27
  `;
22
28
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "description": "A WYSIWYG designer webcomponent for html components",
3
3
  "name": "@node-projects/web-component-designer",
4
- "version": "0.1.112",
4
+ "version": "0.1.113",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "author": "jochen.kuehner@gmx.de",