From 911db00bc62a24c64e9a5263b9c871d1b444b3f3 Mon Sep 17 00:00:00 2001 From: Beau Blyth Date: Mon, 7 Oct 2019 16:52:34 -0700 Subject: [PATCH] can click and drag --- app/canvas_handler.ts | 2 -- app/frame_handler.ts | 16 +++++++++++++++- app/page.ts | 31 +++++++++++++++++++++++++++---- app/stylesheets/main.scss | 39 ++++++++++++++++++++++++++++++++++----- dist/index.html | 39 ++++++++++++++++++++++----------------- 5 files changed, 98 insertions(+), 29 deletions(-) diff --git a/app/canvas_handler.ts b/app/canvas_handler.ts index 865ffbe..3f25ba3 100644 --- a/app/canvas_handler.ts +++ b/app/canvas_handler.ts @@ -69,8 +69,6 @@ export class CanvasHandler { // update canvas data this.projectData.widthRatio = ratioWidth; this.projectData.heightRatio = ratioHeight; - // update origin number display - this.orginInfo.innerText = 'Origin X: ' + this.animationData.originX + ' Y: ' + this.animationData.originY; }; private UpdateCanvasDataSize() { diff --git a/app/frame_handler.ts b/app/frame_handler.ts index 684d013..c04f1ad 100644 --- a/app/frame_handler.ts +++ b/app/frame_handler.ts @@ -3,6 +3,7 @@ import { IFramePinData } from './Interfaces/IFramePinData'; import { IProjectData } from './Interfaces/IProjectData'; export class FrameHandler { + public frameViewerMouseHeld: boolean; private start: number = 0; private frameNumberDiv: HTMLElement; @@ -41,6 +42,13 @@ export class FrameHandler { this.imageElement = imageElement; this.projectData = projectData; this.frameViewer = frameViewer; + + this.frameViewer.addEventListener('mousedown', () => { + this.frameViewerMouseHeld = true; + }); + this.frameViewer.addEventListener('mouseup', () => { + this.frameViewerMouseHeld = false; + }); } public GetCurrentFrame(): number { @@ -103,10 +111,16 @@ export class FrameHandler { this.frameViewer.appendChild(newDiv); newDiv.className = 'frame'; - newDiv.addEventListener('click', () => { + newDiv.addEventListener('mousedown', () => { this.StopPlayingAnimation(); this.GoToFrame(i); }); + newDiv.addEventListener('mousemove', () => { + if (this.frameViewerMouseHeld) { + this.StopPlayingAnimation(); + this.GoToFrame(i); + } + }); } }; diff --git a/app/page.ts b/app/page.ts index 29bac05..6ac987e 100644 --- a/app/page.ts +++ b/app/page.ts @@ -34,6 +34,10 @@ export class Page { private addPinButton: HTMLElement; + private outputMessage: HTMLElement; + + private canvasMouseHeld: boolean = false; + public Load() { // defining blank slate animation data this.animationData = { @@ -58,6 +62,8 @@ export class Page { widthRatio: 0 }; + this.outputMessage = document.getElementById('outputMessage') as HTMLElement; + this.message = document.getElementById('message') as HTMLElement; const canvasImage = document.getElementById('canvasImage') as HTMLCanvasElement; @@ -81,7 +87,18 @@ export class Page { imageElement, document.getElementById('originInfo') as HTMLElement ); - this.canvasImage.addEventListener('mousedown', this.CanvasMouseDown); + canvasImage.addEventListener('mousedown', (event: MouseEvent) => { + this.canvasMouseHeld = true; + this.canvasHandler.CanvasMouseDown(event.offsetX, event.offsetY); + this.pinHandler.UpdatePinBoxStatus(); + }); + canvasImage.addEventListener('mousemove', this.CanvasMouseDown); + + // reset holds on global mouse up + document.addEventListener('mouseup', () => { + this.canvasMouseHeld = false; + this.frameHandler.frameViewerMouseHeld = false; + }); // setup frame handler this.frameHandler = new FrameHandler( @@ -196,6 +213,9 @@ export class Page { } private ProjectHasNeccesaryData(): boolean { + this.outputMessage.innerText = ''; + this.outputMessage.classList.remove('errorMessage'); + let pass: boolean = true; let errorString: string = ''; this.frameHandler.RefreshFrameViewer(); @@ -233,14 +253,17 @@ export class Page { pass = false; } if (!pass) { - alert(errorString); + this.outputMessage.innerText = errorString; + this.outputMessage.classList.add('errorMessage'); } return pass; } private CanvasMouseDown = (event: MouseEvent) => { - this.canvasHandler.CanvasMouseDown(event.offsetX, event.offsetY); - this.pinHandler.UpdatePinBoxStatus(); + if (this.canvasMouseHeld) { + this.canvasHandler.CanvasMouseDown(event.offsetX, event.offsetY); + this.pinHandler.UpdatePinBoxStatus(); + } }; private AddPinButtonPressed = () => { diff --git a/app/stylesheets/main.scss b/app/stylesheets/main.scss index f7eadef..e198895 100644 --- a/app/stylesheets/main.scss +++ b/app/stylesheets/main.scss @@ -11,22 +11,46 @@ $warning-selected-bg-color: #aa093a; $warning-text-color: #ff1d61; div { + user-select: none; + -moz-user-select: none; + -webkit-user-drag: none; + -webkit-user-select: none; + -ms-user-select: none; display: block; color: $main-font-color; font-family: "Arial", Helvetica, sans-serif; } +.center { + margin: auto; + padding: 10px; + text-align: center; +} + .numberinput { width: 64px; } +.spriteCanvas { + border: 1px solid $main-border-color; + padding: 0; +} + +.borderbox { + font-size: 12px; + margin: auto; + width: 50%; + padding: 8px; + text-align: center; +} + .instruction { font-size: 12px; margin: auto; width: 50%; - border: 2px solid; - padding: 1px; + padding: 8px; text-align: center; + background-color: $bg-dark-color; } #frameViewer { @@ -43,6 +67,7 @@ div { display: inline-block; border: 2px solid $main-border-color; background-color: $bg-dark-color; + align-items: center; &.warning { border: 2px solid $warning-border-color; @@ -61,9 +86,10 @@ div { .errorMessage { font-size: 12px; width: 50%; - border: 2px solid $warning-border-color; + border: 4px solid $warning-border-color; padding: 1px; - background-color: $warning-bg-color; + //background-color: $warning-bg-color; + //color: $warning-text-color; } .warningMessage { @@ -83,7 +109,6 @@ body { } #canvasImage { - border: 2px solid $main-border-color; image-rendering: pixelated; } @@ -111,6 +136,10 @@ body { background-color: $warning-selected-bg-color; } } + + input { + width: 100%; + } } .removeButton { diff --git a/dist/index.html b/dist/index.html index f93dee5..5cffb18 100644 --- a/dist/index.html +++ b/dist/index.html @@ -6,31 +6,36 @@ -
-
-
-

Drag images onto the page to upload them. Advance frames with arrow keys

-
-
+
- + +
-
-
+
+
+
+
+ Name:
+ Fps:
+ Looping
+
+
-
+

Origin

-
- Name:
-
Click image to set Origin
- Fps:
- Looping
-
- +
+
+

Drag images onto the page to upload them

+

Arrow Keys - Advance frames

+

Spacebar - Play/Pause Animation

+

S - Save

+
+
+