Archive commit

src/ts/components/tools/tools-sheet/tools-sheet.pug

@@ -0,0 +1,50 @@
+.form-inline
+	.form-group
+		a.btn.btn-default(routerLink="/")
+			fa-icon([icon]="homeIcon")
+
+	.form-group
+		label.ml-2 sheets:
+		.btn-group.dropdown.ml-1(dropdown)
+			button.btn.btn-default.dropdown-toggle(dropdownToggle style="width: 200px;")
+				| {{sheet.name}}
+				fa-icon.ml-1(*ngIf="sheet.file" [icon]="imageIcon")
+			.dropdown-menu(*dropdownMenu)
+				div(*ngFor="let s of sheets")
+					.dropdown-divider(*ngIf="s.spacer")
+					a.dropdown-item((click)="setSheet(s)" *ngIf="!s.spacer")
+						| {{s.name}}
+						fa-icon.ml-1(*ngIf="s.file" [icon]="imageIcon")
+
+	.form-group
+		label.ml-1
+		scale-picker([(scale)]="scale" (scaleChange)="redraw()")
+
+	.form-group
+		button.btn.btn-default.ml-1((click)="redraw()")
+			fa-icon([icon]="syncIcon" [fixedWidth]="true")
+
+	.form-group
+		label.ml-2 rows:
+		input.form-control.ml-1(type="number" [(ngModel)]="rows" (input)="redraw()" style="width: 70px;")
+
+	.form-group
+		label.ml-2 cols:
+		input.form-control.ml-1(type="number" [(ngModel)]="cols" (input)="redraw()" style="width: 70px;")
+
+	.form-group
+		label.ml-2 pattern:
+		input.form-control.ml-1(type="number" [(ngModel)]="pattern" (input)="redraw()" style="width: 70px;")
+
+	.form-group
+		button.btn.btn-default.ml-2((click)="png()") PNG
+		button.btn.btn-default.ml-1((click)="psd()") PSD
+		button.btn.btn-default.ml-1((click)="allPSDs()") All PSDs
+		button.btn.btn-danger.ml-1(*ngIf="sheet.alert" disabled) {{sheet.alert}}
+
+.tools-sheet-offsets(#offsetsDiv [hidden]="!sheet.offsets")
+	tools-offset(
+		*ngFor="let o of sheet.offsets" [offset]="o" (change)="redraw()" [style.width.px]="sheet.offset * scale")
+
+.tools-sheet-scroll([class.with-offsets]="sheet.offsets" (scroll)="offsetsDiv.scrollLeft = $event.target.scrollLeft")
+	canvas(#canvas)

src/ts/components/tools/tools-sheet/tools-sheet.scss

@@ -0,0 +1,30 @@
+.tools-sheet-offsets {
+	position: relative;
+	height: 70px;
+	overflow: hidden;
+	padding-right: 100px;
+	white-space: nowrap;
+
+	> tools-offset {
+		display: inline-block;
+		text-align: center;
+	}
+}
+
+.tools-sheet-scroll {
+	overflow: auto;
+	width: 100%;
+	position: absolute;
+	left: 0;
+	top: 45px;
+	right: 0;
+	bottom: 0;
+
+	&.with-offsets {
+		top: 45px + 70px;
+	}
+}
+
+.form-inline {
+	padding: 5px;
+}

src/ts/components/tools/tools-sheet/tools-sheet.ts

@@ -0,0 +1,76 @@
+import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
+import { compact } from 'lodash';
+import { getCols, getRows, createPsd, savePsd, drawPsd } from '../sheetExport';
+import { loadAndInitSpriteSheets } from '../../../client/spriteUtils';
+import { saveCanvas } from '../../../client/canvasUtils';
+import { faHome, faSync, faFileImage } from '../../../client/icons';
+import { StorageService } from '../../services/storageService';
+import { at } from '../../../common/utils';
+import { sheets, Sheet } from '../../../common/sheets';
+
+@Component({
+	selector: 'tools-sheet',
+	templateUrl: 'tools-sheet.pug',
+	styleUrls: ['tools-sheet.scss'],
+})
+export class ToolsSheet implements OnInit {
+	readonly homeIcon = faHome;
+	readonly syncIcon = faSync;
+	readonly imageIcon = faFileImage;
+	@ViewChild('canvas', { static: true }) canvas!: ElementRef;
+	sheets = sheets;
+	sheet = sheets[0] as Sheet;
+	scale = 2;
+	rows = 1;
+	cols = 1;
+	pattern = -1;
+	constructor(private storage: StorageService) {
+		const sheet = at(this.sheets, storage.getInt('tools-sheet-sheet'))!;
+
+		if ('name' in sheet) {
+			this.setSheet(sheet);
+		}
+	}
+	ngOnInit() {
+		loadAndInitSpriteSheets()
+			.then(() => this.redraw());
+	}
+	setSheet(sheet: Sheet) {
+		sheet = sheet.spacer ? this.sheets[0] as Sheet : sheet;
+		this.sheet = sheet;
+		this.cols = getCols(sheet);
+		this.rows = getRows(sheet);
+		this.redraw();
+		this.storage.setInt('tools-sheet-sheet', this.sheets.indexOf(sheet));
+	}
+	png() {
+		this.redraw();
+		saveCanvas(this.canvas.nativeElement, 'sheet.png');
+	}
+	psd() {
+		const psd = createPsd(this.sheet, this.rows, this.cols);
+		psd.canvas = drawPsd(psd, 1);
+		savePsd(psd, `${this.sheet.file}.psd`);
+	}
+	allPSDs() {
+		this.sheets
+			.filter(x => 'name' in x && !!x.file)
+			.map(x => x as Sheet)
+			.forEach(sheet => {
+				const rows = getRows(sheet);
+				const cols = getCols(sheet);
+				const psd = createPsd(sheet, rows, cols);
+				psd.canvas = drawPsd(psd, 1);
+				savePsd(psd, `${sheet.file}.psd`);
+			});
+	}
+	redraw() {
+		if (this.canvas) {
+			const psd = createPsd(this.sheet, this.rows, this.cols);
+			const layers = compact(psd.children!.map(c => c.children));
+			const patterns = compact(layers.map(xs => xs.find(x => x.name === `pattern ${this.pattern}`)));
+			patterns.forEach(x => x.hidden = false);
+			drawPsd(psd, this.scale, this.canvas.nativeElement);
+		}
+	}
+}