emacroh5lib 1.0.16 → 1.0.18

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.
Files changed (13) hide show
  1. package/dist/emacroh5lib.min.js +1 -1
  2. package/dist/main.css +0 -72
  3. package/package.json +1 -1
  4. package/src/index.ts +3 -2
  5. package/src/views/DragResizeViewTs/index.less +1 -8
  6. package/src/views/DragResizeViewTs/index.vue +636 -649
  7. package/src/views/Draw/index.less +98 -0
  8. package/src/views/Draw/index.vue +423 -0
  9. package/tsconfig.json +2 -2
  10. package/webpack.config.js +3 -1
  11. package/src/views/DragResizeViewTs/vue-drag-resize.css +0 -46
  12. package/src/views/DragResizeViewTs/vue-drag-resize.html +0 -17
  13. package/src/views/DragResizeViewTs/vue-drag-resize.ts +0 -876
package/src/views/DragResizeViewTs/index.vue CHANGED
@@ -1,207 +1,200 @@
1
- <!-- <template src="./vue-drag-resize.html"></template>
2
- <script src="./vue-drag-resize.ts"></script>
3
- <style src="./vue-drag-resize.css"></style> -->
4
-
5
-
6
1
  <template>
7
- <div class="vdr" :style="positionStyle"
8
- :class="`${(active || isActive) ? 'active' : 'inactive'} ${contentClass ? contentClass : ''}`"
9
- @mousedown="bodyDown($event)" @touchstart="bodyDown($event)" @touchend="up($event)">
10
- <div :style="sizeStyle" class="content-container" ref="container">
11
- <slot></slot>
12
- </div>
13
- <div v-for="stick in sticks" class="vdr-stick"
14
- :class="['vdr-stick-' + stick, isResizable ? '' : 'not-resizable']"
15
- @mousedown.stop.prevent="stickDown(stick, $event)" @touchstart.stop.prevent="stickDown(stick, $event)"
16
- :style="vdrStick(stick)">
17
- </div>
2
+ <div class="vdr" :style="positionStyle"
3
+ :class="`${(active || isActive) ? 'active' : 'inactive'} ${contentClass ? contentClass : ''}`"
4
+ @mousedown="bodyDown($event)" @touchstart="bodyDown($event)" @touchend="up($event)">
5
+ <div :style="sizeStyle" class="content-container" ref="container">
6
+ <slot></slot>
7
+ </div>
8
+ <div v-for="stick in sticks" class="vdr-stick" :class="['vdr-stick-' + stick, isResizable ? '' : 'not-resizable']"
9
+ @mousedown.stop.prevent="stickDown(stick, $event)" @touchstart.stop.prevent="stickDown(stick, $event)"
10
+ :style="vdrStick(stick)">
18
11
  </div>
12
+ </div>
19
13
  </template>
20
14
 
21
15
  <script lang="ts">
16
+ import { Component, Prop, Vue, Watch } from "vue-property-decorator";
22
17
 
23
-
24
- import { Component, Prop, Vue, Watch } from "vue-property-decorator";
25
-
26
-
27
- const styleMapping = {
18
+ const styleMapping: any = {
28
19
  y: {
29
- t: 'top',
30
- m: 'marginTop',
31
- b: 'bottom',
20
+ t: 'top',
21
+ m: 'marginTop',
22
+ b: 'bottom',
32
23
  },
33
24
  x: {
34
- l: 'left',
35
- m: 'marginLeft',
36
- r: 'right',
25
+ l: 'left',
26
+ m: 'marginLeft',
27
+ r: 'right',
37
28
  },
38
- };
29
+ };
39
30
 
40
- function addEvents(events) {
41
- events.forEach((cb, eventName) => {
42
- document.documentElement.addEventListener(eventName, cb);
31
+ function addEvents(events: any) {
32
+ events.forEach((cb: any, eventName: string) => {
33
+ document.documentElement.addEventListener(eventName, cb);
43
34
  });
44
- }
35
+ }
45
36
 
46
- function removeEvents(events) {
47
- events.forEach((cb, eventName) => {
48
- document.documentElement.removeEventListener(eventName, cb);
37
+ function removeEvents(events: any) {
38
+ events.forEach((cb: any, eventName: any) => {
39
+ document.documentElement.removeEventListener(eventName, cb);
49
40
  });
50
- }
41
+ }
51
42
 
52
- @Component({ name: 'DragResizeViewTs' })
53
- export default class DragResizeViewTs extends Vue {
43
+ @Component({ name: 'DragResizeView' })
44
+ export default class DragResizeView extends Vue {
54
45
 
55
46
  @Prop({
56
- type: String,
57
- required: false,
58
- default: ''
59
- }) name;
60
-
61
-
62
- @Prop({ type: Number, default: 8 }) stickSize;
63
- @Prop({ type: Number, default: 1 }) parentScaleX;
64
- @Prop({ type: Number, default: 1 }) parentScaleY;
65
- @Prop({ type: Boolean, default: false, }) isActive;
66
- @Prop({ type: Boolean, default: false, }) preventActiveBehavior;
67
- @Prop({ type: Boolean, default: true, }) isDraggable;
68
- @Prop({ type: Boolean, default: true, }) isResizable;
69
- @Prop({ type: Boolean, default: false, }) aspectRatio;
47
+ type: String,
48
+ required: false,
49
+ default: ''
50
+ }) name!: string;
51
+
52
+
53
+ @Prop({ type: Number, default: 8 }) stickSize!: number;
54
+ @Prop({ type: Number, default: 1 }) parentScaleX!: number;
55
+ @Prop({ type: Number, default: 1 }) parentScaleY!: number;
56
+ @Prop({ type: Boolean, default: false, }) isActive!: boolean;
57
+ @Prop({ type: Boolean, default: false, }) preventActiveBehavior!: boolean;
58
+ @Prop({ type: Boolean, default: true, }) isDraggable!: boolean;
59
+ @Prop({ type: Boolean, default: true, }) isResizable!: boolean;
60
+ @Prop({ type: Boolean, default: false, }) aspectRatio!: boolean;
70
61
  @Prop({
71
- type: Boolean, default: false,
72
- }) parentLimitation;
62
+ type: Boolean, default: false,
63
+ }) parentLimitation!: boolean;
73
64
  @Prop({
74
- type: Boolean, default: false,
75
- }) snapToGrid;
65
+ type: Boolean, default: false,
66
+ }) snapToGrid!: number;
76
67
 
77
68
  @Prop({
78
- type: Number,
79
- default: 50,
80
- validator(val) {
81
- return val >= 0;
82
- },
83
- }) gridX;
69
+ type: Number,
70
+ default: 50,
71
+ validator(val) {
72
+ return val >= 0;
73
+ },
74
+ }) gridX!: number;
84
75
 
85
76
  @Prop({
86
- type: Number,
87
- default: 50,
88
- validator(val) {
89
- return val >= 0;
90
- },
91
- }) gridY;
77
+ type: Number,
78
+ default: 50,
79
+ validator(val) {
80
+ return val >= 0;
81
+ },
82
+ }) gridY!: number;
92
83
 
93
84
  @Prop({
94
- type: Number,
95
- default: 0,
96
- validator(val) {
97
- return val >= 0;
98
- },
99
- }) parentW;
85
+ type: Number,
86
+ default: 0,
87
+ validator(val) {
88
+ return val >= 0;
89
+ },
90
+ }) parentW!: number;
100
91
 
