Old Wireframes

wireframes.js

import {bind, debounce} from 'lodash-decorators'
import paper from 'paper'

import {remap, odd} from '../util'
import Waypoints from './waypoints'

export default class Wireframes {
	total = 5
	size = 180
	gap = 8

	firstColumnTotal = 3
	secondColumnTotal = 2

	colors = [
		'#4646ee',
		'#ee4646',
		'#ffe54a',
		null
	]

	colorOrder = [
		0,
		3,
		1,
		0,
		3,
		2,
		3,
		0,
		1
	]

	blocks = []
	pieces = []

	x = 0
	y = 0
	zoom = 1
	positions = []
	startY = 0
	endY = 0

	mountedWireframes = false
	mountedProjects = false

	waypoints = new Waypoints

	mountWireframes(ref) {
		this.wireframesRef = ref
		this.mountedWireframes = true

		if (this.mountedProjects && !this.mounted) {
			this.completeMount()
		}
	}

	mountProjects(ref) {
		this.projectsRef = ref
		this.waypoints.mount(ref)
		this.mountedProjects = true

		if (this.mountedWireframes && !this.mounted) {
			this.completeMount()
		}
	}

	completeMount() {
		window.addEventListener('resize', this.handleResize)
		window.requestAnimationFrame(this.update)
		
		const canvas = document.createElement('canvas')
		canvas.setAttribute('id', 'wireframes-paper')
		this.wireframesRef.current.appendChild(canvas)

		paper.setup(canvas)
		this.setupGrid()
		this.setupPieces()
	}

	totalHeight(total) {
		return (this.size * total) + (this.gap * (total - 1))
	}

	setupGrid() {
		const start = paper.view.center.add([window.innerWidth/4, 0])	
		const totalColumnWidth = this.size * 1.5
		const firstColumnHeight = this.totalHeight(this.firstColumnTotal)
		const secondColumnHeight = this.totalHeight(this.secondColumnTotal)
		const firstColumnStartX = start.x - (totalColumnWidth/2)
		const secondColumnStartX = start.x + (this.size/2) - (totalColumnWidth/2)
		const firstColumnStartY = start.y - (firstColumnHeight/2)
		const secondColumnStartY = start.y - (secondColumnHeight/2)

		for (let i = 0;i < this.total;i++) {
			let x
			let y

			if (!odd(i)) {
				x = firstColumnStartX + (this.size/2)
				y = firstColumnStartY + ((i/2) * (this.size + this.gap)) + (this.size/2)
			} else {
				x = secondColumnStartX + (this.size/2)
				y = secondColumnStartY + (Math.floor(i/2) * (this.size + this.gap)) + (this.size/2)
			}

			this.blocks.push(new paper.Path.Rectangle({
				position: [x, y],
				size: this.size,
				strokeColor: 'black'
			}))
		}
	}

	setupPieces() {
		const intersects = []

		for (let i = 0;i < this.total;i++) {
			intersects[i] = new Array(this.total).fill(undefined)
		}

		for (let i = 0;i < this.total;i++) {
			const block = this.blocks[i]

			for (let _i = 0;_i < this.total;_i++) {
				const otherBlock = this.blocks[_i]
	
				if (block !== otherBlock && intersects[i][_i] === undefined) {
					intersects[_i][i] = intersects[i][_i] = block.intersects(otherBlock)
				}
			}
		}

		const blockClones = this.blocks.map(block => block.clone({insert: false}))

		for (let i = 0;i < this.total;i++) {
			let block = blockClones[i]

			for (let _i = 0;_i < this.total;_i++) {
				const otherBlock = blockClones[_i]

				if (intersects[i][_i]) {
					const divide = this.divide(block, otherBlock)

					if (block instanceof paper.Path) {
						block.remove()
					}

					otherBlock.remove()

					block = blockClones[i] = divide.pieces
					blockClones[_i] = divide.leftoverBlock
					intersects[_i][i] = undefined
				}
			}
		}

		for (let i = 0;i < blockClones.length;i++) {
			let block = blockClones[i]
	
			if (block instanceof Array) {
				for (let _i = 0;_i < block.length;_i++) {
					this.pieces.push(block[_i])
				}
			} else {
				this.pieces.push(block)
			}
		}

		this.pieces.sort((a, b) => (
			a.bounds.center.y - b.bounds.center.y
		))

		const backgroundLayer = new paper.Layer(this.pieces)
		backgroundLayer.sendToBack()

		const randomize = i => {
			this.pieces.forEach((piece, pieceI) => {
				piece.fillColor = this.colors[(this.colorOrder[pieceI] + i) % this.colors.length]
				piece.strokeColor = null
			})
		}

		randomize(Math.floor(Math.random() * this.colors.length))
	}

