Stripping out material because meh. Also loading in cels at the right ordering
This commit is contained in:
Lani Aung
@@ -1,75 +0,0 @@
|
||||
import {MDCLinearProgress} from "@material/linear-progress"
|
||||
import {MDCRipple} from "@material/ripple"
|
||||
import {MDCTopAppBar} from "@material/top-app-bar"
|
||||
import {Playset} from "./pto"
|
||||
import Tracker from "./tracker"
|
||||
import Builder from "./utility"
|
||||
|
||||
declare global {
|
||||
interface Document {
|
||||
kisekae: Main
|
||||
}
|
||||
}
|
||||
|
||||
class Main {
|
||||
appBar: MDCTopAppBar
|
||||
linearProgress: MDCLinearProgress
|
||||
ripples: MDCRipple[] = []
|
||||
|
||||
constructor() {
|
||||
this.appBar = MDCTopAppBar.attachTo(document.querySelector(".mdc-top-app-bar"))
|
||||
|
||||
document.querySelectorAll(".mdc-button").forEach(button => {
|
||||
this.ripples.push(MDCRipple.attachTo(button))
|
||||
})
|
||||
|
||||
this.linearProgress = MDCLinearProgress.attachTo(document.querySelector(".mdc-linear-progress"))
|
||||
|
||||
this.init()
|
||||
}
|
||||
|
||||
public load(containerId: string, headerId: string, playset: Playset, set: number = 0): void {
|
||||
let container = document.getElementById(containerId)
|
||||
let menu = document.getElementById(headerId).querySelector("ul")
|
||||
|
||||
let tracker = new Tracker(playset, menu, container)
|
||||
tracker.setPlayArea(set)
|
||||
}
|
||||
|
||||
private init() {
|
||||
let main = document.querySelector("main")
|
||||
let directories = main.querySelector("ul")
|
||||
|
||||
if (!directories) return
|
||||
|
||||
let links = directories.querySelectorAll("a")
|
||||
|
||||
links.forEach(link => {
|
||||
link.addEventListener("click", () => {
|
||||
this.linearProgress.determinate = false
|
||||
this.linearProgress.open()
|
||||
|
||||
let directory = link.attributes.getNamedItem("data-directory")
|
||||
let form = new Builder("form")
|
||||
.addAttributes({"method": "post", "action": "/Home/Select"})
|
||||
.addChildren(
|
||||
new Builder("input").addAttributes({
|
||||
"type": "hidden",
|
||||
"name": "directory",
|
||||
"value": directory.value
|
||||
}),
|
||||
new Builder("input").addAttributes({
|
||||
"type": "hidden",
|
||||
"name": "file",
|
||||
"value": link.textContent
|
||||
})
|
||||
).build() as HTMLFormElement
|
||||
|
||||
link.appendChild(form)
|
||||
form.submit()
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
document.kisekae = new Main()
|
||||
@@ -0,0 +1,21 @@
|
||||
import {fabric} from "fabric";
|
||||
|
||||
export interface Playset {
|
||||
readonly borderColor: string;
|
||||
readonly name: string;
|
||||
readonly height: number;
|
||||
readonly width: number;
|
||||
readonly cels: Cel[];
|
||||
readonly sets: boolean[];
|
||||
}
|
||||
|
||||
export interface Cel {
|
||||
readonly mark: number;
|
||||
readonly fix: number;
|
||||
readonly initialPositions: { [key: number]: fabric.Point };
|
||||
readonly offset: fabric.Point;
|
||||
readonly image: string;
|
||||
readonly zIndex: number;
|
||||
readonly height: number;
|
||||
readonly width: number;
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import * as $ from "jquery";
|
||||
import {fabric} from "fabric";
|
||||
import {Playset} from "./models";
|
||||
|
||||
export class PlaySpace {
|
||||
private model: Playset;
|
||||
private canvas: fabric.Canvas;
|
||||
|
||||
constructor(model: Playset) {
|
||||
const container = $(".container");
|
||||
this.canvas = new fabric.Canvas("play_space");
|
||||
this.canvas.setHeight(container.height()).setWidth(container.width());
|
||||
this.model = model;
|
||||
this.selectSet();
|
||||
|
||||
$(".set-link").on("click", event => {
|
||||
const set = parseInt($(event.target).attr("data-set"));
|
||||
this.selectSet(set);
|
||||
});
|
||||
|
||||
this.canvas.setZoom(this.canvas.width / model.width);
|
||||
}
|
||||
|
||||
async selectSet(set?: number) {
|
||||
if (!set) {
|
||||
set = this.model.sets.indexOf(true);
|
||||
}
|
||||
|
||||
$(".set-link").removeClass("active");
|
||||
$(`.set-link[data-set=${set}]`).addClass("active");
|
||||
|
||||
this.canvas.clear();
|
||||
if (this.model.borderColor) this.canvas.backgroundColor = this.model.borderColor;
|
||||
|
||||
const cels = this.model.cels.filter(x => x.initialPositions[set]);
|
||||
for (let cel of cels) {
|
||||
const image = await new Promise<fabric.Image>(resolve => {
|
||||
fabric.Image.fromURL(cel.image, image => resolve(image));
|
||||
});
|
||||
|
||||
image.set({
|
||||
left: cel.initialPositions[set].x + cel.offset.x,
|
||||
top: cel.initialPositions[set].y + cel.offset.y,
|
||||
selectable: cel.fix == 0
|
||||
});
|
||||
this.canvas.add(image);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
playSet: Playset;
|
||||
}
|
||||
}
|
||||
|
||||
$(() => {
|
||||
new PlaySpace(window.playSet);
|
||||
});
|
||||
@@ -1,28 +0,0 @@
|
||||
export interface Playset {
|
||||
readonly name: string
|
||||
readonly height: number
|
||||
readonly width: number
|
||||
readonly cels: Cel[]
|
||||
readonly sets: boolean[]
|
||||
}
|
||||
|
||||
export interface Cel {
|
||||
readonly mark: number
|
||||
readonly fix: number
|
||||
readonly initialPositions: { [key: number]: Coordinate }
|
||||
readonly offset: Coordinate
|
||||
readonly image: string
|
||||
readonly zIndex: number
|
||||
readonly height: number
|
||||
readonly width: number
|
||||
}
|
||||
|
||||
export class Coordinate {
|
||||
readonly x: number
|
||||
readonly y: number
|
||||
|
||||
constructor(x: number = 0, y: number = 0) {
|
||||
this.x = x
|
||||
this.y = y
|
||||
}
|
||||
}
|
||||
+3
-1
@@ -1,3 +1,4 @@
|
||||
/*
|
||||
import * as _ from "lodash"
|
||||
import {fabric} from "fabric"
|
||||
import {Cel, Playset} from "./pto"
|
||||
@@ -61,4 +62,5 @@ export default class Tracker {
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
@@ -1,58 +0,0 @@
|
||||
import {MDCChipSet} from "@material/chips"
|
||||
import Builder from "./utility"
|
||||
|
||||
class Uploader {
|
||||
chips: MDCChipSet
|
||||
|
||||
constructor() {
|
||||
this.init()
|
||||
}
|
||||
|
||||
init() {
|
||||
let upload = document.getElementById("lzh_upload") as HTMLInputElement
|
||||
let container = document.querySelector(".mdc-evolution-chip-set__chips")
|
||||
|
||||
document.addEventListener("MDCChipSet:interaction", (event: Event) => {
|
||||
console.log(event)
|
||||
})
|
||||
|
||||
document.addEventListener("MDCChipSet:selection", (event: Event) => {
|
||||
console.log(event)
|
||||
})
|
||||
|
||||
upload.addEventListener("change", (event: InputEvent) => {
|
||||
while (container.firstChild) container.removeChild(container.firstChild)
|
||||
|
||||
for (let index = 0; index < upload.files.length; index++) {
|
||||
this.addChip(container, index, upload.files.item(index))
|
||||
}
|
||||
|
||||
let element = document.querySelector(".mdc-evolution-chip-set")
|
||||
this.chips = MDCChipSet.attachTo(element)
|
||||
})
|
||||
}
|
||||
|
||||
addChip(container: Element, index: number, file: File) {
|
||||
const chipClass = "mdc-evolution-chip"
|
||||
|
||||
let textButton = Builder.element("button", {"type":"button","tabindex":0}, `${chipClass}__action`, `${chipClass}__action--primary`)
|
||||
.addChildren(
|
||||
Builder.element("span", {}, `${chipClass}__ripple`, `${chipClass}__ripple--primary`),
|
||||
Builder.element("span", {}, `${chipClass}__text-label`).setText(file.name))
|
||||
let textWrapper = Builder.element("span", {"role":"gridcell"}, `${chipClass}__cell`, `${chipClass}__cell--primary`)
|
||||
.addChildren(textButton)
|
||||
|
||||
let trailingButton = Builder.element("button", {"type":"button","tabindex":-1,"data-mdc-deletable":"true","aria-label":`Remove ${file.name}`})
|
||||
.addChildren(
|
||||
Builder.element("span", {}, `${chipClass}__ripple`,`${chipClass}__ripple--trailing`),
|
||||
Builder.element("span", {}, `${chipClass}__icon`,`${chipClass}__icon--trailing`).setText("close"))
|
||||
let trailingWrapper = Builder.element("span", {"role":"gridcell"}, `${chipClass}__cell`, `${chipClass}__cell--trailing`)
|
||||
.addChildren(trailingButton)
|
||||
|
||||
let chip = Builder.element("span", {"role":"row","id":`chip_${index}`}, chipClass).addChildren(textWrapper, trailingWrapper).build()
|
||||
|
||||
container.appendChild(chip)
|
||||
}
|
||||
}
|
||||
|
||||
new Uploader()
|
||||
@@ -1,53 +0,0 @@
|
||||
export default class Builder {
|
||||
element: HTMLElement
|
||||
|
||||
constructor(tag: string) {
|
||||
this.element = document.createElement(tag)
|
||||
}
|
||||
|
||||
addAttributes(attributes: { [key: string]: string | number }): Builder {
|
||||
for (let key of Object.keys(attributes)) {
|
||||
this.addAttribute(key, attributes[key])
|
||||
}
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
addAttribute(name: string, value: string | number): Builder {
|
||||
let attribute = document.createAttribute(name)
|
||||
attribute.value = value.toString()
|
||||
|
||||
this.element.attributes.setNamedItem(attribute)
|
||||
return this
|
||||
}
|
||||
|
||||
addClass(...classes: string[]): Builder {
|
||||
this.element.classList.add(...classes)
|
||||
return this
|
||||
}
|
||||
|
||||
addChildren(...children: HTMLElement[] | Builder[]): Builder {
|
||||
children.forEach(child => {
|
||||
if (child instanceof HTMLElement) {
|
||||
this.element.appendChild(child)
|
||||
} else {
|
||||
this.element.appendChild(child.build())
|
||||
}
|
||||
})
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
setText(text: string): Builder {
|
||||
this.element.textContent = text
|
||||
return this
|
||||
}
|
||||
|
||||
build(): HTMLElement {
|
||||
return this.element
|
||||
}
|
||||
|
||||
static element(tag: string, attributes: { [key: string]: string | number }, ...classes: string[]): Builder {
|
||||
return new Builder(tag).addAttributes(attributes).addClass(...classes)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user