Clean up JSON Exporter data

Author: SnaveSutit

exporters/jsonExporter/jsonExporter.ts

@@ -7,9 +7,6 @@ interface ISerealizedAnimationNode {
 	uuid: string
 	node: undefined
 	matrix: number[]
-	pos: [number, number, number]
-	rot: [number, number, number, number]
-	scale: [number, number, number]
 	interpolation?: 'instant' | 'default'
 }
 
@@ -38,33 +35,30 @@ function serializeOutlinerNode(node: AnimatedJava.AnyRenderedNode) {
 			} = node
 			return {
 				type,
-				parent,
 				name,
 				uuid: outlinerNode.uuid,
 				customModelData,
 				resourceLocation,
-				scale,
-				modelPath,
 			}
 		}
 		case 'camera': {
-			const { type, name, parent, teleported_entity_type, node: outlinerNode } = node
+			const { type, name, parent, entity_type, nbt, node: outlinerNode } = node
 			return {
 				type,
-				parent,
 				name,
 				uuid: outlinerNode.uuid,
-				teleported_entity_type,
+				entity_type,
+				nbt,
 			}
 		}
 		case 'locator': {
-			const { type, name, parent, teleported_entity_type, node: outlinerNode } = node
+			const { type, name, parent, entity_type, nbt, node: outlinerNode } = node
 			return {
 				type,
-				parent,
 				name,
 				uuid: outlinerNode.uuid,
-				teleported_entity_type,
+				entity_type,
+				nbt,
 			}
 		}
 	}
@@ -78,9 +72,6 @@ function serializeAnimationNode(node: AnimatedJava.IAnimationNode): ISerealizedA
 		uuid,
 		node: undefined,
 		matrix: matrix.toArray(),
-		pos: [pos.x, pos.y, pos.z],
-		rot: [rot.x, rot.y, rot.z, rot.w],
-		scale: [scale.x, scale.y, scale.z],
 		interpolation,
 	}
 }
