@node-projects/web-component-designer 0.0.165 → 0.0.167

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.
@@ -10,6 +10,7 @@ export class ContextMenu {
10
10
  transform-origin: top left;
11
11
  padding: 0;
12
12
  z-index: 2147483647;
13
+ color: black;
13
14
  }
14
15
 
15
16
  .context_menu.display {
@@ -28,9 +29,9 @@ export class ContextMenu {
28
29
 
29
30
  .context_menu ul {
30
31
  list-style-type: none;
31
- padding: 0;
32
+ padding: 3px;
32
33
  margin: 0;
33
- background-color: #ccc;
34
+ background-color: #f5f7f7;
34
35
  box-shadow: 0 0 5px #333;
35
36
  }
36
37
 
@@ -45,15 +46,15 @@ export class ContextMenu {
45
46
  background-color: #bbb;
46
47
  }
47
48
 
48
- .context_menu li .cm_icon_span {
49
+ .context_menu li .cm_icon_span {
49
50
  width: 1.5em;
50
- height: 1.2em;
51
- vertical-align: bottom;
52
51
  display: inline-block;
53
52
  border-right: 1px solid #aaa;
54
- margin-right: 5px;
55
- padding-right: 5px;
56
- text-align: center;
53
+ padding: 0px 3px;
54
+ }
55
+
56
+ .context_menu li .cm_icon_span {
57
+ padding-left: 5px;
57
58
  }
58
59
 
59
60
  .context_menu li .cm_sub_span {
@@ -1,4 +1,5 @@
1
1
  export interface IContextMenuItem {
2
+ readonly id?: string;
2
3
  readonly title?: string;
3
4
  readonly icon?: string;
4
5
  readonly children?: IContextMenuItem[];
@@ -29,16 +29,28 @@ export class AbstractPropertiesService {
29
29
  attributeName = PropertiesHelper.camelToDashCase(property.name);
30
30
  if (property.type === 'object') {
31
31
  const json = JSON.stringify(value);
32
- d.setAttribute(attributeName, json);
32
+ if (property.propertyType == PropertyType.attribute || property.propertyType == PropertyType.propertyAndAttribute)
33
+ d.setAttribute(attributeName, json);
34
+ if (property.propertyType == PropertyType.property || property.propertyType == PropertyType.propertyAndAttribute)
35
+ d.element[property.name] = value;
33
36
  }
34
37
  else if (property.type == 'boolean' && !value) {
35
- d.removeAttribute(attributeName);
38
+ if (property.propertyType == PropertyType.attribute || property.propertyType == PropertyType.propertyAndAttribute)
39
+ d.removeAttribute(attributeName);
40
+ if (property.propertyType == PropertyType.property || property.propertyType == PropertyType.propertyAndAttribute)
41
+ d.element[property.name] = false;
36
42
  }
37
43
  else if (property.type == 'boolean' && value) {
38
- d.setAttribute(attributeName, "");
44
+ if (property.propertyType == PropertyType.attribute || property.propertyType == PropertyType.propertyAndAttribute)
45
+ d.setAttribute(attributeName, "");
46
+ if (property.propertyType == PropertyType.property || property.propertyType == PropertyType.propertyAndAttribute)
47
+ d.element[property.name] = true;
39
48
  }
40
49
  else {
41
- d.setAttribute(attributeName, value);
50
+ if (property.propertyType == PropertyType.attribute || property.propertyType == PropertyType.propertyAndAttribute)
51
+ d.setAttribute(attributeName, value);
52
+ if (property.propertyType == PropertyType.property || property.propertyType == PropertyType.propertyAndAttribute)
53
+ d.element[property.name] = value;
42
54
  }
43
55
  }
44
56
  this._notifyChangedProperty(d, property, value);
@@ -520,6 +520,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
520
520
  this.addDesignItems(designItems);
521
521
  this.instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'parsed' });
522
522
  this.instanceServiceContainer.selectionService._withoutUndoSetSelectedElements(null);
523
+ setTimeout(() => this.extensionManager.refreshAllAppliedExtentions(), 50);
523
524
  }
524
525
  addDesignItems(designItems) {
525
526
  if (designItems) {
@@ -109,6 +109,7 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
109
109
  bottom: 16px;
110
110
  height: 16px;
111
111
  box-sizing: border-box;
112
+ z-index: 1;
112
113
  }
113
114
  .right-scroll {
114
115
  height: calc(100% - 32px);
@@ -117,6 +118,7 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
117
118
  top: 0;
118
119
  width: 16px;
119
120
  box-sizing: border-box;
121
+ z-index: 1;
120
122
  }
121
123
  .bottom-right {
122
124
  width: 16px;
@@ -8,21 +8,13 @@ export declare class GridExtension extends AbstractExtension {
8
8
  private _rects;
9
9
  private _gaps;
10
10
  private _resizeCircles;
11
+ private minPixelSize;
11
12
  constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
12
13
  extend(): void;
13
14
  refresh(): void;
14
15
  dispose(): void;
15
16
  _drawResizeCircles(gap: any, oldCircle?: SVGCircleElement): SVGCircleElement;
16
17
  _pointerActionTypeResize(event: PointerEvent, circle: SVGCircleElement, gapColumn: any, gapRow: any): void;
17
- _getInitialSizes(style: CSSStyleDeclaration): {
18
- x: any[];
19
- y: any[];
20
- xUnit: any[];
21
- yUnit: any[];
22
- };
23
- _parseInitValue(stringValue: string): {
24
- value: number;
25
- unit: string;
26
- };
27
- _calculateNewSize(iSizes: any, iUnits: any, diff: any, gapIndex: any, itemWidth?: number, itemHeight?: number): string;
18
+ _calculateNewSize(iSizes: any, diff: any, gapIndex: any, percentTarget: 'width' | 'heigth'): string;
19
+ _getCssUnit(cssValue: string): string;
28
20
  }
@@ -1,4 +1,5 @@
1
1
  import { EventNames } from "../../../../enums/EventNames.js";
2
+ import { convertCssUnit, convertCssUnitToPixel, getCssUnit } from "../../../helper/CssUnitConverter.js";
2
3
  import { CalculateGridInformation } from "../../../helper/GridHelper.js";
3
4
  import { AbstractExtension } from './AbstractExtension.js';
4
5
  import { OverlayLayer } from "./OverlayLayer.js";
@@ -8,11 +9,12 @@ export class GridExtension extends AbstractExtension {
8
9
  _rects;
9
10
  _gaps;
10
11
  _resizeCircles;
12
+ minPixelSize = 10;
11
13
  constructor(extensionManager, designerView, extendedItem) {
12
14
  super(extensionManager, designerView, extendedItem);
13
15
  }
14
16
  extend() {
15
- var gridInformation = CalculateGridInformation(this.extendedItem);
17
+ let gridInformation = CalculateGridInformation(this.extendedItem);
16
18
  this._rects = new Array(gridInformation.cells.length);
17
19
  gridInformation.cells.forEach((cellRow, i) => {
18
20
  this._rects[i] = new Array(cellRow.length);
@@ -22,7 +24,7 @@ export class GridExtension extends AbstractExtension {
22
24
  this.refresh();
23
25
  }
24
26
  refresh() {
25
- var gridInformation = CalculateGridInformation(this.extendedItem);
27
+ let gridInformation = CalculateGridInformation(this.extendedItem);
26
28
  gridInformation.gaps.forEach((gap, i) => {
27
29
  this._gaps[i] = this._drawRect(gap.x, gap.y, gap.width, gap.height, 'svg-grid-gap', this._gaps[i], OverlayLayer.Foregorund);
28
30
  this._resizeCircles[i] = this._drawResizeCircles(gap, this._resizeCircles[i]);
@@ -41,7 +43,7 @@ export class GridExtension extends AbstractExtension {
41
43
  this._removeAllOverlays();
42
44
  }
43
45
  _drawResizeCircles(gap, oldCircle) {
44
- var resizeCircle = this._drawCircle((gap.x + (gap.width / 2)), (gap.y + (gap.height / 2)), 1.5, 'svg-grid-reziser', oldCircle, OverlayLayer.Foregorund);
46
+ let resizeCircle = this._drawCircle((gap.x + (gap.width / 2)), (gap.y + (gap.height / 2)), 1.5, 'svg-grid-resizer', oldCircle, OverlayLayer.Foregorund);
45
47
  resizeCircle.style.pointerEvents = "all";
46
48
  resizeCircle.style.cursor = gap.width < gap.height ? "ew-resize" : "ns-resize";
47
49
  if (!oldCircle) {
@@ -57,18 +59,18 @@ export class GridExtension extends AbstractExtension {
57
59
  case EventNames.PointerDown:
58
60
  circle.setPointerCapture(event.pointerId);
59
61
  this._initialPoint = { x: event.clientX, y: event.clientY };
60
- this._initialSizes = this._getInitialSizes(this.extendedItem.element.style);
62
+ this._initialSizes = { x: this.extendedItem.element.style.gridTemplateColumns.split(' '), y: this.extendedItem.element.style.gridTemplateRows.split(' ') };
61
63
  break;
62
64
  case EventNames.PointerMove:
63
65
  if (this._initialPoint) {
64
- var elementStyle = this.extendedItem.element.style;
66
+ let elementStyle = this.extendedItem.element.style;
65
67
  this.extendedItem.element.getBoundingClientRect;
66
68
  switch (circle.style.cursor) {
67
69
  case "ew-resize":
68
- elementStyle.gridTemplateColumns = this._calculateNewSize(this._initialSizes.x, this._initialSizes.xUnit, (event.clientX - this._initialPoint.x) / this.designerCanvas.zoomFactor, gapColumn, parseFloat(elementStyle.width.substring(0, elementStyle.width.length - 2)), null);
70
+ elementStyle.gridTemplateColumns = this._calculateNewSize(this._initialSizes.x, (event.clientX - this._initialPoint.x) / this.designerCanvas.zoomFactor, gapColumn, "width");
69
71
  break;
70
72
  case "ns-resize":
71
- elementStyle.gridTemplateRows = this._calculateNewSize(this._initialSizes.y, this._initialSizes.yUnit, (event.clientY - this._initialPoint.y) / this.designerCanvas.zoomFactor, gapRow, null, parseFloat(elementStyle.height.substring(0, elementStyle.height.length - 2)));
73
+ elementStyle.gridTemplateRows = this._calculateNewSize(this._initialSizes.y, (event.clientY - this._initialPoint.y) / this.designerCanvas.zoomFactor, gapRow, "heigth");
72
74
  break;
73
75
  }
74
76
  this.refresh();
@@ -85,149 +87,73 @@ export class GridExtension extends AbstractExtension {
85
87
  break;
86
88
  }
87
89
  }
88
- _getInitialSizes(style) {
89
- var retX = [];
90
- var retY = [];
91
- var retXUnit = [];
92
- var retYUnit = [];
93
- var tmpX = style.gridTemplateColumns.split(' ');
94
- tmpX.forEach(x => {
95
- var r = this._parseInitValue(x);
96
- retX.push(r.value);
97
- retXUnit.push(r.unit);
98
- });
99
- var tmpY = style.gridTemplateRows.split(' ');
100
- tmpY.forEach(y => {
101
- var r = this._parseInitValue(y);
102
- retY.push(r.value);
103
- retYUnit.push(r.unit);
104
- });
105
- return { x: retX, y: retY, xUnit: retXUnit, yUnit: retYUnit };
106
- }
107
- _parseInitValue(stringValue) {
108
- var i = stringValue.length;
109
- while (isNaN(parseInt(stringValue.substring(i - 1, stringValue.length))))
110
- i--;
111
- return { value: parseFloat(stringValue.substring(0, i)), unit: stringValue.substring(i, stringValue.length) };
112
- }
113
- _calculateNewSize(iSizes, iUnits, diff, gapIndex, itemWidth, itemHeight) {
114
- var newSizes = [];
115
- var newUnits = [];
116
- var unitFactors = [];
117
- var edited = [];
118
- for (var i = 0; i < iSizes.length; i++) {
90
+ _calculateNewSize(iSizes, diff, gapIndex, percentTarget) {
91
+ let newSizes = [];
92
+ let edited = [];
93
+ for (let i = 0; i < iSizes.length; i++) {
119
94
  if (i + 1 == gapIndex || i == gapIndex) {
120
- if (iUnits[i] == "%") {
121
- var percentDiff = itemWidth ? (1 - ((itemWidth - diff) / itemWidth)) * 100 : itemHeight ? (1 - ((itemHeight - diff) / itemHeight)) * 100 : null;
122
- newSizes.push(i + 1 == gapIndex ? iSizes[i] + percentDiff : i == gapIndex ? iSizes[i] - percentDiff : null);
123
- unitFactors.push(null);
124
- edited.push(true);
125
- }
126
- else if (iUnits[i] == "fr") {
95
+ if (this._getCssUnit(iSizes[i]) == "fr") {
127
96
  newSizes.push(iSizes[i]);
128
- unitFactors.push(null);
129
97
  edited.push(true);
130
98
  }
131
99
  else {
132
- var unitFactor;
133
- switch (iUnits[i]) {
134
- case "mm":
135
- unitFactor = 1 / 3.78;
136
- break;
137
- case "cm":
138
- unitFactor = 1 / 37.8;
139
- break;
140
- case "in":
141
- unitFactor = 1 / 96;
142
- break;
143
- case "px":
144
- unitFactor = 1;
145
- break;
146
- case "pt":
147
- unitFactor = 3;
148
- break;
149
- case "pc":
150
- unitFactor = 16;
151
- break;
152
- }
153
- newSizes.push(i + 1 == gapIndex ? iSizes[i] + diff * unitFactor : i == gapIndex ? iSizes[i] - diff * unitFactor : null);
154
- unitFactors.push(unitFactor);
100
+ let convertedDiff = parseFloat(convertCssUnit(diff, this.extendedItem.element, percentTarget, this._getCssUnit(iSizes[i])).toString());
101
+ newSizes.push((i + 1 == gapIndex ? parseFloat(iSizes[i]) + convertedDiff : i == gapIndex ? parseFloat(iSizes[i]) - convertedDiff : null) + this._getCssUnit(iSizes[i]));
155
102
  edited.push(true);
156
103
  }
157
104
  }
158
105
  else {
159
106
  newSizes.push(iSizes[i]);
160
- unitFactors.push(null);
161
107
  edited.push(false);
162
108
  }
163
- newUnits.push(iUnits[i]);
164
109
  }
165
- var retVal = "";
166
- var minPixelSize = 10;
167
- var minPercentSize = itemHeight ? minPixelSize / itemHeight * 100 : itemWidth ? minPixelSize / itemWidth * 100 : null;
168
- for (var i = 0; i < newSizes.length; i++) {
169
- if (newUnits[i] == "%" && newSizes[i] < minPercentSize) {
170
- if (edited[i + 1] && newUnits[i + 1] == "%") {
171
- newSizes[i + 1] = iSizes[i] + iSizes[i + 1] - minPercentSize;
172
- newSizes[i] = minPercentSize;
173
- break;
174
- }
175
- else if (edited[i - 1] && newUnits[i - 1] == "%") {
176
- newSizes[i - 1] = iSizes[i] + iSizes[i - 1] - minPercentSize;
177
- newSizes[i] = minPercentSize;
178
- break;
179
- }
180
- }
181
- else if (newUnits[i] == "fr") {
182
- var editedIndex;
110
+ for (let i = 0; i < newSizes.length; i++) {
111
+ if (this._getCssUnit(newSizes[i]) == "fr") {
112
+ let editedIndex;
183
113
  if (edited[i + 1])
184
114
  editedIndex = i + 1;
185
115
  else if (edited[i - 1])
186
116
  editedIndex = i - 1;
187
117
  else
188
118
  continue;
189
- if (newUnits[editedIndex] == "px") {
190
- if (newSizes[editedIndex] < minPixelSize)
191
- newSizes[editedIndex] = minPixelSize;
192
- var totalSize = itemWidth ? itemWidth : itemHeight ? itemHeight : null;
193
- var totalSizeExceptFr = 0;
194
- newSizes.forEach(newSize => totalSizeExceptFr += newSize);
195
- var totalSizeExceptEdited = 0;
196
- newSizes.forEach((newSize, k) => { if (!edited[k])
197
- totalSizeExceptEdited += newSize; });
198
- if (totalSize - totalSizeExceptFr < minPixelSize)
199
- newSizes[editedIndex] = totalSize - totalSizeExceptEdited - minPixelSize;
119
+ //check if newSize smaller than minimum
120
+ if (convertCssUnitToPixel(newSizes[editedIndex], this.extendedItem.element, percentTarget) < this.minPixelSize) {
121
+ newSizes[editedIndex] = convertCssUnit(this.minPixelSize, this.extendedItem.element, percentTarget, this._getCssUnit(newSizes[editedIndex]));
200
122
  }
201
- else if (newUnits[editedIndex] == "%") {
202
- if (newSizes[editedIndex] < minPercentSize)
203
- newSizes[editedIndex] = minPercentSize;
204
- var totalSize = 100;
205
- var totalSizeExceptFr = 0;
206
- newSizes.forEach(newSize => totalSizeExceptFr += newSize);
207
- var totalSizeExceptEdited = 0;
208
- newSizes.forEach((newSize, k) => { if (!edited[k])
209
- totalSizeExceptEdited += newSize; });
210
- if (totalSize - totalSizeExceptFr < minPercentSize)
211
- newSizes[editedIndex] = totalSize - totalSizeExceptEdited - minPercentSize;
123
+ //check if fr is smaller than 10px
124
+ let totalSize = parseFloat(percentTarget == "width" ? this.extendedItem.element.style.width : this.extendedItem.element.style.height);
125
+ let totalGapSize = percentTarget == "width" ?
126
+ parseFloat(this.extendedItem.element.style.columnGap) * this.extendedItem.element.style.gridTemplateColumns.split(' ').length - 1 :
127
+ parseFloat(this.extendedItem.element.style.rowGap) * this.extendedItem.element.style.gridTemplateColumns.split(' ').length - 1;
128
+ let totalSizeExceptFr = 0;
129
+ newSizes.forEach(newSize => {
130
+ if (this._getCssUnit(newSize) != "fr")
131
+ totalSizeExceptFr += convertCssUnitToPixel(newSize, this.extendedItem.element, percentTarget);
132
+ });
133
+ let totalSizeExceptEdited = 0;
134
+ newSizes.forEach((newSize, k) => {
135
+ if (!edited[k])
136
+ totalSizeExceptEdited += convertCssUnitToPixel(newSize, this.extendedItem.element, percentTarget);
137
+ });
138
+ if (totalSize - totalSizeExceptFr - totalGapSize < this.minPixelSize) {
139
+ newSizes[editedIndex] = convertCssUnit(totalSize - totalSizeExceptEdited - totalGapSize - this.minPixelSize, this.extendedItem.element, percentTarget, this._getCssUnit(iSizes[editedIndex]));
212
140
  }
213
141
  }
214
142
  else {
215
- if (newSizes[i] / unitFactors[i] < minPixelSize) {
216
- if (edited[i + 1]) {
217
- newSizes[i + 1] = iSizes[i] + iSizes[i + 1] - minPixelSize * unitFactors[i + 1];
218
- newSizes[i] = minPixelSize * unitFactors[i];
219
- break;
220
- }
221
- else if (edited[i - 1]) {
222
- newSizes[i - 1] = iSizes[i] + iSizes[i - 1] - minPixelSize * unitFactors[i - 1];
223
- newSizes[i] = minPixelSize * unitFactors[i];
224
- break;
225
- }
143
+ if (convertCssUnitToPixel(newSizes[i], this.extendedItem.element, percentTarget) < this.minPixelSize) {
144
+ let index = edited[i + 1] ? i + 1 : edited[i - 1] ? i - 1 : null;
145
+ if (this._getCssUnit(newSizes[index]) != "fr")
146
+ newSizes[index] = convertCssUnit(convertCssUnitToPixel(newSizes[i], this.extendedItem.element, percentTarget) + convertCssUnitToPixel(newSizes[index], this.extendedItem.element, percentTarget) - this.minPixelSize, this.extendedItem.element, percentTarget, this._getCssUnit(newSizes[index]));
147
+ newSizes[i] = convertCssUnit(this.minPixelSize, this.extendedItem.element, percentTarget, this._getCssUnit(newSizes[i]));
148
+ break;
226
149
  }
227
150
  }
228
151
  }
229
- for (var i = 0; i < newSizes.length; i++)
230
- retVal += newSizes[i] + newUnits[i] + " ";
152
+ let retVal = "";
153
+ newSizes.forEach(newSize => retVal += newSize + ' ');
231
154
  return retVal;
232
155
  }
156
+ _getCssUnit(cssValue) {
157
+ return cssValue.substring(cssValue.length - 2, cssValue.length) == "fr" ? "fr" : getCssUnit(cssValue);
158
+ }
233
159
  }
@@ -15,6 +15,6 @@ export class GridExtensionProvider {
15
15
  .svg-grid { stroke: orange; stroke-dasharray: 5; fill: #ff944722; }
16
16
  .svg-grid-area { font-size: 8px; }
17
17
  .svg-grid-gap { stroke: orange; stroke-dasharray: 5; fill: #0000ff22; }
18
- .svg-grid-reziser { background: white; border: 1px solid black; }
18
+ .svg-grid-resizer { fill: white; stroke: #3899ec }
19
19
  `;
20
20
  }
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.165",
4
+ "version": "0.0.167",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "author": "",
@@ -14,22 +14,22 @@
14
14
  },
15
15
  "dependencies": {
16
16
  "@node-projects/base-custom-webcomponent": "^0.10.7",
17
- "@types/node": "^18.11.14",
17
+ "@types/node": "^18.11.18",
18
18
  "construct-style-sheets-polyfill": "^3.1.0"
19
19
  },
20
20
  "devDependencies": {
21
21
  "@node-projects/lean-he-esm": "^3.3.0",
22
22
  "@node-projects/node-html-parser-esm": "^2.5.1",
23
- "@papyrs/stylo": "^0.0.41",
24
- "@types/codemirror": "^5.60.5",
25
- "@types/jquery": "^3.5.14",
23
+ "@papyrs/stylo": "^0.0.42",
24
+ "@types/codemirror": "^5.60.6",
25
+ "@types/jquery": "^3.5.16",
26
26
  "@types/jquery.fancytree": "0.0.7",
27
27
  "ace-builds": "^1.14.0",
28
28
  "codemirror": "^6.0.1",
29
29
  "esprima-next": "^5.8.4",
30
30
  "html2canvas": "*",
31
31
  "jest": "^29.3.1",
32
- "jquery": "^3.6.2",
32
+ "jquery": "^3.6.3",
33
33
  "jquery.fancytree": "^2.38.2",
34
34
  "monaco-editor": "^0.34.1",
35
35
  "ts-jest": "^29.0.3",