	divideBlocks(blockA, blockB, pieces = []) {
		const divideA = blockA.divide(blockB)

		if (divideA instanceof paper.CompoundPath) {
			for (let i = divideA.children.length;i--;) {
				const child = divideA.children[i]
				child.insertAbove(divideA)
				pieces.push(child)
			}
			divideA.remove()
		} else {
			pieces.push(divideA)
		}

		return pieces
	}

	divideGroup(children, divider, pieces = [], parent) {
		for (let i = children.length;i--;) {
			const child = children[i]

			if (parent) {
				child.insertAbove(parent)
			}

			if (child.intersects(divider)) {
				this.divideBlocks(child, divider, pieces)
			} else {
				pieces.push(child)
			}
		}
	}

	subtractGroupFromBlock(block, group) {
		let oldBlock
		let newBlock = block

		for (let i = group.length;i--;) {
			const child = group[i]

			if (child.intersects(block)) {
				newBlock = newBlock.subtract(child)

				if (oldBlock) {
					oldBlock.remove()
				}

				oldBlock = newBlock
			}
		}

		return newBlock
	}

	// Check what kind of divide method to use
	divide(blockA, blockB) {
		const pieces = []
		let leftoverBlock

		if (blockA instanceof paper.Path) {
			this.divideBlocks(blockA, blockB, pieces)
			leftoverBlock = blockB.subtract(blockA)
		} else if (blockA instanceof Array) {
			this.divideGroup(blockA, blockB, pieces)
			leftoverBlock = this.subtractGroupFromBlock(blockB, blockA)
		}
		
		return {
			pieces,
			leftoverBlock
		}
	}

	wireframePosition(i, child) {
		const wireframes = this.wireframesRef.current
		let x
		let y

		if (this.positions[i]) {
			x = this.positions[i].x
			y = this.positions[i].y
		} else {
			x = ((wireframes.offsetWidth/2) - (child.offsetLeft + child.offsetWidth/2))/wireframes.offsetWidth + 0.125
			y = ((wireframes.offsetHeight/2) - (child.offsetTop + child.offsetHeight/2))/wireframes.offsetHeight
			this.positions[i] = {x, y}
		}
		
		return {x, y}
	}

	updateWireframePositions() {
		const children = this.wireframesRef.current.children
		this.positions = []

		for (let i = 0; i < children.length; i++) {
			this.wireframePosition(i, children[i])
		}

		this.startY = this.positions[0].y
		this.endY = this.positions[this.positions.length - 1].y
	}

	@bind
	@debounce(100)
	handleResize() {
		// this.updateWireframePositions()
	}

	@bind update() {
		const wireframes = this.wireframesRef.current
		const child = wireframes.children[this.waypoints.currentIndex]

		if (child) {
			// const pos = this.wireframePosition(this.waypoints.currentIndex, child)
			this.x = 0
			this.y = remap(this.waypoints.fraction, 0, 1, this.startY, this.endY)
			this.zoom = 2
		} else {
			this.x = 0
			this.y = 0
			this.zoom = 1
		}

		// wireframes.style.transform = `
		// 	scale(${(this.zoom.toFixed(2))})
		// 	translate(
		// 		${(this.x * 100).toFixed(2)}%,
		// 		${(this.y * 100).toFixed(2)}%
		// 	)
		// `

		window.requestAnimationFrame(this.update)
	}
}