@node-projects/web-component-designer 0.0.258 → 0.0.259
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/item/DesignItem.js +4 -0
- package/dist/elements/services/propertiesService/propertyEditors/special/GridAssignedRowColumnPropertyEditor.js +28 -25
- package/dist/elements/services/stylesheetService/AbstractStylesheetService.js +5 -1
- package/dist/elements/widgets/designerView/extensions/ResizeExtension.js +0 -1
- package/package.json +1 -1
|
@@ -347,6 +347,8 @@ export class DesignItem {
|
|
|
347
347
|
}
|
|
348
348
|
setStyle(name, value, important) {
|
|
349
349
|
let nm = PropertiesHelper.camelToDashCase(name);
|
|
350
|
+
if (this.isRootItem)
|
|
351
|
+
throw 'not allowed to set style on root item';
|
|
350
352
|
const action = new CssStyleChangeAction(this, nm, value, this._styles.get(nm));
|
|
351
353
|
this.instanceServiceContainer.undoService.execute(action);
|
|
352
354
|
}
|
|
@@ -413,6 +415,8 @@ export class DesignItem {
|
|
|
413
415
|
return [{ selector: null, declarations: localStyles, specificity: -1 }];
|
|
414
416
|
}
|
|
415
417
|
setAttribute(name, value) {
|
|
418
|
+
if (this.isRootItem)
|
|
419
|
+
throw 'not allowed to set attribute on root item';
|
|
416
420
|
const action = new AttributeChangeAction(this, name, value, this._attributes.get(name));
|
|
417
421
|
this.instanceServiceContainer.undoService.execute(action);
|
|
418
422
|
}
|
|
@@ -14,31 +14,34 @@ export class GridAssignedRowColumnPropertyEditor extends BasePropertyEditor {
|
|
|
14
14
|
refreshValue(valueType, value) {
|
|
15
15
|
this._root.innerHTML = "";
|
|
16
16
|
if (this.designItems != null && this.designItems.length) {
|
|
17
|
-
let
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
17
|
+
let container = this.designItems[0].element.parentElement;
|
|
18
|
+
if (container) {
|
|
19
|
+
let styleContainer = getComputedStyle(container);
|
|
20
|
+
let style = getComputedStyle(this.designItems[0].element);
|
|
21
|
+
let cntCol = styleContainer.gridTemplateColumns.split(' ').length;
|
|
22
|
+
let cntRow = styleContainer.gridTemplateRows.split(' ').length;
|
|
23
|
+
this._root.style.gridTemplateColumns = 'repeat(' + cntCol + ', 1fr)';
|
|
24
|
+
this._root.style.gridTemplateRows = 'repeat(' + cntRow + ', 1fr)';
|
|
25
|
+
let rowStart = parseInt(style.gridRowStart);
|
|
26
|
+
let rowEnd = style.gridRowEnd == 'auto' ? rowStart : parseInt(style.gridRowEnd);
|
|
27
|
+
rowEnd = rowEnd <= rowStart ? rowStart + 1 : rowEnd;
|
|
28
|
+
let colStart = parseInt(style.gridColumnStart);
|
|
29
|
+
let colEnd = style.gridColumnEnd == 'auto' ? colStart : parseInt(style.gridColumnEnd);
|
|
30
|
+
colEnd = colEnd <= colStart ? colStart + 1 : colEnd;
|
|
31
|
+
for (let p = 1; p <= cntRow; p++) {
|
|
32
|
+
for (let n = 1; n <= cntCol; n++) {
|
|
33
|
+
const b = document.createElement('button');
|
|
34
|
+
b.style.minHeight = '10px';
|
|
35
|
+
b.onclick = () => {
|
|
36
|
+
let grp = this.designItems[0].openGroup('Change grid row/column');
|
|
37
|
+
this.designItems[0].setStyle("grid-row", p + ' / ' + (p + 1));
|
|
38
|
+
this.designItems[0].setStyle("grid-column", n + ' / ' + (n + 1));
|
|
39
|
+
grp.commit();
|
|
40
|
+
};
|
|
41
|
+
if (p >= rowStart && p < rowEnd && n >= colStart && n < colEnd)
|
|
42
|
+
b.style.backgroundColor = 'coral';
|
|
43
|
+
this._root.appendChild(b);
|
|
44
|
+
}
|
|
42
45
|
}
|
|
43
46
|
}
|
|
44
47
|
}
|
|
@@ -78,9 +78,13 @@ export class AbstractStylesheetService {
|
|
|
78
78
|
stylesheetChanged = new TypedEvent();
|
|
79
79
|
stylesheetsChanged = new TypedEvent();
|
|
80
80
|
elementMatchesASelector(designItem, selectors) {
|
|
81
|
-
for (
|
|
81
|
+
for (let selector of selectors) {
|
|
82
|
+
if (selector == ':host') {
|
|
83
|
+
selector = DesignerCanvas.cssprefixConstant;
|
|
84
|
+
}
|
|
82
85
|
if (designItem.element.matches(selector))
|
|
83
86
|
return true;
|
|
87
|
+
}
|
|
84
88
|
return false;
|
|
85
89
|
}
|
|
86
90
|
static buildPatchedStyleSheet(value) {
|
|
@@ -74,7 +74,6 @@ export class ResizeExtension extends AbstractExtension {
|
|
|
74
74
|
contentBoxOffset = getContentBoxContentOffsets(this.extendedItem.element);
|
|
75
75
|
}
|
|
76
76
|
this._initialSizes.push({ width: (rect.width - contentBoxOffset.x * this.designerCanvas.scaleFactor) / this.designerCanvas.scaleFactor, height: (rect.height - contentBoxOffset.y * this.designerCanvas.scaleFactor) / this.designerCanvas.scaleFactor });
|
|
77
|
-
this.extendedItem.element.style.width = this._initialSizes[0].width + 'px';
|
|
78
77
|
const toArr = getComputedStyle(this.extendedItem.element).transformOrigin.split(' ').map(x => parseFloat(x.replace('px', '')));
|
|
79
78
|
const transformOrigin = new DOMPoint(toArr[0], toArr[1]);
|
|
80
79
|
this._initialComputedTransformOrigins.push(transformOrigin);
|