dcim-topology2d 2.0.8 → 3.0.2
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/activity-diagram/src/final/final.d.ts +1 -1
- package/activity-diagram/src/final/final.rect.d.ts +1 -1
- package/activity-diagram/src/final/final.rect.js +1 -1
- package/activity-diagram/src/fork/fork.anchor.d.ts +1 -1
- package/activity-diagram/src/fork/fork.anchor.js +1 -1
- package/activity-diagram/src/fork/fork.d.ts +1 -1
- package/activity-diagram/src/fork/fork.rect.d.ts +1 -1
- package/activity-diagram/src/fork/fork.rect.js +1 -1
- package/activity-diagram/src/register.js +1 -1
- package/activity-diagram/src/swimlaneH/swimlaneH.d.ts +1 -1
- package/activity-diagram/src/swimlaneH/swimlaneH.rect.d.ts +1 -1
- package/activity-diagram/src/swimlaneH/swimlaneH.rect.js +1 -1
- package/activity-diagram/src/swimlaneV/swimlaneV.d.ts +1 -1
- package/activity-diagram/src/swimlaneV/swimlaneV.rect.d.ts +1 -1
- package/activity-diagram/src/swimlaneV/swimlaneV.rect.js +1 -1
- package/chart-diagram/index.d.ts +1 -3
- package/chart-diagram/index.js +1 -2
- package/chart-diagram/src/echarts/index.d.ts +2 -1
- package/chart-diagram/src/echarts/index.js +104 -109
- package/chart-diagram/src/register.js +8 -9
- package/class-diagram/src/class/class.d.ts +1 -1
- package/class-diagram/src/class/class.rect.d.ts +1 -1
- package/class-diagram/src/class/class.rect.js +1 -1
- package/class-diagram/src/register.js +1 -1
- package/core/index.d.ts +0 -2
- package/core/index.js +0 -2
- package/core/src/activeLayer.d.ts +10 -2
- package/core/src/activeLayer.js +47 -42
- package/core/src/animateLayer.d.ts +7 -3
- package/core/src/animateLayer.js +12 -10
- package/core/src/calling.d.ts +4 -1
- package/core/src/calling.js +41 -43
- package/core/src/canvas.d.ts +6 -1
- package/core/src/canvas.js +21 -22
- package/core/src/common.d.ts +7 -6
- package/core/src/common.js +673 -332
- package/core/src/core.d.ts +4 -3
- package/core/src/core.js +367 -466
- package/core/src/divLayer.d.ts +36 -2
- package/core/src/divLayer.js +305 -33
- package/core/src/healps/changeData.d.ts +2 -1
- package/core/src/healps/changeData.js +66 -32
- package/core/src/hoverLayer.d.ts +9 -2
- package/core/src/hoverLayer.js +34 -31
- package/core/src/middles/default.d.ts +3 -1
- package/core/src/middles/default.js +51 -53
- package/core/src/middles/index.js +2 -3
- package/core/src/middles/nodes/arbitrarygraph.js +9 -11
- package/core/src/middles/nodes/pentagon.rect.js +1 -1
- package/core/src/middles/nodes/rectangle.rect.js +1 -1
- package/core/src/models/data.d.ts +26 -0
- package/core/src/models/data.js +77 -0
- package/core/src/models/data.js.map +1 -0
- package/core/src/models/index.d.ts +1 -0
- package/core/src/models/index.js +1 -0
- package/core/src/models/node.d.ts +0 -10
- package/core/src/models/node.js +36 -69
- package/core/src/models/pen.js +59 -19
- package/core/src/models/rect.js +2 -2
- package/core/src/mqtt.d.ts +14 -0
- package/core/src/mqtt.js +82 -0
- package/core/src/mqtt.js.map +1 -0
- package/core/src/offscreen.d.ts +4 -1
- package/core/src/offscreen.js +8 -10
- package/core/src/options.d.ts +1 -3
- package/core/src/options.js +0 -2
- package/core/src/poll.js +39 -0
- package/core/src/preview.d.ts +13 -1
- package/core/src/preview.js +43 -111
- package/core/src/renderLayer.d.ts +9 -11
- package/core/src/renderLayer.js +61 -60
- package/core/src/socket.d.ts +10 -0
- package/core/src/socket.js +51 -0
- package/core/src/socket.js.map +1 -0
- package/core/src/utils/canvas.js +1 -1
- package/core/src/utils/construction.d.ts +3 -12
- package/core/src/utils/construction.js +1 -8
- package/core/src/utils/conversion.d.ts +0 -11
- package/core/src/utils/conversion.js +0 -168
- package/core/src/utils/dom.d.ts +8 -0
- package/core/src/utils/dom.js +67 -0
- package/core/src/utils/dom.js.map +1 -0
- package/core/src/utils/index.d.ts +1 -2
- package/core/src/utils/index.js +1 -2
- package/core/src/utils/math.d.ts +0 -1
- package/core/src/utils/math.js +0 -3
- package/core/src/utils/onmousevent.d.ts +0 -3
- package/core/src/utils/onmousevent.js +10 -42
- package/flow-diagram/src/comment/comment.anchor.d.ts +1 -1
- package/flow-diagram/src/comment/comment.anchor.js +1 -1
- package/flow-diagram/src/comment/comment.d.ts +1 -1
- package/flow-diagram/src/data/data.anchor.d.ts +1 -1
- package/flow-diagram/src/data/data.anchor.js +1 -1
- package/flow-diagram/src/data/data.d.ts +1 -1
- package/flow-diagram/src/data/data.rect.d.ts +1 -1
- package/flow-diagram/src/data/data.rect.js +1 -1
- package/flow-diagram/src/db/db.d.ts +1 -1
- package/flow-diagram/src/db/db.rect.d.ts +1 -1
- package/flow-diagram/src/db/db.rect.js +1 -1
- package/flow-diagram/src/display/display.anchor.d.ts +1 -1
- package/flow-diagram/src/display/display.anchor.js +1 -1
- package/flow-diagram/src/display/display.d.ts +1 -1
- package/flow-diagram/src/display/display.rect.d.ts +1 -1
- package/flow-diagram/src/display/display.rect.js +1 -1
- package/flow-diagram/src/document/document.anchor.d.ts +1 -1
- package/flow-diagram/src/document/document.anchor.js +1 -1
- package/flow-diagram/src/document/document.d.ts +1 -1
- package/flow-diagram/src/document/document.rect.d.ts +1 -1
- package/flow-diagram/src/document/document.rect.js +1 -1
- package/flow-diagram/src/externStorage/externStorage.anchor.d.ts +1 -1
- package/flow-diagram/src/externStorage/externStorage.anchor.js +1 -1
- package/flow-diagram/src/externStorage/externStorage.d.ts +1 -1
- package/flow-diagram/src/externStorage/externStorage.rect.d.ts +1 -1
- package/flow-diagram/src/externStorage/externStorage.rect.js +1 -1
- package/flow-diagram/src/internalStorage/internalStorage.d.ts +1 -1
- package/flow-diagram/src/internalStorage/internalStorage.rect.d.ts +1 -1
- package/flow-diagram/src/internalStorage/internalStorage.rect.js +1 -1
- package/flow-diagram/src/manually/manually.anchor.d.ts +1 -1
- package/flow-diagram/src/manually/manually.anchor.js +1 -1
- package/flow-diagram/src/manually/manually.d.ts +1 -1
- package/flow-diagram/src/manually/manually.rect.d.ts +1 -1
- package/flow-diagram/src/manually/manually.rect.js +1 -1
- package/flow-diagram/src/parallel/parallel.anchor.d.ts +1 -1
- package/flow-diagram/src/parallel/parallel.anchor.js +1 -1
- package/flow-diagram/src/parallel/parallel.d.ts +1 -1
- package/flow-diagram/src/queue/queue.d.ts +1 -1
- package/flow-diagram/src/queue/queue.rect.d.ts +1 -1
- package/flow-diagram/src/queue/queue.rect.js +1 -1
- package/flow-diagram/src/register.js +1 -1
- package/flow-diagram/src/subprocess/subprocess.d.ts +1 -1
- package/flow-diagram/src/subprocess/subprocess.rect.d.ts +1 -1
- package/flow-diagram/src/subprocess/subprocess.rect.js +1 -1
- package/layout/src/align.d.ts +1 -1
- package/layout/src/align.js +1 -1
- package/layout/src/layout.d.ts +1 -1
- package/layout/src/layout.js +1 -1
- package/myShape-diagram/{index.js → myShape.js} +1 -4
- package/package.json +1 -1
- package/sequence-diagram/src/focus/focus.anchor.d.ts +1 -1
- package/sequence-diagram/src/focus/focus.anchor.js +1 -1
- package/sequence-diagram/src/focus/focus.d.ts +1 -1
- package/sequence-diagram/src/focus/focus.rect.d.ts +1 -1
- package/sequence-diagram/src/focus/focus.rect.js +1 -1
- package/sequence-diagram/src/lifeline/lifeline.anchor.d.ts +1 -1
- package/sequence-diagram/src/lifeline/lifeline.anchor.js +1 -1
- package/sequence-diagram/src/lifeline/lifeline.d.ts +1 -1
- package/sequence-diagram/src/lifeline/lifeline.rect.d.ts +1 -1
- package/sequence-diagram/src/lifeline/lifeline.rect.js +1 -1
- package/sequence-diagram/src/register.js +1 -1
- package/chart-diagram/src/utils/changeOptions.d.ts +0 -7
- package/chart-diagram/src/utils/changeOptions.js +0 -261
- package/chart-diagram/src/utils/conversion.d.ts +0 -19
- package/chart-diagram/src/utils/conversion.js +0 -432
- package/chart-diagram/src/utils/drawGraphic.d.ts +0 -3
- package/chart-diagram/src/utils/drawGraphic.js +0 -97
- package/chart-diagram/src/utils/formatter.d.ts +0 -1
- package/chart-diagram/src/utils/formatter.js +0 -170
- package/chart-diagram/src/utils/index.d.ts +0 -4
- package/chart-diagram/src/utils/index.js +0 -4
- package/chart-diagram/src/utils/render.d.ts +0 -8
- package/chart-diagram/src/utils/render.js +0 -228
- package/core/src/element/common.d.ts +0 -5
- package/core/src/element/common.js +0 -54
- package/core/src/element/iframe.d.ts +0 -3
- package/core/src/element/iframe.js +0 -12
- package/core/src/element/index.d.ts +0 -4
- package/core/src/element/index.js +0 -4
- package/core/src/element/select.d.ts +0 -11
- package/core/src/element/select.js +0 -263
- package/core/src/element/tab.d.ts +0 -1
- package/core/src/element/tab.js +0 -23
- package/core/src/middles/arrows/index.d.ts +0 -4
- package/core/src/middles/arrows/index.js +0 -5
- package/core/src/middles/lines/index.d.ts +0 -4
- package/core/src/middles/lines/index.js +0 -5
- package/core/src/middles/nodes/formoverflow.js +0 -61
- package/core/src/middles/nodes/formselect.d.ts +0 -2
- package/core/src/middles/nodes/formselect.js +0 -95
- package/core/src/middles/nodes/iframe.d.ts +0 -2
- package/core/src/middles/nodes/iframe.js +0 -29
- package/core/src/middles/nodes/index.d.ts +0 -48
- package/core/src/middles/nodes/index.js +0 -49
- package/core/src/store/common.d.ts +0 -9
- package/core/src/store/common.js +0 -5
- package/core/src/store/data.d.ts +0 -189
- package/core/src/store/data.js +0 -180
- package/core/src/store/index.d.ts +0 -2
- package/core/src/store/index.js +0 -2
- package/core/src/utils/assignment.d.ts +0 -6
- package/core/src/utils/assignment.js +0 -173
- package/core/src/utils/params.d.ts +0 -2
- package/core/src/utils/params.js +0 -60
- package/static/echartsDefaultData.js +0 -178
- package/static/element.js +0 -14
- package/static/form.js +0 -11
- package/static/index.js +0 -3
- package/store/actions.js +0 -1
- package/store/clear.js +0 -10
- package/store/index.js +0 -2
- package/style/common.css +0 -18
- package/style/editor.css +0 -13
- package/style/index.css +0 -4
- package/style/select.css +0 -143
- /package/myShape-diagram/{index.ts → myShape.ts} +0 -0
package/core/src/preview.js
CHANGED
@@ -1,5 +1,3 @@
|
|
1
|
-
import {Store} from "le5le-store";
|
2
|
-
|
3
1
|
var __extends = (this && this.__extends) || (function () {
|
4
2
|
var extendStatics = function (d, b) {
|
5
3
|
extendStatics = Object.setPrototypeOf ||
|
@@ -16,18 +14,7 @@ var __extends = (this && this.__extends) || (function () {
|
|
16
14
|
import {KeyType} from './options';
|
17
15
|
import {Point} from './models';
|
18
16
|
import { Common } from './common'
|
19
|
-
import {
|
20
|
-
downDataType,
|
21
|
-
previewType,
|
22
|
-
formatPadding,
|
23
|
-
mousMoveFun,
|
24
|
-
mousDownFun,
|
25
|
-
omouseEventPrototDoWindowFn
|
26
|
-
} from './utils';
|
27
|
-
import {
|
28
|
-
resetSelectInteractiveState,
|
29
|
-
setSelectDropdownInteractiveState
|
30
|
-
} from './element';
|
17
|
+
import {downDataType, formatPadding, mousMoveFun, mousDownFun, omouseEventPrototDoWindowFn} from './utils';
|
31
18
|
|
32
19
|
var Preview = (function (_super) {
|
33
20
|
__extends(Preview, _super);
|
@@ -36,14 +23,13 @@ var Preview = (function (_super) {
|
|
36
23
|
_this.offscreen.getRoutineLayer(['AnimateLayer']);
|
37
24
|
_this.scheduledAnimationFrame = false;
|
38
25
|
_this.onMouseMove = function (e) {
|
39
|
-
_this.store.data.dataResize = 0;
|
40
26
|
// https://caniuse.com/#feat=mdn-api_mouseevent_buttons
|
41
27
|
if (_this.mouseDown && !_this.mouseDown.restore && e.buttons !== 1) {
|
42
28
|
// 防止异常情况导致mouseup事件没有触发
|
43
29
|
_this.onmouseup(e);
|
44
30
|
return;
|
45
31
|
}
|
46
|
-
if (_this.
|
32
|
+
if (_this.data.locked && _this.mouseDown) {
|
47
33
|
return;
|
48
34
|
}
|
49
35
|
_this.scheduledAnimationFrame = true;
|
@@ -59,13 +45,13 @@ var Preview = (function (_super) {
|
|
59
45
|
hoverNode,
|
60
46
|
moveType,
|
61
47
|
eventNode
|
62
|
-
} = mousMoveFun(_this.
|
48
|
+
} = mousMoveFun(_this.options.type, pos, _this.data.pens);
|
63
49
|
_this.moveIn.type = _this.moveInType.None;
|
64
50
|
_this.scheduledAnimationFrame = false;
|
65
51
|
_this.hideTip();
|
66
|
-
_this.
|
52
|
+
_this.divLayer.canvas.style.cursor = 'default';
|
67
53
|
if (hoverNode) {
|
68
|
-
if(eventNode) _this.
|
54
|
+
if(eventNode) _this.divLayer.canvas.style.cursor = 'pointer';
|
69
55
|
if(hoverNode.visible) _this.showTip(hoverNode, pos);
|
70
56
|
_this.moveIn.type = moveType;
|
71
57
|
}
|
@@ -82,15 +68,14 @@ var Preview = (function (_super) {
|
|
82
68
|
var canvasPos = _this.divLayer.canvas.getBoundingClientRect();
|
83
69
|
_this.mouseDown = {x: e.x - canvasPos.x, y: e.y - canvasPos.y};
|
84
70
|
if (e.altKey) {
|
85
|
-
_this.
|
71
|
+
_this.divLayer.canvas.style.cursor = 'pointer';
|
86
72
|
}
|
87
73
|
if (_this.inputObj) {
|
88
74
|
_this.setNodeText();
|
89
75
|
}
|
90
|
-
|
91
|
-
const {eventType, value, staticType} = mousDownFun(_this.store.options.type, _this.moveIn.eventNode);
|
76
|
+
const {eventType, value} = mousDownFun(_this.options.type, _this.moveIn.eventNode);
|
92
77
|
if (_this.moveIn.type == _this.moveInType.Nodes) {
|
93
|
-
_this.
|
78
|
+
_this.divLayer.canvas.style.cursor = 'pointer';
|
94
79
|
switch (eventType) {
|
95
80
|
case downDataType.Window:
|
96
81
|
omouseEventPrototDoWindowFn(_this.moveIn.eventNode, _this.moveIn.hoverNode);
|
@@ -99,20 +84,16 @@ var Preview = (function (_super) {
|
|
99
84
|
_this.dispatch('node', _this.moveIn.hoverNode);
|
100
85
|
break;
|
101
86
|
case downDataType.Showhide:
|
102
|
-
_this.hidePenByTag(_this.
|
87
|
+
_this.hidePenByTag(_this.data.pens, value);
|
103
88
|
const obj = value ? JSON.parse(value) : {}
|
104
89
|
const visibleRange = obj.visibleRange
|
105
90
|
if (visibleRange == '1') {
|
106
91
|
_this.openCount++
|
107
92
|
}
|
108
|
-
_this.render();
|
109
93
|
break;
|
110
94
|
case downDataType.Tabswitch:
|
111
95
|
_this.switchStaticsCheckType(_this.moveIn.hoverNode, _this.moveIn.eventNode);
|
112
96
|
break;
|
113
|
-
case downDataType.Formselect:
|
114
|
-
setSelectDropdownInteractiveState(_this.moveIn.hoverNode, staticType, previewType.Dcim);
|
115
|
-
break;
|
116
97
|
}
|
117
98
|
}
|
118
99
|
};
|
@@ -122,20 +103,16 @@ var Preview = (function (_super) {
|
|
122
103
|
_this.mouseDown = null;
|
123
104
|
_this.lastTranlated.x = 0;
|
124
105
|
_this.lastTranlated.y = 0;
|
125
|
-
|
126
|
-
_this.setAttributeForCanvasPoint('pointer');
|
127
|
-
}else {
|
128
|
-
_this.setAttributeForCanvasPoint('default');
|
129
|
-
}
|
106
|
+
_this.divLayer.canvas.style.cursor = _this.moveIn.eventNode ? 'pointer' : 'default';
|
130
107
|
};
|
131
108
|
_this.divLayer.canvas.onmousemove = this.onMouseMove;
|
132
109
|
_this.divLayer.canvas.onmousedown = this.onmousedown;
|
133
110
|
_this.divLayer.canvas.onmouseup = this.onmouseup;
|
134
111
|
_this.divLayer.canvas.onwheel = function (event) {
|
135
|
-
if (_this.
|
112
|
+
if (_this.options.disableScale) {
|
136
113
|
return;
|
137
114
|
}
|
138
|
-
switch (_this.
|
115
|
+
switch (_this.options.scaleKey) {
|
139
116
|
case KeyType.None:
|
140
117
|
break;
|
141
118
|
case KeyType.Ctrl:
|
@@ -180,98 +157,56 @@ var Preview = (function (_super) {
|
|
180
157
|
_this.divLayer.canvas.focus();
|
181
158
|
return false;
|
182
159
|
};
|
183
|
-
window.onresize = function () {
|
184
|
-
const isFullScreen = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement;
|
185
|
-
if(!isFullScreen && _this.isFullScreen){
|
186
|
-
_this.moveIn.hoverNode.text = '全屏';
|
187
|
-
_this.fitViewPreview(_this.isFullScreen);
|
188
|
-
_this.isFullScreen = false;
|
189
|
-
}else {
|
190
|
-
// pageZoomOnly 表示topology页面只全局缩放,不对局部缩放进行调整,不执行render重绘。通常用于无任何操作事件的topology驾驶舱
|
191
|
-
if(_this.store.options.type === 'topology' || _this.store.options.type === 'pageZoomOnly') return;
|
192
|
-
const screenWidth = window.screen.width < 1920 ? 1920 : window.screen.width;
|
193
|
-
const zoom = window.innerWidth < screenWidth ? document.documentElement.clientWidth / screenWidth : 1;
|
194
|
-
_this.isResize = true;
|
195
|
-
clearTimeout(_this.pageResizeTim);
|
196
|
-
_this.pageResizeTim = setTimeout(() => {
|
197
|
-
if(_this.isResize){
|
198
|
-
const pageZoom = 1/zoom;
|
199
|
-
_this.store.data.pageZoom = zoom;
|
200
|
-
_this.store.parentElem.style.transform = `scale(${pageZoom})`;
|
201
|
-
_this.store.parentElem.style.transformOrigin = '0 0';
|
202
|
-
_this.store.parentElem.parentElement.style.overflow = 'hidden';
|
203
|
-
_this.store.data.dataResize = 1;
|
204
|
-
_this.isResize = false;
|
205
|
-
Store.set('PAGE:zoom', zoom);
|
206
|
-
_this.fitView();
|
207
|
-
_this.render();
|
208
|
-
}
|
209
|
-
}, 1000);
|
210
|
-
}
|
211
|
-
};
|
212
160
|
return _this;
|
213
|
-
}
|
214
|
-
Preview.prototype.setAttributeForCanvasPoint = function (type){
|
215
|
-
|
216
|
-
this.divLayer.canvas.setAttribute('class', `canvas-point ${type}`);
|
217
|
-
|
218
161
|
};
|
219
162
|
Preview.prototype.fitViewPreview = function (restore){
|
220
163
|
this.fitView(null, restore);
|
221
164
|
this.render();
|
222
165
|
};
|
223
166
|
// open - redraw by the data
|
224
|
-
Preview.prototype.open = function (topoJSon
|
167
|
+
Preview.prototype.open = function (topoJSon) {
|
225
168
|
this.conversionData(topoJSon);
|
226
|
-
this.
|
169
|
+
this.parentElem.scrollLeft = 0;
|
170
|
+
this.parentElem.scrollTop = 0;
|
171
|
+
this.divLayer.clear();
|
227
172
|
this.fitView();
|
228
173
|
this.render(true);
|
229
174
|
this.animate(true);
|
230
175
|
};
|
231
|
-
Preview.prototype.setBKImageRect = function () {
|
232
|
-
if (this.store.data.bkImageRect) {
|
233
|
-
this.store.data.bkImageRect.x = this.store.data.bkImageRect.x ? Number(this.store.data.bkImageRect.x) : 0;
|
234
|
-
this.store.data.bkImageRect.y = this.store.data.bkImageRect.y ? Number(this.store.data.bkImageRect.y) : 0;
|
235
|
-
this.store.data.bkImageRect.width = this.store.data.bkImageRect.width ? Number(this.store.data.bkImageRect.width) : this.canvas.width;
|
236
|
-
this.store.data.bkImageRect.height = this.store.data.bkImageRect.height ? Number(this.store.data.bkImageRect.height) : this.canvas.height;
|
237
|
-
this.store.data.bkImageRect.center = {
|
238
|
-
x: this.store.data.bkImageRect.x + this.store.data.bkImageRect.width / 2,
|
239
|
-
y: this.store.data.bkImageRect.y + this.store.data.bkImageRect.height / 2
|
240
|
-
}
|
241
|
-
}
|
242
|
-
};
|
243
176
|
Preview.prototype.scale = function (scale, center, w, h) {
|
244
|
-
if (this.
|
245
|
-
this.
|
177
|
+
if (this.data.scale * scale < this.options.minScale ||
|
178
|
+
this.data.scale * scale > this.options.maxScale) {
|
246
179
|
return;
|
247
180
|
}
|
248
|
-
|
181
|
+
const scaleX = w ? w : scale;
|
182
|
+
const scaleY = h ? h : scale;
|
183
|
+
this.data.scale *= scale;
|
184
|
+
if(this.isFullScreen) {
|
185
|
+
this.ratioCord.ratio *= scale;
|
186
|
+
this.ratioCord.scaleX *= scaleX;
|
187
|
+
this.ratioCord.scaleY *= scaleY;
|
188
|
+
}else {
|
189
|
+
this.ratioCord.ratio = 1;
|
190
|
+
this.ratioCord.scaleX = 1;
|
191
|
+
this.ratioCord.scaleY = 1;
|
192
|
+
}
|
249
193
|
!center && (center = this.getRect().center);
|
250
|
-
for (var _i = 0, _a = this.
|
194
|
+
for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
|
251
195
|
var item = _a[_i];
|
252
196
|
item.scale(scale, center, w, h);
|
253
|
-
// 驾驶舱底部区域元件,用于控制底部区域Dom宽高等元素自由变换,后期会删除
|
254
|
-
if(item.tags && item.tags[0] && item.tags[0].includes('contromRoomBottom')) this.store.pens['contromRoomBottom'] = item;
|
255
197
|
}
|
256
198
|
};
|
257
199
|
Preview.prototype.scaleTo = function (scale) {
|
258
|
-
this.scale(scale / this.
|
259
|
-
this.
|
200
|
+
this.scale(scale / this.data.scale);
|
201
|
+
this.data.scale = scale;
|
260
202
|
};
|
261
203
|
// scale for origin canvas:
|
262
204
|
Preview.prototype.fitView = function (viewPadding, restore) {
|
263
205
|
if (!this.hasView())
|
264
206
|
return;
|
265
207
|
// 1. 重置画布尺寸为容器尺寸
|
266
|
-
var parentElem = this.
|
267
|
-
var width = parentElem.offsetWidth,
|
268
|
-
height = parentElem.offsetHeight;
|
269
|
-
if(this.store.options.storeSubscribe) {
|
270
|
-
width = this.store.options.width;
|
271
|
-
height = this.store.options.height;
|
272
|
-
}
|
273
|
-
width *= this.store.data.pageZoom;
|
274
|
-
height *= this.store.data.pageZoom;
|
208
|
+
var parentElem = this.canvas.parentElem;
|
209
|
+
var width = parentElem.offsetWidth, height = parentElem.offsetHeight;
|
275
210
|
this.canvasResize({
|
276
211
|
width: width,
|
277
212
|
height: height,
|
@@ -279,34 +214,31 @@ var Preview = (function (_super) {
|
|
279
214
|
// 2. 图形居中
|
280
215
|
this.centerView(viewPadding);
|
281
216
|
// 3. 获取设置的留白值
|
282
|
-
var padding = formatPadding(viewPadding || this.
|
217
|
+
var padding = formatPadding(viewPadding || this.options.viewPadding);
|
283
218
|
// 4. 获取图形尺寸
|
284
219
|
var rect = this.getRect();
|
285
|
-
if(!rect.width) {
|
286
|
-
const bkImageRect = this.store.data.bkImageRect;
|
287
|
-
rect.width = bkImageRect && bkImageRect.width ? bkImageRect.width : width;
|
288
|
-
rect.height = bkImageRect && bkImageRect.height ? bkImageRect.height : height;
|
289
|
-
}
|
290
220
|
// 6. 计算缩放比
|
291
|
-
var w = (width - padding[1] - padding[3]) / rect.width
|
221
|
+
var w = (width - padding[1] - padding[3]) / rect.width;
|
292
222
|
var h = (height - padding[0] - padding[2]) / rect.height;
|
293
223
|
var ratio = w;
|
294
224
|
if (w > h) {
|
295
225
|
ratio = h;
|
296
226
|
}
|
297
|
-
|
298
|
-
|
227
|
+
if(typeof restore === 'boolean' && restore) {
|
228
|
+
ratio = 1 / this.ratioCord.ratio;
|
229
|
+
w = 1 / this.ratioCord.scaleX;
|
230
|
+
h = 1 / this.ratioCord.scaleY;
|
231
|
+
}
|
299
232
|
this.scale(ratio, undefined, w, h);
|
300
233
|
this.canvas.scale(ratio, undefined, w, h);
|
301
234
|
// 7. X抽滚动条隐藏
|
302
|
-
this.
|
235
|
+
this.parentElem.style.overflow = 'hidden auto';
|
303
236
|
};
|
304
237
|
Preview.prototype.destroy = function () {
|
305
238
|
this.destroyStatic();
|
306
239
|
this.onMouseMove = null;
|
307
240
|
this.onmousedown = null;
|
308
241
|
this.onmouseup = null;
|
309
|
-
window.onresize = null;
|
310
242
|
};
|
311
243
|
return Preview;
|
312
244
|
}(Common));
|
@@ -2,29 +2,27 @@ import { Options } from './options';
|
|
2
2
|
import { Canvas } from './canvas';
|
3
3
|
import {Point} from './models';
|
4
4
|
export declare class RenderLayer extends Canvas {
|
5
|
+
parentElem: HTMLElement;
|
6
|
+
options: Options;
|
5
7
|
offscreen: any;
|
6
8
|
bkImg: HTMLImageElement;
|
7
9
|
bkImgRect: {
|
8
|
-
center: {
|
9
|
-
x: number;
|
10
|
-
y: number;
|
11
|
-
},
|
12
10
|
x: number;
|
13
11
|
y: number;
|
14
12
|
width: number;
|
15
13
|
height: number;
|
16
14
|
};
|
17
15
|
bgRect: {
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
16
|
+
center: {
|
17
|
+
x: number;
|
18
|
+
y: number;
|
19
|
+
},
|
22
20
|
x: number;
|
23
21
|
y: number;
|
24
|
-
|
25
|
-
|
22
|
+
width: number;
|
23
|
+
height: number;
|
26
24
|
};
|
27
|
-
constructor(TID: String);
|
25
|
+
constructor(parentElem: HTMLElement, options: Options, TID: String);
|
28
26
|
loadBkImg(cb?: any): void;
|
29
27
|
clearBkImg(): void;
|
30
28
|
render: () => void;
|
package/core/src/renderLayer.js
CHANGED
@@ -13,23 +13,22 @@ var __extends = (this && this.__extends) || (function () {
|
|
13
13
|
})();
|
14
14
|
import { Store } from 'le5le-store';
|
15
15
|
import { Canvas } from './canvas';
|
16
|
-
import {
|
16
|
+
import {previewType} from './utils/construction'
|
17
17
|
//let isQttFillStyle = false;
|
18
18
|
var RenderLayer = /** @class */ (function (_super) {
|
19
19
|
__extends(RenderLayer, _super);
|
20
|
-
function RenderLayer(TID) {
|
20
|
+
function RenderLayer(parentElem, options, TID) {
|
21
21
|
//isQttFillStyle = false;
|
22
|
-
|
22
|
+
if (options === void 0) { options = {}; }
|
23
|
+
var _this = _super.call(this, parentElem, options, TID) || this;
|
24
|
+
_this.parentElem = parentElem;
|
25
|
+
_this.options = options;
|
23
26
|
_this.bkImgRect = null;
|
24
27
|
_this.initImage = false;
|
25
28
|
_this.coverType = 'container';
|
26
29
|
_this.bgRect = null;
|
27
|
-
_this.scaleX = 1;
|
28
|
-
_this.scaleY = 1;
|
29
|
-
_this.ratio = 1;
|
30
30
|
_this.render = function () {
|
31
|
-
if(
|
32
|
-
if (commonStore[TID].data.bkImage && !_this.initImage) {
|
31
|
+
if (_this.data.bkImage && !_this.initImage) {
|
33
32
|
_this.loadBkImg(_this.render, 'pixi');
|
34
33
|
return;
|
35
34
|
}
|
@@ -38,8 +37,12 @@ var RenderLayer = /** @class */ (function (_super) {
|
|
38
37
|
}
|
39
38
|
var ctx = _this.canvas.getContext('2d');
|
40
39
|
ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
|
41
|
-
if (
|
42
|
-
|
40
|
+
// if (_this.data.pens && _this.data.pens.length > 0 && !isQttFillStyle) {
|
41
|
+
// _this.data.pens.map((penItem) => {penItem.defaultFillStyle = penItem.fillStyle;})
|
42
|
+
// isQttFillStyle = true;
|
43
|
+
// }
|
44
|
+
if (_this.data.bkColor) {
|
45
|
+
ctx.fillStyle = _this.data.bkColor;
|
43
46
|
ctx.fillRect(0, 0, _this.width, _this.height);
|
44
47
|
}
|
45
48
|
if (_this.bkImg && _this.bkImgRect) {
|
@@ -49,52 +52,53 @@ var RenderLayer = /** @class */ (function (_super) {
|
|
49
52
|
ctx.drawImage(_this.offscreen, 0, 0, _this.width, _this.height);
|
50
53
|
};
|
51
54
|
_this.offscreen = Store.get(_this.generateStoreKey('LT:offscreen'));
|
52
|
-
|
55
|
+
_this.parentElem.appendChild(_this.canvas);
|
53
56
|
return _this;
|
54
57
|
}
|
55
58
|
RenderLayer.prototype.scale = function (scale, center, w, h){
|
56
|
-
if(!this.
|
57
|
-
this.scaleX = w ? w : scale;
|
58
|
-
this.scaleY = h ? h : scale;
|
59
|
-
this.ratio = scale;
|
60
|
-
return;
|
61
|
-
}
|
59
|
+
if(!this.data.bkImage) return;
|
62
60
|
if(!center) {
|
63
|
-
center = this.
|
61
|
+
center = this.data.bkImageRect ? this.data.bkImageRect.center : this.bgRect.center;
|
64
62
|
}
|
65
63
|
if (!w) {
|
66
64
|
w = scale;
|
67
|
-
|
68
|
-
|
69
|
-
|
65
|
+
if(this.data.bkImageRect) {
|
66
|
+
this.data.bkImageRect.x = center.x - (center.x - this.data.bkImageRect.x) * w;
|
67
|
+
}else {
|
68
|
+
this.bgRect.x = center.x - (center.x - this.bgRect.x) * w;
|
69
|
+
}
|
70
70
|
}
|
71
71
|
if (!h) {
|
72
72
|
h = scale;
|
73
|
-
|
73
|
+
if(this.data.bkImageRect){
|
74
|
+
this.data.bkImageRect.y = center.y - (center.y - this.data.bkImageRect.y) * h;
|
75
|
+
}else {
|
76
|
+
this.bgRect.y = center.y - (center.y - this.bgRect.y) * h;
|
77
|
+
}
|
78
|
+
}
|
79
|
+
if(this.data.bkImageRect) {
|
80
|
+
this.data.bkImageRect.width *= w;
|
81
|
+
this.data.bkImageRect.height *= h;
|
82
|
+
this.bkImgRect = this.data.bkImageRect;
|
74
83
|
}else {
|
75
|
-
this.
|
84
|
+
if(this.initImage) {
|
85
|
+
this.bgRect.width *= w;
|
86
|
+
this.bgRect.height *= h;
|
87
|
+
}
|
88
|
+
this.bkImgRect = this.bgRect;
|
76
89
|
}
|
77
|
-
this.bkImgRect.width *= w;
|
78
|
-
this.bkImgRect.height *= h;
|
79
|
-
this.calcCenter();
|
80
|
-
};
|
81
|
-
RenderLayer.prototype.calcCenter = function () {
|
82
|
-
this.bkImgRect.center.x = this.bkImgRect.x + this.bkImgRect.width / 2;
|
83
|
-
this.bkImgRect.center.y = this.bkImgRect.y + this.bkImgRect.height / 2;
|
84
90
|
};
|
85
91
|
RenderLayer.prototype.loadBkImg = function (cb, pixi) {
|
86
92
|
var _this = this;
|
87
|
-
|
88
|
-
if (!bkImage || this.initImage) {
|
93
|
+
if (!this.data.bkImage || this.initImage) {
|
89
94
|
return;
|
90
95
|
}
|
91
96
|
this.bkImg = new Image();
|
92
97
|
this.bkImg.crossOrigin = 'anonymous';
|
93
|
-
this.bkImg.src = bkImage;
|
98
|
+
this.bkImg.src = this.data.bkImage;
|
94
99
|
this.bkImg.onload = function () {
|
95
100
|
if(pixi && !_this.bkImgRect) {
|
96
|
-
_this.bkImgRectResize({width: _this.width, height: _this.height});
|
97
|
-
_this.scale(_this.ratio, undefined, _this.scaleX, _this.scaleY);
|
101
|
+
_this.bkImgRectResize({width: _this.canvas.width, height: _this.canvas.height});
|
98
102
|
}else {
|
99
103
|
//_this.bkImgRect = _this.coverRect(_this.canvas.width, _this.canvas.height, _this.bkImg.width, _this.bkImg.height);
|
100
104
|
}
|
@@ -102,6 +106,10 @@ var RenderLayer = /** @class */ (function (_super) {
|
|
102
106
|
cb();
|
103
107
|
}
|
104
108
|
_this.initImage = true;
|
109
|
+
_this.bgRect.center.x = _this.width / 2;
|
110
|
+
_this.bgRect.center.y = _this.height / 2;
|
111
|
+
_this.bgRect.width = _this.width;
|
112
|
+
_this.bgRect.height = _this.height;
|
105
113
|
};
|
106
114
|
};
|
107
115
|
RenderLayer.prototype.clearBkImg = function () {
|
@@ -109,8 +117,14 @@ var RenderLayer = /** @class */ (function (_super) {
|
|
109
117
|
this.bkImg = null;
|
110
118
|
this.initImage = false;
|
111
119
|
this.bgRect = {
|
120
|
+
center: {
|
121
|
+
x: this.width / 2,
|
122
|
+
y: this.height / 2
|
123
|
+
},
|
112
124
|
x: 0,
|
113
|
-
y: 0
|
125
|
+
y: 0,
|
126
|
+
width: this.width,
|
127
|
+
height: this.height
|
114
128
|
}
|
115
129
|
};
|
116
130
|
RenderLayer.prototype.coverRect = function (canvasWidth, canvasHeight, imgWidth, imgHeight) {
|
@@ -135,50 +149,37 @@ var RenderLayer = /** @class */ (function (_super) {
|
|
135
149
|
};
|
136
150
|
|
137
151
|
RenderLayer.prototype.bkImgRectResize = function (size) {
|
138
|
-
const bkImageRect =
|
152
|
+
const bkImageRect = this.data.bkImageRect;
|
139
153
|
if(!size) return;
|
140
|
-
const { width, height } = size;
|
141
154
|
if(bkImageRect) {
|
142
155
|
let x = bkImageRect.x ? Number(bkImageRect.x) : 0;
|
143
156
|
let y = bkImageRect.y ? Number(bkImageRect.y) : 0;
|
157
|
+
const { width, height } = size;
|
144
158
|
let bkWidth = bkImageRect.width ? Number(bkImageRect.width) : width;
|
145
159
|
let bkHeight = bkImageRect.height ? Number(bkImageRect.height) : height;
|
146
160
|
this.bkImgRect = {
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
x,
|
152
|
-
y,
|
153
|
-
width: bkWidth,
|
154
|
-
height: bkHeight
|
155
|
-
};
|
156
|
-
this.bgRect = {
|
157
|
-
x,
|
158
|
-
y
|
161
|
+
x: x,
|
162
|
+
y: y,
|
163
|
+
width: bkImageRect.width ? bkImageRect.width : width,
|
164
|
+
height: bkImageRect.height ? bkImageRect.height : height
|
159
165
|
};
|
160
166
|
}else {
|
161
|
-
this.bkImgRect =
|
162
|
-
center: {
|
163
|
-
x: width / 2,
|
164
|
-
y: height / 2
|
165
|
-
},
|
166
|
-
x: 0,
|
167
|
-
y: 0,
|
168
|
-
width,
|
169
|
-
height
|
170
|
-
};
|
167
|
+
this.bkImgRect = this.bgRect;
|
171
168
|
}
|
172
169
|
};
|
173
170
|
|
174
171
|
RenderLayer.prototype.destroy = function() {
|
175
172
|
|
173
|
+
this.data = null;
|
174
|
+
|
176
175
|
this.canvas = null;
|
177
176
|
|
178
177
|
this.render = null;
|
179
178
|
|
180
179
|
this.offscreen = null;
|
181
180
|
|
181
|
+
this.options = null;
|
182
|
+
|
182
183
|
}
|
183
184
|
return RenderLayer;
|
184
185
|
}(Canvas));
|
@@ -0,0 +1,51 @@
|
|
1
|
+
import { EventType } from './models';
|
2
|
+
var Socket = /** @class */ (function () {
|
3
|
+
function Socket(url, data) {
|
4
|
+
var _this = this;
|
5
|
+
this.url = url;
|
6
|
+
this.data = data;
|
7
|
+
this.onmessage = function (e) {
|
8
|
+
if (!_this.data.pens.length || !e || !e.data) {
|
9
|
+
return;
|
10
|
+
}
|
11
|
+
var msg;
|
12
|
+
try {
|
13
|
+
msg = JSON.parse(e.data);
|
14
|
+
}
|
15
|
+
catch (error) {
|
16
|
+
msg = e.data;
|
17
|
+
}
|
18
|
+
for (var _i = 0, _a = _this.data.pens; _i < _a.length; _i++) {
|
19
|
+
var item = _a[_i];
|
20
|
+
for (var _b = 0, _c = item.events; _b < _c.length; _b++) {
|
21
|
+
var event_1 = _c[_b];
|
22
|
+
if (event_1.type === EventType.WebSocket) {
|
23
|
+
if (event_1.name && event_1.name === msg.event) {
|
24
|
+
item.doSocketMqtt(event_1, msg.data, _this.socket);
|
25
|
+
}
|
26
|
+
else if (!event_1.name && msg) {
|
27
|
+
item.doSocketMqtt(event_1, msg, _this.socket);
|
28
|
+
}
|
29
|
+
}
|
30
|
+
}
|
31
|
+
}
|
32
|
+
};
|
33
|
+
this.init();
|
34
|
+
}
|
35
|
+
Socket.prototype.init = function () {
|
36
|
+
var _this = this;
|
37
|
+
this.socket = new WebSocket(this.url);
|
38
|
+
this.socket.onmessage = this.onmessage;
|
39
|
+
this.socket.onclose = function () {
|
40
|
+
console.log('Canvas websocket closed and reconneting...');
|
41
|
+
_this.init();
|
42
|
+
};
|
43
|
+
};
|
44
|
+
Socket.prototype.close = function () {
|
45
|
+
this.socket.onclose = null;
|
46
|
+
this.socket.close();
|
47
|
+
};
|
48
|
+
return Socket;
|
49
|
+
}());
|
50
|
+
export { Socket };
|
51
|
+
//# sourceMappingURL=socket.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"socket.js","sourceRoot":"","sources":["../../../packages/core/src/socket.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgB,MAAM,UAAU,CAAC;AAEnD;IAEE,gBAAmB,GAAW,EAAS,IAAkB;QAAzD,iBAEC;QAFkB,QAAG,GAAH,GAAG,CAAQ;QAAS,SAAI,GAAJ,IAAI,CAAc;QAczD,cAAS,GAAG,UAAC,CAAe;YAC1B,IAAI,CAAC,KAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE;gBAC3C,OAAO;aACR;YAED,IAAI,GAAkC,CAAC;YACvC,IAAI;gBACF,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;aAC1B;YAAC,OAAO,KAAK,EAAE;gBACd,GAAG,GAAG,CAAC,CAAC,IAAI,CAAC;aACd;YAED,KAAmB,UAAc,EAAd,KAAA,KAAI,CAAC,IAAI,CAAC,IAAI,EAAd,cAAc,EAAd,IAAc,EAAE;gBAA9B,IAAM,IAAI,SAAA;gBACb,KAAoB,UAAW,EAAX,KAAA,IAAI,CAAC,MAAM,EAAX,cAAW,EAAX,IAAW,EAAE;oBAA5B,IAAM,OAAK,SAAA;oBACd,IAAI,OAAK,CAAC,IAAI,KAAK,SAAS,CAAC,SAAS,EAAE;wBACtC,IAAI,OAAK,CAAC,IAAI,IAAI,OAAK,CAAC,IAAI,KAAK,GAAG,CAAC,KAAK,EAAE;4BAC1C,IAAI,CAAC,YAAY,CAAC,OAAK,EAAE,GAAG,CAAC,IAAI,EAAE,KAAI,CAAC,MAAM,CAAC,CAAC;yBACjD;6BAAM,IAAI,CAAC,OAAK,CAAC,IAAI,IAAI,GAAG,EAAE;4BAC7B,IAAI,CAAC,YAAY,CAAC,OAAK,EAAE,GAAG,EAAE,KAAI,CAAC,MAAM,CAAC,CAAC;yBAC5C;qBACF;iBACF;aACF;QACH,CAAC,CAAC;QApCA,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED,qBAAI,GAAJ;QAAA,iBAQC;QAPC,IAAI,CAAC,MAAM,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACtC,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QAEvC,IAAI,CAAC,MAAM,CAAC,OAAO,GAAG;YACpB,OAAO,CAAC,GAAG,CAAC,4CAA4C,CAAC,CAAC;YAC1D,KAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC,CAAC;IACJ,CAAC;IA2BD,sBAAK,GAAL;QACE,IAAI,CAAC,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;IACtB,CAAC;IACH,aAAC;AAAD,CAAC,AA7CD,IA6CC"}
|
package/core/src/utils/canvas.js
CHANGED
@@ -1,6 +1,4 @@
|
|
1
1
|
// @ts-ignore
|
2
|
-
export declare const echartsStaticType: Array<string> = [];
|
3
|
-
// @ts-ignore
|
4
2
|
export declare const winEventActionFns: Array<string> = [];
|
5
3
|
export interface MoveDataType {
|
6
4
|
None?: string | number;
|
@@ -14,18 +12,20 @@ export interface MoveDataType {
|
|
14
12
|
HoverAnchors?: string | number;
|
15
13
|
Rotate?: string | number;
|
16
14
|
}
|
15
|
+
export const moveDataType: MoveDataType;
|
17
16
|
export interface DownDataType {
|
18
17
|
Window?: string | number;
|
19
18
|
Target?: string | number;
|
20
19
|
Showhide?: string | number;
|
21
20
|
Tabswitch?: string | number;
|
22
|
-
Formselect?: string | number;
|
23
21
|
}
|
22
|
+
export const downDataType: DownDataType;
|
24
23
|
export interface PreviewType {
|
25
24
|
Dcim?: string;
|
26
25
|
Topology?: string;
|
27
26
|
Logo?: string;
|
28
27
|
}
|
28
|
+
export const previewType: PreviewType;
|
29
29
|
export interface AnimateType {
|
30
30
|
LeftFlow?: string;
|
31
31
|
RightFlow?: string;
|
@@ -38,13 +38,4 @@ export interface AnimateType {
|
|
38
38
|
Show?: string;
|
39
39
|
Rotate?: string;
|
40
40
|
}
|
41
|
-
export interface SelectStaticType {
|
42
|
-
static?:number;
|
43
|
-
dataShow?:number;
|
44
|
-
visible?:number;
|
45
|
-
}
|
46
|
-
export const moveDataType: MoveDataType;
|
47
|
-
export const downDataType: DownDataType;
|
48
|
-
export const previewType: PreviewType;
|
49
41
|
export const animateType: AnimateType;
|
50
|
-
export const selectStaticType: SelectStaticType;
|