101
92
  @Prop({
102
- type: Number,
103
- default: 0,
104
- validator(val) {
105
- return val >= 0;
106
- },
107
- }) parentH;
93
+ type: Number,
94
+ default: 0,
95
+ validator(val) {
96
+ return val >= 0;
97
+ },
98
+ }) parentH!: number;
108
99
 
109
100
  @Prop({
110
- type: [String, Number],
111
- default: 200,
112
- validator(val) {
113
- return (typeof val === 'string') ? val === 'auto' : val >= 0;
114
- },
115
- }) w;
101
+ type: [String, Number],
102
+ default: 200,
103
+ validator(val) {
104
+ return (typeof val === 'string') ? val === 'auto' : val >= 0;
105
+ },
106
+ }) w!: any;
116
107
 
117
108
  @Prop({
118
- type: [String, Number],
119
- default: 200,
120
- validator(val) {
121
- return (typeof val === 'string') ? val === 'auto' : val >= 0;
122
- },
123
- }) h;
109
+ type: [String, Number],
110
+ default: 200,
111
+ validator(val) {
112
+ return (typeof val === 'string') ? val === 'auto' : val >= 0;
113
+ },
114
+ }) h!: any;
124
115
 
125
116
  @Prop({
126
- type: Number,
127
- default: 50,
128
- validator(val) {
129
- return val >= 0;
130
- },
131
- }) minw;
117
+ type: Number,
118
+ default: 50,
119
+ validator(val) {
120
+ return val >= 0;
121
+ },
122
+ }) minw!: number;
132
123
 
133
124
  @Prop({
134
- type: Number,
135
- default: 50,
136
- validator(val) {
137
- return val >= 0;
138
- },
139
- }) minh;
125
+ type: Number,
126
+ default: 50,
127
+ validator(val) {
128
+ return val >= 0;
129
+ },
130
+ }) minh!: number;
140
131
 
141
132
  @Prop({
142
- type: Number,
143
- default: 0,
144
- validator(val) {
145
- return typeof val === 'number';
146
- },
147
- }) x;
133
+ type: Number,
134
+ default: 0,
135
+ validator(val) {
136
+ return typeof val === 'number';
137
+ },
138
+ }) x!: number;
148
139
 
149
140
  @Prop({
150
- type: Number,
151
- default: 0,
152
- validator(val) {
153
- return typeof val === 'number';
154
- },
155
- }) y;
141
+ type: Number,
142
+ default: 0,
143
+ validator(val) {
144
+ return typeof val === 'number';
145
+ },
146
+ }) y!: number;
156
147
  @Prop({
157
- type: [String, Number],
158
- default: 'auto',
159
- validator(val) {
160
- return (typeof val === 'string') ? val === 'auto' : val >= 0;
161
- },
162
- }) z;
148
+ type: [String, Number],
149
+ default: 'auto',
150
+ validator(val) {
151
+ return (typeof val === 'string') ? val === 'auto' : val >= 0;
152
+ },
153
+ }) z!: string | number;
163
154
  @Prop({
164
- type: String,
165
- default: null,
166
- }) dragHandle;
155
+ type: String,
156
+ default: null,
157
+ }) dragHandle!: string;
167
158
 
168
159
  @Prop({
169
- type: String,
170
- default: null,
171
- }) dragCancel;
160
+ type: String,
161
+ default: null,
162
+ }) dragCancel!: string;
172
163
 
173
164
  @Prop({
174
- type: Array,
175
- default() {
176
- return ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'];
177
- },
178
- }) sticks;
165
+ type: Array,
166
+ default() {
167
+ return ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'];
168
+ },
169
+ }) sticks!: Array<string>;
179
170
 
180
171
  @Prop({
181
- type: String,
182
- default: 'both',
183
- validator(val) {
184
- return ['x', 'y', 'both', 'none'].indexOf(val) !== -1;
185
- },
186
- }) axis;
172
+ type: String,
173
+ default: 'both',
174
+ validator(val) {
175
+ return ['x', 'y', 'both', 'none'].indexOf(val) !== -1;
176
+ },
177
+ }) axis!: string;
187
178
 
188
179
  @Prop({
189
- type: String,
190
- required: false,
191
- default: '',
192
- }) contentClass;
180
+ type: String,
181
+ required: false,
182
+ default: '',
183
+ }) contentClass!: boolean;
193
184
 
194
185
  @Prop({
195
- type: Boolean,
196
- required: false,
197
- default: false
198
- }) isStorage;
186
+ type: Boolean,
187
+ required: false,
188
+ default: false
189
+ }) isStorage!: boolean;
190
+
191
+
199
192
 
200
193
  public emits = ['clicked', 'dragging', 'dragstop', 'resizing', 'resizestop', 'activated', 'deactivated']
201
194
 
202
195
  public fixAspectRatio = null
203
196
  public active = false
204
- public zIndex = 1;
197
+ public zIndex: number = 0;
205
198
  public parentWidth = 0;
206
199
  public parentHeight = 0;
207
200
  public left = 0;
