diff --git a/app/canvas_handler.ts b/app/canvas_handler.ts index 0216006..afad4d6 100644 --- a/app/canvas_handler.ts +++ b/app/canvas_handler.ts @@ -25,10 +25,10 @@ export class CanvasHandler { this.imageElement = imageElement; this.orginInfo = originInfo; - this.ResizeCanvas(0, 0); + this.ResizeCanvas(256, 256); this.UpdateCanvasDataSize(); const canvasContext: CanvasRenderingContext2D = this.canvasImage.getContext('2d')!; - canvasContext.fillRect(0, 0, this.targetImageSize, this.targetImageSize); + canvasContext.clearRect(0, 0, this.targetImageSize, this.targetImageSize); canvasContext.imageSmoothingEnabled = false; } diff --git a/app/page.ts b/app/page.ts index 9aa9170..2677a2f 100644 --- a/app/page.ts +++ b/app/page.ts @@ -62,6 +62,13 @@ export class Page { widthRatio: 0 }; + const info = document.getElementById('info') as HTMLElement; + + const helpButton = document.getElementById('helpButton') as HTMLElement; + helpButton.addEventListener('click', () => { + info.classList.toggle('hidden'); + }); + this.outputMessage = document.getElementById('outputMessage') as HTMLElement; this.message = document.getElementById('message') as HTMLElement; @@ -309,7 +316,7 @@ export class Page { this.animationData.originY = null; this.animationData.frameRate = 30; this.animationData.loop = true; - this.animationData.frames = [{ filename: '' }]; + this.animationData.frames = [ { filename: '' } ]; // blank slate canvas data this.projectData.currentFrame = 0; diff --git a/app/stylesheets/main.scss b/app/stylesheets/main.scss index 3489382..030fcb2 100644 --- a/app/stylesheets/main.scss +++ b/app/stylesheets/main.scss @@ -27,6 +27,41 @@ div { font-family: "Arial", Helvetica, sans-serif; } +#helpButton { + display: block; + position: absolute; + right: 10px; + top: 10px; + border: 1px solid; + border-radius: 25px; + width: 25px; + height: 25px; + line-height: 25px; + text-align: center; +} + +.hidden { + display: none !important; +} + +#info { + display: block; + position: absolute; + right: 30px; + top: 10px; + width: 200px; + text-align: center; +} + +.instruction { + font-size: 12px; + margin: auto; + width: 80%; + padding: 8px; + text-align: center; + background-color: $secondary-bg-color; +} + .center { margin: auto; padding: 10px; @@ -95,7 +130,7 @@ input[type=number]::-webkit-outer-spin-button { } input[type='number'] { - -moz-appearance:textfield; + -moz-appearance: textfield; } #framerate { @@ -111,15 +146,6 @@ input[type='number'] { text-align: center; } -.instruction { - font-size: 12px; - margin: auto; - width: 50%; - padding: 8px; - text-align: center; - background-color: $secondary-bg-color; -} - #frameViewer { display: flex; flex-direction: row; diff --git a/dist/index.html b/dist/index.html index 9852989..f6aa813 100644 --- a/dist/index.html +++ b/dist/index.html @@ -8,11 +8,12 @@ +
?
- +
@@ -40,12 +41,12 @@
+
-
+