Going back to the canvas thing
This commit is contained in:
Lani Aung
+1
-1
@@ -11,7 +11,7 @@ declare global {
|
||||
}
|
||||
}
|
||||
|
||||
export default class Main {
|
||||
class Main {
|
||||
appBar: MDCTopAppBar
|
||||
linearProgress: MDCLinearProgress
|
||||
ripples: MDCRipple[] = []
|
||||
|
||||
+6
-5
@@ -7,13 +7,14 @@ export interface Playset {
|
||||
}
|
||||
|
||||
export interface Cel {
|
||||
readonly id: number
|
||||
readonly mark: number
|
||||
readonly fix: number
|
||||
readonly initialPositions: Coordinate[]
|
||||
readonly initialPositions: { [key: number]: Coordinate }
|
||||
readonly offset: Coordinate
|
||||
|
||||
currentPositions: Coordinate[]
|
||||
currentFix: number
|
||||
readonly image: string
|
||||
readonly zIndex: number
|
||||
readonly height: number
|
||||
readonly width: number
|
||||
}
|
||||
|
||||
export class Coordinate {
|
||||
|
||||
+44
-138
@@ -1,158 +1,64 @@
|
||||
import {Cel, Coordinate, Playset} from "./pto"
|
||||
import Builder from "./utility"
|
||||
|
||||
const cssClass = "active-set"
|
||||
import * as _ from "lodash"
|
||||
import {fabric} from "fabric"
|
||||
import {Cel, Playset} from "./pto"
|
||||
|
||||
export default class Tracker {
|
||||
set: number = 0
|
||||
setPalettes: number[] = []
|
||||
|
||||
private playset: Playset
|
||||
private menu: HTMLElement
|
||||
private playSpace: HTMLElement
|
||||
private maxFixById: { [key: number]: number } = {}
|
||||
private canvas: fabric.Canvas
|
||||
private states: string[]
|
||||
|
||||
constructor(playset: Playset, menu: HTMLElement, playSpace: HTMLElement) {
|
||||
this.playset = playset
|
||||
this.menu = menu
|
||||
this.playSpace = playSpace
|
||||
|
||||
this.addEvents()
|
||||
this.reset()
|
||||
this.setMenu()
|
||||
}
|
||||
|
||||
private static adjustPlacement(cel: Cel, set: number, movement: Coordinate): Coordinate {
|
||||
let x = cel.currentPositions[set].x + movement.x
|
||||
let y = cel.currentPositions[set].y + movement.y
|
||||
cel.currentPositions[set] = new Coordinate(x, y)
|
||||
|
||||
return Tracker.getCoordinate(cel, set)
|
||||
}
|
||||
|
||||
private static getCoordinate(cel: Cel, set: number): Coordinate {
|
||||
let position = cel.currentPositions[set]
|
||||
if (!position) return new Coordinate()
|
||||
|
||||
if (!cel.offset) return position
|
||||
|
||||
return new Coordinate(position.x + cel.offset.x, position.y + cel.offset.y)
|
||||
this.canvas = new fabric.Canvas(playSpace.id)
|
||||
this.playset.cels
|
||||
.sort((first: Cel, second: Cel) => {
|
||||
return first.zIndex
|
||||
})
|
||||
}
|
||||
|
||||
setPlayArea(set: number): void {
|
||||
this.set = set
|
||||
|
||||
this.menu.querySelectorAll("button").forEach(button => {
|
||||
button.classList.remove(cssClass)
|
||||
})
|
||||
this.menu.querySelector(`button[data-set="${set}"]`).classList.add(cssClass)
|
||||
|
||||
let elements = this.playSpace.querySelectorAll(".cel-image")
|
||||
this.playset.cels.forEach((cel, index) => {
|
||||
let element = elements[index] as HTMLDivElement
|
||||
element.style.visibility = "hidden"
|
||||
|
||||
if (cel.initialPositions[set] != null) {
|
||||
element.style.visibility = "visible"
|
||||
let position = Tracker.getCoordinate(cel, set)
|
||||
element.style.left = `${position.x}px`
|
||||
element.style.top = `${position.y}px`
|
||||
this.canvas.clear()
|
||||
|
||||
let groups: { [key: number]: Cel[] } = {}
|
||||
let groupImages: { [key: number]: fabric.Image[] } = {}
|
||||
this.playset.cels
|
||||
.filter(cel => cel.initialPositions[set])
|
||||
.forEach(cel => {
|
||||
if (!groups[cel.mark]) groups[cel.mark] = []
|
||||
groups[cel.mark].push(cel)
|
||||
})
|
||||
|
||||
let tempCanvas = this.canvas
|
||||
let doGrouping = function() {
|
||||
console.log("Executing groups?")
|
||||
for (let fabricGroupKey in groupImages) {
|
||||
tempCanvas.discardActiveObject()
|
||||
let selection = new fabric.ActiveSelection(groupImages[fabricGroupKey], { canvas: this.canvas })
|
||||
let group = selection.toGroup()
|
||||
tempCanvas.add(group)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
private addEvents() {
|
||||
let previousEvent: MouseEvent | null = null
|
||||
|
||||
let elements = this.playSpace.querySelectorAll(".cel-image")
|
||||
elements.forEach((element: HTMLElement) => {
|
||||
let mousemove = (move: MouseEvent) => {
|
||||
let movement = new Coordinate(move.clientX - previousEvent.clientX, move.clientY - previousEvent.clientY)
|
||||
previousEvent = move
|
||||
|
||||
let group = this.getGroup(element)
|
||||
group.forEach((item: HTMLElement) => {
|
||||
let index = parseInt(item.attributes.getNamedItem("data-index").value)
|
||||
let cel = this.playset.cels[index]
|
||||
|
||||
if (cel.currentFix == 0) {
|
||||
let position = Tracker.adjustPlacement(cel, this.set, movement)
|
||||
item.style.left = `${position.x}px`
|
||||
item.style.top = `${position.y}px`
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
element.addEventListener("mousedown", (down: MouseEvent) => {
|
||||
previousEvent = down
|
||||
this.getGroup(element).forEach(item => {
|
||||
let index = parseInt(item.attributes.getNamedItem("data-index").value)
|
||||
let cel = this.playset.cels[index]
|
||||
|
||||
if (cel.currentFix > 0) cel.currentFix--
|
||||
})
|
||||
|
||||
window.addEventListener("mousemove", mousemove)
|
||||
window.addEventListener("mouseup", () => {
|
||||
previousEvent = null
|
||||
window.removeEventListener("mousemove", mousemove)
|
||||
}
|
||||
|
||||
for (let key in groups) {
|
||||
groups[key].forEach(cel => {
|
||||
fabric.Image.fromURL(cel.image,image => {
|
||||
image.left = cel.initialPositions[set].x + cel.offset.x
|
||||
image.top = cel.initialPositions[set].y + cel.offset.y
|
||||
|
||||
if (!groupImages[key]) groupImages[key] = []
|
||||
groupImages[key].push(image)
|
||||
this.canvas.add(image)
|
||||
|
||||
console.log("Adding image")
|
||||
_.debounce(doGrouping, 250)
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
private getGroup(element: Element): NodeListOf<Element> {
|
||||
let id = element.attributes.getNamedItem("data-id").value
|
||||
return this.playSpace.querySelectorAll(`.cel-image[data-id="${id}"]`)
|
||||
}
|
||||
|
||||
private reset(): void {
|
||||
this.playSpace.querySelectorAll(".cel-image").forEach((element: HTMLElement) => {
|
||||
element.style.visibility = "hidden"
|
||||
element.style.left = "0"
|
||||
element.style.top = "0"
|
||||
})
|
||||
|
||||
this.playset.cels.forEach(cel => {
|
||||
if (!this.maxFixById[cel.id]) {
|
||||
this.maxFixById[cel.id] = 0
|
||||
}
|
||||
|
||||
if (this.maxFixById[cel.id] < cel.fix) {
|
||||
this.maxFixById[cel.id] = cel.fix
|
||||
}
|
||||
})
|
||||
|
||||
this.playset.cels.forEach(cel => {
|
||||
cel.currentFix = this.maxFixById[cel.id]
|
||||
cel.currentPositions = cel.initialPositions.map(position => position ? new Coordinate(position.x, position.y) : null)
|
||||
})
|
||||
}
|
||||
|
||||
private setMenu(): void {
|
||||
let reset = this.menu.querySelector(`button[data-rel="reset"]`)
|
||||
reset.addEventListener("click", () => {
|
||||
this.reset()
|
||||
this.setPlayArea(this.set)
|
||||
})
|
||||
|
||||
this.playset.sets.forEach((enabled, index) => {
|
||||
if (enabled) {
|
||||
let button = new Builder("li")
|
||||
.addChildren(new Builder("button")
|
||||
.addClass("mdc-button")
|
||||
.addAttributes({"data-set": index})
|
||||
.addChildren(
|
||||
new Builder("span").addClass("mdc-button__ripple"),
|
||||
new Builder("span").addClass("mdc-button__label").setText(index.toString())
|
||||
)).build()
|
||||
|
||||
button.addEventListener("click", () => {
|
||||
this.setPlayArea(index)
|
||||
})
|
||||
|
||||
this.menu.appendChild(button)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user