diff --git a/app.go b/app.go index ba2eaab..a6e066e 100644 --- a/app.go +++ b/app.go @@ -31,11 +31,11 @@ func (a *App) Greet(name string) string { return fmt.Sprintf("Hello %s, It's show time!", name) } -func (a *App) Load(name string) *data.StackistFile { - return &data.StackistFile{} +func (a *App) Load(name string) *data.StackistFileV1 { + return &data.StackistFileV1{} } -func (a *App) Save(name string, file *data.StackistFile) error { +func (a *App) Save(name string, file *data.StackistFileV1) error { b, err := json.Marshal(file) if err != nil { return err diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte index 6408852..2a82cac 100644 --- a/frontend/src/App.svelte +++ b/frontend/src/App.svelte @@ -26,8 +26,10 @@ let showImport: boolean = false let importValid: boolean = false let importImage: HTMLImageElement = null - let importFile: data.StackistFile = null + let importFile: data.StackistFileV1 = null let importFilepath: string = '' + + let showPreview: boolean = false let refresh = {} @@ -53,7 +55,7 @@
- +
File
@@ -62,6 +64,10 @@ + +
Windows
+ showPreview = true}/> +
@@ -86,12 +92,15 @@
- - - + {#if showPreview} + + + + {/if}
@@ -111,6 +120,15 @@ display: grid; grid-template-rows: auto minmax(0, 1fr); } + menu { + display: flex; + flex-direction: row; + justify-content: flex-start; + } + :global(menu > button) { + width: 4rem !important; + color: var(--cds-text-02, #c6c6c6); + } .content { display: grid; grid-template-columns: 1fr 4fr; diff --git a/frontend/src/components/FloatingPanel.svelte b/frontend/src/components/FloatingPanel.svelte index b9ead46..e6ebc26 100644 --- a/frontend/src/components/FloatingPanel.svelte +++ b/frontend/src/components/FloatingPanel.svelte @@ -5,18 +5,62 @@ ModalFooter, } from "carbon-components-svelte" + import { + Close + } from 'carbon-icons-svelte' + export let title: string = "Untitled" export let label: string = "Untitled" export let noPadding: boolean = false + + export let open: boolean = false + + function drag(node) { + let dragging: boolean = false + let x: number = 0 + let y: number = 0 + node.addEventListener('mousedown', start) + window.addEventListener('mouseup', stop) + window.addEventListener('mouseleave', stop) + window.addEventListener('mousemove', move) + + function start(e: MouseEvent) { + dragging = true + x = e.clientX + y = e.clientY + node.style.cursor = 'grabbing' + document.body.style.cursor = 'grabbing' + document.body.style.userSelect = 'none' + } + function stop(e: MouseEvent) { + dragging = false + node.style.cursor = 'auto' + document.body.style.cursor = 'auto' + document.body.style.userSelect = 'auto' + } + function move(e: MouseEvent) { + if (!dragging) return + let dx = e.clientX - x + let dy = e.clientY - y + x = e.clientX + y = e.clientY + node.style.left = parseInt(node.style.left) + dx + 'px' + node.style.top = parseInt(node.style.top) + dy + 'px' + } + + } - +

{label}

+
-
+
e.stopPropagation()}>
@@ -24,16 +68,28 @@ \ No newline at end of file diff --git a/frontend/src/sections/Importer.svelte b/frontend/src/sections/Importer.svelte index 7c1dfa0..48b2db2 100644 --- a/frontend/src/sections/Importer.svelte +++ b/frontend/src/sections/Importer.svelte @@ -28,7 +28,7 @@ let width: number = 16 let height: number = 16 let rowBasedFrames: boolean = true - export let file: data.StackistFile + export let file: data.StackistFileV1 export let filepath: string = '' export let img: HTMLImageElement let path: string = '' @@ -98,15 +98,15 @@ } function remakeFile() { - file = data.StackistFile.createFrom({ + file = data.StackistFileV1.createFrom({ + width: width, + height: height, groups: {} }) let cx = 0 let cy = 0 for (let gi = 0; gi < groups; gi++) { let group: data.Group = data.Group.createFrom({ - width: width, - height: height, animations: {}, }) for (let ai = 0; ai < animations; ai++) { diff --git a/frontend/src/sections/StackPreview.svelte b/frontend/src/sections/StackPreview.svelte index 6cd6074..88e48e7 100644 --- a/frontend/src/sections/StackPreview.svelte +++ b/frontend/src/sections/StackPreview.svelte @@ -7,6 +7,7 @@ let shownFiles: Record = {} let rotation: number = 0 + let layerDistance: number = 1 let canvas: HTMLCanvasElement function draw() { @@ -37,16 +38,16 @@ ctx.save() ctx.translate(x, y) ctx.rotate(rotation * Math.PI / 180) - ctx.drawImage(file.image, layer.x, layer.y, group.width, group.height, -group.width/2, -group.height/2, group.width, group.height) + ctx.drawImage(file.image, layer.x, layer.y, file.data.width, file.data.height, -file.data.width/2, -file.data.height/2, file.data.width, file.data.height) ctx.restore() - y -= 1 + y -= 1 * layerDistance } done = true if (done) break } if (done) break } - x += group.width + x += file.data.width y = canvas.height/2 if (done) break } @@ -74,7 +75,8 @@ - + + diff --git a/frontend/src/types/file.ts b/frontend/src/types/file.ts index 36730fd..b69dc31 100644 --- a/frontend/src/types/file.ts +++ b/frontend/src/types/file.ts @@ -4,5 +4,5 @@ export class LoadedFile { filepath: string title: string image: HTMLImageElement - data: data.StackistFile + data: data.StackistFileV1 } \ No newline at end of file diff --git a/frontend/wailsjs/go/main/App.d.ts b/frontend/wailsjs/go/main/App.d.ts index 1599d18..9e8883c 100644 --- a/frontend/wailsjs/go/main/App.d.ts +++ b/frontend/wailsjs/go/main/App.d.ts @@ -6,10 +6,10 @@ export function GetFilePath():Promise; export function Greet(arg1:string):Promise; -export function Load(arg1:string):Promise; +export function Load(arg1:string):Promise; export function OpenFileBytes(arg1:string):Promise>; export function ReadBytes(arg1:string):Promise>; -export function Save(arg1:string,arg2:data.StackistFile):Promise; +export function Save(arg1:string,arg2:data.StackistFileV1):Promise; diff --git a/frontend/wailsjs/go/models.ts b/frontend/wailsjs/go/models.ts index f48d321..f94e83c 100644 --- a/frontend/wailsjs/go/models.ts +++ b/frontend/wailsjs/go/models.ts @@ -80,8 +80,6 @@ export namespace data { } export class Group { - width: number; - height: number; animations: {[key: string]: Animation}; static createFrom(source: any = {}) { @@ -90,8 +88,6 @@ export namespace data { constructor(source: any = {}) { if ('string' === typeof source) source = JSON.parse(source); - this.width = source["width"]; - this.height = source["height"]; this.animations = this.convertValues(source["animations"], Animation, true); } @@ -114,16 +110,22 @@ export namespace data { } } - export class StackistFile { + export class StackistFileV1 { + version: string; groups: {[key: string]: Group}; + width: number; + height: number; static createFrom(source: any = {}) { - return new StackistFile(source); + return new StackistFileV1(source); } constructor(source: any = {}) { if ('string' === typeof source) source = JSON.parse(source); + this.version = source["version"]; this.groups = this.convertValues(source["groups"], Group, true); + this.width = source["width"]; + this.height = source["height"]; } convertValues(a: any, classs: any, asMap: boolean = false): any { diff --git a/pkg/data/file.go b/pkg/data/file.go index 9f5c5a5..881beaf 100644 --- a/pkg/data/file.go +++ b/pkg/data/file.go @@ -1,12 +1,13 @@ package data -type StackistFile struct { - Groups map[string]Group `json:"groups"` +type StackistFileV1 struct { + Version string `json:"version"` // The version of the file format. + Groups map[string]Group `json:"groups"` + Width int `json:"width"` + Height int `json:"height"` } type Group struct { - Width int `json:"width"` - Height int `json:"height"` Animations map[string]Animation `json:"animations"` }