@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.
- package/dist/elements/helper/contextMenu/ContextMenu.js +9 -8
- package/dist/elements/helper/contextMenu/IContextMenuItem.d.ts +1 -0
- package/dist/elements/services/propertiesService/services/AbstractPropertiesService.js +16 -4
- package/dist/elements/widgets/designerView/designerCanvas.js +1 -0
- package/dist/elements/widgets/designerView/designerView.js +2 -0
- package/dist/elements/widgets/designerView/extensions/GridExtension.d.ts +3 -11
- package/dist/elements/widgets/designerView/extensions/GridExtension.js +50 -124
- package/dist/elements/widgets/designerView/extensions/GridExtensionProvider.js +1 -1
- package/package.json +6 -6
|
@@ -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:
|
|
32
|
+
padding: 3px;
|
|
32
33
|
margin: 0;
|
|
33
|
-
background-color: #
|
|
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
|
-
|
|
55
|
-
|
|
56
|
-
|
|
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 {
|
|
@@ -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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
18
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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.
|
|
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
|
-
|
|
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,
|
|
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,
|
|
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
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
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 (
|
|
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
|
-
|
|
133
|
-
|
|
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
|
-
|
|
166
|
-
|
|
167
|
-
|
|
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
|
|
190
|
-
|
|
191
|
-
|
|
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
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
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]
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
newSizes[
|
|
219
|
-
|
|
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
|
-
|
|
230
|
-
|
|
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-
|
|
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.
|
|
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.
|
|
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.
|
|
24
|
-
"@types/codemirror": "^5.60.
|
|
25
|
-
"@types/jquery": "^3.5.
|
|
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.
|
|
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",
|