can click and drag

master
Beau Blyth 2019-10-07 16:52:34 -07:00
parent 23975a7401
commit 911db00bc6
5 changed files with 98 additions and 29 deletions

View File

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

View File

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

View File

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

View File

@ -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 {

35
dist/index.html vendored
View File

@ -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 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>