MoonsideGames
/
AnimationTool
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

some style changes

master
thatcosmonaut 2019-10-07 20:44:23 -07:00
parent 29bc4cefa3
commit 31d1e277d2
4 changed files with 96 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/canvas_handler.ts
View File

@ -25,18 +25,25 @@ export class CanvasHandler {
this.imageElement = imageElement; this.imageElement = imageElement;
this.orginInfo = originInfo; this.orginInfo = originInfo;
this.ResizeCanvas(); this.ResizeCanvas(0, 0);
this.UpdateCanvasDataSize(); this.UpdateCanvasDataSize();
const canvasContext: CanvasRenderingContext2D = this.canvasImage.getContext('2d')!; const canvasContext: CanvasRenderingContext2D = this.canvasImage.getContext('2d')!;
canvasContext.fillRect(0, 0, this.targetImageSize, this.targetImageSize); canvasContext.fillRect(0, 0, this.targetImageSize, this.targetImageSize);
canvasContext.imageSmoothingEnabled = false; canvasContext.imageSmoothingEnabled = false;
} }
public ResizeCanvas() { public ResizeCanvas(width: number, height: number) {
// get image ratio, then scale default width by it // get image ratio, then scale default width by it
const hwratio = this.imageElement.height / this.imageElement.width; const hwratio = height / width;
const newWidth = this.targetImageSize / hwratio;
const newHeight = this.targetImageSize; let newWidth = this.targetImageSize / hwratio;
let newHeight = this.targetImageSize;
if (newWidth > 600) {
newWidth = 600;
newHeight = 600 * hwratio;
}
this.canvasImage.width = newWidth; this.canvasImage.width = newWidth;
this.canvasImage.height = newHeight; this.canvasImage.height = newHeight;
this.UpdateCanvasDataSize(); this.UpdateCanvasDataSize();

6
app/page.ts
View File

@ -293,7 +293,11 @@ export class Page {
this.frameHandler.StopPlayingAnimation(); this.frameHandler.StopPlayingAnimation();
this.frameHandler.TogglePlayingAnimation(); this.frameHandler.TogglePlayingAnimation();
this.canvasHandler.ResizeCanvas(); const imageElement = new Image();
imageElement.src = filenames[0];
imageElement.onload = () => {
this.canvasHandler.ResizeCanvas(imageElement.width, imageElement.height);
};
this.frameHandler.ConstructFrameUI(); this.frameHandler.ConstructFrameUI();
}; };

39
app/stylesheets/main.scss
View File

@ -32,8 +32,42 @@ div {
} }
.spriteCanvas { .spriteCanvas {
border: 1px solid $main-border-color;
padding: 0; padding: 0;
min-width: 200px;
border: 1px solid;
border-style: dashed;
border-radius: 10px;
}
#top {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0 auto;
width: 75%;
}
#settings {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 20%;
max-width: 200px;
}
.settingsItem {
margin: 12px;
padding: 4px;
text-align: center;
border: 1px solid;
border-radius: 5px;
input {
width: 80%;
}
} }
.borderbox { .borderbox {
@ -56,7 +90,10 @@ div {
#frameViewer { #frameViewer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center;
justify-content: center;
} }
.frame { .frame {
flex: 1; flex: 1;
width: 32px; width: 32px;

72
dist/index.html vendored
View File

@ -6,38 +6,48 @@
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
</head> </head>
<body> <body>
<div id="dropZone" class="center"> <div id="dropZone" class="center">
<!-- canvas --> <div id="top">
<div id="canvasStyle"> <div id="canvasStyle">
<canvas id="canvasImage" class="spriteCanvas" alt=""></canvas> <canvas id="canvasImage" class="spriteCanvas" alt=""></canvas>
<div id="frameNumber"></div> <div id="frameNumber"></div>
</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>
<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> </div>
<div id="settings">
<div class="settingsItem">
<div class="label">Name</div>
<input type="text" id="filename">
</div>
<div class="settingsItem">
<div class="label">FPS</div>
<input type="number" value="30" id="framerate">
</div>
<div class="settingsItem">
<div class="label">Looping</div>
<input type="checkbox" id="looping">
</div>
</div>
</div>
<div class="borderbox">
<div id="frameViewer"></div>
</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>
<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> <script src="bundle.js"></script>
</body> </body>
</html> </html>