2026_08_31

src/graphics/lib/drawGroup.ts

@@ -0,0 +1,170 @@
+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 = ""
+		if (translate_x || translate_y) {
+			let x = translate_x ? translate_x : 0;
+			let y = translate_y ? translate_y : 0;
+			transformStr = `translate(${x} ${y}) `
+		}
+
+		let rotateString = "";
+		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;
+}