From 31d1e277d2dbbc5a2210a345a15f4bd55ae787c0 Mon Sep 17 00:00:00 2001 From: thatcosmonaut Date: Mon, 7 Oct 2019 20:44:23 -0700 Subject: [PATCH] some style changes --- app/canvas_handler.ts | 17 ++++++--- app/page.ts | 6 +++- app/stylesheets/main.scss | 39 ++++++++++++++++++++- dist/index.html | 72 ++++++++++++++++++++++----------------- 4 files changed, 96 insertions(+), 38 deletions(-) diff --git a/app/canvas_handler.ts b/app/canvas_handler.ts index 3f25ba3..0216006 100644 --- a/app/canvas_handler.ts +++ b/app/canvas_handler.ts @@ -25,18 +25,25 @@ export class CanvasHandler { this.imageElement = imageElement; this.orginInfo = originInfo; - this.ResizeCanvas(); + this.ResizeCanvas(0, 0); this.UpdateCanvasDataSize(); const canvasContext: CanvasRenderingContext2D = this.canvasImage.getContext('2d')!; canvasContext.fillRect(0, 0, this.targetImageSize, this.targetImageSize); canvasContext.imageSmoothingEnabled = false; } - public ResizeCanvas() { + public ResizeCanvas(width: number, height: number) { // get image ratio, then scale default width by it - const hwratio = this.imageElement.height / this.imageElement.width; - const newWidth = this.targetImageSize / hwratio; - const newHeight = this.targetImageSize; + const hwratio = height / width; + + let newWidth = this.targetImageSize / hwratio; + let newHeight = this.targetImageSize; + + if (newWidth > 600) { + newWidth = 600; + newHeight = 600 * hwratio; + } + this.canvasImage.width = newWidth; this.canvasImage.height = newHeight; this.UpdateCanvasDataSize(); diff --git a/app/page.ts b/app/page.ts index 59c8691..bc23ac4 100644 --- a/app/page.ts +++ b/app/page.ts @@ -293,7 +293,11 @@ export class Page { this.frameHandler.StopPlayingAnimation(); 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(); }; diff --git a/app/stylesheets/main.scss b/app/stylesheets/main.scss index e198895..b939acf 100644 --- a/app/stylesheets/main.scss +++ b/app/stylesheets/main.scss @@ -32,8 +32,42 @@ div { } .spriteCanvas { - border: 1px solid $main-border-color; 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 { @@ -56,7 +90,10 @@ div { #frameViewer { display: flex; flex-direction: row; + align-items: center; + justify-content: center; } + .frame { flex: 1; width: 32px; diff --git a/dist/index.html b/dist/index.html index 5cffb18..ecf8299 100644 --- a/dist/index.html +++ b/dist/index.html @@ -6,38 +6,48 @@ -
- -
- -
-
-
-
-
-
- Name:
- Fps:
- Looping
-
-
- -
-

Origin

-
-
-
-
-
-

Drag images onto the page to upload them

-

Arrow Keys - Advance frames

-

Spacebar - Play/Pause Animation

-

S - Save

-
-
-
+
+
+
+ +
+
+
+
Name
+ +
+
+
FPS
+ +
+
+
Looping
+ +
+
+
+
+
+
+
+ +
+

Origin

+
+
+
+
+
+

Drag images onto the page to upload them

+

Arrow Keys - Advance frames

+

Spacebar - Play/Pause Animation

+

S - Save

+
+
+
+
- +