@node-projects/web-component-designer 0.0.97 → 0.0.98
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.
|
@@ -21,7 +21,6 @@ export declare class DesignerView extends BaseCustomWebComponentConstructorAppen
|
|
|
21
21
|
static readonly style: CSSStyleSheet;
|
|
22
22
|
static readonly template: HTMLTemplateElement;
|
|
23
23
|
constructor();
|
|
24
|
-
ready(): Promise<void>;
|
|
25
24
|
zoomReset(): void;
|
|
26
25
|
zoomToFit(): void;
|
|
27
26
|
private _onScrollbar;
|
|
@@ -3,6 +3,7 @@ import { DesignerCanvas } from "./designerCanvas.js";
|
|
|
3
3
|
import { DomConverter } from './DomConverter.js';
|
|
4
4
|
import { DefaultHtmlParserService } from '../../services/htmlParserService/DefaultHtmlParserService.js';
|
|
5
5
|
import { EventNames } from '../../../enums/EventNames.js';
|
|
6
|
+
import { DesignerToolbar } from './tools/toolBar/DesignerToolbar.js';
|
|
6
7
|
const autoZomOffset = 10;
|
|
7
8
|
export class DesignerView extends BaseCustomWebComponentConstructorAppend {
|
|
8
9
|
_sVert;
|
|
@@ -83,7 +84,7 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
|
|
|
83
84
|
height: calc(100% - 32px);
|
|
84
85
|
}
|
|
85
86
|
|
|
86
|
-
#tool-bar{
|
|
87
|
+
#tool-bar {
|
|
87
88
|
width: 24px;
|
|
88
89
|
height: calc(100% - 32px);
|
|
89
90
|
position: absolute;
|
|
@@ -131,7 +132,6 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
|
|
|
131
132
|
<node-projects-plain-scrollbar id="s-hor" value="0.5" class="bottom-scroll"></node-projects-plain-scrollbar>
|
|
132
133
|
<node-projects-plain-scrollbar id="s-vert" value="0.5" orientation="vertical" class="right-scroll">
|
|
133
134
|
</node-projects-plain-scrollbar>
|
|
134
|
-
<node-projects-designer-toolbar id="tool-bar" class="tool-bar"></node-projects-designer-toolbar>
|
|
135
135
|
<div class="bottom-right"></div>
|
|
136
136
|
<div id="lowertoolbar">
|
|
137
137
|
<input id="zoomInput" type="text" value="100%">
|
|
@@ -150,11 +150,16 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
|
|
|
150
150
|
constructor() {
|
|
151
151
|
super();
|
|
152
152
|
this._restoreCachedInititalValues();
|
|
153
|
+
this._sVert = this._getDomElement('s-vert');
|
|
154
|
+
this._sHor = this._getDomElement('s-hor');
|
|
153
155
|
const outer = this._getDomElement('outer');
|
|
154
156
|
this._designerCanvas = new DesignerCanvas();
|
|
155
157
|
this._designerCanvas.id = "canvas";
|
|
156
158
|
this._designerCanvas.appendChild(document.createElement("slot"));
|
|
157
159
|
outer.insertAdjacentElement('afterbegin', this._designerCanvas);
|
|
160
|
+
this._toolbar = new DesignerToolbar();
|
|
161
|
+
this._toolbar.id = 'tool-bar';
|
|
162
|
+
this._sVert.insertAdjacentElement('afterend', this._toolbar);
|
|
158
163
|
this._designerCanvas.onZoomFactorChanged.on(() => {
|
|
159
164
|
this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
|
|
160
165
|
const pos = this.designerCanvas.canvasOffset;
|
|
@@ -205,15 +210,9 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
|
|
|
205
210
|
alignGrid.onclick = () => { this._designerCanvas.alignOnGrid = !this._designerCanvas.alignOnGrid; alignGrid.style.backgroundColor = this._designerCanvas.alignOnGrid ? 'deepskyblue' : ''; };
|
|
206
211
|
alignGrid.style.backgroundColor = this._designerCanvas.alignOnGrid ? 'deepskyblue' : '';
|
|
207
212
|
this._lowertoolbar = this._getDomElement('lowertoolbar');
|
|
208
|
-
this._sVert = this._getDomElement('s-vert');
|
|
209
|
-
this._sHor = this._getDomElement('s-hor');
|
|
210
213
|
this._sVert.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
|
|
211
214
|
this._sHor.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
|
|
212
215
|
}
|
|
213
|
-
async ready() {
|
|
214
|
-
this._toolbar = await this._getDomElement('tool-bar');
|
|
215
|
-
this._toolbar.initialize(this.serviceContainer, this);
|
|
216
|
-
}
|
|
217
216
|
zoomReset() {
|
|
218
217
|
this._designerCanvas.canvasOffset = { x: 0, y: 0 };
|
|
219
218
|
this._designerCanvas.zoomFactor = 1;
|
|
@@ -319,6 +318,7 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
|
|
|
319
318
|
this._lowertoolbar.appendChild(btn);
|
|
320
319
|
}
|
|
321
320
|
}
|
|
321
|
+
this._toolbar.initialize(this.serviceContainer, this);
|
|
322
322
|
}
|
|
323
323
|
getHTML(designItemsAssignmentList) {
|
|
324
324
|
//this.instanceServiceContainer.selectionService.setSelectedElements(null);
|
package/dist/index.d.ts
CHANGED
|
@@ -101,6 +101,16 @@ export type { IPlacementView } from "./elements/widgets/designerView/IPlacementV
|
|
|
101
101
|
export * from "./elements/widgets/designerView/designerView.js";
|
|
102
102
|
export * from "./elements/widgets/designerView/overlayLayerView.js";
|
|
103
103
|
export * from "./elements/widgets/designerView/defaultConfiguredDesignerView.js";
|
|
104
|
+
export * from "./elements/widgets/designerView/tools/toolBar/buttons/DrawToolButtonProvider.js";
|
|
105
|
+
export * from "./elements/widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider.js";
|
|
106
|
+
export * from "./elements/widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.js";
|
|
107
|
+
export * from "./elements/widgets/designerView/tools/toolBar/buttons/SeperatorToolProvider.js";
|
|
108
|
+
export * from "./elements/widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.js";
|
|
109
|
+
export * from "./elements/widgets/designerView/tools/toolBar/buttons/ZoomToolButtonProvider.js";
|
|
110
|
+
export * from "./elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup.js";
|
|
111
|
+
export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbar.js";
|
|
112
|
+
export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbarButton.js";
|
|
113
|
+
export type { IDesignViewToolbarButtonProvider } from "./elements/widgets/designerView/tools/toolBar/IDesignViewToolbarButtonProvider.js";
|
|
104
114
|
export type { ITool } from "./elements/widgets/designerView/tools/ITool.js";
|
|
105
115
|
export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbar.js";
|
|
106
116
|
export * from "./elements/widgets/designerView/tools/NamedTools.js";
|
package/dist/index.js
CHANGED
|
@@ -66,6 +66,15 @@ export * from "./elements/widgets/propertyGrid/PropertyGridWithHeader.js";
|
|
|
66
66
|
export * from "./elements/widgets/designerView/designerView.js";
|
|
67
67
|
export * from "./elements/widgets/designerView/overlayLayerView.js";
|
|
68
68
|
export * from "./elements/widgets/designerView/defaultConfiguredDesignerView.js";
|
|
69
|
+
export * from "./elements/widgets/designerView/tools/toolBar/buttons/DrawToolButtonProvider.js";
|
|
70
|
+
export * from "./elements/widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider.js";
|
|
71
|
+
export * from "./elements/widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.js";
|
|
72
|
+
export * from "./elements/widgets/designerView/tools/toolBar/buttons/SeperatorToolProvider.js";
|
|
73
|
+
export * from "./elements/widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.js";
|
|
74
|
+
export * from "./elements/widgets/designerView/tools/toolBar/buttons/ZoomToolButtonProvider.js";
|
|
75
|
+
export * from "./elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup.js";
|
|
76
|
+
export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbar.js";
|
|
77
|
+
export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbarButton.js";
|
|
69
78
|
export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbar.js";
|
|
70
79
|
export * from "./elements/widgets/designerView/tools/NamedTools.js";
|
|
71
80
|
export * from "./elements/widgets/designerView/tools/DrawElementTool.js";
|
package/package.json
CHANGED
|
@@ -1,42 +1,42 @@
|
|
|
1
|
-
{
|
|
2
|
-
"description": "A UI designer for Polymer apps",
|
|
3
|
-
"name": "@node-projects/web-component-designer",
|
|
4
|
-
"version": "0.0.
|
|
5
|
-
"type": "module",
|
|
6
|
-
"main": "./dist/index.js",
|
|
7
|
-
"author": "",
|
|
8
|
-
"license": "MIT",
|
|
9
|
-
"scripts": {
|
|
10
|
-
"tsc": "tsc",
|
|
11
|
-
"test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
|
|
12
|
-
"build": "tsc",
|
|
13
|
-
"prepublishOnly": "npm run build"
|
|
14
|
-
},
|
|
15
|
-
"dependencies": {
|
|
16
|
-
"@node-projects/base-custom-webcomponent": "^0.9.1",
|
|
17
|
-
"construct-style-sheets-polyfill": "^3.1.0"
|
|
18
|
-
},
|
|
19
|
-
"devDependencies": {
|
|
20
|
-
"@node-projects/lean-he-esm": "^3.3.0",
|
|
21
|
-
"@node-projects/node-html-parser-esm": "^2.4.1",
|
|
22
|
-
"@papyrs/stylo": "^0.0.15",
|
|
23
|
-
"@types/codemirror": "^5.60.5",
|
|
24
|
-
"@types/jquery": "^3.5.14",
|
|
25
|
-
"@types/jquery.fancytree": "0.0.7",
|
|
26
|
-
"ace-builds": "^1.4.14",
|
|
27
|
-
"codemirror": "^5.65.3",
|
|
28
|
-
"esprima-next": "^5.8.1",
|
|
29
|
-
"html2canvas": "*",
|
|
30
|
-
"jest": "^27.5.1",
|
|
31
|
-
"jquery": "^3.6.0",
|
|
32
|
-
"jquery.fancytree": "^2.38.1",
|
|
33
|
-
"monaco-editor": "^0.33.0",
|
|
34
|
-
"ts-jest": "^27.1.4",
|
|
35
|
-
"typescript": "^4.6.3",
|
|
36
|
-
"typescript-lit-html-plugin": "^0.9.0"
|
|
37
|
-
},
|
|
38
|
-
"repository": {
|
|
39
|
-
"type": "git",
|
|
40
|
-
"url": "git+https://github.com/node-projects/web-component-designer.git"
|
|
41
|
-
}
|
|
42
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"description": "A UI designer for Polymer apps",
|
|
3
|
+
"name": "@node-projects/web-component-designer",
|
|
4
|
+
"version": "0.0.98",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"author": "",
|
|
8
|
+
"license": "MIT",
|
|
9
|
+
"scripts": {
|
|
10
|
+
"tsc": "tsc",
|
|
11
|
+
"test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
|
|
12
|
+
"build": "tsc",
|
|
13
|
+
"prepublishOnly": "npm run build"
|
|
14
|
+
},
|
|
15
|
+
"dependencies": {
|
|
16
|
+
"@node-projects/base-custom-webcomponent": "^0.9.1",
|
|
17
|
+
"construct-style-sheets-polyfill": "^3.1.0"
|
|
18
|
+
},
|
|
19
|
+
"devDependencies": {
|
|
20
|
+
"@node-projects/lean-he-esm": "^3.3.0",
|
|
21
|
+
"@node-projects/node-html-parser-esm": "^2.4.1",
|
|
22
|
+
"@papyrs/stylo": "^0.0.15",
|
|
23
|
+
"@types/codemirror": "^5.60.5",
|
|
24
|
+
"@types/jquery": "^3.5.14",
|
|
25
|
+
"@types/jquery.fancytree": "0.0.7",
|
|
26
|
+
"ace-builds": "^1.4.14",
|
|
27
|
+
"codemirror": "^5.65.3",
|
|
28
|
+
"esprima-next": "^5.8.1",
|
|
29
|
+
"html2canvas": "*",
|
|
30
|
+
"jest": "^27.5.1",
|
|
31
|
+
"jquery": "^3.6.0",
|
|
32
|
+
"jquery.fancytree": "^2.38.1",
|
|
33
|
+
"monaco-editor": "^0.33.0",
|
|
34
|
+
"ts-jest": "^27.1.4",
|
|
35
|
+
"typescript": "^4.6.3",
|
|
36
|
+
"typescript-lit-html-plugin": "^0.9.0"
|
|
37
|
+
},
|
|
38
|
+
"repository": {
|
|
39
|
+
"type": "git",
|
|
40
|
+
"url": "git+https://github.com/node-projects/web-component-designer.git"
|
|
41
|
+
}
|
|
42
|
+
}
|