Files
web-cad/frontend/src/plugins/builtin/eventTools.ts
T

222 lines
7.4 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/**
* Event-Tools Plugin Built-in example plugin
* Adds custom element types: stage-curtain, spotlight, barrier
* Adds command: EVENT_SEATING (generates seating rows)
*/
import type { Plugin, PluginContext, ElementTypeExtension, CommandExtension } from '../types';
import type { CADElement } from '../../types/cad.types';
function uid(prefix: string): string {
return `${prefix}-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
}
// ─── Element Type: Stage Curtain ────────────────────────
const stageCurtain: ElementTypeExtension = {
typeName: 'stage-curtain',
displayName: 'Bühnenvorhang',
defaultWidth: 6,
defaultHeight: 0.3,
defaultProperties: {
fill: '#8B0000',
stroke: '#5C0000',
strokeWidth: 2,
curtainStyle: 'pleated',
},
render(ctx, element, scale) {
const { x, y, width, height, properties } = element;
ctx.save();
ctx.fillStyle = (properties.fill as string) || '#8B0000';
ctx.strokeStyle = (properties.stroke as string) || '#5C0000';
ctx.lineWidth = (properties.strokeWidth as number) || 2;
// Draw pleated curtain
const pleats = Math.max(6, Math.floor(width / 0.5));
const pleatWidth = width / pleats;
ctx.beginPath();
ctx.moveTo(x, y);
for (let i = 0; i <= pleats; i++) {
const px = x + i * pleatWidth;
const py = y + (i % 2 === 0 ? 0 : height * 0.15);
ctx.lineTo(px, py);
}
ctx.lineTo(x + width, y + height);
ctx.lineTo(x, y + height);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
return true;
},
hitTest(element, hx, hy, tolerance) {
const { x, y, width, height } = element;
return hx >= x - tolerance && hx <= x + width + tolerance &&
hy >= y - tolerance && hy <= y + height + tolerance;
},
propertyFields: [
{ key: 'fill', label: 'Farbe', type: 'color' },
{ key: 'curtainStyle', label: 'Stil', type: 'select', options: [
{ value: 'pleated', label: 'Gefaltet' },
{ value: 'flat', label: 'Glatt' },
]},
],
};
// ─── Element Type: Spotlight ────────────────────────────
const spotlight: ElementTypeExtension = {
typeName: 'spotlight',
displayName: 'Scheinwerfer',
defaultWidth: 2,
defaultHeight: 2,
defaultProperties: {
fill: 'rgba(255, 220, 100, 0.3)',
stroke: '#FFD700',
strokeWidth: 1.5,
beamAngle: 45,
},
render(ctx, element, scale) {
const { x, y, width, height, properties } = element;
ctx.save();
const cx = x + width / 2;
const cy = y + height / 2;
const radius = Math.max(width, height) / 2;
// Draw beam cone
const beamAngle = ((properties.beamAngle as number) || 45) * Math.PI / 180;
const gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, radius);
gradient.addColorStop(0, 'rgba(255, 220, 100, 0.5)');
gradient.addColorStop(1, 'rgba(255, 220, 100, 0.05)');
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.arc(cx, cy, radius, -Math.PI / 2 - beamAngle / 2, -Math.PI / 2 + beamAngle / 2);
ctx.closePath();
ctx.fill();
// Draw fixture circle
ctx.fillStyle = '#333';
ctx.strokeStyle = (properties.stroke as string) || '#FFD700';
ctx.lineWidth = (properties.strokeWidth as number) || 1.5;
ctx.beginPath();
ctx.arc(cx, cy, 0.15 * scale, 0, Math.PI * 2);
ctx.fill();
ctx.stroke();
ctx.restore();
return true;
},
hitTest(element, hx, hy, tolerance) {
const cx = element.x + element.width / 2;
const cy = element.y + element.height / 2;
const radius = Math.max(element.width, element.height) / 2 + tolerance;
const dx = hx - cx;
const dy = hy - cy;
return dx * dx + dy * dy <= radius * radius;
},
propertyFields: [
{ key: 'beamAngle', label: 'Strahlwinkel°', type: 'number', min: 10, max: 180, step: 5 },
{ key: 'stroke', label: 'Farbe', type: 'color' },
],
};
// ─── Element Type: Barrier ──────────────────────────────
const barrier: ElementTypeExtension = {
typeName: 'barrier',
displayName: 'Absperrung',
defaultWidth: 3,
defaultHeight: 0.1,
defaultProperties: {
fill: '#FFA500',
stroke: '#CC8400',
strokeWidth: 1.5,
pattern: 'striped',
},
render(ctx, element, scale) {
const { x, y, width, height, properties } = element;
ctx.save();
ctx.fillStyle = (properties.fill as string) || '#FFA500';
ctx.strokeStyle = (properties.stroke as string) || '#CC8400';
ctx.lineWidth = (properties.strokeWidth as number) || 1.5;
// Draw striped barrier
const stripeWidth = 0.3;
const stripes = Math.floor(width / stripeWidth);
for (let i = 0; i < stripes; i++) {
ctx.fillStyle = i % 2 === 0 ? '#FFA500' : '#000000';
ctx.fillRect(x + i * stripeWidth, y, stripeWidth, height);
}
ctx.strokeStyle = (properties.stroke as string) || '#CC8400';
ctx.strokeRect(x, y, width, height);
ctx.restore();
return true;
},
hitTest(element, hx, hy, tolerance) {
const { x, y, width, height } = element;
return hx >= x - tolerance && hx <= x + width + tolerance &&
hy >= y - tolerance && hy <= y + height + tolerance;
},
propertyFields: [
{ key: 'fill', label: 'Farbe', type: 'color' },
{ key: 'pattern', label: 'Muster', type: 'select', options: [
{ value: 'striped', label: 'Gestreift' },
{ value: 'solid', label: 'Einfarbig' },
]},
],
};
// ─── Command: EVENT_SEATING ─────────────────────────────
const eventSeatingCommand: CommandExtension = {
name: 'EVENT_SEATING',
description: 'Erzeugt Bestuhlung in Reihen',
usage: 'EVENT_SEATING <rows> <cols> [gap] [rowGap]',
execute(args, context) {
const rows = parseInt(args[0] || '5', 10);
const cols = parseInt(args[1] || '10', 10);
const gap = parseFloat(args[2] || '0.6');
const rowGap = parseFloat(args[3] || '1.0');
const layerId = context.getActiveLayerId();
const chairWidth = 0.5;
const chairHeight = 0.5;
const startX = 2;
const startY = 2;
let count = 0;
for (let r = 0; r < rows; r++) {
for (let c = 0; c < cols; c++) {
const el: CADElement = {
id: uid('chair'),
type: 'chair',
layerId,
x: startX + c * (chairWidth + gap),
y: startY + r * (chairHeight + rowGap),
width: chairWidth,
height: chairHeight,
properties: { fill: '#4A90D9', stroke: '#2A70B9', strokeWidth: 1, rotation: 0 },
};
context.addElement(el);
count++;
}
}
context.showToast(`${count} Stühle in ${rows} Reihen erstellt`, 'success');
},
};
// ─── Plugin Definition ──────────────────────────────────
export const eventToolsPlugin: Plugin = {
manifest: {
id: 'event-tools',
name: 'Event-Tools',
version: '1.0.0',
author: 'Web CAD Team',
description: 'Erweitert Web CAD um Bühnenvorhänge, Scheinwerfer, Absperrungen und Bestuhlungs-Befehle.',
category: 'elements',
enabledByDefault: true,
},
elementTypes: [stageCurtain, spotlight, barrier],
commands: [eventSeatingCommand],
onInit(context) {
context.log('Event-Tools Plugin initialisiert');
},
onActivate(context) {
context.log('Event-Tools Plugin aktiviert');
},
};