@@ -103,7 +94,6 @@ interface RawExportData {
 	exporter_settings: Record<string, any>
 	rig: {
 		default_pose: ISerealizedAnimationNode[]
-		node_structure: AnimatedJava.INodeStructure
 		node_map: any
 	}
 	animations: Record<string, ISerealizedAnimation>
@@ -166,7 +156,6 @@ export function loadExporter() {
 				exporter_settings: {},
 				rig: {
 					default_pose: exportOptions.rig.defaultPose.map(serializeAnimationNode),
-					node_structure: exportOptions.rig.nodeStructure,
 					node_map: {},
 				},
 				animations: {},

src/minecraft/jsonText.ts

@@ -41,60 +41,59 @@ const COLOR_MAP: Record<string, string> = {
 	black: '#000000',
 }
 
-type JsonTextComponent =
-	| string
-	| JsonTextArray
-	| {
-			text?: string
-			font?: string
-			color?: JsonTextColor
-			extra?: JsonTextArray
-			bold?: true | false
-			italic?: true | false
-			underlined?: true | false
-			strikethrough?: true | false
-			obfuscated?: true | false
-			insertion?: string
-			clickEvent?: {
-				action:
-					| 'open_url'
-					| 'open_file'
-					| 'run_command'
-					| 'suggest_command'
-					| 'change_page'
-					| 'copy_to_clipboard'
-				value: string
-			}
-			hoverEvent?: {
-				action: 'show_text' | 'show_item' | 'show_entity'
-				contents:
-					| JsonTextComponent
-					| {
-							type: string
-							id: string
-							name?: string
-					  }
-					| {
-							id: string
-							count?: number
-							tag?: string
-					  }
-			}
-			tl?: string
-			with?: JsonTextArray
-			score?: {
-				name: string
-				objective: string
-				value?: number
-			}
-			selector?: string
-			separator?: string
-			keybind?: string
-			nbt?: string
-			block?: string
-			entity?: string
-			storage?: string
-	  }
+type JsonTextObject = {
+	text?: string
+	font?: string
+	color?: JsonTextColor
+	extra?: JsonTextArray
+	bold?: true | false
+	italic?: true | false
+	underlined?: true | false
+	strikethrough?: true | false
+	obfuscated?: true | false
+	insertion?: string
+	clickEvent?: {
+		action:
+			| 'open_url'
+			| 'open_file'
+			| 'run_command'
+			| 'suggest_command'
+			| 'change_page'
+			| 'copy_to_clipboard'
+		value: string
+	}
+	hoverEvent?: {
+		action: 'show_text' | 'show_item' | 'show_entity'
+		contents:
+			| JsonTextComponent
+			| {
+					type: string
+					id: string
+					name?: string
+			  }
+			| {
+					id: string
+					count?: number
+					tag?: string
+			  }
+	}
+	tl?: string
+	with?: JsonTextArray
+	score?: {
+		name: string
+		objective: string
+		value?: number
+	}
+	selector?: string
+	separator?: string
+	keybind?: string
+	nbt?: string
+	block?: string
+	entity?: string
+	storage?: string
+}
+
+type JsonTextComponent = string | JsonTextArray | JsonTextObject
 
 type JsonTextArray = JsonTextComponent[] | string[]
 
@@ -112,30 +111,136 @@ export class JsonText {
 		return this.text
 	}
 
-	renderToCanvas(): CanvasFrame {
-		const canvas = new CanvasFrame(1, 1)
+	renderToCanvas(): TextCanvas {
+		const textCanvas = new TextCanvas()
+
+		this._renderToCanvas(this.text, textCanvas)
+		// textCanvas.canvas.width = textCanvas.width
+		// textCanvas.canvas.height = textCanvas.height
+		textCanvas.render()
+
+		return textCanvas
+	}
+
+	private _renderToCanvas(comp: JsonTextComponent, textCanvas: TextCanvas) {
+		if (comp instanceof Array) {
+			console.log('array', comp)
+			comp.forEach(c => this._renderToCanvas(c, textCanvas))
+		} else if (typeof comp === 'string') {
+			console.log('string', comp)
+		} else {
+			console.log('obj', comp)
+			this._renderObj(comp, textCanvas)
+		}
+	}
+
+	private _renderObj(obj: JsonTextObject, textCanvas: TextCanvas) {
+		const writeOptions: Record<string, any> = {}
+		// canvas.ctx.font = FONT
+		if (obj.color)
+			writeOptions.fillStyle = obj.color[0] === '#' ? obj.color : COLOR_MAP[obj.color]
+
+		if (obj.bold) writeOptions.font = 'bold ' + FONT
+		if (obj.italic) writeOptions.font = 'italic ' + FONT
+		// if (obj.underlined) canvas.canvas.style.textDecoration = 'underline'
+		// if (obj.strikethrough) canvas.canvas.style.textDecoration = 'line-through'
+		// if (obj.obfuscated) canvas.canvas.style.textDecoration = 'blink'
+
+		if (obj.text) {
+			textCanvas.write(obj.text, writeOptions)
+		} else if (obj.score) {
+			textCanvas.write(
+				obj.score.value === undefined
+					? `(${obj.score.name} ${obj.score.objective})`
+					: obj.score.value.toString(),
+				writeOptions
+			)
+		} else if (obj.nbt) {
+			let text = `${obj.nbt}`
+			if (obj.block) text += ` ${obj.block}`
+			else if (obj.entity) text += ` ${obj.entity}`
+			else if (obj.storage) text += ` ${obj.storage}`
+			textCanvas.write(text, writeOptions)
+		} else if (obj.selector) {
+			textCanvas.write(`(${obj.selector})`, writeOptions)
+		}
+	}
+}
+
+interface TextBit {
+	canvas: CanvasFrame
+	posX: number
+	posY: number
+}
+
+class TextCanvas {
+	canvasFrame: CanvasFrame
+	canvas: HTMLCanvasElement
+	ctx: CanvasRenderingContext2D
+
+	private textBits: TextBit[] = []
+
+	currentX = 0
+	currentY = 0
+
+	constructor() {
+		this.canvasFrame = new CanvasFrame(1, 1)
+		this.canvas = this.canvasFrame.canvas
+		this.ctx = this.canvasFrame.ctx
+	}
+
+	get width() {
+		return this.canvas.width
+	}
+
+	set width(width: number) {
+		this.canvas.width = width
+	}
+
+	get height() {
+		return this.canvas.height
+	}
+
+	set height(height: number) {
+		this.canvas.height = height
+	}
+
+	write(text: string, writeOptions: Record<string, any> = {}) {
+		const measure = new CanvasFrame(1, 1)
+		measure.ctx.font = FONT
+		measure.ctx.filter = PIXEL_FILTER
+		const metrics = measure.ctx.measureText(text)
+		const width = Math.ceil(metrics.width)
+		const height = Math.ceil(metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent)
+
+		const canvas = new CanvasFrame(width, height)
 		canvas.ctx.font = FONT
 		canvas.ctx.filter = PIXEL_FILTER
+		canvas.ctx.fillStyle = '#ffffff'
+		canvas.ctx.textBaseline = 'top'
 
-		function recurse(text: JsonTextComponent) {
-			if (text instanceof Array) {
-				text.forEach(recurse)
-			} else if (typeof text === 'string') {
-				//
-			} else {
-				canvas.ctx.fillStyle = text.color
-					? text.color[0] === '#'
-						? text.color
-						: COLOR_MAP[text.color]
-					: '#FFFFFF'
-			}
-		}
+		Object.assign(canvas.ctx, writeOptions)
+
+		canvas.ctx.fillText(text, 0, 0)
 
-		recurse(this.text)
+		this.textBits.push({ canvas, posX: this.currentX, posY: this.currentY })
 
-		// canvas.canvas.width = 0
-		// canvas.canvas.height = 0
+		this.currentX += width
+		// this.currentY += height
+	}
+
+	render() {
+		console.log('rendering', this.textBits)
+
+		const totalWidth = this.textBits.reduce((acc, bit) => acc + bit.canvas.width, 0)
+		const totalHeight = this.textBits.reduce((acc, bit) => Math.max(acc, bit.canvas.height), 0)
 
-		return canvas
+		this.width = totalWidth
+		this.height = totalHeight
+
+		for (const bit of this.textBits) {
+			console.log('drawing', bit)
+			this.ctx.drawImage(bit.canvas.canvas, bit.posX, bit.posY)
+		}
 	}
 }