can click and drag

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() {

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);
+				}
+			});
 		}
 	};
 

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) => {
+		if (this.canvasMouseHeld) {
 			this.canvasHandler.CanvasMouseDown(event.offsetX, event.offsetY);
 			this.pinHandler.UpdatePinBoxStatus();
+		}
 	};
 
 	private AddPinButtonPressed = () => {

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 {

dist/index.html

@@ -6,31 +6,36 @@
     <link rel="icon" href="/favicon.ico">
   </head>
 	<body>
-        <div id="dropZone">
-          <div id = "topbar">
-            <div class="instruction">
-              <p>Drag images onto the page to upload them. Advance frames with arrow keys</p>
-            </div>
-          </div>
+        <div id="dropZone" class="center">
           <!-- canvas -->
           <div id="canvasStyle">
-            <canvas id="canvasImage" alt=""></canvas>
+            <canvas id="canvasImage"  class="spriteCanvas" alt=""></canvas>
+            <div id="frameNumber"></div>
           </div>
-          <div id="frameNumber" class="warningMessage"></div>
+          <div class="borderbox">
             <div id="frameViewer"></div>
+          </div>
+          <div id="settings" class="borderbox">
+              Name: <input type = "text" id="filename"><br>
+              Fps: <input type="number" id="framerate" class="numberinput"><br>
+              <input type="checkbox" id="looping" > Looping <br>
+          </div>
+          <div class="borderbox">
           <button id="addpin">Create New Pin</button>
-          <div id="pinContainer" class="pinContainer">
+          <div id="pinContainer" class="pinContainer" >
             <div class="pinButtonContainer" id="originPin"><p>Origin</p><button id="selectOrigin">Select</button>
             </div>
           </div>
-          <div id="settings">
-              Name: <input type = "text" id="filename"><br>
-              <div id = "originInfo">Click image to set Origin</div>
-              Fps: <input type="number" id="framerate" class="numberinput"><br>
-              <input type="checkbox" id="looping" > Looping <br>
-              <button id="saveButton" type="button">export .anim with (S)</button>
           </div>
-          
+          <div id = "info">
+              <div class="instruction">
+                <p>Drag images onto the page to upload them</p>
+                <p><b>Arrow Keys</b> - Advance frames</p>
+                <p><b>Spacebar</b> - Play/Pause Animation</p>
+                <p><b>S</b> - Save</p>
+              </div>
+              <div id="outputMessage"></div>
+            </div>
         </div>
 
         <script src="bundle.js"></script>