66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
/*
|
|
import * as _ from "lodash"
|
|
import {fabric} from "fabric"
|
|
import {Cel, Playset} from "./pto"
|
|
|
|
export default class Tracker {
|
|
set: number = 0
|
|
|
|
private playset: Playset
|
|
private menu: HTMLElement
|
|
private canvas: fabric.Canvas
|
|
private states: string[]
|
|
|
|
constructor(playset: Playset, menu: HTMLElement, playSpace: HTMLElement) {
|
|
this.playset = playset
|
|
this.menu = menu
|
|
|
|
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.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)
|
|
}
|
|
}
|
|
|
|
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)
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
*/ |