@@ -220,698 +213,692 @@ export default class DragResizeViewTs extends Vue {
220
213
  public _uid: any;
221
214
 
222
215
  beforeCreate() {
223
- this.stickDrag = false;
224
- this.bodyDrag = false;
225
- this.dimensionsBeforeMove = { pointerX: 0, pointerY: 0, x: 0, y: 0, w: 0, h: 0 };
226
- this.limits = {
227
- left: { min: null, max: null },
228
- right: { min: null, max: null },
229
- top: { min: null, max: null },
230
- bottom: { min: null, max: null },
231
- };
216
+ this.stickDrag = false;
217
+ this.bodyDrag = false;
218
+ this.dimensionsBeforeMove = { pointerX: 0, pointerY: 0, x: 0, y: 0, w: 0, h: 0 };
219
+ this.limits = {
220
+ left: { min: null, max: null },
221
+ right: { min: null, max: null },
222
+ top: { min: null, max: null },
223
+ bottom: { min: null, max: null },
224
+ };
232
225
 
233
- this.currentStick = null;
226
+ this.currentStick = null;
234
227
  }
235
228
 
236
229
 
237
230
  mounted() {
238
- console.log("测试");
239
231
 
240
- this.parentElement = this.$el.parentNode;
241
- this.parentWidth = this.parentW ? this.parentW : this.parentElement.clientWidth;
242
- this.parentHeight = this.parentH ? this.parentH : this.parentElement.clientHeight;
232
+ this.parentElement = this.$el.parentNode;
233
+ this.parentWidth = this.parentW ? this.parentW : this.parentElement.clientWidth;
234
+ this.parentHeight = this.parentH ? this.parentH : this.parentElement.clientHeight;
243
235
 
244
236
 
237
+ this.left = this.x;
238
+ this.top = this.y;
239
+ this.right = this.parentWidth - (this.w === 'auto' ? (this.$refs.container as HTMLElement).scrollWidth : this.w) - this.left;
240
+ this.bottom = this.parentHeight - (this.h === 'auto' ? (this.$refs.container as HTMLElement).scrollHeight : this.h) - this.top;
245
241
 
246
- this.left = this.x;
247
- this.top = this.y;
248
- this.right = this.parentWidth - (this.w === 'auto' ? (this.$refs.container as HTMLElement).scrollWidth : this.w) - this.left;
249
- this.bottom = this.parentHeight - (this.h === 'auto' ? (this.$refs.container as HTMLElement).scrollHeight : this.h) - this.top;
242
+ this.domEvents = new Map([
243
+ ['mousemove', this.move],
244
+ ['mouseup', this.up],
245
+ ['mouseleave', this.up],
246
+ ['mousedown', this.deselect],
247
+ ['touchmove', this.move],
248
+ ['touchend', this.up],
249
+ ['touchcancel', this.up],
250
+ ['touchstart', this.up],
251
+ ]);
250
252
 
251
- this.domEvents = new Map([
252
- ['mousemove', this.move],
253
- ['mouseup', this.up],
254
- ['mouseleave', this.up],
255
- ['mousedown', this.deselect],
256
- ['touchmove', this.move],
257
- ['touchend', this.up],
258
- ['touchcancel', this.up],
259
- ['touchstart', this.up],
260
- ]);
253
+ addEvents(this.domEvents);
261
254
 
262
- addEvents(this.domEvents);
263
-
264
- if (this.dragHandle) {
265
- [...this.$el.querySelectorAll(this.dragHandle)].forEach((dragHandle) => {
266
- dragHandle.setAttribute('data-drag-handle', this._uid);
267
- });
268
- }
269
-
270
- if (this.dragCancel) {
271
- [...this.$el.querySelectorAll(this.dragCancel)].forEach((cancelHandle) => {
272
- cancelHandle.setAttribute('data-drag-cancel', this._uid);
273
- });
274
- }
255
+ if (this.dragHandle) {
256
+ [...this.$el.querySelectorAll(this.dragHandle)].forEach((dragHandle) => {
257
+ dragHandle.setAttribute('data-drag-handle', this._uid);
258
+ });
259
+ }
275
260
 
276
- if (this.name.trim() !== '' && this.isStorage) {
277
- let info = JSON.parse(localStorage.getItem("DragResizeView_Info_" + this.name) as string)
278
- if (info !== null
279
- && info.left !== null && info.top !== null
280
- && info.right !== null && info.bottom !== null) {
281
- this.left = info.left
282
- this.top = info.top
283
- this.right = info.right
284
- this.bottom = info.bottom
285
- } else {
286
- localStorage.removeItem("DragResizeView_Info_" + this.name)
287
- }
261
+ if (this.dragCancel) {
262
+ [...this.$el.querySelectorAll(this.dragCancel)].forEach((cancelHandle) => {
263
+ cancelHandle.setAttribute('data-drag-cancel', this._uid);
264
+ });
265
+ }
266
+
267
+ if (this.name.trim() !== '' && this.isStorage) {
268
+ let info = JSON.parse(localStorage.getItem("DragResizeView_Rect_" + this.name) as string)
269
+ if (info !== null
270
+ && info.left !== null && info.top !== null
271
+ && info.right !== null && info.bottom !== null) {
272
+ this.left = info.left
273
+ this.top = info.top
274
+ this.right = info.right
275
+ this.bottom = info.bottom
276
+ } else {
277
+ localStorage.removeItem("DragResizeView_Rect_" + this.name)
288
278
  }
279
+ }
289
280
  }
290
281
 
291
282
  beforeDestroy() {
292
- removeEvents(this.domEvents);
283
+ removeEvents(this.domEvents);
293
284
  }
294
285
 
295
286
  deselect() {
296
- if (this.preventActiveBehavior) {
297
- return;
298
- }
299
- this.active = false;
287
+ if (this.preventActiveBehavior) {
288
+ return;
289
+ }
290
+ this.active = false;
300
291
  }
301
292
 
302
- move(ev) {
303
- if (!this.stickDrag && !this.bodyDrag) {
304
- return;
305
- }
293
+ move(ev: any) {
306
294
 
307
- ev.stopPropagation();
295
+ if (!this.stickDrag && !this.bodyDrag) {
296
+ return;
297
+ }
308
298
 
309
- const pageX = typeof ev.pageX !== 'undefined' ? ev.pageX : ev.touches[0].pageX;
310
- const pageY = typeof ev.pageY !== 'undefined' ? ev.pageY : ev.touches[0].pageY;
299
+ ev.stopPropagation();
311
300
 
312
- const { dimensionsBeforeMove } = this;
301
+ const pageX = typeof ev.pageX !== 'undefined' ? ev.pageX : ev.touches[0].pageX;
302
+ const pageY = typeof ev.pageY !== 'undefined' ? ev.pageY : ev.touches[0].pageY;
313
303
 
314
- const delta = {
315
- x: (dimensionsBeforeMove.pointerX - pageX) / this.parentScaleX,
316
- y: (dimensionsBeforeMove.pointerY - pageY) / this.parentScaleY,
317
- };
304
+ const { dimensionsBeforeMove } = this;
318
305
 
319
- if (this.stickDrag) {
320
- this.stickMove(delta);
321
- }
306
+ const delta = {
307
+ x: (dimensionsBeforeMove.pointerX - pageX) / this.parentScaleX,
308
+ y: (dimensionsBeforeMove.pointerY - pageY) / this.parentScaleY,
309
+ };
322
310
 
323
- if (this.bodyDrag) {
324
- if (this.axis === 'x') {
325
- delta.y = 0;
326
- } else if (this.axis === 'y') {
327
- delta.x = 0;
328
- } else if (this.axis === 'none') {
329
- return;
330
- }
331
- this.bodyMove(delta);
332
- }
333
- }
311
+ if (this.stickDrag) {
312
+ this.stickMove(delta);
313
+ }
334
314
 
335
- up(ev) {
336
- if (this.stickDrag) {
337
- this.stickUp();
338
- } else if (this.bodyDrag) {
339
- this.bodyUp();
315
+ if (this.bodyDrag) {
316
+ if (this.axis === 'x') {
317
+ delta.y = 0;
318
+ } else if (this.axis === 'y') {
319
+ delta.x = 0;
320
+ } else if (this.axis === 'none') {
321
+ return;
340
322
  }
323
+ this.bodyMove(delta);
324
+ }
325
+ }
341
326
 
327
+ up(ev: any) {
328
+ if (this.stickDrag) {
329
+ this.stickUp();
330
+ } else if (this.bodyDrag) {
331
+ this.bodyUp();
332
+ }
342
333
  }
343
334
 
344
335
 
345
- bodyDown(ev) {
346
- const { target, button } = ev;
336
+ bodyDown(ev: any) {
337
+ const { target, button } = ev;
347
338
 
348
- if (!this.preventActiveBehavior) {
349
- this.active = true;
350
- }
339
+ if (!this.preventActiveBehavior) {
340
+ this.active = true;
341
+ }
351
342
 
352
- if (button && button !== 0) {
353
- return;
354
- }
343
+ if (button && button !== 0) {
344
+ return;
345
+ }
355
346
 
356
- this.$emit('clicked', ev);
347
+ this.$emit('clicked', ev);
357
348
 
358
- if (!this.active) {
359
- return;
360
- }
349
+ if (!this.active) {
350
+ return;
351
+ }
361
352
 
362
- if (this.dragHandle && target.getAttribute('data-drag-handle') !== this._uid.toString()) {
363
- return;
364
- }
353
+ if (this.dragHandle && target.getAttribute('data-drag-handle') !== this._uid.toString()) {
354
+ return;
355
+ }
365
356
 
366
- if (this.dragCancel && target.getAttribute('data-drag-cancel') === this._uid.toString()) {
367
- return;
368
- }
357
+ if (this.dragCancel && target.getAttribute('data-drag-cancel') === this._uid.toString()) {
358
+ return;
359
+ }
369
360
 
370
- if (typeof ev.stopPropagation !== 'undefined') {
371
- ev.stopPropagation();
372
- }
361
+ if (typeof ev.stopPropagation !== 'undefined') {
362
+ ev.stopPropagation();
363
+ }
373
364
 
374
- if (typeof ev.preventDefault !== 'undefined') {
375
- ev.preventDefault();
376
- }
365
+ if (typeof ev.preventDefault !== 'undefined') {
366
+ ev.preventDefault();
367
+ }
377
368
 
378
- if (this.isDraggable) {
379
- this.bodyDrag = true;
380
- }
369
+ if (this.isDraggable) {
370
+ this.bodyDrag = true;
371
+ }
381
372
 
382
- const pointerX = typeof ev.pageX !== 'undefined' ? ev.pageX : ev.touches[0].pageX;
383
- const pointerY = typeof ev.pageY !== 'undefined' ? ev.pageY : ev.touches[0].pageY;
373
+ const pointerX = typeof ev.pageX !== 'undefined' ? ev.pageX : ev.touches[0].pageX;
374
+ const pointerY = typeof ev.pageY !== 'undefined' ? ev.pageY : ev.touches[0].pageY;
384
375
 
385
- this.saveDimensionsBeforeMove({ pointerX, pointerY });
376
+ this.saveDimensionsBeforeMove(pointerX, pointerY);
386
377
 
387
- if (this.parentLimitation) {
388
- this.limits = this.calcDragLimitation();
389
- }
378
+ if (this.parentLimitation) {
379
+ this.limits = this.calcDragLimitation();
380
+ }
390
381
  }
391
382
 
392
- bodyMove(delta) {
393
- const { dimensionsBeforeMove, parentWidth, parentHeight, gridX, gridY, width, height } = this;
394
-
395
- let newTop = dimensionsBeforeMove.top - delta.y;
396
- let newBottom = dimensionsBeforeMove.bottom + delta.y;
397
- let newLeft = dimensionsBeforeMove.left - delta.x;
398
- let newRight = dimensionsBeforeMove.right + delta.x;
399
-
400
- if (this.snapToGrid) {
401
- let alignTop = true;
402
- let alignLeft = true;
403
-
404
- let diffT = newTop - Math.floor(newTop / gridY) * gridY;
405
- let diffB = (parentHeight - newBottom) - Math.floor((parentHeight - newBottom) / gridY) * gridY;
406
- let diffL = newLeft - Math.floor(newLeft / gridX) * gridX;
407
- let diffR = (parentWidth - newRight) - Math.floor((parentWidth - newRight) / gridX) * gridX;
408
-
409
- if (diffT > (gridY / 2)) {
410
- diffT -= gridY;
411
- }
412
- if (diffB > (gridY / 2)) {
413
- diffB -= gridY;
414
- }
415
- if (diffL > (gridX / 2)) {
416
- diffL -= gridX;
417
- }
418
- if (diffR > (gridX / 2)) {
419
- diffR -= gridX;
420
- }
421
-
422
- if (Math.abs(diffB) < Math.abs(diffT)) {
423
- alignTop = false;
424
- }
425
- if (Math.abs(diffR) < Math.abs(diffL)) {
426
- alignLeft = false;
427
- }
428
-
429
- newTop -= (alignTop ? diffT : diffB);
430
- newBottom = parentHeight - height - newTop;
431
- newLeft -= (alignLeft ? diffL : diffR);
432
- newRight = parentWidth - width - newLeft;
383
+ bodyMove(delta: any) {
384
+
385
+ const { dimensionsBeforeMove, parentWidth, parentHeight, gridX, gridY, width, height } = this;
386
+
387
+ let newTop = dimensionsBeforeMove.top - delta.y;
388
+ let newBottom = dimensionsBeforeMove.bottom + delta.y;
389
+ let newLeft = dimensionsBeforeMove.left - delta.x;
390
+ let newRight = dimensionsBeforeMove.right + delta.x;
391
+
392
+ if (this.snapToGrid) {
393
+ let alignTop = true;
394
+ let alignLeft = true;
395
+
396
+ let diffT = newTop - Math.floor(newTop / gridY) * gridY;
397
+ let diffB = (parentHeight - newBottom) - Math.floor((parentHeight - newBottom) / gridY) * gridY;
398
+ let diffL = newLeft - Math.floor(newLeft / gridX) * gridX;
399
+ let diffR = (parentWidth - newRight) - Math.floor((parentWidth - newRight) / gridX) * gridX;
400
+
401
+ if (diffT > (gridY / 2)) {
402
+ diffT -= gridY;
403
+ }
404
+ if (diffB > (gridY / 2)) {
405
+ diffB -= gridY;
406
+ }
407
+ if (diffL > (gridX / 2)) {
408
+ diffL -= gridX;
409
+ }
410
+ if (diffR > (gridX / 2)) {
411
+ diffR -= gridX;
412
+ }
413
+
414
+ if (Math.abs(diffB) < Math.abs(diffT)) {
415
+ alignTop = false;
416
+ }
417
+ if (Math.abs(diffR) < Math.abs(diffL)) {
418
+ alignLeft = false;
433
419
  }
434
420
 
435
- ({
436
- newLeft: this.left,
437
- newRight: this.right,
438
- newTop: this.top,
439
- newBottom: this.bottom,
440
- } = this.rectCorrectionByLimit({ newLeft, newRight, newTop, newBottom }));
421
+ newTop -= (alignTop ? diffT : diffB);
422
+ newBottom = parentHeight - height - newTop;
423
+ newLeft -= (alignLeft ? diffL : diffR);
424
+ newRight = parentWidth - width - newLeft;
425
+ }
441
426
 
442
- console.log("宽高异常", this.rect);
427
+ ({
428
+ newLeft: this.left,
429
+ newRight: this.right,
430
+ newTop: this.top,
431
+ newBottom: this.bottom,
432
+ } = this.rectCorrectionByLimit({ newLeft, newRight, newTop, newBottom }));
443
433
 
444
- this.$emit('dragging', this.rect);
434
+ this.$emit('dragging', this.rect);
445
435
 
446
- this.storageElementInfo();
436
+ this.storageElementInfo();
447
437
  }
448
438
 
449
439
  bodyUp() {
450
- this.bodyDrag = false;
451
- this.$emit('dragging', this.rect);
452
- this.$emit('dragstop', this.rect);
440
+ this.bodyDrag = false;
441
+ this.$emit('dragging', this.rect);
442
+ this.$emit('dragstop', this.rect);
453
443
 
454
- this.dimensionsBeforeMove = { pointerX: 0, pointerY: 0, x: 0, y: 0, w: 0, h: 0 };
444
+ this.dimensionsBeforeMove = { pointerX: 0, pointerY: 0, x: 0, y: 0, w: 0, h: 0 };
455
445
 
456
- this.limits = {
457
- left: { min: null, max: null },
458
- right: { min: null, max: null },
459
- top: { min: null, max: null },
460
- bottom: { min: null, max: null },
461
- };
446
+ this.limits = {
447
+ left: { min: null, max: null },
448
+ right: { min: null, max: null },
449
+ top: { min: null, max: null },
450
+ bottom: { min: null, max: null },
451
+ };
462
452
  }
463
453
 
464
- stickDown(stick, ev, force = false) {
465
- if ((!this.isResizable || !this.active) && !force) {
466
- return;
467
- }
454
+ stickDown(stick: any, ev: any, force = false) {
455
+ if ((!this.isResizable || !this.active) && !force) {
456
+ return;
457
+ }
468
458
 
469
- this.stickDrag = true;
459
+ this.stickDrag = true;
470
460
 
471
- const pointerX = typeof ev.pageX !== 'undefined' ? ev.pageX : ev.touches[0].pageX;
472
- const pointerY = typeof ev.pageY !== 'undefined' ? ev.pageY : ev.touches[0].pageY;
461
+ const pointerX = typeof ev.pageX !== 'undefined' ? ev.pageX : ev.touches[0].pageX;
462
+ const pointerY = typeof ev.pageY !== 'undefined' ? ev.pageY : ev.touches[0].pageY;
473
463
 
474
- this.saveDimensionsBeforeMove({ pointerX, pointerY });
464
+ this.saveDimensionsBeforeMove(pointerX, pointerY);
475
465
 
476
- this.currentStick = stick;
466
+ this.currentStick = stick;
477
467
 
478
- this.limits = this.calcResizeLimits();
468
+ this.limits = this.calcResizeLimits();
479
469
  }
480
470
 
481
- saveDimensionsBeforeMove({ pointerX, pointerY }) {
482
- this.dimensionsBeforeMove.pointerX = pointerX;
483
- this.dimensionsBeforeMove.pointerY = pointerY;
471
+ saveDimensionsBeforeMove(pointerX: number, pointerY: number): void {
472
+ this.dimensionsBeforeMove.pointerX = pointerX;
473
+ this.dimensionsBeforeMove.pointerY = pointerY;
484
474
 
485
- this.dimensionsBeforeMove.left = this.left;
486
- this.dimensionsBeforeMove.right = this.right;
487
- this.dimensionsBeforeMove.top = this.top;
488
- this.dimensionsBeforeMove.bottom = this.bottom;
475
+ this.dimensionsBeforeMove.left = this.left;
476
+ this.dimensionsBeforeMove.right = this.right;
477
+ this.dimensionsBeforeMove.top = this.top;
478
+ this.dimensionsBeforeMove.bottom = this.bottom;
489
479
 
490
- this.dimensionsBeforeMove.width = this.width;
491
- this.dimensionsBeforeMove.height = this.height;
480
+ this.dimensionsBeforeMove.width = this.width;
481
+ this.dimensionsBeforeMove.height = this.height;
492
482
 
493
- this.aspectFactor = this.width / this.height;
483
+ this.aspectFactor = this.width / this.height;
494
484
  }
495
485
 
496
- stickMove(delta) {
497
- const {
498
- currentStick,
499
- dimensionsBeforeMove,
500
- gridY,
501
- gridX,
502
- snapToGrid,
503
- parentHeight,
504
- parentWidth,
505
- } = this;
486
+ stickMove(delta: any) {
487
+ const {
488
+ currentStick,
489
+ dimensionsBeforeMove,
490
+ gridY,
491
+ gridX,
492
+ snapToGrid,
493
+ parentHeight,
494
+ parentWidth,
495
+ } = this;
506
496
 
507
- let newTop = dimensionsBeforeMove.top;
508
- let newBottom = dimensionsBeforeMove.bottom;
509
- let newLeft = dimensionsBeforeMove.left;
510
- let newRight = dimensionsBeforeMove.right;
511
- switch (currentStick[0]) {
512
- case 'b':
513
- newBottom = dimensionsBeforeMove.bottom + delta.y;
497
+ let newTop = dimensionsBeforeMove.top;
498
+ let newBottom = dimensionsBeforeMove.bottom;
499
+ let newLeft = dimensionsBeforeMove.left;
500
+ let newRight = dimensionsBeforeMove.right;
501
+ switch (currentStick[0]) {
502
+ case 'b':
503
+ newBottom = dimensionsBeforeMove.bottom + delta.y;
514
504
 
515
- if (snapToGrid) {
516
- newBottom = parentHeight - Math.round((parentHeight - newBottom) / gridY) * gridY;
517
- }
505
+ if (snapToGrid) {
506
+ newBottom = parentHeight - Math.round((parentHeight - newBottom) / gridY) * gridY;
507
+ }
518
508
 
519
- break;
509
+ break;
520
510
 
521
- case 't':
522
- newTop = dimensionsBeforeMove.top - delta.y;
511
+ case 't':
512
+ newTop = dimensionsBeforeMove.top - delta.y;
523
513
 
524
- if (snapToGrid) {
525
- newTop = Math.round(newTop / gridY) * gridY;
526
- }
514
+ if (snapToGrid) {
515
+ newTop = Math.round(newTop / gridY) * gridY;
516
+ }
527
517
 
528
- break;
529
- default:
530
- break;
531
- }
518
+ break;
519
+ default:
520
+ break;
521
+ }
532
522
 
533
- switch (currentStick[1]) {
534
- case 'r':
535
- newRight = dimensionsBeforeMove.right + delta.x;
523
+ switch (currentStick[1]) {
524
+ case 'r':
525
+ newRight = dimensionsBeforeMove.right + delta.x;
536
526
 
537
- if (snapToGrid) {
538
- newRight = parentWidth - Math.round((parentWidth - newRight) / gridX) * gridX;
539
- }
527
+ if (snapToGrid) {
528
+ newRight = parentWidth - Math.round((parentWidth - newRight) / gridX) * gridX;
529
+ }
540
530
 
541
- break;
531
+ break;
542
532
 
543
- case 'l':
544
- newLeft = dimensionsBeforeMove.left - delta.x;
533
+ case 'l':
534
+ newLeft = dimensionsBeforeMove.left - delta.x;
545
535
 
546
- if (snapToGrid) {
547
- newLeft = Math.round(newLeft / gridX) * gridX;
548
- }
536
+ if (snapToGrid) {
537
+ newLeft = Math.round(newLeft / gridX) * gridX;
538
+ }
549
539
 
550
- break;
551
- default:
552
- break;
553
- }
540
+ break;
541
+ default:
542
+ break;
543
+ }
554
544
 
545
+ ({
546
+ newLeft,
547
+ newRight,
548
+ newTop,
549
+ newBottom,
550
+ } = this.rectCorrectionByLimit({ newLeft, newRight, newTop, newBottom }));
551
+
552
+ if (this.aspectRatio) {
555
553
  ({
556
- newLeft,
557
- newRight,
558
- newTop,
559
- newBottom,
560
- } = this.rectCorrectionByLimit({ newLeft, newRight, newTop, newBottom }));
561
-
562
- if (this.aspectRatio) {
563
- ({
564
- newLeft,
565
- newRight,
566
- newTop,
567
- newBottom,
568
- } = this.rectCorrectionByAspectRatio({ newLeft, newRight, newTop, newBottom }));
569
- }
554
+ newLeft,
555
+ newRight,
556
+ newTop,
557
+ newBottom,
558
+ } = this.rectCorrectionByAspectRatio({ newLeft, newRight, newTop, newBottom }));
559
+ }
570
560
 
571
- this.left = newLeft;
572
- this.right = newRight;
573
- this.top = newTop;
574
- this.bottom = newBottom;
561
+ this.left = newLeft;
562
+ this.right = newRight;
563
+ this.top = newTop;
564
+ this.bottom = newBottom;
575
565
 
576
- this.$emit('resizing', this.rect);
566
+ this.$emit('resizing', this.rect);
577
567
 
578
- this.storageElementInfo()
568
+ this.storageElementInfo()
579
569
  }
580
570
 
581
571
  stickUp() {
582
- this.stickDrag = false;
583
- this.dimensionsBeforeMove = {
584
- pointerX: 0,
585
- pointerY: 0,
586
- x: 0,
587
- y: 0,
588
- w: 0,
589
- h: 0,
590
- };
591
- this.limits = {
592
- left: { min: null, max: null },
593
- right: { min: null, max: null },
594
- top: { min: null, max: null },
595
- bottom: { min: null, max: null },
596
- };
597
-
598
- this.$emit('resizing', this.rect);
599
- this.$emit('resizestop', this.rect);
572
+ this.stickDrag = false;
573
+ this.dimensionsBeforeMove = {
574
+ pointerX: 0,
575
+ pointerY: 0,
576
+ x: 0,
577
+ y: 0,
578
+ w: 0,
579
+ h: 0,
580
+ };
581
+ this.limits = {
582
+ left: { min: null, max: null },
583
+ right: { min: null, max: null },
584
+ top: { min: null, max: null },
585
+ bottom: { min: null, max: null },
586
+ };
587
+
588
+ this.$emit('resizing', this.rect);
589
+ this.$emit('resizestop', this.rect);
600
590
  }
601
591
 
602
592
  calcDragLimitation() {
603
- const { parentWidth, parentHeight } = this;
593
+ const { parentWidth, parentHeight } = this;
604
594
 
605
- return {
606
- left: { min: 0, max: parentWidth - this.width },
607
- right: { min: 0, max: parentWidth - this.width },
608
- top: { min: 0, max: parentHeight - this.height },
609
- bottom: { min: 0, max: parentHeight - this.height },
610
- };
595
+ return {
596
+ left: { min: 0, max: parentWidth - this.width },
597
+ right: { min: 0, max: parentWidth - this.width },
598
+ top: { min: 0, max: parentHeight - this.height },
599
+ bottom: { min: 0, max: parentHeight - this.height },
600
+ };
611
601
  }
612
602
 
613
603
  calcResizeLimits() {
614
- const { aspectFactor, width, height, bottom, top, left, right } = this;
615
- let { minh: minHeight, minw: minWidth } = this;
616
-
617
- const parentLim = this.parentLimitation ? 0 : null;
604
+ const { aspectFactor, width, height, bottom, top, left, right } = this;
605
+ let { minh: minHeight, minw: minWidth } = this;
618
606
 
619
- if (this.aspectRatio) {
620
- if (minWidth / minHeight > aspectFactor) {
621
- minHeight = minWidth / aspectFactor;
622
- } else {
623
- minWidth = aspectFactor * minHeight;
624
- }
625
- }
607
+ const parentLim = this.parentLimitation ? 0 : null;
626
608
 
627
- const limits = {
628
- left: { min: parentLim, max: left + (width - minWidth) },
629
- right: { min: parentLim, max: right + (width - minWidth) },
630
- top: { min: parentLim, max: top + (height - minHeight) },
631
- bottom: { min: parentLim, max: bottom + (height - minHeight) },
609
+ if (this.aspectRatio) {
610
+ if (minWidth / minHeight > aspectFactor) {
611
+ minHeight = minWidth / aspectFactor;
612
+ } else {
613
+ minWidth = aspectFactor * minHeight;
614
+ }
615
+ }
616
+
617
+ const limits = {
618
+ left: { min: parentLim, max: left + (width - minWidth) },
619
+ right: { min: parentLim, max: right + (width - minWidth) },
620
+ top: { min: parentLim, max: top + (height - minHeight) },
621
+ bottom: { min: parentLim, max: bottom + (height - minHeight) },
622
+ };
623
+
624
+ if (this.aspectRatio) {
625
+ const aspectLimits = {
626
+ left: {
627
+ min: left - (Math.min(top, bottom) * aspectFactor) * 2,
628
+ max: left + ((((height - minHeight) / 2) * aspectFactor) * 2),
629
+ },
630
+ right: {
631
+ min: right - (Math.min(top, bottom) * aspectFactor) * 2,
632
+ max: right + ((((height - minHeight) / 2) * aspectFactor) * 2),
633
+ },
634
+ top: {
635
+ min: top - (Math.min(left, right) / aspectFactor) * 2,
636
+ max: top + ((((width - minWidth) / 2) / aspectFactor) * 2),
637
+ },
638
+ bottom: {
639
+ min: bottom - (Math.min(left, right) / aspectFactor) * 2,
640
+ max: bottom + ((((width - minWidth) / 2) / aspectFactor) * 2),
641
+ },
632
642
  };
633
643
 
634
- if (this.aspectRatio) {
635
- const aspectLimits = {
636
- left: {
637
- min: left - (Math.min(top, bottom) * aspectFactor) * 2,
638
- max: left + ((((height - minHeight) / 2) * aspectFactor) * 2),
639
- },
640
- right: {
641
- min: right - (Math.min(top, bottom) * aspectFactor) * 2,
642
- max: right + ((((height - minHeight) / 2) * aspectFactor) * 2),
643
- },
644
- top: {
645
- min: top - (Math.min(left, right) / aspectFactor) * 2,
646
- max: top + ((((width - minWidth) / 2) / aspectFactor) * 2),
647
- },
648
- bottom: {
649
- min: bottom - (Math.min(left, right) / aspectFactor) * 2,
650
- max: bottom + ((((width - minWidth) / 2) / aspectFactor) * 2),
651
- },
652
- };
653
-
654
- if (this.currentStick[0] === 'm') {
655
- limits.left = {
656
- min: Math.max(limits.left.min as number, aspectLimits.left.min),
657
- max: Math.min(limits.left.max, aspectLimits.left.max),
658
- };
659
- limits.right = {
660
- min: Math.max(limits.right.min as number, aspectLimits.right.min),
661
- max: Math.min(limits.right.max, aspectLimits.right.max),
662
- };
663
-
664
- } else if (this.currentStick[1] === 'm') {
665
- limits.top = {
666
- min: Math.max(limits.top.min as number, aspectLimits.top.min),
667
- max: Math.min(limits.top.max, aspectLimits.top.max),
668
- };
669
- limits.bottom = {
670
- min: Math.max(limits.bottom.min as number, aspectLimits.bottom.min),
671
- max: Math.min(limits.bottom.max, aspectLimits.bottom.max),
672
- };
673
- }
644
+ if (this.currentStick[0] === 'm') {
645
+ limits.left = {
646
+ min: Math.max(limits.left.min as number, aspectLimits.left.min),
647
+ max: Math.min(limits.left.max, aspectLimits.left.max),
648
+ };
649
+ limits.right = {
650
+ min: Math.max(limits.right.min as number, aspectLimits.right.min),
651
+ max: Math.min(limits.right.max, aspectLimits.right.max),
652
+ };
653
+
654
+ } else if (this.currentStick[1] === 'm') {
655
+ limits.top = {
656
+ min: Math.max(limits.top.min as number, aspectLimits.top.min),
657
+ max: Math.min(limits.top.max, aspectLimits.top.max),
658
+ };
659
+ limits.bottom = {
660
+ min: Math.max(limits.bottom.min as number, aspectLimits.bottom.min),
661
+ max: Math.min(limits.bottom.max, aspectLimits.bottom.max),
662
+ };
674
663
  }
664
+ }
675
665
 
676
- return limits;
666
+ return limits;
677
667
  }
678
668
 
679
- sideCorrectionByLimit(limit, current) {
680
- let value = current;
669
+ sideCorrectionByLimit(limit: any, current: any) {
670
+ let value = current;
681
671
 
682
- if (limit.min !== null && current < limit.min) {
683
- value = limit.min;
684
- } else if (limit.max !== null && limit.max < current) {
685
- value = limit.max;
686
- }
672
+ if (limit.min !== null && current < limit.min) {
673
+ value = limit.min;
674
+ } else if (limit.max !== null && limit.max < current) {
675
+ value = limit.max;
676
+ }
687
677
 
688
- return value;
678
+ return value;
689
679
  }
690
680
 
691
- rectCorrectionByLimit(rect) {
692
- const { limits } = this;
693
- let { newRight, newLeft, newBottom, newTop } = rect;
681
+ rectCorrectionByLimit(rect: any) {
682
+ const { limits } = this;
683
+ let { newRight, newLeft, newBottom, newTop } = rect;
694
684
 
695
- newLeft = this.sideCorrectionByLimit(limits.left, newLeft);
696
- newRight = this.sideCorrectionByLimit(limits.right, newRight);
697
- newTop = this.sideCorrectionByLimit(limits.top, newTop);
698
- newBottom = this.sideCorrectionByLimit(limits.bottom, newBottom);
685
+ newLeft = this.sideCorrectionByLimit(limits.left, newLeft);
686
+ newRight = this.sideCorrectionByLimit(limits.right, newRight);
687
+ newTop = this.sideCorrectionByLimit(limits.top, newTop);
688
+ newBottom = this.sideCorrectionByLimit(limits.bottom, newBottom);
699
689
 
700
- return {
701
- newLeft,
702
- newRight,
703
- newTop,
704
- newBottom,
705
- };
690
+ return {
691
+ newLeft,
692
+ newRight,
693
+ newTop,
694
+ newBottom,
695
+ };
706
696
  }
707
697
 
708
- rectCorrectionByAspectRatio(rect) {
709
- let { newLeft, newRight, newTop, newBottom } = rect;
710
- const { parentWidth, parentHeight, currentStick, aspectFactor, dimensionsBeforeMove } = this;
698
+ rectCorrectionByAspectRatio(rect: any) {
699
+ let { newLeft, newRight, newTop, newBottom } = rect;
700
+ const { parentWidth, parentHeight, currentStick, aspectFactor, dimensionsBeforeMove } = this;
711
701
 
712
- let newWidth = parentWidth - newLeft - newRight;
713
- let newHeight = parentHeight - newTop - newBottom;
702
+ let newWidth = parentWidth - newLeft - newRight;
703
+ let newHeight = parentHeight - newTop - newBottom;
714
704
 
715
- if (currentStick[1] === 'm') {
716
- const deltaHeight = newHeight - dimensionsBeforeMove.height;
705
+ if (currentStick[1] === 'm') {
706
+ const deltaHeight = newHeight - dimensionsBeforeMove.height;
717
707
 
718
- newLeft -= (deltaHeight * aspectFactor) / 2;
719
- newRight -= (deltaHeight * aspectFactor) / 2;
720
- } else if (currentStick[0] === 'm') {
721
- const deltaWidth = newWidth - dimensionsBeforeMove.width;
708
+ newLeft -= (deltaHeight * aspectFactor) / 2;
709
+ newRight -= (deltaHeight * aspectFactor) / 2;
710
+ } else if (currentStick[0] === 'm') {
711
+ const deltaWidth = newWidth - dimensionsBeforeMove.width;
722
712
 
723
- newTop -= (deltaWidth / aspectFactor) / 2;
724
- newBottom -= (deltaWidth / aspectFactor) / 2;
725
- } else if (newWidth / newHeight > aspectFactor) {
726
- newWidth = aspectFactor * newHeight;
713
+ newTop -= (deltaWidth / aspectFactor) / 2;
714
+ newBottom -= (deltaWidth / aspectFactor) / 2;
715
+ } else if (newWidth / newHeight > aspectFactor) {
716
+ newWidth = aspectFactor * newHeight;
727
717
 
728
- if (currentStick[1] === 'l') {
729
- newLeft = parentWidth - newRight - newWidth;
730
- } else {
731
- newRight = parentWidth - newLeft - newWidth;
732
- }
718
+ if (currentStick[1] === 'l') {
719
+ newLeft = parentWidth - newRight - newWidth;
733
720
  } else {
734
- newHeight = newWidth / aspectFactor;
721
+ newRight = parentWidth - newLeft - newWidth;
722
+ }
723
+ } else {
724
+ newHeight = newWidth / aspectFactor;
735
725
 
736
- if (currentStick[0] === 't') {
737
- newTop = parentHeight - newBottom - newHeight;
738
- } else {
739
- newBottom = parentHeight - newTop - newHeight;
740
- }
726
+ if (currentStick[0] === 't') {
727
+ newTop = parentHeight - newBottom - newHeight;
728
+ } else {
729
+ newBottom = parentHeight - newTop - newHeight;
741
730
  }
731
+ }
742
732
 
743
- return { newLeft, newRight, newTop, newBottom };
733
+ return { newLeft, newRight, newTop, newBottom };
744
734
  }
745
735
 
746
736
  storageElementInfo() {
747
737
 
748
- if (!this.isStorage)
749
- return
738
+ if (!this.isStorage)
739
+ return
750
740
 
751
- if (this.name.trim() === "") {
752
- throw "unspecified name"
753
- }
741
+ if (this.name.trim() === "") {
742
+ throw "unspecified name"
743
+ }
754
744
 
755
- const info = { "left": this.rect.left, "top": this.rect.top, "right": this.right, "bottom": this.bottom }
756
- localStorage.setItem("DragResizeView_Info_" + this.name, JSON.stringify(info))
745
+ if (this.rect.left === null || this.rect.top === null || this.right === null || this.bottom === null) {
746
+ return
747
+ }
748
+
749
+ const info = { "left": this.rect.left, "top": this.rect.top, "right": this.right, "bottom": this.bottom }
750
+ localStorage.setItem("DragResizeView_Rect_" + this.name, JSON.stringify(info))
757
751
  }
758
752
 
759
753
  get positionStyle() {
760
- console.log("绑定");
761
-
762
- return {
763
- top: this.top + 'px',
764
- left: this.left + 'px',
765
- zIndex: this.zIndex,
766
- };
754
+ return {
755
+ top: this.top + 'px',
756
+ left: this.left + 'px',
757
+ zIndex: this.zIndex,
758
+ };
767
759
  }
768
760
 
769
761
  get sizeStyle() {
770
- return {
771
- width: this.w == 'auto' ? 'auto' : this.width + 'px',
772
- height: this.h == 'auto' ? 'auto' : this.height + 'px'
773
- };
762
+ return {
763
+ width: this.w == 'auto' ? 'auto' : this.width + 'px',
764
+ height: this.h == 'auto' ? 'auto' : this.height + 'px'
765
+ };
774
766
  }
775
767
 
776
768
 
777
769
  get vdrStick() {
778
- return (stick) => {
779
- const stickStyle = {
780
- width: `${this.stickSize / this.parentScaleX}px`,
781
- height: `${this.stickSize / this.parentScaleY}px`,
782
- };
783
- stickStyle[styleMapping.y[stick[0]]] = `${this.stickSize / this.parentScaleX / -2}px`;
784
- stickStyle[styleMapping.x[stick[1]]] = `${this.stickSize / this.parentScaleX / -2}px`;
785
- return stickStyle;
770
+ return (stick: any) => {
771
+ const stickStyle: any = {
772
+ width: `${this.stickSize / this.parentScaleX}px`,
773
+ height: `${this.stickSize / this.parentScaleY}px`,
786
774
  };
775
+ stickStyle[styleMapping.y[stick[0]]] = `${this.stickSize / this.parentScaleX / -2}px`;
776
+ stickStyle[styleMapping.x[stick[1]]] = `${this.stickSize / this.parentScaleX / -2}px`;
777
+ return stickStyle;
778
+ };
787
779
  }
788
780
 
789
781
  get width() {
790
- console.log("宽高获取1A", this);
791
- console.log("宽高获取1", this.parentWidth);
792
- console.log("宽高获取2", this.left);
793
- console.log("宽高获取3", this.right);
794
-
795
- return this.parentWidth - this.left - this.right;
782
+ return this.parentWidth - this.left - this.right;
796
783
  }
797
784
 
798
785
  get height() {
799
- return this.parentHeight - this.top - this.bottom;
786
+ return this.parentHeight - this.top - this.bottom;
800
787
  }
801
788
 
802
789
  get rect() {
803
- return {
804
- left: Math.round(this.left),
805
- top: Math.round(this.top),
806
- width: Math.round(this.width),
807
- height: Math.round(this.height),
808
- };
790
+ return {
791
+ left: Math.round(this.left),
792
+ top: Math.round(this.top),
793
+ width: Math.round(this.width),
794
+ height: Math.round(this.height),
795
+ };
809
796
  }
810
797
 
811
- @Watch('isActive', { immediate: false, deep: false })
812
- onActive(isActive) {
813
- if (isActive) {
814
- this.$emit('activated');
815
- } else {
816
- this.$emit('deactivated');
817
- }
798
+ @Watch('active', { immediate: false, deep: false })
799
+ onActive(isActive: boolean) {
800
+ if (isActive) {
801
+ this.$emit('activated');
802
+ } else {
803
+ this.$emit('deactivated');
804
+ }
818
805
  }
819
806
 
820
807
  @Watch('isActive', { immediate: true, deep: false })
821
- onIsActive(val) {
822
- this.active = val;
808
+ onIsActive(val: boolean) {
809
+ this.active = val;
823
810
  }
824
811
 
825
812
  @Watch('z', { immediate: true, deep: false })
826
- onZ(val) {
827
- if (val >= 0 || val === 'auto') {
828
- this.zIndex = val;
829
- }
813
+ onZ(val: number | string) {
814
+ if (val >= 0 || val === 'auto') {
815
+ this.zIndex = val as number;
816
+ }
830
817
  }
831
818
 
832
819
  @Watch('x', { immediate: false, deep: false })
833
- onX(newVal, oldVal) {
834
- if (this.stickDrag || this.bodyDrag || (newVal === this.left)) {
835
- return;
836
- }
820
+ onX(newVal: number, oldVal: number) {
821
+ if (this.stickDrag || this.bodyDrag || (newVal === this.left)) {
822
+ return;
823
+ }
837
824
 
838
- const delta = oldVal - newVal;
825
+ const delta = oldVal - newVal;
839
826
 
840
- this.bodyDown({ pageX: this.left, pageY: this.top });
841
- this.bodyMove({ x: delta, y: 0 });
827
+ this.bodyDown({ pageX: this.left, pageY: this.top });
828
+ this.bodyMove({ x: delta, y: 0 });
842
829
 
843
- this.$nextTick(() => {
844
- this.bodyUp();
845
- });
830
+ this.$nextTick(() => {
831
+ this.bodyUp();
832
+ });
846
833
  }
847
834
 
848
835
  @Watch('y', { immediate: false, deep: false })
849
- onY(newVal, oldVal) {
850
- if (this.stickDrag || this.bodyDrag || (newVal === this.top)) {
851
- return;
852
- }
836
+ onY(newVal: number, oldVal: number) {
837
+ if (this.stickDrag || this.bodyDrag || (newVal === this.top)) {
838
+ return;
839
+ }
853
840
 
854
- const delta = oldVal - newVal;
841
+ const delta = oldVal - newVal;
855
842
 
856
- this.bodyDown({ pageX: this.left, pageY: this.top });
857
- this.bodyMove({ x: 0, y: delta });
843
+ this.bodyDown({ pageX: this.left, pageY: this.top });
844
+ this.bodyMove({ x: 0, y: delta });
858
845
 
859
- this.$nextTick(() => {
860
- this.bodyUp();
861
- });
846
+ this.$nextTick(() => {
847
+ this.bodyUp();
848
+ });
862
849
  }
863
850
 
864
851
  @Watch('w', { immediate: false, deep: false })
865
- onW(newVal, oldVal) {
866
- if (this.stickDrag || this.bodyDrag || (newVal === this.width)) {
867
- return;
868
- }
852
+ onW(newVal: number, oldVal: number) {
853
+ if (this.stickDrag || this.bodyDrag || (newVal === this.width)) {
854
+ return;
855
+ }
869
856
 
870
- const stick = 'mr';
871
- const delta = oldVal - newVal;
857
+ const stick = 'mr';
858
+ const delta = oldVal - newVal;
872
859
 
873
- this.stickDown(stick, { pageX: this.right, pageY: this.top + (this.height / 2) }, true);
874
- this.stickMove({ x: delta, y: 0 });
860
+ this.stickDown(stick, { pageX: this.right, pageY: this.top + (this.height / 2) }, true);
861
+ this.stickMove({ x: delta, y: 0 });
875
862
 
876
- this.$nextTick(() => {
877
- this.stickUp();
878
- });
863
+ this.$nextTick(() => {
864
+ this.stickUp();
865
+ });
879
866
  }
880
867
 
881
868
  @Watch('h', { immediate: false, deep: false })
882
- onH(newVal, oldVal) {
883
- if (this.stickDrag || this.bodyDrag || (newVal === this.height)) {
884
- return;
885
- }
869
+ onH(newVal: number, oldVal: number) {
870
+ if (this.stickDrag || this.bodyDrag || (newVal === this.height)) {
871
+ return;
872
+ }
886
873
 
887
- const stick = 'bm';
888
- const delta = oldVal - newVal;
874
+ const stick = 'bm';
875
+ const delta = oldVal - newVal;
889
876
 
890
- this.stickDown(stick, { pageX: this.left + (this.width / 2), pageY: this.bottom }, true);
891
- this.stickMove({ x: 0, y: delta });
877
+ this.stickDown(stick, { pageX: this.left + (this.width / 2), pageY: this.bottom }, true);
878
+ this.stickMove({ x: 0, y: delta });
892
879
 
893
- this.$nextTick(() => {
894
- this.stickUp();
895
- });
880
+ this.$nextTick(() => {
881
+ this.stickUp();
882
+ });
896
883
  }
897
884
 
898
885
  @Watch('parentW', { immediate: false, deep: false })
899
- onParentW(val) {
900
- this.right = val - this.width - this.left;
901
- this.parentWidth = val;
886
+ onParentW(val: number) {
887
+ this.right = val - this.width - this.left;
888
+ this.parentWidth = val;
902
889
  }
903
890
 
904
891
 
905
892
  @Watch('parentH', { immediate: false, deep: false })
906
- onParentH(val) {
907
- this.bottom = val - this.height - this.top;
908
- this.parentHeight = val;
893
+ onParentH(val: number) {
894
+ this.bottom = val - this.height - this.top;
895
+ this.parentHeight = val;
909
896
  }
910
897
 
911
- }
898
+ }
912
899
 
913
900
  </script>
914
901
 
915
902
  <style lang="less" scoped>
916
- @import "index.less";
917
- </style>
903
+ @import "index.less";
904
+ </style>