rk-backend/src/graphics/lib/drawGroup.ts

import { DrawContainer, DrawElement } from "./draw"





interface PropDimGroup {
	x?: number,
	y?: number,
	rotate?: number
}


interface SvgOptionsGroup {
	rotate_winkel?: number
	rotate_posX?: number
	rotate_posY?: number
	translate_x?: number
	translate_y?: number
}


export class DrawGroup extends DrawContainer {

	attributes = new Map<string, string | number>();

	constructor(private posDim: PropDimGroup) {
		super();
	}


	setAtrr(att: Partial<SvgOptionsGroup>) {
		Object.entries(att).forEach(([key, value]) => {
			this.attributes.set(key, value);
		});
	}


	getRotatetOption(): { winkel: number, posX: number, posY: number } | undefined {
		let winkel = this.attributes.get('rotate_winkel') as number;

		let posX = this.attributes.get('rotate_posX') as number;
		let posY = this.attributes.get('rotate_posY') as number;
		if (!winkel) return undefined;
		let obj = {
			winkel: winkel,
			posX: posX ? posX : 0,
			posY: posY ? posY : 0
		}
		return obj;
	}

	drawElementSvg(options?: string): { start: string, end: string } {
		// Check if Rotatate option set
		let rotate = this.getRotatetOption()
		let translate_x = this.attributes.get('translate_x') as number;
		let translate_y = this.attributes.get('translate_y') as number;
		let transformStr = ""
		let rotateString = "";
		if (translate_x || translate_y) {
			let x = translate_x ? translate_x : 0;
			let y = translate_y ? translate_y : 0;
			transformStr = `translate(${x} ${y}) `
			rotateString = `transform="${transformStr}"`
		}

		if (rotate) {
			rotateString = `transform="${transformStr}rotate(${rotate.winkel} ${rotate.posX} ${rotate.posY})"`
		}

		return { start: `<g ${rotateString}>`, end: '</g>' }
	}

	drawElementXaml(options?: string): { start: string, end: string } {
		let rotate = this.getRotatetOption()
		let translate_x = this.attributes.get('translate_x') as number;
		let translate_y = this.attributes.get('translate_y') as number;
		
		let transformStr = "";
		if (rotate!=undefined || translate_x!=undefined || translate_y!=undefined) {
			let renderStart =
				` <Canvas.RenderTransformOrigin>0.5,0.5</Canvas.RenderTransformOrigin>
					<Canvas.RenderTransform><TransformGroup>`
			let renderEnd = `</TransformGroup></Canvas.RenderTransform>`

			let rotateStr = rotate!=undefined ? `<RotateTransform Angle="${rotate.winkel}"/>`:""
			let translateXStr = translate_x!=undefined ? `X="${translate_x}"` : "";
			let translateYStr = translate_y!=undefined ? `Y="${translate_y}"` : "";
			let translateStr = translate_x!=undefined || translate_y != undefined ? ` <TranslateTransform ${translateXStr} ${translateYStr}/>`:"";
			transformStr = renderStart + rotateStr + translateStr + renderEnd;
		}
		/*
		` <Canvas.RenderTransform>
        <TransformGroup>
            <RotateTransform Angle="30"/>
            <TranslateTransform X="100" Y="50"/>
        </TransformGroup>
    </Canvas.RenderTransform>`
*/
		return { start: `<Canvas> ${transformStr}`, end: '</Canvas>' }

	}

	getChildString(xaml: boolean, deph: number): string {

		deph = deph + 1;

		const reversedElements = Array.from(this.elements).reverse();
		let containerData = ''

		for (const [key, value] of reversedElements) {
			let svgOfNextElement = ''

			if (value instanceof DrawContainer) {
				svgOfNextElement = value.getChildString(xaml, deph)
			} else {
				const content = xaml ? value.drawXaml() : value.drawSvg();
				svgOfNextElement = "\t".repeat(deph) + content + '\n';
			}
			containerData += svgOfNextElement;
		}

		const { start, end } = xaml ? this.drawElementXaml() : this.drawElementSvg();
		const group = "\t".repeat(deph - 1) + start + '\n' + containerData + "\t".repeat(deph - 1) + end + '\n'

		return group;

	}


}


const group = (svg: string, options?: { x?: number, y?: number, rotate?: number }, xaml?: boolean) => {
	if (!options) options = { x: 0, y: 0, rotate: 0 };
	if (!options.x) options.x = 0;
	if (!options.y) options.y = 0;
	if (!options.rotate) options.rotate = 0;

	let transform = '';
	let translate = '';
	let rotate = ''
	if (options.x > 0 || options.y > 0) translate = `translate(${options.x},${options.y})`
	if (options.rotate != 0) rotate = `rotate(${options.rotate} ${0} ${0})`
	if (options.x > 0 || options.y > 0 || options.rotate != 0) transform = `transform="${translate} ${rotate}"`

	// XAML
	let x_left = `Left="${options.x}"`;
	let x_top = `Top="${options.y}"`;
	let x_rotate = '';
	if (options.rotate != 0) x_rotate =
		`
			<Canvas.RenderTransform>
    	    	<RotateTransform Angle="${options.rotate}" CenterX="${0}" CenterY="${0}" />
		 	</Canvas.RenderTransform>`
	if (options.x > 0) x_left = ''

	let group =
		`<g ${transform}>
				${svg}
			</g>`

	let xgroup =
		`<Canvas ${x_left} ${x_top}>
    			${svg} ${x_rotate}
          	</Canvas>`


	if (xaml) return xgroup;
	return group;
}