From e1d8387b8147d73b029be87c5fbea5b9931314b9 Mon Sep 17 00:00:00 2001 From: bensladden Date: Sat, 30 May 2020 20:26:45 +0930 Subject: [PATCH 1/5] initial testing --- package-lock.json | 37 ++++- package.json | 3 + src/components/DashItem.model.ts | 42 +++++- src/components/DashItem.vue | 225 ++++++++++++++++++++----------- src/components/Layout.model.ts | 2 +- 5 files changed, 223 insertions(+), 86 deletions(-) diff --git a/package-lock.json b/package-lock.json index a770f224..2fd6d55c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "vue-responsive-dash", - "version": "0.3.29", + "version": "0.3.30", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -2103,6 +2103,41 @@ "@hapi/hoek": "^8.3.0" } }, + "@interactjs/actions": { + "version": "1.9.18", + "resolved": "https://registry.npmjs.org/@interactjs/actions/-/actions-1.9.18.tgz", + "integrity": "sha512-D528WoxiC/M7ozjPIDW6+1mJVMoNwGHnCu++rkdWFWWaDqRf8yEYZKVecNAiJh475RGfdW/Hxk85sze1fTBj+g==", + "requires": { + "@interactjs/interact": "1.9.18" + } + }, + "@interactjs/auto-start": { + "version": "1.9.18", + "resolved": "https://registry.npmjs.org/@interactjs/auto-start/-/auto-start-1.9.18.tgz", + "integrity": "sha512-0sHb3RmM3YaSQo01o0RcdUV7fJR2r9eldHI7iHbtE+VJ+aI/P3jD45ffY9I/8zekr7mPP9xbbqEnUUptPFx1gw==", + "requires": { + "@interactjs/interact": "1.9.18" + } + }, + "@interactjs/core": { + "version": "1.9.18", + "resolved": "https://registry.npmjs.org/@interactjs/core/-/core-1.9.18.tgz", + "integrity": "sha512-DuprgYOdhTX3FsGkqZsoo9wjSRq5BMp/Ak2BR0GTOXDeHclKdPcem7SKm8fro0xFWu07sXCfLisIw4wtD1tyXQ==" + }, + "@interactjs/interact": { + "version": "1.9.18", + "resolved": "https://registry.npmjs.org/@interactjs/interact/-/interact-1.9.18.tgz", + "integrity": "sha512-ZnEk0SPGhG/hV6DmjPlgPTd+sXtjpnlt/yyHKiHCebvzHlUt6y2S5PV7QRrxUFTQWPqEnTEPtLLEvOX1EQvOIQ==", + "requires": { + "@interactjs/core": "1.9.18", + "@interactjs/utils": "1.9.18" + } + }, + "@interactjs/utils": { + "version": "1.9.18", + "resolved": "https://registry.npmjs.org/@interactjs/utils/-/utils-1.9.18.tgz", + "integrity": "sha512-aHUiZhMSYERddVjwlrdoWqbofqkKis4aYn4c99OJu081nLhoFC0zG6zjzT+B0qvpLg4IE6ipG3Do2iovjVldnQ==" + }, "@intervolga/optimize-cssnano-plugin": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@intervolga/optimize-cssnano-plugin/-/optimize-cssnano-plugin-1.0.6.tgz", diff --git a/package.json b/package.json index 008b75f1..13c8646d 100644 --- a/package.json +++ b/package.json @@ -64,6 +64,9 @@ "vue": "^2.6.11" }, "dependencies": { + "@interactjs/actions": "^1.9.14", + "@interactjs/auto-start": "^1.9.14", + "@interactjs/interact": "^1.9.14", "ste-simple-events": "^1.6.11", "vue-displace": "^0.2.7", "vue-element-resize-detector": "^1.0.6" diff --git a/src/components/DashItem.model.ts b/src/components/DashItem.model.ts index caa614cb..971c56ec 100644 --- a/src/components/DashItem.model.ts +++ b/src/components/DashItem.model.ts @@ -24,6 +24,8 @@ export class DashItem { private _resizeHandleSize: number; private _moved: boolean = false; private _hover: boolean = false; + private _resizeHold: number; + private _dragHold: number; private onDragStartEvent = undefined as DragEvent | undefined; private onDragStartLeft = 0 as number; @@ -57,6 +59,8 @@ export class DashItem { resizable, resizeEdges, resizeHandleSize, + dragHold, + resizeHold, }: { id: string | number; x?: number; @@ -74,6 +78,8 @@ export class DashItem { resizable?: boolean; resizeEdges?: string; resizeHandleSize?: number; + dragHold?: number; + resizeHold?: number; }) { this._id = id; @@ -165,6 +171,16 @@ export class DashItem { } else { this._resizeHandleSize = 8; } + if (typeof dragHold !== "undefined") { + this._dragHold = dragHold; + } else { + this._dragHold = 0; + } + if (typeof resizeHold !== "undefined") { + this._resizeHold = resizeHold; + } else { + this._resizeHold = 0; + } } get id() { return this._id; @@ -276,6 +292,18 @@ export class DashItem { set hover(h: boolean) { this._hover = h; } + get dragHold() { + return this._dragHold; + } + set dragHold(dh: number) { + this._dragHold = dh; + } + get resizeHold() { + return this._resizeHold; + } + set resizeHold(rh: number) { + this._resizeHold = rh; + } checkSizeLimits() { if (typeof this.maxWidth == "number") { if (this.width > this.maxWidth) { @@ -406,18 +434,18 @@ export class DashItem { this._onDragEndEventDispatcher.dispatch(this.toItem()); } _onMoveStart() { - this.onDragStartLeft = this.left; - this.onDragStartTop = this.top; + // this.onDragStartLeft = this.left; + // this.onDragStartTop = this.top; this._onDragStartEventDispatcher.dispatch(this.toItem()); } _onMove(left: number, top: number) { - this.left = left + this.onDragStartLeft; - this.top = top + this.onDragStartTop; + this.left += left; + this.top += top; this._onDragEventDispatcher.dispatch(this.toItem()); } - _onMoveEnd(event: DragEvent) { - this.onDragStartLeft = 0; - this.onDragStartTop = 0; + _onMoveEnd() { + // this.onDragStartLeft = 0; + // this.onDragStartTop = 0; this._onDragEndEventDispatcher.dispatch(this.toItem()); } get onDragStart() { diff --git a/src/components/DashItem.vue b/src/components/DashItem.vue index 4b2d1c6a..60b95a94 100644 --- a/src/components/DashItem.vue +++ b/src/components/DashItem.vue @@ -1,15 +1,13 @@ diff --git a/src/components/Layout.model.ts b/src/components/Layout.model.ts index 8960a554..5d57a237 100644 --- a/src/components/Layout.model.ts +++ b/src/components/Layout.model.ts @@ -724,7 +724,7 @@ export class Layout { margin: { x: 10, y: 10 } as Margin, autoHeight: true as boolean, keepSquare: true as boolean, - useCssTransforms: false as boolean, + useCssTransforms: true as boolean, width: 400 as number, height: 400 as number, rowHeight: false as number | boolean, From 217a1394bdae7fd41b85e9fceaa150718fb993c0 Mon Sep 17 00:00:00 2001 From: bensladden Date: Sat, 30 May 2020 21:42:25 +0930 Subject: [PATCH 2/5] initial testing done --- src/components/DashItem.model.ts | 48 +++++++++++++++++++++----------- src/components/DashItem.vue | 26 ++++++++--------- 2 files changed, 42 insertions(+), 32 deletions(-) diff --git a/src/components/DashItem.model.ts b/src/components/DashItem.model.ts index 971c56ec..e4a8a468 100644 --- a/src/components/DashItem.model.ts +++ b/src/components/DashItem.model.ts @@ -1,6 +1,6 @@ import { SimpleEventDispatcher } from "ste-simple-events"; import { Margin, Item } from "../interfaces"; - +//import ResizeEvent from "@interactjs/types"; export class DashItem { private readonly _id: number | string; private _x: number; @@ -30,6 +30,8 @@ export class DashItem { private onDragStartEvent = undefined as DragEvent | undefined; private onDragStartLeft = 0 as number; private onDragStartTop = 0 as number; + private onDragDisplacementLeft = 0 as number; + private onDragDisplacementTop = 0 as number; private _onDragStartEventDispatcher = new SimpleEventDispatcher(); private _onDragEventDispatcher = new SimpleEventDispatcher(); private _onDragEndEventDispatcher = new SimpleEventDispatcher(); @@ -434,18 +436,24 @@ export class DashItem { this._onDragEndEventDispatcher.dispatch(this.toItem()); } _onMoveStart() { - // this.onDragStartLeft = this.left; - // this.onDragStartTop = this.top; + this.onDragStartLeft = this.left; + this.onDragStartTop = this.top; + this.onDragDisplacementLeft = 0; + this.onDragDisplacementTop = 0; this._onDragStartEventDispatcher.dispatch(this.toItem()); } _onMove(left: number, top: number) { - this.left += left; - this.top += top; + this.onDragDisplacementLeft += left; + this.onDragDisplacementTop += top; + this.left = this.onDragStartLeft + this.onDragDisplacementLeft; + this.top = this.onDragStartTop + this.onDragDisplacementTop; this._onDragEventDispatcher.dispatch(this.toItem()); } _onMoveEnd() { - // this.onDragStartLeft = 0; - // this.onDragStartTop = 0; + this.onDragStartLeft = 0; + this.onDragStartTop = 0; + this.onDragDisplacementLeft = 0; + this.onDragDisplacementTop = 0; this._onDragEndEventDispatcher.dispatch(this.toItem()); } get onDragStart() { @@ -458,23 +466,29 @@ export class DashItem { return this._onDragEndEventDispatcher.asEvent(); } //ResizeEventManagement - _onResizeStart(event: DragEvent, location: string) { + _onResizeStart() { this.onResizeStartLeft = this.left; this.onResizeStartTop = this.top; this.onResizeStartingWidth = this.widthPx; this.onResizeStartingHeight = this.heightPx; - this._onResizeLocation = location; + // this._onResizeLocation = location; this._onResizeStartEventDispatcher.dispatch(this.toItem()); } - _onResize(left: number, top: number) { - let location = this._onResizeLocation; + _onResize(event: any) { + //TODO ResizeEvent + //let location = this._onResizeLocation; //will fire - if (location.includes("right")) { - this.widthPx = left; - } - if (location.includes("bottom")) { - this.heightPx = top; - } + // if (location.includes("right")) { + // this.widthPx = left; + // } + // if (location.includes("bottom")) { + // this.heightPx = top; + // } + // this.left += event.deltaRect.left; + // this.top += event.deltaRect.top; + this.widthPx = event.rect.width; + this.heightPx = event.rect.height; + this._onResizeEventDispatcher.dispatch(this.toItem()); } _onResizeEnd(e: DragEvent) { diff --git a/src/components/DashItem.vue b/src/components/DashItem.vue index 60b95a94..ac300419 100644 --- a/src/components/DashItem.vue +++ b/src/components/DashItem.vue @@ -1,6 +1,6 @@ @@ -73,6 +75,7 @@ export default { compact: true, draggable: true, resizable: true, + moveHold: 0, margin: { x: 20, y: 20 }, layouts: [ { diff --git a/src/components/DashItem.model.ts b/src/components/DashItem.model.ts index 23dd4bb8..8097616e 100644 --- a/src/components/DashItem.model.ts +++ b/src/components/DashItem.model.ts @@ -25,7 +25,7 @@ export class DashItem { private _moved: boolean = false; private _hover: boolean = false; private _resizeHold: number; - private _dragHold: number; + private _moveHold: number; private _moving = false as boolean; private _resizing = false as boolean; @@ -53,7 +53,7 @@ export class DashItem { resizable, resizeEdges, resizeHandleSize, - dragHold, + moveHold, resizeHold, }: { id: string | number; @@ -72,7 +72,7 @@ export class DashItem { resizable?: boolean; resizeEdges?: string; resizeHandleSize?: number; - dragHold?: number; + moveHold?: number; resizeHold?: number; }) { this._id = id; @@ -165,10 +165,10 @@ export class DashItem { } else { this._resizeHandleSize = 8; } - if (typeof dragHold !== "undefined") { - this._dragHold = dragHold; + if (typeof moveHold !== "undefined") { + this._moveHold = moveHold; } else { - this._dragHold = 0; + this._moveHold = 0; } if (typeof resizeHold !== "undefined") { this._resizeHold = resizeHold; @@ -293,11 +293,11 @@ export class DashItem { set hover(h: boolean) { this._hover = h; } - get dragHold() { - return this._dragHold; + get moveHold() { + return this._moveHold; } - set dragHold(dh: number) { - this._dragHold = dh; + set moveHold(dh: number) { + this._moveHold = dh; } get resizeHold() { return this._resizeHold; diff --git a/src/components/DashItem.vue b/src/components/DashItem.vue index b6eb4a17..de4e59ae 100644 --- a/src/components/DashItem.vue +++ b/src/components/DashItem.vue @@ -8,24 +8,6 @@ @mouseover="hover = true" @mouseleave="hover = false" > -
{ this.onMoveStart(event); @@ -449,7 +431,7 @@ export default { resizable() { this.setResizable(); }, - dragHold() { + moveHold() { this.setDraggable(); }, resizeHold() {