Compare commits
4 Commits
b07b09c28e
...
cf9c73635b
| Author | SHA1 | Date | |
|---|---|---|---|
| cf9c73635b | |||
| 7d5fd3b590 | |||
| efca20c5f3 | |||
| 67c92bceb3 |
26
.env.example
26
.env.example
@@ -15,3 +15,29 @@ MONGODB_COLLECTION=tasks_json
|
||||
|
||||
# Collection, in der die Canvas-Stände (Layout + Werte) gespeichert werden:
|
||||
MONGODB_CANVAS_COLLECTION=canvas_layouts
|
||||
|
||||
# Collection, in der die benutzerdefinierten Typen gespeichert werden:
|
||||
MONGODB_CUSTOM_TYPE_COLLECTION=custom_types
|
||||
|
||||
# --- Collections je Element-Typ ---------------------------------------------
|
||||
# Beim Speichern eines Canvas werden die Einstellungen jedes platzierten
|
||||
# Elements zusätzlich je Typ in eine eigene Collection geschrieben.
|
||||
# (Benutzerdefinierte Typen nutzen die Collection ihres Basistyps.)
|
||||
MONGODB_ELEMENT_ARRIVAL_COLLECTION=element_arrival
|
||||
MONGODB_ELEMENT_SIGNATURE_COLLECTION=element_signature
|
||||
MONGODB_ELEMENT_PHOTOS_COLLECTION=element_photos
|
||||
MONGODB_ELEMENT_RECEIPT_GIVER_COLLECTION=element_receipt_giver
|
||||
MONGODB_ELEMENT_REMARK_COLLECTION=element_remark
|
||||
MONGODB_ELEMENT_COMMISSION_NUMBER_COLLECTION=element_commission_number
|
||||
MONGODB_ELEMENT_CHECKBOX_COLLECTION=element_checkbox
|
||||
MONGODB_ELEMENT_BARCODE_COLLECTION=element_barcode
|
||||
MONGODB_ELEMENT_STATUS_SELECTION_COLLECTION=element_status_selection
|
||||
MONGODB_ELEMENT_TEXT_LIST_COLLECTION=element_text_list
|
||||
MONGODB_ELEMENT_NUMBER_LIST_COLLECTION=element_number_list
|
||||
MONGODB_ELEMENT_CHECKBOX_LIST_COLLECTION=element_checkbox_list
|
||||
MONGODB_ELEMENT_SCRIPT_COLLECTION=element_script
|
||||
|
||||
# Script-Block (grafisches Logik-Element) ausblenden:
|
||||
# true = Script-Element wird im Editor nicht angezeigt
|
||||
# false = Script-Element ist verfügbar (Standard)
|
||||
HIDE_SCRIPT_BLOCK=false
|
||||
|
||||
@@ -1,32 +1,182 @@
|
||||
import Drawflow from 'drawflow';
|
||||
import 'drawflow/dist/drawflow.min.css';
|
||||
|
||||
function customCurvature(sx, sy, ex, ey) {
|
||||
// Senkrechter Stub, mit dem jede Linie aus dem Ausgang austritt bzw.
|
||||
// senkrecht in den Eingang des Ziels eintritt, bevor sie abbiegt.
|
||||
const EXIT_STUB = 5;
|
||||
|
||||
// Greif-Offset (in Bildschirm-Pixeln) zwischen Mauszeiger und linker oberer
|
||||
// Ecke des gezogenen Palette-Elements. Wird beim Drop abgezogen, damit der
|
||||
// Knoten an seiner gezogenen Position liegt statt mit der Ecke an der Maus.
|
||||
let dragGrabOffset = { x: 0, y: 0 };
|
||||
|
||||
function verticalCurvature(sx, sy, ex, ey) {
|
||||
const dx = ex - sx;
|
||||
const dy = ey - sy;
|
||||
const adyt = Math.abs(dy);
|
||||
const minOffset = 40;
|
||||
|
||||
if (dy >= -8) {
|
||||
const offset = Math.max(adyt * 0.5, minOffset);
|
||||
const c1x = sx + dx * 0.5;
|
||||
const c1y = sy + offset;
|
||||
const c2x = ex;
|
||||
const c2y = ey - offset;
|
||||
return ` M ${sx} ${sy} C ${c1x} ${c1y} ${c2x} ${c2y} ${ex} ${ey}`;
|
||||
// Punkte nach dem Austritts- bzw. vor dem Eintritts-Stub.
|
||||
const sy2 = sy + EXIT_STUB;
|
||||
const ey2 = ey - EXIT_STUB;
|
||||
|
||||
if (ey - sy >= -8) {
|
||||
const offset = Math.max(Math.abs(ey2 - sy2) * 0.5, minOffset);
|
||||
const c1x = sx; // Tangente bleibt senkrecht zum Austritts-Stub
|
||||
const c1y = sy2 + offset;
|
||||
const c2x = ex; // Tangente bleibt senkrecht zum Eintritts-Stub
|
||||
const c2y = ey2 - offset;
|
||||
return ` M ${sx} ${sy} L ${sx} ${sy2} C ${c1x} ${c1y} ${c2x} ${c2y} ${ex} ${ey2} L ${ex} ${ey}`;
|
||||
}
|
||||
|
||||
const loopOffset = adyt * 0.5 + 80;
|
||||
const loopOffset = Math.abs(ey2 - sy2) * 0.5 + 80;
|
||||
const sign = Math.sign(dx) || 1;
|
||||
const c1x = sx + sign * 60;
|
||||
const c1y = sy + loopOffset;
|
||||
const c1x = sx; // Tangente bleibt senkrecht zum Austritts-Stub
|
||||
const c1y = sy2 + loopOffset;
|
||||
const c2x = ex - sign * 60;
|
||||
const c2y = ey - loopOffset;
|
||||
return ` M ${sx} ${sy} C ${c1x} ${c1y} ${c2x} ${c2y} ${ex} ${ey}`;
|
||||
const c2y = ey2 - loopOffset;
|
||||
return ` M ${sx} ${sy} L ${sx} ${sy2} C ${c1x} ${c1y} ${c2x} ${c2y} ${ex} ${ey2} L ${ex} ${ey}`;
|
||||
}
|
||||
|
||||
// --- Hindernis-bewusste Linienführung -------------------------------------
|
||||
// Ports liegen oben (Eingang) und unten (Ausgang). Damit Linien nach
|
||||
// Möglichkeit nicht über andere Kacheln (oder bei Rückwärtskanten über Quell-/
|
||||
// Zielkachel) laufen, werden kreuzende Verbindungen seitlich an den Kacheln
|
||||
// vorbei über eine freie Spalte umgeleitet.
|
||||
const ROUTE_STUB = 16; // senkrechte Aus-/Eintrittsstrecke an den Ports
|
||||
const ROUTE_PAD = 18; // Sicherheitsabstand um jede Kachel
|
||||
const ROUTE_RADIUS = 14; // Eckenradius der Umleitung
|
||||
|
||||
// Alle Knoten-Rechtecke (Canvas-Koordinaten, inkl. Sicherheitsabstand).
|
||||
function nodeRects(state) {
|
||||
const rects = [];
|
||||
state.container.querySelectorAll('.drawflow-node').forEach(el => {
|
||||
const left = parseFloat(el.style.left) || 0;
|
||||
const top = parseFloat(el.style.top) || 0;
|
||||
const w = el.offsetWidth || 0;
|
||||
const h = el.offsetHeight || 0;
|
||||
if (!w || !h) return;
|
||||
rects.push({
|
||||
left: left - ROUTE_PAD, top: top - ROUTE_PAD,
|
||||
right: left + w + ROUTE_PAD, bottom: top + h + ROUTE_PAD
|
||||
});
|
||||
});
|
||||
return rects;
|
||||
}
|
||||
|
||||
// Rechtecke ohne die Quell-/Zielkachel (die die Endpunkte enthalten).
|
||||
function withoutEndpointRects(rects, sx, sy, ex, ey) {
|
||||
return rects.filter(r => {
|
||||
const hasStart = sx >= r.left && sx <= r.right && sy >= r.top && sy <= r.bottom;
|
||||
const hasEnd = ex >= r.left && ex <= r.right && ey >= r.top && ey <= r.bottom;
|
||||
return !hasStart && !hasEnd;
|
||||
});
|
||||
}
|
||||
|
||||
function pointInAnyRect(x, y, rects) {
|
||||
return rects.some(r => x >= r.left && x <= r.right && y >= r.top && y <= r.bottom);
|
||||
}
|
||||
|
||||
// Tastet einen beliebigen SVG-Pfad ab und prüft, ob er über eine Kachel läuft.
|
||||
function pathHits(d, rects) {
|
||||
if (!rects.length) return false;
|
||||
const p = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||
p.setAttribute('d', d);
|
||||
let total = 0;
|
||||
try { total = p.getTotalLength(); } catch (e) { return false; }
|
||||
if (!total) return false;
|
||||
const steps = Math.max(16, Math.min(120, Math.round(total / 10)));
|
||||
for (let i = 1; i < steps; i++) {
|
||||
const pt = p.getPointAtLength((i / steps) * total);
|
||||
if (pointInAnyRect(pt.x, pt.y, rects)) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// Treffer-Test für achsenparallele Wegpunkte (Segment-BBox == Segment).
|
||||
function segmentsHit(points, rects) {
|
||||
for (let i = 0; i < points.length - 1; i++) {
|
||||
const a = points[i], b = points[i + 1];
|
||||
const left = Math.min(a.x, b.x), right = Math.max(a.x, b.x);
|
||||
const top = Math.min(a.y, b.y), bottom = Math.max(a.y, b.y);
|
||||
if (rects.some(r => right >= r.left && left <= r.right && bottom >= r.top && top <= r.bottom)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// Wegpunkte: aus dem Ausgang nach unten, über eine freie Spalte (channelX)
|
||||
// und von oben in den Eingang.
|
||||
function channelWaypoints(sx, sy, ex, ey, channelX) {
|
||||
const ay = sy + ROUTE_STUB;
|
||||
const by = ey - ROUTE_STUB;
|
||||
return [
|
||||
{ x: sx, y: sy }, { x: sx, y: ay }, { x: channelX, y: ay },
|
||||
{ x: channelX, y: by }, { x: ex, y: by }, { x: ex, y: ey }
|
||||
];
|
||||
}
|
||||
|
||||
// Glatter Pfad mit abgerundeten Ecken durch achsenparallele Wegpunkte.
|
||||
function roundedPath(pts, radius) {
|
||||
const points = [];
|
||||
for (const p of pts) {
|
||||
const last = points[points.length - 1];
|
||||
if (!last || Math.abs(last.x - p.x) > 0.5 || Math.abs(last.y - p.y) > 0.5) points.push(p);
|
||||
}
|
||||
if (points.length < 2) return '';
|
||||
if (points.length === 2) {
|
||||
return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`;
|
||||
}
|
||||
let d = `M ${points[0].x} ${points[0].y}`;
|
||||
for (let i = 1; i < points.length - 1; i++) {
|
||||
const p0 = points[i - 1], p1 = points[i], p2 = points[i + 1];
|
||||
const v1x = p1.x - p0.x, v1y = p1.y - p0.y;
|
||||
const v2x = p2.x - p1.x, v2y = p2.y - p1.y;
|
||||
const len1 = Math.hypot(v1x, v1y) || 1;
|
||||
const len2 = Math.hypot(v2x, v2y) || 1;
|
||||
const rr = Math.min(radius, len1 / 2, len2 / 2);
|
||||
const s1x = p1.x - (v1x / len1) * rr, s1y = p1.y - (v1y / len1) * rr;
|
||||
const e1x = p1.x + (v2x / len2) * rr, e1y = p1.y + (v2y / len2) * rr;
|
||||
d += ` L ${s1x} ${s1y} Q ${p1.x} ${p1.y} ${e1x} ${e1y}`;
|
||||
}
|
||||
const last = points[points.length - 1];
|
||||
d += ` L ${last.x} ${last.y}`;
|
||||
return d;
|
||||
}
|
||||
|
||||
// Liefert den SVG-Pfad einer Verbindung – direkt, falls frei, sonst umgeleitet.
|
||||
function routeConnection(state, sx, sy, ex, ey) {
|
||||
const direct = verticalCurvature(sx, sy, ex, ey);
|
||||
const all = nodeRects(state);
|
||||
const others = withoutEndpointRects(all, sx, sy, ex, ey);
|
||||
|
||||
// Klare Vorwärtskante ohne fremde Kachel im Weg -> bisherige Kurve behalten.
|
||||
const isBackward = ey < sy + 2 * ROUTE_STUB;
|
||||
if (!isBackward && !pathHits(direct, others)) return direct;
|
||||
|
||||
// Bei Rückwärtskanten auch um Quell-/Zielkachel herum, bei Vorwärtskanten
|
||||
// nur um fremde Kacheln.
|
||||
const candidates = isBackward ? all : others;
|
||||
const spanTop = Math.min(sy, ey) - ROUTE_STUB;
|
||||
const spanBottom = Math.max(sy, ey) + ROUTE_STUB;
|
||||
const blockers = candidates.filter(r => r.bottom > spanTop && r.top < spanBottom);
|
||||
if (!blockers.length) return direct;
|
||||
|
||||
const ref = (sx + ex) / 2;
|
||||
const leftX = Math.min(...blockers.map(r => r.left)) - ROUTE_PAD;
|
||||
const rightX = Math.max(...blockers.map(r => r.right)) + ROUTE_PAD;
|
||||
const first = Math.abs(leftX - ref) <= Math.abs(rightX - ref) ? leftX : rightX;
|
||||
const second = first === leftX ? rightX : leftX;
|
||||
|
||||
let wp = channelWaypoints(sx, sy, ex, ey, first);
|
||||
if (segmentsHit(wp, others)) {
|
||||
const alt = channelWaypoints(sx, sy, ex, ey, second);
|
||||
if (!segmentsHit(alt, others)) wp = alt;
|
||||
}
|
||||
return roundedPath(wp, ROUTE_RADIUS);
|
||||
}
|
||||
|
||||
if (Drawflow && Drawflow.prototype) {
|
||||
Drawflow.prototype.createCurvature = customCurvature;
|
||||
Drawflow.prototype.createCurvature = verticalCurvature;
|
||||
}
|
||||
|
||||
const editors = new WeakMap();
|
||||
@@ -38,6 +188,8 @@ if (!window.__taskListEditorDragInit) {
|
||||
if (target && e.dataTransfer) {
|
||||
e.dataTransfer.setData('application/x-blocktype', target.dataset.blocktype);
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
const r = target.getBoundingClientRect();
|
||||
dragGrabOffset = { x: e.clientX - r.left, y: e.clientY - r.top };
|
||||
}
|
||||
}, true);
|
||||
}
|
||||
@@ -49,6 +201,9 @@ function buildNodeHtml(label, color) {
|
||||
return `
|
||||
<div class="task-node" data-color="${color}">
|
||||
<div class="task-node-header" style="background:${color}"></div>
|
||||
<div class="task-node-gear" title="Einstellungen">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96a7.03 7.03 0 0 0-1.62-.94l-.36-2.54a.48.48 0 0 0-.48-.41h-3.84a.48.48 0 0 0-.48.41l-.36 2.54c-.59.24-1.13.56-1.62.94l-2.39-.96a.48.48 0 0 0-.59.22L2.74 8.87c-.12.21-.07.49.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.48-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32a.49.49 0 0 0-.12-.61l-2.03-1.58zM12 15.6A3.6 3.6 0 1 1 12 8.4a3.6 3.6 0 0 1 0 7.2z"/></svg>
|
||||
</div>
|
||||
<div class="task-node-body">
|
||||
<div class="task-node-title">${safe}</div>
|
||||
</div>
|
||||
@@ -73,7 +228,6 @@ function attach(host) {
|
||||
editor.reroute = true;
|
||||
editor.reroute_fix_curvature = true;
|
||||
editor.curvature = 0.5;
|
||||
editor.createCurvature = customCurvature;
|
||||
editor.start();
|
||||
|
||||
const state = {
|
||||
@@ -83,6 +237,13 @@ function attach(host) {
|
||||
};
|
||||
editors.set(host, state);
|
||||
|
||||
// Hindernis-bewusste Linienführung. Reroute-Teilsegmente
|
||||
// (type != 'openclose') nutzen die einfache vertikale Kurve.
|
||||
editor.createCurvature = (sx, sy, ex, ey, curvature, type) =>
|
||||
(type && type !== 'openclose')
|
||||
? verticalCurvature(sx, sy, ex, ey)
|
||||
: routeConnection(state, sx, sy, ex, ey);
|
||||
|
||||
container.addEventListener('dragover', e => {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'copy';
|
||||
@@ -97,8 +258,10 @@ function attach(host) {
|
||||
|
||||
const rect = container.getBoundingClientRect();
|
||||
const zoom = editor.zoom;
|
||||
const px = (e.clientX - rect.left - editor.canvas_x) / zoom;
|
||||
const py = (e.clientY - rect.top - editor.canvas_y) / zoom;
|
||||
// Greif-Offset abziehen, damit der Knoten an seiner gezogenen Position
|
||||
// liegt (linke obere Ecke wie während des Ziehens, nicht an der Maus).
|
||||
const px = (e.clientX - rect.left - editor.canvas_x - dragGrabOffset.x) / zoom;
|
||||
const py = (e.clientY - rect.top - editor.canvas_y - dragGrabOffset.y) / zoom;
|
||||
|
||||
addNodeInternal(host, def, px, py);
|
||||
});
|
||||
@@ -106,6 +269,21 @@ function attach(host) {
|
||||
editor.on('nodeSelected', id => {
|
||||
host.$server && host.$server.onNodeSelected(parseInt(id, 10));
|
||||
});
|
||||
|
||||
// Klick auf das Zahnrad-Icon eines Knotens -> Einstellungen öffnen.
|
||||
container.addEventListener('mousedown', e => {
|
||||
const gear = e.target instanceof Element ? e.target.closest('.task-node-gear') : null;
|
||||
if (gear) e.stopPropagation(); // verhindert das Verschieben des Knotens
|
||||
}, true);
|
||||
container.addEventListener('click', e => {
|
||||
const gear = e.target instanceof Element ? e.target.closest('.task-node-gear') : null;
|
||||
if (!gear) return;
|
||||
const nodeEl = gear.closest('.drawflow-node');
|
||||
if (!nodeEl) return;
|
||||
e.stopPropagation();
|
||||
const id = parseInt(nodeEl.id.replace('node-', ''), 10);
|
||||
host.$server && host.$server.onNodeActivated(id);
|
||||
}, true);
|
||||
editor.on('nodeUnselected', () => {
|
||||
host.$server && host.$server.onNodeUnselected();
|
||||
});
|
||||
@@ -113,9 +291,209 @@ function attach(host) {
|
||||
host.$server && host.$server.onNodeRemoved(parseInt(id, 10));
|
||||
});
|
||||
|
||||
// Pro Ausgang ist nur eine Verbindung erlaubt. Hat ein Ausgang bereits eine
|
||||
// Linie, wird Drawflows Verbindungs-Drag gar nicht erst gestartet: Das
|
||||
// mousedown/touchstart auf dem Ausgangs-Punkt wird in der Capture-Phase
|
||||
// abgefangen, bevor Drawflows eigener Handler ausgelöst wird.
|
||||
const blockSecondConnectionStart = e => {
|
||||
if (e.type === 'mousedown' && e.button !== 0) return;
|
||||
const target = e.target;
|
||||
if (!(target instanceof Element) || !target.classList.contains('output')) return;
|
||||
const nodeEl = target.closest('.drawflow-node');
|
||||
if (!nodeEl) return;
|
||||
const id = parseInt(nodeEl.id.replace('node-', ''), 10);
|
||||
const outputClass = Array.from(target.classList).find(c => c.startsWith('output_'));
|
||||
if (!outputClass) return;
|
||||
const node = editor.drawflow.drawflow[editor.module].data[id];
|
||||
const output = node && node.outputs[outputClass];
|
||||
if (output && output.connections.length >= 1) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
container.addEventListener('mousedown', blockSecondConnectionStart, true);
|
||||
container.addEventListener('touchstart', blockSecondConnectionStart, true);
|
||||
|
||||
// Sicherheitsnetz: Sollte auf anderem Weg dennoch eine zweite Verbindung am
|
||||
// selben Ausgang entstehen, wird die neu erstellte sofort wieder entfernt.
|
||||
editor.on('connectionCreated', conn => {
|
||||
const data = editor.drawflow.drawflow[editor.module].data;
|
||||
const node = data[conn.output_id];
|
||||
const output = node && node.outputs[conn.output_class];
|
||||
if (output && output.connections.length > 1) {
|
||||
editor.removeSingleConnection(conn.output_id, conn.input_id, conn.output_class, conn.input_class);
|
||||
}
|
||||
});
|
||||
|
||||
// Klick in die Nähe einer Verbindung (auf leerem Canvas-Hintergrund) wählt
|
||||
// diese aus – robuster als das exakte Treffen der dünnen Linie. Läuft in der
|
||||
// Capture-Phase vor Drawflow, um das Verschieben/Deselektieren zu verhindern.
|
||||
container.addEventListener('mousedown', e => {
|
||||
if (e.button !== 0) return;
|
||||
const cls = e.target instanceof Element ? e.target.classList : null;
|
||||
const onBackground = cls && (cls.contains('parent-drawflow') || cls.contains('drawflow'));
|
||||
if (!onBackground) return; // Klicks auf Knoten/Ports/Linien normal behandeln
|
||||
const path = nearestConnectionPath(state, e.clientX, e.clientY, 12);
|
||||
if (!path) return;
|
||||
e.stopPropagation();
|
||||
selectConnection(state, path);
|
||||
}, true);
|
||||
|
||||
// Verschieben von Knoten mit der RECHTEN Maustaste. Drawflow zieht Knoten
|
||||
// nur mit links; das Ziehen mit rechts wird hier eigenständig umgesetzt.
|
||||
let rightDrag = null;
|
||||
let suppressContextMenu = false;
|
||||
container.addEventListener('mousedown', e => {
|
||||
if (e.button !== 2) return;
|
||||
const nodeEl = e.target instanceof Element ? e.target.closest('.drawflow-node') : null;
|
||||
if (!nodeEl) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation(); // Drawflows eigene (Links-)Drag-Logik nicht auslösen
|
||||
rightDrag = {
|
||||
nodeEl,
|
||||
id: nodeEl.id.replace('node-', ''),
|
||||
lastX: e.clientX,
|
||||
lastY: e.clientY
|
||||
};
|
||||
suppressContextMenu = true;
|
||||
}, true);
|
||||
|
||||
const onRightMove = e => {
|
||||
if (!rightDrag) return;
|
||||
const zoom = editor.zoom || 1;
|
||||
const newLeft = rightDrag.nodeEl.offsetLeft + (e.clientX - rightDrag.lastX) / zoom;
|
||||
const newTop = rightDrag.nodeEl.offsetTop + (e.clientY - rightDrag.lastY) / zoom;
|
||||
rightDrag.lastX = e.clientX;
|
||||
rightDrag.lastY = e.clientY;
|
||||
rightDrag.nodeEl.style.left = newLeft + 'px';
|
||||
rightDrag.nodeEl.style.top = newTop + 'px';
|
||||
const data = editor.drawflow.drawflow[editor.module].data[rightDrag.id];
|
||||
if (data) { data.pos_x = newLeft; data.pos_y = newTop; }
|
||||
editor.updateConnectionNodes('node-' + rightDrag.id);
|
||||
};
|
||||
const onRightUp = () => { rightDrag = null; };
|
||||
document.addEventListener('mousemove', onRightMove);
|
||||
document.addEventListener('mouseup', onRightUp);
|
||||
|
||||
// Browser-Kontextmenü nach einem Rechts-Ziehen auf einem Knoten unterdrücken.
|
||||
container.addEventListener('contextmenu', e => {
|
||||
if (suppressContextMenu) {
|
||||
e.preventDefault();
|
||||
suppressContextMenu = false;
|
||||
}
|
||||
});
|
||||
|
||||
// Zoomen mit dem Mausrad (ohne Strg). Läuft in der Capture-Phase und stoppt
|
||||
// die Propagation, damit Drawflows eigenes Strg+Rad-Zoom nicht zusätzlich
|
||||
// auslöst.
|
||||
const onWheelZoom = e => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (e.deltaY > 0) {
|
||||
editor.zoom_out();
|
||||
} else if (e.deltaY < 0) {
|
||||
editor.zoom_in();
|
||||
}
|
||||
};
|
||||
container.addEventListener('wheel', onWheelZoom, { capture: true, passive: false });
|
||||
|
||||
// Eine angeklickte Verbindung erhält den Fokus auf dem Canvas-Container,
|
||||
// damit die Entf-/Backspace-Taste sie löschen kann.
|
||||
editor.on('connectionSelected', () => {
|
||||
container.focus({ preventScroll: true });
|
||||
});
|
||||
|
||||
// Absicherung: Verbindung auch dann löschen, wenn der Canvas-Container nicht
|
||||
// den Tastaturfokus hat (Drawflows eigener Handler hängt am Container).
|
||||
const deleteSelectedConnection = e => {
|
||||
if (e.key !== 'Delete' && e.key !== 'Backspace') return;
|
||||
if (editor.connection_selected == null) return;
|
||||
const active = document.activeElement;
|
||||
const tag = active && active.tagName;
|
||||
if (tag === 'INPUT' || tag === 'TEXTAREA'
|
||||
|| (active && active.isContentEditable)) {
|
||||
return; // Eingaben in Textfeldern nicht abfangen
|
||||
}
|
||||
e.preventDefault();
|
||||
editor.removeConnection();
|
||||
};
|
||||
document.addEventListener('keydown', deleteSelectedConnection);
|
||||
state.cleanup = () => {
|
||||
document.removeEventListener('keydown', deleteSelectedConnection);
|
||||
document.removeEventListener('mousemove', onRightMove);
|
||||
document.removeEventListener('mouseup', onRightUp);
|
||||
container.removeEventListener('wheel', onWheelZoom, { capture: true });
|
||||
};
|
||||
|
||||
return state;
|
||||
}
|
||||
|
||||
// Wandelt Client-Koordinaten in das (unskalierte) Canvas-Koordinatensystem um,
|
||||
// in dem auch die Verbindungspfade definiert sind.
|
||||
function toCanvasPoint(state, clientX, clientY) {
|
||||
const editor = state.editor;
|
||||
const rect = state.container.getBoundingClientRect();
|
||||
const zoom = editor.zoom || 1;
|
||||
return {
|
||||
x: (clientX - rect.left - editor.canvas_x) / zoom,
|
||||
y: (clientY - rect.top - editor.canvas_y) / zoom,
|
||||
zoom
|
||||
};
|
||||
}
|
||||
|
||||
// Sucht den Verbindungspfad, der einem Klickpunkt am nächsten liegt (innerhalb
|
||||
// der Toleranz). Nur fertige Verbindungen (Drawflow-Klasse node_in_node-<id>).
|
||||
function nearestConnectionPath(state, clientX, clientY, tolerancePx) {
|
||||
const { x, y, zoom } = toCanvasPoint(state, clientX, clientY);
|
||||
const tolerance = tolerancePx / zoom;
|
||||
let best = null;
|
||||
let bestDist = tolerance;
|
||||
state.container
|
||||
.querySelectorAll('.connection[class*="node_in_node-"] .main-path')
|
||||
.forEach(path => {
|
||||
let length;
|
||||
try { length = path.getTotalLength(); } catch (e) { return; }
|
||||
if (!length) return;
|
||||
const step = Math.max(5, length / 80);
|
||||
for (let d = 0; d <= length; d += step) {
|
||||
const pt = path.getPointAtLength(d);
|
||||
const dist = Math.hypot(pt.x - x, pt.y - y);
|
||||
if (dist < bestDist) {
|
||||
bestDist = dist;
|
||||
best = path;
|
||||
}
|
||||
}
|
||||
});
|
||||
return best;
|
||||
}
|
||||
|
||||
// Wählt eine Verbindung programmatisch aus (analog zu Drawflows interner
|
||||
// main-path-Auswahl), damit sie hervorgehoben und per Entf löschbar ist.
|
||||
function selectConnection(state, pathEl) {
|
||||
const editor = state.editor;
|
||||
if (editor.node_selected) {
|
||||
editor.node_selected.classList.remove('selected');
|
||||
editor.node_selected = null;
|
||||
editor.dispatch('nodeUnselected', true);
|
||||
}
|
||||
if (editor.connection_selected) {
|
||||
editor.connection_selected.classList.remove('selected');
|
||||
}
|
||||
editor.connection_selected = pathEl;
|
||||
const parent = pathEl.parentElement;
|
||||
parent.querySelectorAll('.main-path').forEach(p => p.classList.add('selected'));
|
||||
const cl = parent.classList;
|
||||
if (cl.length > 1) {
|
||||
editor.dispatch('connectionSelected', {
|
||||
output_id: cl[2].slice(14),
|
||||
input_id: cl[1].slice(13),
|
||||
output_class: cl[3],
|
||||
input_class: cl[4]
|
||||
});
|
||||
}
|
||||
state.container.focus({ preventScroll: true });
|
||||
}
|
||||
|
||||
function addNodeInternal(host, def, x, y) {
|
||||
const state = editors.get(host);
|
||||
if (!state) return null;
|
||||
@@ -150,6 +528,22 @@ window.taskListEditor = {
|
||||
if (!def) return;
|
||||
addNodeInternal(host, def, x, y);
|
||||
},
|
||||
setNodeOutputs(host, nodeId, count) {
|
||||
const state = editors.get(host);
|
||||
if (!state) return;
|
||||
const editor = state.editor;
|
||||
const node = editor.getNodeFromId(nodeId);
|
||||
if (!node) return;
|
||||
let current = Object.keys(node.outputs || {}).length;
|
||||
while (current < count) {
|
||||
editor.addNodeOutput(nodeId);
|
||||
current++;
|
||||
}
|
||||
while (current > count) {
|
||||
editor.removeNodeOutput(nodeId, `output_${current}`);
|
||||
current--;
|
||||
}
|
||||
},
|
||||
updateNodeLabel(host, nodeId, label) {
|
||||
const state = editors.get(host);
|
||||
if (!state) return;
|
||||
|
||||
448
src/main/frontend/node-editor/script-editor.js
Normal file
448
src/main/frontend/node-editor/script-editor.js
Normal file
@@ -0,0 +1,448 @@
|
||||
import Drawflow from 'drawflow';
|
||||
import 'drawflow/dist/drawflow.min.css';
|
||||
|
||||
// Logik-Knotentypen des Script-Editors (Anzahl Ein-/Ausgänge).
|
||||
const LOGIC = {
|
||||
constant: { inputs: 0, outputs: 1 },
|
||||
variable: { inputs: 0, outputs: 1 },
|
||||
compare: { inputs: 2, outputs: 2 },
|
||||
and: { inputs: 2, outputs: 1 },
|
||||
or: { inputs: 2, outputs: 1 },
|
||||
not: { inputs: 1, outputs: 1 },
|
||||
if: { inputs: 1, outputs: 2 },
|
||||
result: { inputs: 1, outputs: 0 },
|
||||
output: { inputs: 1, outputs: 0 }
|
||||
};
|
||||
|
||||
const scriptEditors = new WeakMap();
|
||||
|
||||
// Rastergröße – passend zum gepunkteten Canvas-Hintergrund (24px).
|
||||
const GRID = 24;
|
||||
|
||||
function snap(value) {
|
||||
return Math.round(value / GRID) * GRID;
|
||||
}
|
||||
|
||||
// Horizontale Kurvenführung: Linien treten waagerecht aus dem Ausgang aus
|
||||
// und treten waagerecht in den Eingang ein (Ports liegen links/rechts).
|
||||
function horizontalCurvature(sx, sy, ex, ey) {
|
||||
const offset = Math.max(Math.abs(ex - sx) * 0.5, 40);
|
||||
return ` M ${sx} ${sy} C ${sx + offset} ${sy} ${ex - offset} ${ey} ${ex} ${ey}`;
|
||||
}
|
||||
|
||||
// --- Hindernis-bewusste Linienführung -------------------------------------
|
||||
// createCurvature kennt nur die Endpunkte der Verbindung. Damit Linien nach
|
||||
// Möglichkeit nicht über andere Kacheln laufen, lesen wir die Knoten-Rechtecke
|
||||
// (in Canvas-Koordinaten) direkt aus dem DOM und leiten eine kreuzende Linie
|
||||
// über einen freien horizontalen Kanal ober- oder unterhalb der Kacheln um.
|
||||
|
||||
const ROUTE_STUB = 26; // waagerechte Aus-/Eintrittsstrecke an den Ports
|
||||
const ROUTE_PAD = 14; // Sicherheitsabstand um jede Kachel
|
||||
const ROUTE_RADIUS = 12; // Eckenradius der Umleitung
|
||||
|
||||
// Knoten-Rechtecke als Hindernisse; Quell-/Zielknoten (die die Endpunkte
|
||||
// enthalten) werden ausgeschlossen.
|
||||
function obstacleRects(state, sx, sy, ex, ey) {
|
||||
const rects = [];
|
||||
state.container.querySelectorAll('.drawflow-node').forEach(el => {
|
||||
const left = parseFloat(el.style.left) || 0;
|
||||
const top = parseFloat(el.style.top) || 0;
|
||||
const w = el.offsetWidth || 0;
|
||||
const h = el.offsetHeight || 0;
|
||||
if (!w || !h) return;
|
||||
const r = {
|
||||
left: left - ROUTE_PAD, top: top - ROUTE_PAD,
|
||||
right: left + w + ROUTE_PAD, bottom: top + h + ROUTE_PAD
|
||||
};
|
||||
const hasStart = sx >= r.left && sx <= r.right && sy >= r.top && sy <= r.bottom;
|
||||
const hasEnd = ex >= r.left && ex <= r.right && ey >= r.top && ey <= r.bottom;
|
||||
if (hasStart || hasEnd) return;
|
||||
rects.push(r);
|
||||
});
|
||||
return rects;
|
||||
}
|
||||
|
||||
function pointInAnyRect(x, y, rects) {
|
||||
return rects.some(r => x >= r.left && x <= r.right && y >= r.top && y <= r.bottom);
|
||||
}
|
||||
|
||||
// Läuft die (abgetastete) Bézier-Kurve über eine Kachel?
|
||||
function bezierHits(sx, sy, c1x, c1y, c2x, c2y, ex, ey, rects) {
|
||||
const N = 24;
|
||||
for (let i = 1; i < N; i++) {
|
||||
const t = i / N, u = 1 - t;
|
||||
const x = u * u * u * sx + 3 * u * u * t * c1x + 3 * u * t * t * c2x + t * t * t * ex;
|
||||
const y = u * u * u * sy + 3 * u * u * t * c1y + 3 * u * t * t * c2y + t * t * t * ey;
|
||||
if (pointInAnyRect(x, y, rects)) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// Treffer-Test für eine achsenparallele Wegpunktkette (Segment-BBox == Segment).
|
||||
function segmentsHit(points, rects) {
|
||||
for (let i = 0; i < points.length - 1; i++) {
|
||||
const a = points[i], b = points[i + 1];
|
||||
const left = Math.min(a.x, b.x), right = Math.max(a.x, b.x);
|
||||
const top = Math.min(a.y, b.y), bottom = Math.max(a.y, b.y);
|
||||
if (rects.some(r => right >= r.left && left <= r.right && bottom >= r.top && top <= r.bottom)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// Wegpunkte: Aus dem Port heraus, über einen Kanal auf Höhe channelY und in
|
||||
// den Zielport hinein.
|
||||
function channelWaypoints(sx, sy, ex, ey, channelY) {
|
||||
const ax = sx + ROUTE_STUB;
|
||||
const bx = ex - ROUTE_STUB;
|
||||
return [
|
||||
{ x: sx, y: sy }, { x: ax, y: sy }, { x: ax, y: channelY },
|
||||
{ x: bx, y: channelY }, { x: bx, y: ey }, { x: ex, y: ey }
|
||||
];
|
||||
}
|
||||
|
||||
// Glatter Pfad mit abgerundeten Ecken durch achsenparallele Wegpunkte.
|
||||
function roundedPath(pts, radius) {
|
||||
const points = [];
|
||||
for (const p of pts) {
|
||||
const last = points[points.length - 1];
|
||||
if (!last || Math.abs(last.x - p.x) > 0.5 || Math.abs(last.y - p.y) > 0.5) points.push(p);
|
||||
}
|
||||
if (points.length < 2) return '';
|
||||
if (points.length === 2) {
|
||||
return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`;
|
||||
}
|
||||
let d = `M ${points[0].x} ${points[0].y}`;
|
||||
for (let i = 1; i < points.length - 1; i++) {
|
||||
const p0 = points[i - 1], p1 = points[i], p2 = points[i + 1];
|
||||
const v1x = p1.x - p0.x, v1y = p1.y - p0.y;
|
||||
const v2x = p2.x - p1.x, v2y = p2.y - p1.y;
|
||||
const len1 = Math.hypot(v1x, v1y) || 1;
|
||||
const len2 = Math.hypot(v2x, v2y) || 1;
|
||||
const rr = Math.min(radius, len1 / 2, len2 / 2);
|
||||
const s1x = p1.x - (v1x / len1) * rr, s1y = p1.y - (v1y / len1) * rr;
|
||||
const e1x = p1.x + (v2x / len2) * rr, e1y = p1.y + (v2y / len2) * rr;
|
||||
d += ` L ${s1x} ${s1y} Q ${p1.x} ${p1.y} ${e1x} ${e1y}`;
|
||||
}
|
||||
const last = points[points.length - 1];
|
||||
d += ` L ${last.x} ${last.y}`;
|
||||
return d;
|
||||
}
|
||||
|
||||
// Liefert den SVG-Pfad einer Verbindung – direkt, falls frei, sonst umgeleitet.
|
||||
function routeConnection(state, sx, sy, ex, ey) {
|
||||
const offset = Math.max(Math.abs(ex - sx) * 0.5, 40);
|
||||
const c1x = sx + offset, c2x = ex - offset;
|
||||
const direct = ` M ${sx} ${sy} C ${c1x} ${sy} ${c2x} ${ey} ${ex} ${ey}`;
|
||||
|
||||
const rects = obstacleRects(state, sx, sy, ex, ey);
|
||||
if (rects.length === 0 || !bezierHits(sx, sy, c1x, sy, c2x, ey, ex, ey, rects)) {
|
||||
return direct;
|
||||
}
|
||||
|
||||
// Kacheln, die im waagerechten Bereich zwischen Quelle und Ziel liegen.
|
||||
const spanLeft = Math.min(sx, ex), spanRight = Math.max(sx, ex);
|
||||
const blockers = rects.filter(r => r.right > spanLeft && r.left < spanRight);
|
||||
if (blockers.length === 0) return direct;
|
||||
|
||||
const ref = (sy + ey) / 2;
|
||||
const aboveY = Math.min(...blockers.map(r => r.top)) - ROUTE_PAD;
|
||||
const belowY = Math.max(...blockers.map(r => r.bottom)) + ROUTE_PAD;
|
||||
const first = Math.abs(aboveY - ref) <= Math.abs(belowY - ref) ? aboveY : belowY;
|
||||
const second = first === aboveY ? belowY : aboveY;
|
||||
|
||||
let wp = channelWaypoints(sx, sy, ex, ey, first);
|
||||
if (segmentsHit(wp, rects)) {
|
||||
const alt = channelWaypoints(sx, sy, ex, ey, second);
|
||||
if (!segmentsHit(alt, rects)) wp = alt;
|
||||
}
|
||||
return roundedPath(wp, ROUTE_RADIUS);
|
||||
}
|
||||
|
||||
// Drag-Start für die Operator-Kacheln (einmalig global registrieren).
|
||||
if (!window.__scriptEditorDragInit) {
|
||||
window.__scriptEditorDragInit = true;
|
||||
document.addEventListener('dragstart', e => {
|
||||
const target = e.target instanceof Element ? e.target.closest('[data-logictype]') : null;
|
||||
if (target && e.dataTransfer) {
|
||||
e.dataTransfer.setData('application/x-logictype', target.dataset.logictype);
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
}
|
||||
}, true);
|
||||
}
|
||||
|
||||
function logicHtml(typeId) {
|
||||
switch (typeId) {
|
||||
case 'constant':
|
||||
return `<div class="logic-node logic-constant">
|
||||
<div class="logic-node-title">Konstante</div>
|
||||
<input df-const class="logic-input" placeholder="Wert">
|
||||
</div>`;
|
||||
case 'variable':
|
||||
return `<div class="logic-node logic-variable">
|
||||
<div class="logic-node-title">Variable</div>
|
||||
<select df-source class="logic-select"></select>
|
||||
</div>`;
|
||||
case 'compare':
|
||||
return `<div class="logic-node logic-compare">
|
||||
<div class="logic-node-title">Vergleich</div>
|
||||
<select df-operator class="logic-select">
|
||||
<option value="==">=</option>
|
||||
<option value="!=">≠</option>
|
||||
<option value="<"><</option>
|
||||
<option value=">">></option>
|
||||
<option value="<=">≤</option>
|
||||
<option value=">=">≥</option>
|
||||
</select>
|
||||
<div class="logic-ports">Eingänge: oben links · unten rechts</div>
|
||||
<div class="logic-ports">Ausgänge: oben „trifft zu“ · unten „trifft nicht zu“</div>
|
||||
</div>`;
|
||||
case 'and':
|
||||
return `<div class="logic-node logic-bool"><div class="logic-node-title">UND</div></div>`;
|
||||
case 'or':
|
||||
return `<div class="logic-node logic-bool"><div class="logic-node-title">ODER</div></div>`;
|
||||
case 'not':
|
||||
return `<div class="logic-node logic-bool"><div class="logic-node-title">NICHT</div></div>`;
|
||||
case 'if':
|
||||
return `<div class="logic-node logic-if">
|
||||
<div class="logic-node-title">Wenn</div>
|
||||
<div class="logic-ports">① Dann · ② Sonst</div>
|
||||
</div>`;
|
||||
case 'result':
|
||||
return `<div class="logic-node logic-result">
|
||||
<div class="logic-node-title">Ergebnis</div>
|
||||
<input df-result class="logic-input" placeholder="Ergebniswert">
|
||||
</div>`;
|
||||
case 'output':
|
||||
return `<div class="logic-node logic-output">
|
||||
<div class="logic-node-title">Ausgang</div>
|
||||
<input df-name class="logic-input" placeholder="Bezeichnung">
|
||||
</div>`;
|
||||
default:
|
||||
return `<div class="logic-node"><div class="logic-node-title">?</div></div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function defaultData(typeId) {
|
||||
switch (typeId) {
|
||||
case 'constant': return { type: typeId, const: '' };
|
||||
case 'variable': return { type: typeId, source: '' };
|
||||
case 'compare': return { type: typeId, operator: '==' };
|
||||
case 'result': return { type: typeId, result: '' };
|
||||
case 'output': return { type: typeId, name: '' };
|
||||
default: return { type: typeId };
|
||||
}
|
||||
}
|
||||
|
||||
// Füllt das Variablen-Dropdown eines Wert-Knotens mit den verfügbaren
|
||||
// Variablen (= eingegebene Daten der anderen Elemente) und erhält die
|
||||
// gespeicherte Auswahl.
|
||||
function fillSourceSelect(select, variables, current) {
|
||||
const cur = current == null ? '' : String(current);
|
||||
select.innerHTML = '';
|
||||
const empty = document.createElement('option');
|
||||
empty.value = '';
|
||||
empty.textContent = '– Variable wählen –';
|
||||
select.appendChild(empty);
|
||||
|
||||
let found = false;
|
||||
for (const v of variables) {
|
||||
const option = document.createElement('option');
|
||||
option.value = String(v.key);
|
||||
option.textContent = v.label;
|
||||
if (String(v.key) === cur) {
|
||||
option.selected = true;
|
||||
found = true;
|
||||
}
|
||||
select.appendChild(option);
|
||||
}
|
||||
if (cur && !found) {
|
||||
const option = document.createElement('option');
|
||||
option.value = cur;
|
||||
option.textContent = '(entferntes Element)';
|
||||
option.selected = true;
|
||||
select.appendChild(option);
|
||||
}
|
||||
}
|
||||
|
||||
// Zeichnet alle Verbindungslinien des Graphen neu. Notwendig nach einem
|
||||
// Import, da Drawflow die Linien aus den Bildschirmkoordinaten der Ports
|
||||
// berechnet.
|
||||
function redrawConnections(state) {
|
||||
const modules = state.editor.drawflow.drawflow;
|
||||
for (const moduleName in modules) {
|
||||
for (const id in modules[moduleName].data) {
|
||||
state.editor.updateConnectionNodes(`node-${id}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Wird der Graph importiert, während der Dialog-Container noch nicht sichtbar
|
||||
// bzw. noch in der Öffnungs-Animation ist, berechnet Drawflow die Verbindungen
|
||||
// aus falschen (skalierten oder nicht vorhandenen) Port-Koordinaten und schreibt
|
||||
// diese fest in die SVG-Pfade – die Linien sitzen dann neben den Ports oder
|
||||
// kollabieren auf den Nullpunkt.
|
||||
//
|
||||
// Daher die Linien zunächst jeden Frame neu zeichnen, bis sich die
|
||||
// Container-Geometrie (Größe und Position) über mehrere Frames nicht mehr
|
||||
// ändert (= Dialog-Animation abgeschlossen). Zusätzlich noch einige gestaffelte
|
||||
// Neuberechnungen, um späte Reflows (Font-Laden, verzögertes Layout) abzufangen.
|
||||
function redrawConnectionsWhenReady(state) {
|
||||
let lastKey = null;
|
||||
let stableFrames = 0;
|
||||
let frames = 0;
|
||||
const tick = () => {
|
||||
const c = state.container;
|
||||
if (c.clientWidth > 0 && c.clientHeight > 0) {
|
||||
const r = c.getBoundingClientRect();
|
||||
const key = [r.left, r.top, r.width, r.height].map(Math.round).join('x');
|
||||
redrawConnections(state);
|
||||
if (key === lastKey) {
|
||||
if (++stableFrames >= 3) return;
|
||||
} else {
|
||||
stableFrames = 0;
|
||||
lastKey = key;
|
||||
}
|
||||
}
|
||||
if (frames++ < 120) requestAnimationFrame(tick);
|
||||
};
|
||||
requestAnimationFrame(tick);
|
||||
|
||||
// Insurance gegen späte Layout-Änderungen nach abgeschlossener Animation.
|
||||
for (const delay of [150, 350, 600]) {
|
||||
setTimeout(() => {
|
||||
if (state.container.clientWidth > 0 && state.container.clientHeight > 0) {
|
||||
redrawConnections(state);
|
||||
}
|
||||
}, delay);
|
||||
}
|
||||
}
|
||||
|
||||
function refreshVariableSelects(state) {
|
||||
const modules = state.editor.drawflow.drawflow;
|
||||
for (const moduleName in modules) {
|
||||
const data = modules[moduleName].data;
|
||||
for (const id in data) {
|
||||
const node = data[id];
|
||||
if (node.name !== 'variable') continue;
|
||||
const select = state.container.querySelector(`#node-${id} select[df-source]`);
|
||||
if (!select) continue;
|
||||
const current = node.data && node.data.source != null ? node.data.source : '';
|
||||
fillSourceSelect(select, state.variables, current);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function attach(host) {
|
||||
if (scriptEditors.has(host)) {
|
||||
return scriptEditors.get(host);
|
||||
}
|
||||
host.classList.add('script-editor');
|
||||
host.innerHTML = '';
|
||||
const container = document.createElement('div');
|
||||
container.className = 'script-editor-container';
|
||||
container.style.width = '100%';
|
||||
container.style.height = '100%';
|
||||
host.appendChild(container);
|
||||
|
||||
const editor = new Drawflow(container);
|
||||
editor.reroute = true;
|
||||
editor.start();
|
||||
|
||||
const state = { editor, container, counter: 0, variables: [] };
|
||||
scriptEditors.set(host, state);
|
||||
|
||||
// Hindernis-bewusste, horizontale Linienführung (statt der vertikalen aus
|
||||
// dem Workflow-Editor). Für Verbindungssegmente mit Reroute-Punkten
|
||||
// (type != 'openclose') greift die einfache Kurve.
|
||||
editor.createCurvature = (sx, sy, ex, ey, curvature, type) =>
|
||||
(type && type !== 'openclose')
|
||||
? horizontalCurvature(sx, sy, ex, ey)
|
||||
: routeConnection(state, sx, sy, ex, ey);
|
||||
|
||||
container.addEventListener('dragover', e => {
|
||||
e.preventDefault();
|
||||
if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
|
||||
});
|
||||
container.addEventListener('drop', e => {
|
||||
e.preventDefault();
|
||||
const typeId = e.dataTransfer ? e.dataTransfer.getData('application/x-logictype') : '';
|
||||
if (!typeId || !LOGIC[typeId]) return;
|
||||
const rect = container.getBoundingClientRect();
|
||||
const zoom = editor.zoom;
|
||||
const x = (e.clientX - rect.left - editor.canvas_x) / zoom;
|
||||
const y = (e.clientY - rect.top - editor.canvas_y) / zoom;
|
||||
addNodeAt(state, typeId, x, y);
|
||||
});
|
||||
|
||||
// Knoten nach dem Verschieben am Raster einrasten.
|
||||
editor.on('nodeMoved', id => {
|
||||
const el = container.querySelector(`#node-${id}`);
|
||||
if (!el) return;
|
||||
const x = snap(parseFloat(el.style.left) || 0);
|
||||
const y = snap(parseFloat(el.style.top) || 0);
|
||||
el.style.left = `${x}px`;
|
||||
el.style.top = `${y}px`;
|
||||
const node = editor.drawflow.drawflow[editor.module].data[id];
|
||||
if (node) {
|
||||
node.pos_x = x;
|
||||
node.pos_y = y;
|
||||
}
|
||||
editor.updateConnectionNodes(`node-${id}`);
|
||||
});
|
||||
|
||||
return state;
|
||||
}
|
||||
|
||||
function addNodeAt(state, typeId, x, y) {
|
||||
const def = LOGIC[typeId];
|
||||
if (!def) return;
|
||||
state.editor.addNode(typeId, def.inputs, def.outputs, snap(x), snap(y), `logic-${typeId}`, defaultData(typeId), logicHtml(typeId));
|
||||
if (typeId === 'variable') {
|
||||
refreshVariableSelects(state);
|
||||
}
|
||||
}
|
||||
|
||||
function addNode(host, typeId) {
|
||||
const state = attach(host);
|
||||
const n = state.counter++;
|
||||
addNodeAt(state, typeId, 60 + (n % 6) * 50, 50 + (n % 6) * 45);
|
||||
}
|
||||
|
||||
window.scriptEditor = {
|
||||
attach,
|
||||
addNode,
|
||||
setVariables(host, variables) {
|
||||
const state = attach(host);
|
||||
state.variables = Array.isArray(variables) ? variables : [];
|
||||
refreshVariableSelects(state);
|
||||
// Geänderte Dropdown-Inhalte können die Knotenbreite und damit die
|
||||
// Portpositionen verschieben – Verbindungen neu zeichnen.
|
||||
redrawConnectionsWhenReady(state);
|
||||
},
|
||||
clear(host) {
|
||||
const state = scriptEditors.get(host);
|
||||
if (state) state.editor.clear();
|
||||
},
|
||||
setGraph(host, json) {
|
||||
const state = attach(host);
|
||||
if (!json) {
|
||||
state.editor.clear();
|
||||
return;
|
||||
}
|
||||
try {
|
||||
state.editor.import(JSON.parse(json));
|
||||
refreshVariableSelects(state);
|
||||
redrawConnectionsWhenReady(state);
|
||||
} catch (e) {
|
||||
console.error('scriptEditor.setGraph failed', e);
|
||||
state.editor.clear();
|
||||
}
|
||||
},
|
||||
exportGraph(host) {
|
||||
const state = scriptEditors.get(host);
|
||||
if (!state) return '';
|
||||
return JSON.stringify(state.editor.export());
|
||||
}
|
||||
};
|
||||
@@ -116,6 +116,9 @@ body, .tasklist-app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
/* Erlaubt dem Textblock, im Flex-Layout zu schrumpfen, statt zu überlaufen. */
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.palette-item-label {
|
||||
@@ -127,6 +130,67 @@ body, .tasklist-app {
|
||||
.palette-item-desc {
|
||||
color: var(--tle-muted);
|
||||
font-size: var(--lumo-font-size-xs);
|
||||
/* Lange Wörter umbrechen, damit der Text nicht in den Papierkorb läuft. */
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
/* Trenner zwischen festen und benutzerdefinierten Elementen. */
|
||||
.palette-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--lumo-space-s);
|
||||
margin: var(--lumo-space-m) 0 var(--lumo-space-s);
|
||||
color: var(--tle-muted);
|
||||
font-size: var(--lumo-font-size-xs);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.palette-divider::before,
|
||||
.palette-divider::after {
|
||||
content: "";
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--tle-border);
|
||||
}
|
||||
|
||||
.palette-divider-label {
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Markierung der benutzerdefinierten Elemente. */
|
||||
.palette-item-custom {
|
||||
position: relative;
|
||||
/* Rechts einen vertikalen Streifen für den Papierkorb reservieren,
|
||||
damit der Text nicht hineinläuft und unten keine Extra-Zeile entsteht. */
|
||||
padding-right: calc(var(--lumo-space-m) + 26px);
|
||||
border-style: dashed;
|
||||
background:
|
||||
linear-gradient(0deg, rgba(37, 99, 235, 0.14), rgba(37, 99, 235, 0.14)),
|
||||
var(--tle-panel);
|
||||
}
|
||||
|
||||
.palette-item-delete {
|
||||
position: absolute;
|
||||
right: var(--lumo-space-s);
|
||||
bottom: var(--lumo-space-s);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
padding: 2px;
|
||||
color: var(--tle-muted);
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
transition: color 120ms ease, opacity 120ms ease, transform 120ms ease;
|
||||
}
|
||||
|
||||
.palette-item-custom:hover .palette-item-delete {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.palette-item-delete:hover {
|
||||
color: var(--lumo-error-color, #e53935);
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
.node-editor-host {
|
||||
@@ -168,7 +232,11 @@ body, .tasklist-app {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.task-list-editor .drawflow .connection[class*="node_in_node_"] .main-path {
|
||||
/* Nur fertige Verbindungen sind anklickbar; die in Entstehung befindliche
|
||||
Verbindung (ohne node_in_node--Klasse) bleibt unberührt, damit das
|
||||
Verbinden per Drag nicht gestört wird.
|
||||
Hinweis: Drawflow vergibt die Klasse mit Bindestrich (node_in_node-<id>). */
|
||||
.task-list-editor .drawflow .connection[class*="node_in_node-"] .main-path {
|
||||
pointer-events: stroke;
|
||||
}
|
||||
|
||||
@@ -181,6 +249,7 @@ body, .tasklist-app {
|
||||
}
|
||||
|
||||
.task-node {
|
||||
position: relative;
|
||||
background: var(--tle-panel);
|
||||
border: 1px solid var(--tle-border);
|
||||
border-radius: 10px;
|
||||
@@ -192,6 +261,37 @@ body, .tasklist-app {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.task-node-gear {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: var(--tle-muted, #6b7280);
|
||||
opacity: 0.55;
|
||||
cursor: pointer;
|
||||
z-index: 6;
|
||||
transition: opacity 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
.task-node-gear:hover {
|
||||
opacity: 1;
|
||||
color: var(--tle-text, #1f2933);
|
||||
}
|
||||
|
||||
.task-node-gear svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Virtuelle Workflow-Markierungen (Start/Abschluss) haben keine Einstellungen. */
|
||||
.type-start .task-node-gear,
|
||||
.type-abschluss .task-node-gear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.task-node-header {
|
||||
height: 6px;
|
||||
width: 100%;
|
||||
@@ -265,12 +365,19 @@ body, .tasklist-app {
|
||||
|
||||
.task-list-editor .drawflow .connection .main-path {
|
||||
stroke: #94a3b8;
|
||||
stroke-width: 2.5px;
|
||||
stroke-width: 4px;
|
||||
}
|
||||
|
||||
.task-list-editor .drawflow .connection .main-path:hover {
|
||||
stroke: var(--tle-accent);
|
||||
stroke-width: 3px;
|
||||
stroke-width: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Ausgewählte Verbindung – hervorgehoben und als löschbar markiert. */
|
||||
.task-list-editor .drawflow .connection .main-path.selected {
|
||||
stroke: var(--lumo-error-color, #e53935);
|
||||
stroke-width: 5px;
|
||||
}
|
||||
|
||||
.properties-content {
|
||||
@@ -316,3 +423,178 @@ body, .tasklist-app {
|
||||
font-size: var(--lumo-font-size-s);
|
||||
margin: 0 0 var(--lumo-space-s);
|
||||
}
|
||||
|
||||
.properties-fieldlist-label {
|
||||
color: var(--lumo-secondary-text-color);
|
||||
font-size: var(--lumo-font-size-s);
|
||||
font-weight: 500;
|
||||
margin-bottom: var(--lumo-space-xs);
|
||||
}
|
||||
|
||||
/* --- Script-/Logik-Editor --- */
|
||||
.script-editor,
|
||||
.script-editor-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Raster-Hintergrund wie im Workflow-Editor. */
|
||||
.script-editor-host {
|
||||
background:
|
||||
radial-gradient(circle, var(--tle-canvas-grid) 1px, transparent 1px) 0 0 / 24px 24px,
|
||||
var(--tle-canvas-bg);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.script-editor .drawflow {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.script-editor .drawflow .drawflow-node {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
/* Keine roten Ecken bei selektierten Knoten (Drawflow-Default überschreiben). */
|
||||
.script-editor .drawflow .drawflow-node.selected {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.logic-node {
|
||||
background: var(--tle-panel, #fff);
|
||||
border: 1px solid var(--tle-border, #d8dee9);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
|
||||
padding: 8px 10px;
|
||||
min-width: 150px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.logic-node-title {
|
||||
font-weight: 600;
|
||||
font-size: var(--lumo-font-size-s);
|
||||
color: var(--tle-text, #1f2933);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logic-node .logic-input,
|
||||
.logic-node .logic-select {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
font-size: var(--lumo-font-size-xs);
|
||||
padding: 4px 6px;
|
||||
border: 1px solid var(--tle-border, #d8dee9);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.logic-ports {
|
||||
font-size: 10px;
|
||||
color: var(--tle-muted, #6b7280);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logic-node.logic-compare { border-top: 3px solid #2563eb; }
|
||||
.logic-node.logic-if { border-top: 3px solid #d97706; }
|
||||
.logic-node.logic-bool { border-top: 3px solid #7c3aed; }
|
||||
.logic-node.logic-constant { border-top: 3px solid #0891b2; }
|
||||
.logic-node.logic-variable { border-top: 3px solid #059669; }
|
||||
.logic-node.logic-result { border-top: 3px solid #dc2626; }
|
||||
.logic-node.logic-output { border-top: 3px solid #0f766e; }
|
||||
|
||||
/* Verfügbare Variablen im Script-Dialog */
|
||||
.script-vars {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 10px;
|
||||
background: var(--lumo-contrast-5pct);
|
||||
border-radius: var(--lumo-border-radius-m);
|
||||
}
|
||||
|
||||
.script-vars-label {
|
||||
font-weight: 600;
|
||||
font-size: var(--lumo-font-size-s);
|
||||
color: var(--tle-text, #1f2933);
|
||||
}
|
||||
|
||||
.script-vars-empty {
|
||||
font-size: var(--lumo-font-size-s);
|
||||
color: var(--tle-muted, #6b7280);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.script-var-chip {
|
||||
font-size: var(--lumo-font-size-xs);
|
||||
padding: 2px 10px;
|
||||
border-radius: 999px;
|
||||
background: #059669;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Operatoren-Palette links im Script-Dialog */
|
||||
.script-palette {
|
||||
flex-shrink: 0;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
gap: 6px;
|
||||
background: var(--lumo-contrast-5pct);
|
||||
border-radius: var(--lumo-border-radius-m);
|
||||
}
|
||||
|
||||
.script-palette .panel-heading {
|
||||
margin: 0 0 4px;
|
||||
font-size: var(--lumo-font-size-s);
|
||||
color: var(--tle-muted, #6b7280);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.script-tile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--lumo-space-s);
|
||||
padding: 6px 8px;
|
||||
border: 1px solid var(--tle-border);
|
||||
border-radius: 9px;
|
||||
background: var(--tle-panel);
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
|
||||
}
|
||||
|
||||
.script-tile:hover {
|
||||
border-color: var(--block-color, var(--tle-border));
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
|
||||
}
|
||||
|
||||
.script-tile:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.script-tile-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.script-tile-label {
|
||||
font-weight: 600;
|
||||
color: var(--tle-text);
|
||||
font-size: var(--lumo-font-size-s);
|
||||
}
|
||||
|
||||
@@ -53,6 +53,11 @@ public class NodeEditor extends Div {
|
||||
getElement().executeJs("window.taskListEditor.updateNodeLabel(this, $0, $1)", nodeId, label);
|
||||
}
|
||||
|
||||
/** Setzt die Anzahl der Ausgänge eines Knotens (z. B. für Script-Elemente). */
|
||||
public void setNodeOutputs(int nodeId, int count) {
|
||||
getElement().executeJs("window.taskListEditor.setNodeOutputs(this, $0, $1)", nodeId, count);
|
||||
}
|
||||
|
||||
public void clear() {
|
||||
getElement().executeJs("window.taskListEditor.clear(this)");
|
||||
}
|
||||
@@ -98,6 +103,10 @@ public class NodeEditor extends Div {
|
||||
return addListener(NodeSelectedEvent.class, listener);
|
||||
}
|
||||
|
||||
public Registration addNodeActivatedListener(ComponentEventListener<NodeActivatedEvent> listener) {
|
||||
return addListener(NodeActivatedEvent.class, listener);
|
||||
}
|
||||
|
||||
public Registration addNodeUnselectedListener(ComponentEventListener<NodeUnselectedEvent> listener) {
|
||||
return addListener(NodeUnselectedEvent.class, listener);
|
||||
}
|
||||
@@ -116,6 +125,11 @@ public class NodeEditor extends Div {
|
||||
fireEvent(new NodeSelectedEvent(this, nodeId));
|
||||
}
|
||||
|
||||
@ClientCallable
|
||||
private void onNodeActivated(int nodeId) {
|
||||
fireEvent(new NodeActivatedEvent(this, nodeId));
|
||||
}
|
||||
|
||||
@ClientCallable
|
||||
private void onNodeUnselected() {
|
||||
fireEvent(new NodeUnselectedEvent(this));
|
||||
@@ -151,6 +165,17 @@ public class NodeEditor extends Div {
|
||||
public int nodeId() { return nodeId; }
|
||||
}
|
||||
|
||||
public static class NodeActivatedEvent extends ComponentEvent<NodeEditor> {
|
||||
private final int nodeId;
|
||||
|
||||
public NodeActivatedEvent(NodeEditor source, int nodeId) {
|
||||
super(source, true);
|
||||
this.nodeId = nodeId;
|
||||
}
|
||||
|
||||
public int nodeId() { return nodeId; }
|
||||
}
|
||||
|
||||
public static class NodeUnselectedEvent extends ComponentEvent<NodeEditor> {
|
||||
public NodeUnselectedEvent(NodeEditor source) {
|
||||
super(source, true);
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
package de.assecutor.tasklisteditor.component;
|
||||
|
||||
import com.vaadin.flow.component.AttachEvent;
|
||||
import com.vaadin.flow.component.dependency.JsModule;
|
||||
import com.vaadin.flow.component.dependency.NpmPackage;
|
||||
import com.vaadin.flow.component.html.Div;
|
||||
import com.vaadin.flow.function.SerializableConsumer;
|
||||
import elemental.json.JsonArray;
|
||||
|
||||
/**
|
||||
* Eigenständiger Logik-Canvas (Drawflow) zum grafischen Zusammenstecken
|
||||
* kleiner Code-Snippets innerhalb eines Script-Blocks.
|
||||
*
|
||||
* <p>Die Eigenschaften der Logik-Knoten (Operator, Wert, Ergebnis …) werden
|
||||
* über Drawflow-{@code df-}-Bindings direkt im Knoten gepflegt und sind daher
|
||||
* Teil des exportierten Graph-JSON.
|
||||
*/
|
||||
@JsModule("./node-editor/script-editor.js")
|
||||
@NpmPackage(value = "drawflow", version = "0.0.59")
|
||||
public class ScriptEditor extends Div {
|
||||
|
||||
public ScriptEditor() {
|
||||
addClassName("script-editor-host");
|
||||
getElement().getStyle().set("width", "100%").set("height", "100%");
|
||||
}
|
||||
|
||||
@Override
|
||||
protected void onAttach(AttachEvent attachEvent) {
|
||||
super.onAttach(attachEvent);
|
||||
getElement().executeJs("window.scriptEditor.attach(this)");
|
||||
}
|
||||
|
||||
/** Fügt einen Logik-Knoten des angegebenen Typs hinzu. */
|
||||
public void addNode(String typeId) {
|
||||
getElement().executeJs("window.scriptEditor.addNode(this, $0)", typeId);
|
||||
}
|
||||
|
||||
/** Lädt einen zuvor exportierten Logik-Graphen (JSON) in den Canvas. */
|
||||
public void setGraph(String json) {
|
||||
getElement().executeJs("window.scriptEditor.setGraph(this, $0)", json);
|
||||
}
|
||||
|
||||
/**
|
||||
* Stellt die verfügbaren Variablen (eingegebene Daten der anderen
|
||||
* Elemente) für die Wert-Knoten bereit. Erwartet ein JSON-Array aus
|
||||
* Objekten mit {@code key} und {@code label}.
|
||||
*/
|
||||
public void setVariables(JsonArray variables) {
|
||||
getElement().executeJs("window.scriptEditor.setVariables(this, $0)", variables);
|
||||
}
|
||||
|
||||
public void clear() {
|
||||
getElement().executeJs("window.scriptEditor.clear(this)");
|
||||
}
|
||||
|
||||
/** Liest den aktuellen Logik-Graphen als JSON-String aus. */
|
||||
public void exportGraph(SerializableConsumer<String> callback) {
|
||||
getElement().executeJs("return window.scriptEditor.exportGraph(this)")
|
||||
.then(String.class, callback::accept);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
package de.assecutor.tasklisteditor.config;
|
||||
|
||||
import org.springframework.boot.context.properties.ConfigurationProperties;
|
||||
import org.springframework.stereotype.Component;
|
||||
|
||||
import java.util.HashMap;
|
||||
import java.util.Map;
|
||||
|
||||
/**
|
||||
* Konfiguration der MongoDB-Collections, in denen die Einstellungen der
|
||||
* einzelnen Element-Typen abgelegt werden.
|
||||
*
|
||||
* <p>Die Collection-Namen werden aus {@code application.properties} gebunden,
|
||||
* deren Werte wiederum aus den {@code MONGODB_ELEMENT_*}-Variablen der
|
||||
* {@code .env} stammen:
|
||||
* <pre>
|
||||
* tasklist.element-collections[text-liste-erfassen]=${MONGODB_ELEMENT_TEXT_LISTE_COLLECTION:element_text_liste_erfassen}
|
||||
* </pre>
|
||||
*
|
||||
* <p>Für jeden (festen wie benutzerdefinierten) Typ muss eine Zuordnung
|
||||
* existieren; benutzerdefinierte Typen werden zuvor auf ihren statischen
|
||||
* Basistyp aufgelöst. Fehlt ein Eintrag, ist das ein Konfigurationsfehler.
|
||||
*/
|
||||
@Component
|
||||
@ConfigurationProperties(prefix = "tasklist")
|
||||
public class ElementCollectionProperties {
|
||||
|
||||
/** Typ-ID → Collection-Name. */
|
||||
private final Map<String, String> elementCollections = new HashMap<>();
|
||||
|
||||
public Map<String, String> getElementCollections() {
|
||||
return elementCollections;
|
||||
}
|
||||
|
||||
/**
|
||||
* Liefert den Collection-Namen für die angegebene Typ-ID.
|
||||
*
|
||||
* @throws IllegalStateException wenn für die Typ-ID keine Zuordnung
|
||||
* konfiguriert ist
|
||||
*/
|
||||
public String collectionFor(String typeId) {
|
||||
String configured = elementCollections.get(typeId);
|
||||
if (configured == null || configured.isBlank()) {
|
||||
throw new IllegalStateException(
|
||||
"Keine Collection für Element-Typ '" + typeId + "' konfiguriert "
|
||||
+ "(tasklist.element-collections).");
|
||||
}
|
||||
return configured;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
package de.assecutor.tasklisteditor.document;
|
||||
|
||||
import de.assecutor.tasklisteditor.model.CustomPropertyState;
|
||||
import org.springframework.data.annotation.Id;
|
||||
import org.springframework.data.mongodb.core.index.Indexed;
|
||||
import org.springframework.data.mongodb.core.mapping.Document;
|
||||
|
||||
import java.time.Instant;
|
||||
import java.util.List;
|
||||
|
||||
/**
|
||||
* In MongoDB gespeicherter benutzerdefinierter Typ. Enthält alle Daten, um den
|
||||
* {@code BlockType} ohne Rückgriff auf den Basis-Typ wiederherstellen zu können
|
||||
* (Aussehen, Ein-/Ausgänge und die Eigenschaften mit ihren erfassten Vorgaben).
|
||||
*/
|
||||
@Document(collection = "${MONGODB_CUSTOM_TYPE_COLLECTION:custom_types}")
|
||||
public class CustomTypeDocument {
|
||||
|
||||
@Id
|
||||
private String id;
|
||||
|
||||
/** Eindeutige Typnummer (>= 1000); dient zugleich als Schlüssel. */
|
||||
@Indexed(unique = true)
|
||||
private int taskType;
|
||||
|
||||
private String typeId;
|
||||
private String label;
|
||||
private String baseTypeId;
|
||||
private String description;
|
||||
private String icon;
|
||||
private String color;
|
||||
private int inputs;
|
||||
private int outputs;
|
||||
private List<CustomPropertyState> properties;
|
||||
private Instant createdAt;
|
||||
|
||||
public CustomTypeDocument() {
|
||||
}
|
||||
|
||||
public String getId() {
|
||||
return id;
|
||||
}
|
||||
|
||||
public void setId(String id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
public int getTaskType() {
|
||||
return taskType;
|
||||
}
|
||||
|
||||
public void setTaskType(int taskType) {
|
||||
this.taskType = taskType;
|
||||
}
|
||||
|
||||
public String getTypeId() {
|
||||
return typeId;
|
||||
}
|
||||
|
||||
public void setTypeId(String typeId) {
|
||||
this.typeId = typeId;
|
||||
}
|
||||
|
||||
public String getLabel() {
|
||||
return label;
|
||||
}
|
||||
|
||||
public void setLabel(String label) {
|
||||
this.label = label;
|
||||
}
|
||||
|
||||
public String getBaseTypeId() {
|
||||
return baseTypeId;
|
||||
}
|
||||
|
||||
public void setBaseTypeId(String baseTypeId) {
|
||||
this.baseTypeId = baseTypeId;
|
||||
}
|
||||
|
||||
public String getDescription() {
|
||||
return description;
|
||||
}
|
||||
|
||||
public void setDescription(String description) {
|
||||
this.description = description;
|
||||
}
|
||||
|
||||
public String getIcon() {
|
||||
return icon;
|
||||
}
|
||||
|
||||
public void setIcon(String icon) {
|
||||
this.icon = icon;
|
||||
}
|
||||
|
||||
public String getColor() {
|
||||
return color;
|
||||
}
|
||||
|
||||
public void setColor(String color) {
|
||||
this.color = color;
|
||||
}
|
||||
|
||||
public int getInputs() {
|
||||
return inputs;
|
||||
}
|
||||
|
||||
public void setInputs(int inputs) {
|
||||
this.inputs = inputs;
|
||||
}
|
||||
|
||||
public int getOutputs() {
|
||||
return outputs;
|
||||
}
|
||||
|
||||
public void setOutputs(int outputs) {
|
||||
this.outputs = outputs;
|
||||
}
|
||||
|
||||
public List<CustomPropertyState> getProperties() {
|
||||
return properties;
|
||||
}
|
||||
|
||||
public void setProperties(List<CustomPropertyState> properties) {
|
||||
this.properties = properties;
|
||||
}
|
||||
|
||||
public Instant getCreatedAt() {
|
||||
return createdAt;
|
||||
}
|
||||
|
||||
public void setCreatedAt(Instant createdAt) {
|
||||
this.createdAt = createdAt;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
package de.assecutor.tasklisteditor.document;
|
||||
|
||||
import org.springframework.data.annotation.Id;
|
||||
|
||||
import java.time.Instant;
|
||||
import java.util.Map;
|
||||
|
||||
/**
|
||||
* Einstellungen eines einzelnen platzierten Elements (Block-Instanz) eines
|
||||
* Canvas. Wird beim Speichern eines Canvas je Element-Typ in eine eigene
|
||||
* MongoDB-Collection geschrieben (Collection-Name pro Typ konfigurierbar, siehe
|
||||
* {@code tasklist.element-collections} bzw. die {@code MONGODB_ELEMENT_*}-
|
||||
* Variablen in der {@code .env}).
|
||||
*
|
||||
* <p>Die Verknüpfung zum Canvas erfolgt über {@link #canvasId}; {@link #nodeId}
|
||||
* identifiziert den Knoten innerhalb des Canvas.
|
||||
*/
|
||||
public class ElementSettingsDocument {
|
||||
|
||||
@Id
|
||||
private String id;
|
||||
|
||||
/** ID des zugehörigen {@link CanvasDocument}. */
|
||||
private String canvasId;
|
||||
|
||||
/** Anzeigename des Canvas zum Zeitpunkt des Speicherns. */
|
||||
private String canvasName;
|
||||
|
||||
/** Knoten-ID innerhalb des Canvas (Drawflow). */
|
||||
private int nodeId;
|
||||
|
||||
/** Typ-ID des Elements (z. B. {@code text-liste-erfassen} oder {@code custom-1000}). */
|
||||
private String typeId;
|
||||
|
||||
/**
|
||||
* Bei benutzerdefinierten Typen die Typ-ID des statischen Basistyps, in
|
||||
* dessen Collection das Dokument abgelegt wird; bei festen Typen {@code null}.
|
||||
*/
|
||||
private String baseTypeId;
|
||||
|
||||
/** Bezeichnung des Tasks (entspricht {@code topic}). */
|
||||
private String topic;
|
||||
|
||||
/** Erfasste Property-Werte des Elements. */
|
||||
private Map<String, Object> values;
|
||||
|
||||
private Instant createdAt;
|
||||
|
||||
public ElementSettingsDocument() {
|
||||
}
|
||||
|
||||
public ElementSettingsDocument(String canvasId, String canvasName, int nodeId,
|
||||
String typeId, String baseTypeId, String topic,
|
||||
Map<String, Object> values, Instant createdAt) {
|
||||
this.canvasId = canvasId;
|
||||
this.canvasName = canvasName;
|
||||
this.nodeId = nodeId;
|
||||
this.typeId = typeId;
|
||||
this.baseTypeId = baseTypeId;
|
||||
this.topic = topic;
|
||||
this.values = values;
|
||||
this.createdAt = createdAt;
|
||||
}
|
||||
|
||||
public String getId() {
|
||||
return id;
|
||||
}
|
||||
|
||||
public void setId(String id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
public String getCanvasId() {
|
||||
return canvasId;
|
||||
}
|
||||
|
||||
public void setCanvasId(String canvasId) {
|
||||
this.canvasId = canvasId;
|
||||
}
|
||||
|
||||
public String getCanvasName() {
|
||||
return canvasName;
|
||||
}
|
||||
|
||||
public void setCanvasName(String canvasName) {
|
||||
this.canvasName = canvasName;
|
||||
}
|
||||
|
||||
public int getNodeId() {
|
||||
return nodeId;
|
||||
}
|
||||
|
||||
public void setNodeId(int nodeId) {
|
||||
this.nodeId = nodeId;
|
||||
}
|
||||
|
||||
public String getTypeId() {
|
||||
return typeId;
|
||||
}
|
||||
|
||||
public void setTypeId(String typeId) {
|
||||
this.typeId = typeId;
|
||||
}
|
||||
|
||||
public String getBaseTypeId() {
|
||||
return baseTypeId;
|
||||
}
|
||||
|
||||
public void setBaseTypeId(String baseTypeId) {
|
||||
this.baseTypeId = baseTypeId;
|
||||
}
|
||||
|
||||
public String getTopic() {
|
||||
return topic;
|
||||
}
|
||||
|
||||
public void setTopic(String topic) {
|
||||
this.topic = topic;
|
||||
}
|
||||
|
||||
public Map<String, Object> getValues() {
|
||||
return values;
|
||||
}
|
||||
|
||||
public void setValues(Map<String, Object> values) {
|
||||
this.values = values;
|
||||
}
|
||||
|
||||
public Instant getCreatedAt() {
|
||||
return createdAt;
|
||||
}
|
||||
|
||||
public void setCreatedAt(Instant createdAt) {
|
||||
this.createdAt = createdAt;
|
||||
}
|
||||
}
|
||||
@@ -11,6 +11,22 @@ public record BlockType(
|
||||
int taskType,
|
||||
int inputs,
|
||||
int outputs,
|
||||
List<PropertyDefinition> properties
|
||||
List<PropertyDefinition> properties,
|
||||
/** Verweis auf den statischen Basistyp (nur bei benutzerdefinierten Typen, sonst {@code null}). */
|
||||
String baseTypeId
|
||||
) {
|
||||
/** Konstruktor für feste Standard-Typen ohne Basistyp-Verweis. */
|
||||
public BlockType(String id, String label, String description, String icon, String color,
|
||||
int taskType, int inputs, int outputs, List<PropertyDefinition> properties) {
|
||||
this(id, label, description, icon, color, taskType, inputs, outputs, properties, null);
|
||||
}
|
||||
|
||||
/**
|
||||
* Rein virtuelle Blöcke (z. B. Start/Abschluss) dienen nur der
|
||||
* Workflow-Darstellung im Canvas und werden nicht in die Task-Liste
|
||||
* exportiert. Sie sind an einer negativen Typnummer erkennbar.
|
||||
*/
|
||||
public boolean isVirtual() {
|
||||
return taskType < 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
package de.assecutor.tasklisteditor.model;
|
||||
|
||||
import org.springframework.beans.factory.annotation.Value;
|
||||
import org.springframework.stereotype.Component;
|
||||
|
||||
import java.util.LinkedHashMap;
|
||||
@@ -21,14 +22,46 @@ public class BlockTypeRegistry {
|
||||
|
||||
private final Map<String, BlockType> types = new LinkedHashMap<>();
|
||||
|
||||
public BlockTypeRegistry() {
|
||||
/** Typnummer der virtuellen Start-Markierung (negativ = nicht exportiert). */
|
||||
public static final int START_TASK_TYPE = -1;
|
||||
|
||||
/** Typnummer der virtuellen Abschluss-Markierung (negativ = nicht exportiert). */
|
||||
public static final int END_TASK_TYPE = -2;
|
||||
|
||||
public BlockTypeRegistry(@Value("${tasklist.hide-script-block:false}") boolean hideScriptBlock) {
|
||||
// Rein virtuelle Workflow-Markierungen: Start (nur Ausgang) und Abschluss
|
||||
// (nur Eingang). Sie dienen ausschließlich der Darstellung eines
|
||||
// vollständigen Ablaufs im Canvas und werden NICHT exportiert
|
||||
// (negative Typnummer, siehe BlockType#isVirtual).
|
||||
register(new BlockType(
|
||||
"start",
|
||||
"Start",
|
||||
"Virtuelle Markierung für den Beginn des Workflows (wird nicht exportiert).",
|
||||
"vaadin:play",
|
||||
"#16a34a",
|
||||
START_TASK_TYPE,
|
||||
0, 1,
|
||||
List.of()
|
||||
));
|
||||
|
||||
register(new BlockType(
|
||||
"abschluss",
|
||||
"Abschluss",
|
||||
"Virtuelle Markierung für das Ende des Workflows (wird nicht exportiert).",
|
||||
"vaadin:flag-checkered",
|
||||
"#b91c1c",
|
||||
END_TASK_TYPE,
|
||||
1, 0,
|
||||
List.of()
|
||||
));
|
||||
|
||||
register(new BlockType(
|
||||
"ankunft-melden",
|
||||
"Ankunft melden",
|
||||
"Erfasst die Ankunft am Einsatzort (Bestätigungsschaltfläche).",
|
||||
"vaadin:map-marker",
|
||||
"#2563eb",
|
||||
3,
|
||||
1,
|
||||
1, 1,
|
||||
List.of(
|
||||
PropertyDefinition.bool("track", "GPS-Position erfassen", true),
|
||||
@@ -59,7 +92,7 @@ public class BlockTypeRegistry {
|
||||
"Nimmt eine Anzahl von Fotos auf.",
|
||||
"vaadin:camera",
|
||||
"#059669",
|
||||
4,
|
||||
3,
|
||||
1, 1,
|
||||
List.of(
|
||||
PropertyDefinition.number("min", "Mindestanzahl Fotos", 1),
|
||||
@@ -69,32 +102,33 @@ public class BlockTypeRegistry {
|
||||
)
|
||||
));
|
||||
|
||||
// Fasst die früheren App-Typen Quittungsgeber, Bemerkung und
|
||||
// Kommissionsnummer zu einem einzigen Texterfassungs-Task zusammen.
|
||||
register(new BlockType(
|
||||
"quittungsgeber-erfassen",
|
||||
"Quittungsgeber erfassen",
|
||||
"Erfasst den Namen des Quittungsgebers und dessen Anrede aus einer Auswahlliste.",
|
||||
"vaadin:user-check",
|
||||
"Erfasst den Quittungsgeber per Eingabefeld.",
|
||||
"vaadin:input",
|
||||
"#dc2626",
|
||||
7,
|
||||
1, 1,
|
||||
List.of(
|
||||
PropertyDefinition.textArea("entries", "Auswahloptionen (eine pro Zeile)"),
|
||||
PropertyDefinition.number("max_len", "Maximale Zeichenanzahl Name", 40),
|
||||
PropertyDefinition.number("max_len", "Maximale Zeichenanzahl (0 = unbegrenzt)", 0),
|
||||
PropertyDefinition.bool("opt", "Optionale Aufgabe", false),
|
||||
PropertyDefinition.bool("reenter", "Erneut bearbeitbar", false)
|
||||
)
|
||||
));
|
||||
|
||||
register(new BlockType(
|
||||
"stationshinweis",
|
||||
"Stationshinweis",
|
||||
"Lässt einen mehrzeiligen Hinweis zur Station erfassen.",
|
||||
"vaadin:clipboard-text",
|
||||
"#0891b2",
|
||||
"bemerkung-erfassen",
|
||||
"Bemerkung erfassen",
|
||||
"Erfasst eine Bemerkung per Eingabefeld.",
|
||||
"vaadin:input",
|
||||
"#dc2626",
|
||||
8,
|
||||
1, 1,
|
||||
List.of(
|
||||
PropertyDefinition.textArea("txt", "Vorgabetext / Hinweis"),
|
||||
PropertyDefinition.number("max_len", "Maximale Zeichenanzahl (0 = unbegrenzt)", 0),
|
||||
PropertyDefinition.bool("opt", "Optionale Aufgabe", false),
|
||||
PropertyDefinition.bool("reenter", "Erneut bearbeitbar", false)
|
||||
)
|
||||
@@ -103,33 +137,124 @@ public class BlockTypeRegistry {
|
||||
register(new BlockType(
|
||||
"kommissionsnummer-erfassen",
|
||||
"Kommissionsnummer erfassen",
|
||||
"Erfasst eine Kommissionsnummer per Texteingabe.",
|
||||
"vaadin:hash",
|
||||
"#d97706",
|
||||
"Erfasst eine Kommissionsnummer per Eingabefeld.",
|
||||
"vaadin:abacus",
|
||||
"#0891b2",
|
||||
9,
|
||||
1, 1,
|
||||
List.of(
|
||||
PropertyDefinition.number("max_len", "Maximale Zeichenanzahl", 0),
|
||||
PropertyDefinition.number("max_len", "Maximale Zeichenanzahl (0 = unbegrenzt)", 0),
|
||||
PropertyDefinition.bool("opt", "Optionale Aufgabe", false),
|
||||
PropertyDefinition.bool("reenter", "Erneut bearbeitbar", false)
|
||||
)
|
||||
));
|
||||
|
||||
register(new BlockType(
|
||||
"abhol-lieferstatus",
|
||||
"Abhol-/Lieferstatus",
|
||||
"Lässt einen Status aus einer Auswahlliste wählen, optional mit Bemerkung.",
|
||||
"vaadin:truck",
|
||||
"#4f46e5",
|
||||
11,
|
||||
"checkbox",
|
||||
"Checkbox",
|
||||
"Einfache Bestätigung per Häkchen ohne weitere Eingabe.",
|
||||
"vaadin:check-square-o",
|
||||
"#16a34a",
|
||||
6,
|
||||
1, 1,
|
||||
List.of(
|
||||
PropertyDefinition.textArea("entries", "Statusoptionen (eine pro Zeile)"),
|
||||
PropertyDefinition.bool("query_remark", "Bemerkung abfragen", false),
|
||||
PropertyDefinition.bool("opt", "Optionale Aufgabe", false),
|
||||
PropertyDefinition.bool("reenter", "Erneut bearbeitbar", false)
|
||||
)
|
||||
));
|
||||
|
||||
register(new BlockType(
|
||||
"barcode-scannen",
|
||||
"Barcode scannen",
|
||||
"Erfasst eine Liste gescannter Barcodes. (In der Flutter-App deaktiviert.)",
|
||||
"vaadin:barcode",
|
||||
"#0d9488",
|
||||
5,
|
||||
1, 1,
|
||||
List.of(
|
||||
PropertyDefinition.bool("opt", "Optionale Aufgabe", false),
|
||||
PropertyDefinition.bool("reenter", "Erneut bearbeitbar", false)
|
||||
)
|
||||
));
|
||||
|
||||
// Vereint den früheren "Status" und "Abhol-/Lieferstatus" der App
|
||||
// zu einer Status-Auswahlliste auf Basis der choices-Struktur.
|
||||
register(new BlockType(
|
||||
"statusauswahl",
|
||||
"Statusauswahl",
|
||||
"Lässt einen Status aus einer Auswahlliste wählen.",
|
||||
"vaadin:list-select",
|
||||
"#ea580c",
|
||||
11,
|
||||
1, 1,
|
||||
List.of(
|
||||
PropertyDefinition.textArea("choices", "Statusoptionen (eine pro Zeile)"),
|
||||
PropertyDefinition.bool("opt", "Optionale Aufgabe", false),
|
||||
PropertyDefinition.bool("reenter", "Erneut bearbeitbar", false)
|
||||
)
|
||||
));
|
||||
|
||||
// Listen-Tasks: erfassen mehrerer gleichartiger Werte. Die Anzahl wird
|
||||
// analog zu "Fotos aufnehmen" über min/max gesteuert. Diese Typen haben
|
||||
// (noch) keinen Handler in der stadtbote-App und liegen daher oberhalb
|
||||
// des dort genutzten Bereichs (1–11).
|
||||
register(new BlockType(
|
||||
"text-liste-erfassen",
|
||||
"Liste von Texten erfassen",
|
||||
"Erfasst mehrere Texteinträge über vordefinierte Eingabefelder.",
|
||||
"vaadin:lines-list",
|
||||
"#4338ca",
|
||||
12,
|
||||
1, 1,
|
||||
List.of(
|
||||
PropertyDefinition.fieldList("fields", "Textfelder (Titel + Platzhalter)"),
|
||||
PropertyDefinition.bool("opt", "Optionale Aufgabe", false),
|
||||
PropertyDefinition.bool("reenter", "Erneut bearbeitbar", false)
|
||||
)
|
||||
));
|
||||
|
||||
register(new BlockType(
|
||||
"zahl-liste-erfassen",
|
||||
"Liste von Zahlen erfassen",
|
||||
"Erfasst mehrere numerische Werte über vordefinierte Eingabefelder.",
|
||||
"vaadin:list-ol",
|
||||
"#0369a1",
|
||||
13,
|
||||
1, 1,
|
||||
List.of(
|
||||
PropertyDefinition.fieldList("fields", "Zahlenfelder (Titel + Platzhalter)"),
|
||||
PropertyDefinition.bool("opt", "Optionale Aufgabe", false),
|
||||
PropertyDefinition.bool("reenter", "Erneut bearbeitbar", false)
|
||||
)
|
||||
));
|
||||
|
||||
register(new BlockType(
|
||||
"checkbox-liste-erfassen",
|
||||
"Liste von Checkboxen erfassen",
|
||||
"Lässt mehrere vordefinierte Optionen per Checkbox ankreuzen.",
|
||||
"vaadin:tasks",
|
||||
"#15803d",
|
||||
14,
|
||||
1, 1,
|
||||
List.of(
|
||||
PropertyDefinition.nameList("entries", "Name der Checkboxen"),
|
||||
PropertyDefinition.bool("opt", "Optionale Aufgabe", false),
|
||||
PropertyDefinition.bool("reenter", "Erneut bearbeitbar", false)
|
||||
)
|
||||
));
|
||||
|
||||
if (!hideScriptBlock) {
|
||||
register(new BlockType(
|
||||
"script",
|
||||
"Script",
|
||||
"Kleines Logik-Snippet grafisch zusammenstellen (if/else, Vergleiche …).",
|
||||
"vaadin:code",
|
||||
"#475569",
|
||||
0,
|
||||
1, 0,
|
||||
List.of()
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
private void register(BlockType type) {
|
||||
@@ -143,4 +268,79 @@ public class BlockTypeRegistry {
|
||||
public Optional<BlockType> find(String id) {
|
||||
return Optional.ofNullable(types.get(id));
|
||||
}
|
||||
|
||||
/** Die festen Standard-Typen (Typnummer 1–8), auf denen eigene Typen aufbauen. */
|
||||
public List<BlockType> baseTypes() {
|
||||
return types.values().stream()
|
||||
.filter(t -> t.taskType() >= 1 && t.taskType() < CUSTOM_TYPE_START)
|
||||
.toList();
|
||||
}
|
||||
|
||||
/** Startwert für benutzerdefinierte Typnummern. */
|
||||
public static final int CUSTOM_TYPE_START = 1000;
|
||||
|
||||
/** Nächste freie Typnummer ab {@value #CUSTOM_TYPE_START}. */
|
||||
public synchronized int nextCustomTaskType() {
|
||||
int next = CUSTOM_TYPE_START;
|
||||
for (BlockType type : types.values()) {
|
||||
if (type.taskType() >= next) {
|
||||
next = type.taskType() + 1;
|
||||
}
|
||||
}
|
||||
return next;
|
||||
}
|
||||
|
||||
/**
|
||||
* Legt einen benutzerdefinierten Typ an. Er übernimmt Aussehen, Ein-/Ausgänge
|
||||
* und Eigenschaftsstruktur des Basis-Typs, erhält aber eine eigene Typnummer
|
||||
* ({@code >= 1000}) und eine eigene Bezeichnung.
|
||||
*
|
||||
* @param taskType die (freie) Typnummer
|
||||
* @param base der zugrunde liegende Standard-Typ
|
||||
* @param label Bezeichnung des neuen Typs
|
||||
* @param properties Eigenschaften (i. d. R. die des Basis-Typs mit erfassten Vorgaben)
|
||||
*/
|
||||
public synchronized BlockType registerCustom(int taskType, BlockType base, String label,
|
||||
List<PropertyDefinition> properties) {
|
||||
String id = "custom-" + taskType;
|
||||
BlockType custom = new BlockType(
|
||||
id,
|
||||
label,
|
||||
base.description(),
|
||||
base.icon(),
|
||||
base.color(),
|
||||
taskType,
|
||||
base.inputs(),
|
||||
base.outputs(),
|
||||
List.copyOf(properties),
|
||||
base.id()
|
||||
);
|
||||
register(custom);
|
||||
return custom;
|
||||
}
|
||||
|
||||
/**
|
||||
* Registriert einen bereits vollständig aufgebauten benutzerdefinierten Typ
|
||||
* (z. B. aus MongoDB geladen). Bereits vorhandene Typen mit gleicher ID
|
||||
* werden überschrieben.
|
||||
*/
|
||||
public synchronized BlockType registerCustom(BlockType custom) {
|
||||
register(custom);
|
||||
return custom;
|
||||
}
|
||||
|
||||
/**
|
||||
* Entfernt einen benutzerdefinierten Typ (Typnummer {@code >= 1000}).
|
||||
* Feste Standard-Typen werden nicht entfernt.
|
||||
*
|
||||
* @return {@code true}, wenn ein benutzerdefinierter Typ entfernt wurde
|
||||
*/
|
||||
public synchronized boolean removeCustom(String id) {
|
||||
BlockType existing = types.get(id);
|
||||
if (existing == null || existing.taskType() < CUSTOM_TYPE_START) {
|
||||
return false;
|
||||
}
|
||||
types.remove(id);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
package de.assecutor.tasklisteditor.model;
|
||||
|
||||
import com.fasterxml.jackson.annotation.JsonInclude;
|
||||
import com.fasterxml.jackson.annotation.JsonPropertyOrder;
|
||||
|
||||
/**
|
||||
* Eine Auswahloption eines Status-Tasks (Typ 6).
|
||||
* Entspricht {@code Choice} der stadtbote-App.
|
||||
*
|
||||
* <p>Die Feldnamen sind klein geschrieben; die App deserialisiert per
|
||||
* Newtonsoft case-insensitiv (txt, ret, term, quest, action, price).
|
||||
* {@code null}-Felder (quest, price) werden ausgelassen.
|
||||
*/
|
||||
@JsonInclude(JsonInclude.Include.NON_NULL)
|
||||
@JsonPropertyOrder({"txt", "ret", "term", "quest", "action", "price"})
|
||||
public class ChoiceDto {
|
||||
|
||||
private String txt;
|
||||
private int ret;
|
||||
private boolean term;
|
||||
private String quest;
|
||||
private String action;
|
||||
private String price;
|
||||
|
||||
public ChoiceDto() {
|
||||
}
|
||||
|
||||
public ChoiceDto(String txt, int ret) {
|
||||
this.txt = txt;
|
||||
this.ret = ret;
|
||||
this.term = false;
|
||||
this.action = "cont";
|
||||
}
|
||||
|
||||
public String getTxt() {
|
||||
return txt;
|
||||
}
|
||||
|
||||
public void setTxt(String txt) {
|
||||
this.txt = txt;
|
||||
}
|
||||
|
||||
public int getRet() {
|
||||
return ret;
|
||||
}
|
||||
|
||||
public void setRet(int ret) {
|
||||
this.ret = ret;
|
||||
}
|
||||
|
||||
public boolean isTerm() {
|
||||
return term;
|
||||
}
|
||||
|
||||
public void setTerm(boolean term) {
|
||||
this.term = term;
|
||||
}
|
||||
|
||||
public String getQuest() {
|
||||
return quest;
|
||||
}
|
||||
|
||||
public void setQuest(String quest) {
|
||||
this.quest = quest;
|
||||
}
|
||||
|
||||
public String getAction() {
|
||||
return action;
|
||||
}
|
||||
|
||||
public void setAction(String action) {
|
||||
this.action = action;
|
||||
}
|
||||
|
||||
public String getPrice() {
|
||||
return price;
|
||||
}
|
||||
|
||||
public void setPrice(String price) {
|
||||
this.price = price;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
package de.assecutor.tasklisteditor.model;
|
||||
|
||||
/**
|
||||
* In MongoDB ablegbarer Zustand einer {@link PropertyDefinition} eines
|
||||
* benutzerdefinierten Typs (inkl. der erfassten Vorgabe). Beim Laden wird
|
||||
* daraus wieder eine {@link PropertyDefinition} aufgebaut.
|
||||
*/
|
||||
public class CustomPropertyState {
|
||||
|
||||
private String id;
|
||||
private String label;
|
||||
private PropertyType type;
|
||||
private Object defaultValue;
|
||||
|
||||
public CustomPropertyState() {
|
||||
}
|
||||
|
||||
public CustomPropertyState(String id, String label, PropertyType type, Object defaultValue) {
|
||||
this.id = id;
|
||||
this.label = label;
|
||||
this.type = type;
|
||||
this.defaultValue = defaultValue;
|
||||
}
|
||||
|
||||
public static CustomPropertyState of(PropertyDefinition def) {
|
||||
return new CustomPropertyState(def.id(), def.label(), def.type(), def.defaultValue());
|
||||
}
|
||||
|
||||
public PropertyDefinition toDefinition() {
|
||||
return new PropertyDefinition(id, label, type, defaultValue);
|
||||
}
|
||||
|
||||
public String getId() {
|
||||
return id;
|
||||
}
|
||||
|
||||
public void setId(String id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
public String getLabel() {
|
||||
return label;
|
||||
}
|
||||
|
||||
public void setLabel(String label) {
|
||||
this.label = label;
|
||||
}
|
||||
|
||||
public PropertyType getType() {
|
||||
return type;
|
||||
}
|
||||
|
||||
public void setType(PropertyType type) {
|
||||
this.type = type;
|
||||
}
|
||||
|
||||
public Object getDefaultValue() {
|
||||
return defaultValue;
|
||||
}
|
||||
|
||||
public void setDefaultValue(Object defaultValue) {
|
||||
this.defaultValue = defaultValue;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
package de.assecutor.tasklisteditor.model;
|
||||
|
||||
import com.fasterxml.jackson.annotation.JsonInclude;
|
||||
import com.fasterxml.jackson.annotation.JsonPropertyOrder;
|
||||
|
||||
/**
|
||||
* Ein einzelnes Eingabefeld eines Listen-Text-Tasks (Typ 12).
|
||||
* Definiert Titel und Platzhalter eines vom Bearbeiter auszufüllenden
|
||||
* Textfeldes.
|
||||
*
|
||||
* <p>{@code null}-Felder werden ausgelassen.
|
||||
*/
|
||||
@JsonInclude(JsonInclude.Include.NON_NULL)
|
||||
@JsonPropertyOrder({"title", "placeholder"})
|
||||
public class FieldDto {
|
||||
|
||||
private String title;
|
||||
private String placeholder;
|
||||
|
||||
public FieldDto() {
|
||||
}
|
||||
|
||||
public FieldDto(String title, String placeholder) {
|
||||
this.title = title;
|
||||
this.placeholder = placeholder;
|
||||
}
|
||||
|
||||
public String getTitle() {
|
||||
return title;
|
||||
}
|
||||
|
||||
public void setTitle(String title) {
|
||||
this.title = title;
|
||||
}
|
||||
|
||||
public String getPlaceholder() {
|
||||
return placeholder;
|
||||
}
|
||||
|
||||
public void setPlaceholder(String placeholder) {
|
||||
this.placeholder = placeholder;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,7 @@
|
||||
package de.assecutor.tasklisteditor.model;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
public record PropertyDefinition(String id, String label, PropertyType type, Object defaultValue) {
|
||||
public static PropertyDefinition text(String id, String label) {
|
||||
return new PropertyDefinition(id, label, PropertyType.TEXT, "");
|
||||
@@ -16,4 +18,12 @@ public record PropertyDefinition(String id, String label, PropertyType type, Obj
|
||||
public static PropertyDefinition bool(String id, String label, boolean defaultValue) {
|
||||
return new PropertyDefinition(id, label, PropertyType.BOOLEAN, defaultValue);
|
||||
}
|
||||
|
||||
public static PropertyDefinition fieldList(String id, String label) {
|
||||
return new PropertyDefinition(id, label, PropertyType.FIELD_LIST, List.of());
|
||||
}
|
||||
|
||||
public static PropertyDefinition nameList(String id, String label) {
|
||||
return new PropertyDefinition(id, label, PropertyType.NAME_LIST, List.of());
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,5 +4,9 @@ public enum PropertyType {
|
||||
TEXT,
|
||||
TEXTAREA,
|
||||
NUMBER,
|
||||
BOOLEAN
|
||||
BOOLEAN,
|
||||
/** Wiederholbare Liste aus Eingabefeldern mit Titel und Platzhalter. */
|
||||
FIELD_LIST,
|
||||
/** Wiederholbare Liste aus reinen Namens-Einträgen (ein Textfeld je Zeile). */
|
||||
NAME_LIST
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ package de.assecutor.tasklisteditor.model;
|
||||
import com.fasterxml.jackson.annotation.JsonInclude;
|
||||
import com.fasterxml.jackson.annotation.JsonProperty;
|
||||
import com.fasterxml.jackson.annotation.JsonPropertyOrder;
|
||||
import com.fasterxml.jackson.databind.JsonNode;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
@@ -16,7 +17,7 @@ import java.util.List;
|
||||
*/
|
||||
@JsonInclude(JsonInclude.Include.NON_NULL)
|
||||
@JsonPropertyOrder({"s_id", "type", "topic", "opt", "reenter", "min", "max",
|
||||
"max_len", "rt", "track", "txt", "task_arrival", "task_fin_work", "entries"})
|
||||
"max_len", "rt", "track", "txt", "task_arrival", "task_fin_work", "entries", "choices", "fields", "script"})
|
||||
public class TaskDto {
|
||||
|
||||
@JsonProperty("s_id")
|
||||
@@ -46,6 +47,15 @@ public class TaskDto {
|
||||
|
||||
private List<TaskEntryDto> entries;
|
||||
|
||||
/** Auswahloptionen eines Status-Tasks (Typ 6). */
|
||||
private List<ChoiceDto> choices;
|
||||
|
||||
/** Eingabefelder eines Listen-Text-Tasks (Typ 12). */
|
||||
private List<FieldDto> fields;
|
||||
|
||||
/** Logik-Graph eines Script-Blocks (Drawflow-Definition als JSON). */
|
||||
private JsonNode script;
|
||||
|
||||
public int getSId() {
|
||||
return sId;
|
||||
}
|
||||
@@ -157,4 +167,28 @@ public class TaskDto {
|
||||
public void setEntries(List<TaskEntryDto> entries) {
|
||||
this.entries = entries;
|
||||
}
|
||||
|
||||
public List<ChoiceDto> getChoices() {
|
||||
return choices;
|
||||
}
|
||||
|
||||
public void setChoices(List<ChoiceDto> choices) {
|
||||
this.choices = choices;
|
||||
}
|
||||
|
||||
public List<FieldDto> getFields() {
|
||||
return fields;
|
||||
}
|
||||
|
||||
public void setFields(List<FieldDto> fields) {
|
||||
this.fields = fields;
|
||||
}
|
||||
|
||||
public JsonNode getScript() {
|
||||
return script;
|
||||
}
|
||||
|
||||
public void setScript(JsonNode script) {
|
||||
this.script = script;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
package de.assecutor.tasklisteditor.repository;
|
||||
|
||||
import de.assecutor.tasklisteditor.document.CustomTypeDocument;
|
||||
import org.springframework.data.mongodb.repository.MongoRepository;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
/**
|
||||
* Spring-Data-Repository für die in MongoDB abgelegten benutzerdefinierten Typen.
|
||||
*/
|
||||
public interface CustomTypeRepository extends MongoRepository<CustomTypeDocument, String> {
|
||||
|
||||
List<CustomTypeDocument> findAllByOrderByTaskTypeAsc();
|
||||
|
||||
long deleteByTaskType(int taskType);
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
package de.assecutor.tasklisteditor.service;
|
||||
|
||||
import de.assecutor.tasklisteditor.document.CustomTypeDocument;
|
||||
import de.assecutor.tasklisteditor.model.BlockType;
|
||||
import de.assecutor.tasklisteditor.model.CustomPropertyState;
|
||||
import de.assecutor.tasklisteditor.repository.CustomTypeRepository;
|
||||
import org.springframework.stereotype.Service;
|
||||
|
||||
import java.time.Instant;
|
||||
import java.util.List;
|
||||
|
||||
/**
|
||||
* Speichert benutzerdefinierte Typen in MongoDB und stellt sie als
|
||||
* {@link BlockType} wieder her.
|
||||
*/
|
||||
@Service
|
||||
public class CustomTypeService {
|
||||
|
||||
private final CustomTypeRepository repository;
|
||||
|
||||
public CustomTypeService(CustomTypeRepository repository) {
|
||||
this.repository = repository;
|
||||
}
|
||||
|
||||
/** Persistiert einen benutzerdefinierten Typ mit allen Daten. */
|
||||
public String save(BlockType custom, String baseTypeId) {
|
||||
CustomTypeDocument document = new CustomTypeDocument();
|
||||
document.setTaskType(custom.taskType());
|
||||
document.setTypeId(custom.id());
|
||||
document.setLabel(custom.label());
|
||||
document.setBaseTypeId(baseTypeId);
|
||||
document.setDescription(custom.description());
|
||||
document.setIcon(custom.icon());
|
||||
document.setColor(custom.color());
|
||||
document.setInputs(custom.inputs());
|
||||
document.setOutputs(custom.outputs());
|
||||
document.setProperties(custom.properties().stream()
|
||||
.map(CustomPropertyState::of)
|
||||
.toList());
|
||||
document.setCreatedAt(Instant.now());
|
||||
return repository.save(document).getId();
|
||||
}
|
||||
|
||||
/** Löscht den gespeicherten benutzerdefinierten Typ mit der angegebenen Typnummer. */
|
||||
public void deleteByTaskType(int taskType) {
|
||||
repository.deleteByTaskType(taskType);
|
||||
}
|
||||
|
||||
/** Lädt alle gespeicherten Typen und baut sie als {@link BlockType} auf. */
|
||||
public List<BlockType> loadAll() {
|
||||
return repository.findAllByOrderByTaskTypeAsc().stream()
|
||||
.map(CustomTypeService::toBlockType)
|
||||
.toList();
|
||||
}
|
||||
|
||||
private static BlockType toBlockType(CustomTypeDocument doc) {
|
||||
return new BlockType(
|
||||
doc.getTypeId(),
|
||||
doc.getLabel(),
|
||||
doc.getDescription(),
|
||||
doc.getIcon(),
|
||||
doc.getColor(),
|
||||
doc.getTaskType(),
|
||||
doc.getInputs(),
|
||||
doc.getOutputs(),
|
||||
doc.getProperties() == null ? List.of()
|
||||
: doc.getProperties().stream()
|
||||
.map(prop -> prop.toDefinition())
|
||||
.toList(),
|
||||
doc.getBaseTypeId()
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
package de.assecutor.tasklisteditor.service;
|
||||
|
||||
import de.assecutor.tasklisteditor.config.ElementCollectionProperties;
|
||||
import de.assecutor.tasklisteditor.document.ElementSettingsDocument;
|
||||
import de.assecutor.tasklisteditor.model.BlockInstance;
|
||||
import org.springframework.data.mongodb.core.MongoTemplate;
|
||||
import org.springframework.stereotype.Service;
|
||||
|
||||
import java.time.Instant;
|
||||
import java.util.Collection;
|
||||
import java.util.LinkedHashMap;
|
||||
|
||||
/**
|
||||
* Speichert die Einstellungen der einzelnen platzierten Elemente eines Canvas
|
||||
* jeweils in einer eigenen, pro Element-Typ konfigurierten MongoDB-Collection.
|
||||
*
|
||||
* <p>Wird ergänzend zum {@link CanvasService} aufgerufen: Der Canvas-Stand
|
||||
* (Layout + Block-Werte) bleibt unverändert im Canvas-Dokument; zusätzlich wird
|
||||
* je Element ein {@link ElementSettingsDocument} in die Typ-Collection
|
||||
* geschrieben und über die Canvas-ID verknüpft.
|
||||
*/
|
||||
@Service
|
||||
public class ElementSettingsService {
|
||||
|
||||
private final MongoTemplate mongoTemplate;
|
||||
private final ElementCollectionProperties properties;
|
||||
|
||||
public ElementSettingsService(MongoTemplate mongoTemplate,
|
||||
ElementCollectionProperties properties) {
|
||||
this.mongoTemplate = mongoTemplate;
|
||||
this.properties = properties;
|
||||
}
|
||||
|
||||
/**
|
||||
* Schreibt für jedes Element des Canvas ein Einstellungs-Dokument in die
|
||||
* Collection seines Typs.
|
||||
*
|
||||
* @param canvasId ID des gespeicherten Canvas (Verknüpfung)
|
||||
* @param canvasName Anzeigename des Canvas
|
||||
* @param instances platzierte Block-Instanzen
|
||||
*/
|
||||
public void saveForCanvas(String canvasId, String canvasName,
|
||||
Collection<BlockInstance> instances) {
|
||||
Instant now = Instant.now();
|
||||
for (BlockInstance instance : instances) {
|
||||
// Virtuelle Blöcke (Start/Abschluss) haben keine fachlichen
|
||||
// Einstellungen und keine Collection – sie werden nicht persistiert.
|
||||
if (instance.type().isVirtual()) {
|
||||
continue;
|
||||
}
|
||||
String typeId = instance.type().id();
|
||||
String baseTypeId = instance.type().baseTypeId();
|
||||
// Benutzerdefinierte Typen landen in der Collection ihres statischen
|
||||
// Basistyps; feste Typen (baseTypeId == null) in ihrer eigenen.
|
||||
String collectionTypeId = (baseTypeId == null || baseTypeId.isBlank())
|
||||
? typeId
|
||||
: baseTypeId;
|
||||
ElementSettingsDocument document = new ElementSettingsDocument(
|
||||
canvasId,
|
||||
canvasName,
|
||||
instance.id(),
|
||||
typeId,
|
||||
baseTypeId,
|
||||
instance.topic(),
|
||||
new LinkedHashMap<>(instance.values()),
|
||||
now);
|
||||
mongoTemplate.save(document, properties.collectionFor(collectionTypeId));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -3,6 +3,9 @@ package de.assecutor.tasklisteditor.service;
|
||||
import com.fasterxml.jackson.databind.JsonNode;
|
||||
import com.fasterxml.jackson.databind.ObjectMapper;
|
||||
import de.assecutor.tasklisteditor.model.BlockInstance;
|
||||
import de.assecutor.tasklisteditor.model.BlockTypeRegistry;
|
||||
import de.assecutor.tasklisteditor.model.ChoiceDto;
|
||||
import de.assecutor.tasklisteditor.model.FieldDto;
|
||||
import de.assecutor.tasklisteditor.model.TaskDto;
|
||||
import de.assecutor.tasklisteditor.model.TaskEntryDto;
|
||||
import org.springframework.stereotype.Component;
|
||||
@@ -46,6 +49,10 @@ public class TaskListExporter {
|
||||
} catch (Exception ex) {
|
||||
throw new IllegalStateException("Editor-Graph konnte nicht gelesen werden: " + ex.getMessage(), ex);
|
||||
}
|
||||
// Ein vollständiger Workflow muss mit einem Start- und einem Abschluss-
|
||||
// Element gerahmt und beide müssen verdrahtet sein.
|
||||
validateWorkflow(data, instances);
|
||||
|
||||
if (!data.isObject() || data.isEmpty()) {
|
||||
return tasks;
|
||||
}
|
||||
@@ -58,6 +65,11 @@ public class TaskListExporter {
|
||||
if (instance == null) {
|
||||
continue;
|
||||
}
|
||||
// Rein virtuelle Blöcke (Start/Abschluss) sind nur Workflow-Markierungen
|
||||
// und gehören nicht in die exportierte Task-Liste.
|
||||
if (instance.type().isVirtual()) {
|
||||
continue;
|
||||
}
|
||||
TaskDto task = toTask(instance);
|
||||
task.setSId(sId++);
|
||||
tasks.add(task);
|
||||
@@ -65,6 +77,64 @@ public class TaskListExporter {
|
||||
return tasks;
|
||||
}
|
||||
|
||||
/**
|
||||
* Stellt sicher, dass der Ablauf mit genau den virtuellen Markierungen
|
||||
* gerahmt ist: Es muss mindestens ein Start- und ein Abschluss-Element
|
||||
* geben und beide müssen mit dem Ablauf verbunden (verdrahtet) sein.
|
||||
*
|
||||
* @throws IllegalStateException mit einer für den Benutzer verständlichen
|
||||
* Meldung, falls die Bedingung verletzt ist
|
||||
*/
|
||||
private void validateWorkflow(JsonNode data, Map<Integer, BlockInstance> instances) {
|
||||
List<Integer> startNodes = new ArrayList<>();
|
||||
List<Integer> endNodes = new ArrayList<>();
|
||||
for (Map.Entry<Integer, BlockInstance> entry : instances.entrySet()) {
|
||||
int taskType = entry.getValue().type().taskType();
|
||||
if (taskType == BlockTypeRegistry.START_TASK_TYPE) {
|
||||
startNodes.add(entry.getKey());
|
||||
} else if (taskType == BlockTypeRegistry.END_TASK_TYPE) {
|
||||
endNodes.add(entry.getKey());
|
||||
}
|
||||
}
|
||||
|
||||
if (startNodes.isEmpty()) {
|
||||
throw new IllegalStateException("Es muss ein Start-Element vorhanden sein.");
|
||||
}
|
||||
if (endNodes.isEmpty()) {
|
||||
throw new IllegalStateException("Es muss ein Abschluss-Element vorhanden sein.");
|
||||
}
|
||||
for (int id : startNodes) {
|
||||
if (!hasConnectedOutput(data, id)) {
|
||||
throw new IllegalStateException("Das Start-Element muss mit dem Ablauf verbunden sein.");
|
||||
}
|
||||
}
|
||||
for (int id : endNodes) {
|
||||
if (!hasConnectedInput(data, id)) {
|
||||
throw new IllegalStateException("Das Abschluss-Element muss mit dem Ablauf verbunden sein.");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private boolean hasConnectedOutput(JsonNode data, int nodeId) {
|
||||
JsonNode outputs = data.path(String.valueOf(nodeId)).path("outputs");
|
||||
for (JsonNode output : outputs) {
|
||||
if (output.path("connections").size() > 0) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
private boolean hasConnectedInput(JsonNode data, int nodeId) {
|
||||
JsonNode inputs = data.path(String.valueOf(nodeId)).path("inputs");
|
||||
for (JsonNode input : inputs) {
|
||||
if (input.path("connections").size() > 0) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
private List<Integer> determineOrder(JsonNode data) {
|
||||
// Knoten einsammeln + eingehende Verbindungen zählen.
|
||||
List<Integer> nodeIds = new ArrayList<>();
|
||||
@@ -143,7 +213,29 @@ public class TaskListExporter {
|
||||
|
||||
if (v.containsKey("entries")) {
|
||||
boolean queryRemark = v.containsKey("query_remark") && asBool(v.get("query_remark"));
|
||||
task.setEntries(parseEntries(asText(v.get("entries")), queryRemark));
|
||||
Object raw = v.get("entries");
|
||||
task.setEntries(raw instanceof List<?> list
|
||||
? parseEntries(list, queryRemark)
|
||||
: parseEntries(asText(raw), queryRemark));
|
||||
}
|
||||
|
||||
if (v.containsKey("choices")) {
|
||||
task.setChoices(parseChoices(asText(v.get("choices"))));
|
||||
}
|
||||
|
||||
if (v.containsKey("fields")) {
|
||||
task.setFields(parseFields(v.get("fields")));
|
||||
}
|
||||
|
||||
if (v.containsKey("script")) {
|
||||
String script = asText(v.get("script"));
|
||||
if (script != null) {
|
||||
try {
|
||||
task.setScript(objectMapper.readTree(script));
|
||||
} catch (Exception ignored) {
|
||||
// Ungültiges Skript-JSON wird ausgelassen.
|
||||
}
|
||||
}
|
||||
}
|
||||
return task;
|
||||
}
|
||||
@@ -163,6 +255,53 @@ public class TaskListExporter {
|
||||
return entries.isEmpty() ? null : entries;
|
||||
}
|
||||
|
||||
/** Variante für den Zeilen-Editor: Liste aus {@code {title}}-Einträgen. */
|
||||
private List<TaskEntryDto> parseEntries(List<?> raw, boolean queryRemark) {
|
||||
List<TaskEntryDto> entries = new ArrayList<>();
|
||||
int code = 1;
|
||||
for (Object o : raw) {
|
||||
if (o instanceof Map<?, ?> m) {
|
||||
String text = m.get("title") == null ? "" : m.get("title").toString().trim();
|
||||
if (!text.isEmpty()) {
|
||||
entries.add(new TaskEntryDto(code++, text, queryRemark));
|
||||
}
|
||||
}
|
||||
}
|
||||
return entries.isEmpty() ? null : entries;
|
||||
}
|
||||
|
||||
private List<ChoiceDto> parseChoices(String raw) {
|
||||
if (raw == null || raw.isBlank()) {
|
||||
return null;
|
||||
}
|
||||
List<ChoiceDto> choices = new ArrayList<>();
|
||||
int ret = 1;
|
||||
for (String line : raw.split("\\r?\\n")) {
|
||||
String text = line.trim();
|
||||
if (!text.isEmpty()) {
|
||||
choices.add(new ChoiceDto(text, ret++));
|
||||
}
|
||||
}
|
||||
return choices.isEmpty() ? null : choices;
|
||||
}
|
||||
|
||||
private List<FieldDto> parseFields(Object raw) {
|
||||
if (!(raw instanceof List<?> list) || list.isEmpty()) {
|
||||
return null;
|
||||
}
|
||||
List<FieldDto> fields = new ArrayList<>();
|
||||
for (Object o : list) {
|
||||
if (o instanceof Map<?, ?> m) {
|
||||
String title = m.get("title") == null ? "" : m.get("title").toString().trim();
|
||||
String placeholder = m.get("placeholder") == null ? "" : m.get("placeholder").toString().trim();
|
||||
if (!title.isEmpty() || !placeholder.isEmpty()) {
|
||||
fields.add(new FieldDto(title, placeholder));
|
||||
}
|
||||
}
|
||||
}
|
||||
return fields.isEmpty() ? null : fields;
|
||||
}
|
||||
|
||||
private Boolean asBool(Object o) {
|
||||
return o instanceof Boolean b ? b : Boolean.parseBoolean(String.valueOf(o));
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ package de.assecutor.tasklisteditor.service;
|
||||
|
||||
import de.assecutor.tasklisteditor.model.BlockType;
|
||||
import de.assecutor.tasklisteditor.model.BlockTypeRegistry;
|
||||
import de.assecutor.tasklisteditor.model.FieldDto;
|
||||
import de.assecutor.tasklisteditor.model.PropertyDefinition;
|
||||
import de.assecutor.tasklisteditor.model.TaskDto;
|
||||
import de.assecutor.tasklisteditor.model.TaskEntryDto;
|
||||
@@ -62,7 +63,21 @@ public class TaskListImporter {
|
||||
private Map<String, Object> valuesFor(BlockType type, TaskDto task) {
|
||||
Map<String, Object> values = new LinkedHashMap<>();
|
||||
for (PropertyDefinition def : type.properties()) {
|
||||
Object value = switch (def.id()) {
|
||||
// Listen-Eigenschaften (Typ 12–14) werden anhand ihres
|
||||
// Property-Typs in die vom Zeilen-Editor erwartete Struktur
|
||||
// (Liste aus {title}/{title,placeholder}-Maps) zurückgewandelt.
|
||||
Object value = switch (def.type()) {
|
||||
case FIELD_LIST -> fieldRows(task);
|
||||
case NAME_LIST -> entryRows(task);
|
||||
default -> scalarValue(def, task);
|
||||
};
|
||||
values.put(def.id(), value);
|
||||
}
|
||||
return values;
|
||||
}
|
||||
|
||||
private Object scalarValue(PropertyDefinition def, TaskDto task) {
|
||||
return switch (def.id()) {
|
||||
case "opt" -> orDefault(task.getOpt(), def.defaultValue());
|
||||
case "reenter" -> orDefault(task.getReenter(), def.defaultValue());
|
||||
case "rt" -> orDefault(task.getRt(), def.defaultValue());
|
||||
@@ -73,11 +88,38 @@ public class TaskListImporter {
|
||||
case "txt" -> orDefault(task.getTxt(), def.defaultValue());
|
||||
case "query_remark" -> anyQueryRemark(task);
|
||||
case "entries" -> entriesText(task);
|
||||
case "choices" -> choicesText(task);
|
||||
default -> def.defaultValue();
|
||||
};
|
||||
values.put(def.id(), value);
|
||||
}
|
||||
return values;
|
||||
|
||||
/** {@code fields}-Array (Typ 12/13) zurück in Zeilen mit Titel + Platzhalter. */
|
||||
private List<Map<String, Object>> fieldRows(TaskDto task) {
|
||||
List<Map<String, Object>> rows = new ArrayList<>();
|
||||
if (task.getFields() == null) {
|
||||
return rows;
|
||||
}
|
||||
for (FieldDto field : task.getFields()) {
|
||||
Map<String, Object> row = new LinkedHashMap<>();
|
||||
row.put("title", field.getTitle() == null ? "" : field.getTitle());
|
||||
row.put("placeholder", field.getPlaceholder() == null ? "" : field.getPlaceholder());
|
||||
rows.add(row);
|
||||
}
|
||||
return rows;
|
||||
}
|
||||
|
||||
/** {@code entries}-Array (Typ 14) zurück in Zeilen mit Namen ({@code title}). */
|
||||
private List<Map<String, Object>> entryRows(TaskDto task) {
|
||||
List<Map<String, Object>> rows = new ArrayList<>();
|
||||
if (task.getEntries() == null) {
|
||||
return rows;
|
||||
}
|
||||
for (TaskEntryDto entry : task.getEntries()) {
|
||||
Map<String, Object> row = new LinkedHashMap<>();
|
||||
row.put("title", entry.getText() == null ? "" : entry.getText());
|
||||
rows.add(row);
|
||||
}
|
||||
return rows;
|
||||
}
|
||||
|
||||
private Object orDefault(Object value, Object fallback) {
|
||||
@@ -86,7 +128,7 @@ public class TaskListImporter {
|
||||
|
||||
private boolean anyQueryRemark(TaskDto task) {
|
||||
return task.getEntries() != null
|
||||
&& task.getEntries().stream().anyMatch(TaskEntryDto::isQueryRemark);
|
||||
&& task.getEntries().stream().anyMatch(entry -> entry.isQueryRemark());
|
||||
}
|
||||
|
||||
private String entriesText(TaskDto task) {
|
||||
@@ -94,7 +136,18 @@ public class TaskListImporter {
|
||||
return "";
|
||||
}
|
||||
return task.getEntries().stream()
|
||||
.map(TaskEntryDto::getText)
|
||||
.map(entry -> entry.getText())
|
||||
.collect(Collectors.joining("\n"));
|
||||
}
|
||||
|
||||
private String choicesText(TaskDto task) {
|
||||
if (task.getChoices() != null && !task.getChoices().isEmpty()) {
|
||||
return task.getChoices().stream()
|
||||
.map(choice -> choice.getTxt())
|
||||
.collect(Collectors.joining("\n"));
|
||||
}
|
||||
// Altdaten des früheren Typ 11 (Abhol-/Lieferstatus) liefern die Optionen
|
||||
// als entries; diese als choices-Text übernehmen.
|
||||
return entriesText(task);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@ import de.assecutor.tasklisteditor.repository.TaskListRepository;
|
||||
import org.springframework.stereotype.Service;
|
||||
|
||||
import java.time.Instant;
|
||||
import java.util.ArrayList;
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
|
||||
@@ -31,10 +32,20 @@ public class TaskListService {
|
||||
this.objectMapper = objectMapper;
|
||||
}
|
||||
|
||||
/**
|
||||
* Task-Typ des Script-Blocks (siehe {@code BlockTypeRegistry}) – wird von der
|
||||
* stadtbote-App nicht verarbeitet und daher aus dem App-JSON ausgelassen.
|
||||
*/
|
||||
private static final int SCRIPT_TASK_TYPE = 0;
|
||||
|
||||
/** Ergebnis eines Exports: typisierte Tasks plus formatiertes JSON. */
|
||||
public record ExportResult(List<TaskDto> tasks, String json) {
|
||||
}
|
||||
|
||||
/** Ergebnis eines App-Job-Exports: Anzahl Tasks plus formatiertes Job-JSON. */
|
||||
public record AppJobResult(int taskCount, String json) {
|
||||
}
|
||||
|
||||
public ExportResult build(String drawflowJson, Map<Integer, BlockInstance> instances) {
|
||||
List<TaskDto> tasks = exporter.export(drawflowJson, instances);
|
||||
try {
|
||||
@@ -45,6 +56,37 @@ public class TaskListService {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Baut aus dem Editor-Zustand das app-konforme Task-Array, wie es die
|
||||
* stadtbote-App verarbeitet (entspricht der {@code tasks}-Liste einer Tour).
|
||||
*
|
||||
* <p>Script-Blöcke (Typ 100) werden ausgelassen, da die App sie nicht
|
||||
* verarbeitet; anschließend werden die {@code s_id}-Werte lückenlos neu
|
||||
* vergeben.
|
||||
*
|
||||
* @param name nicht verwendet (bleibt für künftige Erweiterungen erhalten)
|
||||
*/
|
||||
public AppJobResult buildAppJob(String name, String drawflowJson,
|
||||
Map<Integer, BlockInstance> instances) {
|
||||
List<TaskDto> tasks = new ArrayList<>();
|
||||
int sId = 1;
|
||||
for (TaskDto task : exporter.export(drawflowJson, instances)) {
|
||||
if (task.getType() == SCRIPT_TASK_TYPE) {
|
||||
continue;
|
||||
}
|
||||
task.setScript(null);
|
||||
task.setSId(sId++);
|
||||
tasks.add(task);
|
||||
}
|
||||
|
||||
try {
|
||||
String json = objectMapper.writerWithDefaultPrettyPrinter().writeValueAsString(tasks);
|
||||
return new AppJobResult(tasks.size(), json);
|
||||
} catch (JsonProcessingException ex) {
|
||||
throw new IllegalStateException("App-JSON konnte nicht erzeugt werden: " + ex.getMessage(), ex);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Speichert die Task-Liste in MongoDB.
|
||||
*
|
||||
|
||||
@@ -4,6 +4,7 @@ import com.vaadin.flow.component.Component;
|
||||
import com.vaadin.flow.component.button.Button;
|
||||
import com.vaadin.flow.component.button.ButtonVariant;
|
||||
import com.vaadin.flow.component.checkbox.Checkbox;
|
||||
import com.vaadin.flow.component.combobox.ComboBox;
|
||||
import com.vaadin.flow.component.dialog.Dialog;
|
||||
import com.vaadin.flow.component.grid.Grid;
|
||||
import com.vaadin.flow.component.html.Div;
|
||||
@@ -26,6 +27,7 @@ import com.vaadin.flow.router.PageTitle;
|
||||
import com.vaadin.flow.router.Route;
|
||||
import com.fasterxml.jackson.databind.ObjectMapper;
|
||||
import de.assecutor.tasklisteditor.component.NodeEditor;
|
||||
import de.assecutor.tasklisteditor.component.ScriptEditor;
|
||||
import de.assecutor.tasklisteditor.model.BlockInstance;
|
||||
import de.assecutor.tasklisteditor.model.BlockType;
|
||||
import de.assecutor.tasklisteditor.model.BlockTypeRegistry;
|
||||
@@ -34,6 +36,8 @@ import de.assecutor.tasklisteditor.model.PropertyDefinition;
|
||||
import de.assecutor.tasklisteditor.model.TaskListPayload;
|
||||
import de.assecutor.tasklisteditor.document.CanvasDocument;
|
||||
import de.assecutor.tasklisteditor.service.CanvasService;
|
||||
import de.assecutor.tasklisteditor.service.CustomTypeService;
|
||||
import de.assecutor.tasklisteditor.service.ElementSettingsService;
|
||||
import de.assecutor.tasklisteditor.service.PendingImportStore;
|
||||
import de.assecutor.tasklisteditor.service.TaskListImporter;
|
||||
import de.assecutor.tasklisteditor.service.TaskListService;
|
||||
@@ -41,13 +45,20 @@ import elemental.json.Json;
|
||||
import elemental.json.JsonArray;
|
||||
import elemental.json.JsonObject;
|
||||
|
||||
import com.fasterxml.jackson.databind.JsonNode;
|
||||
|
||||
import java.time.ZoneId;
|
||||
import java.time.format.DateTimeFormatter;
|
||||
import java.util.ArrayDeque;
|
||||
import java.util.ArrayList;
|
||||
import java.util.Deque;
|
||||
import java.util.HashMap;
|
||||
import java.util.HashSet;
|
||||
import java.util.LinkedHashMap;
|
||||
import java.util.LinkedHashSet;
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
import java.util.Set;
|
||||
|
||||
@Route("")
|
||||
@PageTitle("TaskList Editor")
|
||||
@@ -61,11 +72,13 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
|
||||
private final TaskListImporter taskListImporter;
|
||||
private final PendingImportStore importStore;
|
||||
private final CanvasService canvasService;
|
||||
private final CustomTypeService customTypeService;
|
||||
private final ElementSettingsService elementSettingsService;
|
||||
private final ObjectMapper objectMapper;
|
||||
private final NodeEditor nodeEditor;
|
||||
private final Map<Integer, BlockInstance> instances = new HashMap<>();
|
||||
private final Div propertiesContent;
|
||||
private final Paragraph propertiesEmpty;
|
||||
private Div palettePanel;
|
||||
private Component paletteDivider;
|
||||
private String currentListName;
|
||||
|
||||
public MainView(BlockTypeRegistry registry,
|
||||
@@ -73,18 +86,24 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
|
||||
TaskListImporter taskListImporter,
|
||||
PendingImportStore importStore,
|
||||
CanvasService canvasService,
|
||||
CustomTypeService customTypeService,
|
||||
ElementSettingsService elementSettingsService,
|
||||
ObjectMapper objectMapper) {
|
||||
this.registry = registry;
|
||||
this.taskListService = taskListService;
|
||||
this.taskListImporter = taskListImporter;
|
||||
this.importStore = importStore;
|
||||
this.canvasService = canvasService;
|
||||
this.customTypeService = customTypeService;
|
||||
this.elementSettingsService = elementSettingsService;
|
||||
this.objectMapper = objectMapper;
|
||||
setSizeFull();
|
||||
setPadding(false);
|
||||
setSpacing(false);
|
||||
addClassName("tasklist-app");
|
||||
|
||||
loadCustomTypes();
|
||||
|
||||
add(buildHeader());
|
||||
|
||||
HorizontalLayout body = new HorizontalLayout();
|
||||
@@ -95,15 +114,8 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
|
||||
|
||||
Div palette = buildPalette();
|
||||
nodeEditor = new NodeEditor();
|
||||
Div propertiesPanel = buildPropertiesPanel();
|
||||
propertiesContent = (Div) propertiesPanel.getChildren()
|
||||
.filter(c -> c.getElement().getClassList().contains("properties-content"))
|
||||
.findFirst().orElseThrow();
|
||||
propertiesEmpty = new Paragraph("Klicke auf einen Funktionsblock, um seine Eigenschaften zu bearbeiten.");
|
||||
propertiesEmpty.addClassName("properties-empty");
|
||||
propertiesContent.add(propertiesEmpty);
|
||||
|
||||
body.add(palette, nodeEditor, propertiesPanel);
|
||||
body.add(palette, nodeEditor);
|
||||
body.expand(nodeEditor);
|
||||
add(body);
|
||||
|
||||
@@ -114,12 +126,13 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
|
||||
if (type == null) return;
|
||||
instances.put(e.nodeId(), new BlockInstance(e.nodeId(), type));
|
||||
});
|
||||
nodeEditor.addNodeSelectedListener(e -> showProperties(e.nodeId()));
|
||||
nodeEditor.addNodeUnselectedListener(e -> showEmpty());
|
||||
nodeEditor.addNodeRemovedListener(e -> {
|
||||
instances.remove(e.nodeId());
|
||||
showEmpty();
|
||||
nodeEditor.addNodeActivatedListener(e -> {
|
||||
BlockInstance instance = instances.get(e.nodeId());
|
||||
if (instance != null) {
|
||||
openSettingsDialog(instance);
|
||||
}
|
||||
});
|
||||
nodeEditor.addNodeRemovedListener(e -> instances.remove(e.nodeId()));
|
||||
}
|
||||
|
||||
private Component buildHeader() {
|
||||
@@ -141,7 +154,6 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
|
||||
clear.addClickListener(e -> {
|
||||
nodeEditor.clear();
|
||||
instances.clear();
|
||||
showEmpty();
|
||||
Notification.show("Canvas geleert");
|
||||
});
|
||||
|
||||
@@ -153,6 +165,10 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
|
||||
loadCanvas.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
|
||||
loadCanvas.addClickListener(e -> openLoadCanvasDialog());
|
||||
|
||||
Button appJson = new Button("App-JSON (stadtbote)", new Icon(VaadinIcon.MOBILE));
|
||||
appJson.addThemeVariants(ButtonVariant.LUMO_SUCCESS);
|
||||
appJson.addClickListener(e -> previewAppJson());
|
||||
|
||||
Button export = new Button("JSON erzeugen & speichern", new Icon(VaadinIcon.DOWNLOAD));
|
||||
export.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
|
||||
export.addClickListener(e -> exportTasks());
|
||||
@@ -160,13 +176,14 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
|
||||
Span spacer = new Span();
|
||||
spacer.getStyle().set("flex", "1");
|
||||
|
||||
header.add(title, subtitle, spacer, clear, saveCanvas, loadCanvas, export);
|
||||
header.add(title, subtitle, spacer, clear, saveCanvas, loadCanvas, appJson, export);
|
||||
return header;
|
||||
}
|
||||
|
||||
private Div buildPalette() {
|
||||
Div panel = new Div();
|
||||
panel.addClassName("palette-panel");
|
||||
palettePanel = panel;
|
||||
|
||||
H3 heading = new H3("Funktionsblöcke");
|
||||
heading.addClassName("panel-heading");
|
||||
@@ -176,15 +193,162 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
|
||||
hint.addClassName("panel-hint");
|
||||
panel.add(hint);
|
||||
|
||||
Button customType = new Button("Eigenen Typ anlegen", new Icon(VaadinIcon.PLUS));
|
||||
customType.addThemeVariants(ButtonVariant.LUMO_SMALL, ButtonVariant.LUMO_TERTIARY);
|
||||
customType.addClassName("palette-add-type");
|
||||
customType.setWidthFull();
|
||||
customType.addClickListener(e -> openCustomTypeDialog());
|
||||
panel.add(customType);
|
||||
|
||||
for (BlockType type : registry.all()) {
|
||||
if (isCustomType(type)) {
|
||||
addCustomPaletteItem(type);
|
||||
} else {
|
||||
panel.add(buildPaletteItem(type));
|
||||
}
|
||||
}
|
||||
return panel;
|
||||
}
|
||||
|
||||
private boolean isCustomType(BlockType type) {
|
||||
return type.taskType() >= BlockTypeRegistry.CUSTOM_TYPE_START;
|
||||
}
|
||||
|
||||
/** Fügt ein benutzerdefiniertes Element hinzu und blendet davor einmalig einen Trenner ein. */
|
||||
private void addCustomPaletteItem(BlockType type) {
|
||||
if (paletteDivider == null) {
|
||||
paletteDivider = buildPaletteDivider();
|
||||
palettePanel.add(paletteDivider);
|
||||
}
|
||||
palettePanel.add(buildPaletteItem(type));
|
||||
}
|
||||
|
||||
private Component buildPaletteDivider() {
|
||||
Div divider = new Div();
|
||||
divider.addClassName("palette-divider");
|
||||
Span label = new Span("Eigene Typen");
|
||||
label.addClassName("palette-divider-label");
|
||||
divider.add(label);
|
||||
return divider;
|
||||
}
|
||||
|
||||
/**
|
||||
* Lädt die in MongoDB gespeicherten benutzerdefinierten Typen und registriert
|
||||
* sie, sofern sie noch nicht bekannt sind. Fehlt die Datenbank, startet der
|
||||
* Editor trotzdem (nur ohne die gespeicherten Typen).
|
||||
*/
|
||||
private void loadCustomTypes() {
|
||||
try {
|
||||
for (BlockType custom : customTypeService.loadAll()) {
|
||||
if (registry.find(custom.id()).isEmpty()) {
|
||||
registry.registerCustom(custom);
|
||||
}
|
||||
}
|
||||
} catch (Exception ex) {
|
||||
Notification.show("Eigene Typen konnten nicht geladen werden (läuft MongoDB?): "
|
||||
+ ex.getMessage());
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Dialog zum Anlegen eines benutzerdefinierten Typs: vergibt die nächste freie
|
||||
* Typnummer ab 1000, lässt einen der festen Typen (1–8) als Basis wählen und
|
||||
* die zugehörigen Daten erfassen.
|
||||
*/
|
||||
private void openCustomTypeDialog() {
|
||||
Dialog dialog = new Dialog();
|
||||
dialog.setHeaderTitle("Eigenen Typ anlegen");
|
||||
dialog.setWidth("440px");
|
||||
|
||||
int number = registry.nextCustomTaskType();
|
||||
|
||||
IntegerField numberField = new IntegerField("Typnummer");
|
||||
numberField.setWidthFull();
|
||||
numberField.setValue(number);
|
||||
numberField.setReadOnly(true);
|
||||
numberField.setHelperText("Nächste freie Nummer ab 1000.");
|
||||
|
||||
ComboBox<BlockType> baseBox = new ComboBox<>("Basis-Typ");
|
||||
baseBox.setWidthFull();
|
||||
baseBox.setItems(registry.baseTypes());
|
||||
baseBox.setItemLabelGenerator(t -> t.taskType() + " – " + t.label());
|
||||
baseBox.setHelperText("Fester Typ, auf dem der eigene Typ aufbaut.");
|
||||
|
||||
TextField nameField = new TextField("Bezeichnung");
|
||||
nameField.setWidthFull();
|
||||
nameField.setRequiredIndicatorVisible(true);
|
||||
|
||||
Div fields = new Div();
|
||||
fields.setWidthFull();
|
||||
|
||||
// Temporäre Instanz des Basis-Typs, in der die erfassten Vorgaben landen.
|
||||
BlockInstance[] draft = new BlockInstance[1];
|
||||
|
||||
baseBox.addValueChangeListener(e -> {
|
||||
fields.removeAll();
|
||||
BlockType base = e.getValue();
|
||||
if (base == null) {
|
||||
draft[0] = null;
|
||||
return;
|
||||
}
|
||||
nameField.setValue(base.label());
|
||||
BlockInstance temp = new BlockInstance(-1, base);
|
||||
draft[0] = temp;
|
||||
for (PropertyDefinition def : base.properties()) {
|
||||
fields.add(buildField(temp, def));
|
||||
}
|
||||
});
|
||||
|
||||
VerticalLayout content = new VerticalLayout(numberField, baseBox, nameField, fields);
|
||||
content.setPadding(false);
|
||||
content.setSpacing(true);
|
||||
dialog.add(content);
|
||||
|
||||
Button create = new Button("Anlegen", new Icon(VaadinIcon.CHECK), ev -> {
|
||||
BlockType base = baseBox.getValue();
|
||||
if (base == null) {
|
||||
Notification.show("Bitte einen Basis-Typ wählen.");
|
||||
return;
|
||||
}
|
||||
String label = nameField.getValue();
|
||||
if (label == null || label.isBlank()) {
|
||||
Notification.show("Bitte eine Bezeichnung angeben.");
|
||||
return;
|
||||
}
|
||||
List<PropertyDefinition> props = new ArrayList<>();
|
||||
for (PropertyDefinition def : base.properties()) {
|
||||
Object value = draft[0] == null ? null : draft[0].get(def.id());
|
||||
props.add(new PropertyDefinition(def.id(), def.label(), def.type(),
|
||||
value == null ? def.defaultValue() : value));
|
||||
}
|
||||
BlockType custom = registry.registerCustom(number, base, label.trim(), props);
|
||||
try {
|
||||
customTypeService.save(custom, base.id());
|
||||
} catch (Exception ex) {
|
||||
Notification.show("Typ angelegt, aber nicht gespeichert (läuft MongoDB?): "
|
||||
+ ex.getMessage());
|
||||
}
|
||||
addCustomPaletteItem(custom);
|
||||
nodeEditor.registerBlockTypes(registry.all());
|
||||
Notification.show("Typ " + number + " „" + custom.label() + "“ angelegt.");
|
||||
dialog.close();
|
||||
});
|
||||
create.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
|
||||
|
||||
Button cancel = new Button("Abbrechen", ev -> dialog.close());
|
||||
cancel.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
|
||||
|
||||
dialog.getFooter().add(cancel, create);
|
||||
dialog.open();
|
||||
}
|
||||
|
||||
private Component buildPaletteItem(BlockType type) {
|
||||
boolean custom = isCustomType(type);
|
||||
Div tile = new Div();
|
||||
tile.addClassName("palette-item");
|
||||
if (custom) {
|
||||
tile.addClassName("palette-item-custom");
|
||||
}
|
||||
tile.getElement().setAttribute("draggable", "true");
|
||||
tile.getElement().setAttribute("data-blocktype", type.id());
|
||||
tile.getElement().getStyle().set("--block-color", type.color());
|
||||
@@ -203,9 +367,60 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
|
||||
text.add(label, desc);
|
||||
|
||||
tile.add(iconWrap, text);
|
||||
|
||||
if (custom) {
|
||||
Icon trash = new Icon(VaadinIcon.TRASH);
|
||||
trash.addClassName("palette-item-delete");
|
||||
trash.getElement().setAttribute("title", "Typ löschen");
|
||||
trash.getElement().setAttribute("draggable", "false");
|
||||
trash.getElement().addEventListener("click", e -> confirmDeleteCustomType(type, tile))
|
||||
.stopPropagation();
|
||||
tile.add(trash);
|
||||
}
|
||||
return tile;
|
||||
}
|
||||
|
||||
/** Sicherheitsabfrage vor dem Löschen eines benutzerdefinierten Typs. */
|
||||
private void confirmDeleteCustomType(BlockType type, Component tile) {
|
||||
Dialog dialog = new Dialog();
|
||||
dialog.setHeaderTitle("Typ löschen");
|
||||
|
||||
dialog.add(new Paragraph("Soll der benutzerdefinierte Typ „" + type.label()
|
||||
+ "“ (Typ " + type.taskType() + ") wirklich gelöscht werden?"));
|
||||
|
||||
Button delete = new Button("Löschen", new Icon(VaadinIcon.TRASH), ev -> {
|
||||
deleteCustomType(type, tile);
|
||||
dialog.close();
|
||||
});
|
||||
delete.addThemeVariants(ButtonVariant.LUMO_PRIMARY, ButtonVariant.LUMO_ERROR);
|
||||
|
||||
Button cancel = new Button("Abbrechen", ev -> dialog.close());
|
||||
cancel.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
|
||||
|
||||
dialog.getFooter().add(cancel, delete);
|
||||
dialog.open();
|
||||
}
|
||||
|
||||
private void deleteCustomType(BlockType type, Component tile) {
|
||||
if (!registry.removeCustom(type.id())) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
customTypeService.deleteByTaskType(type.taskType());
|
||||
} catch (Exception ex) {
|
||||
Notification.show("Typ entfernt, aber nicht aus der DB gelöscht (läuft MongoDB?): "
|
||||
+ ex.getMessage());
|
||||
}
|
||||
palettePanel.remove(tile);
|
||||
// Trenner entfernen, wenn kein benutzerdefinierter Typ mehr vorhanden ist.
|
||||
if (paletteDivider != null && registry.all().stream().noneMatch(this::isCustomType)) {
|
||||
palettePanel.remove(paletteDivider);
|
||||
paletteDivider = null;
|
||||
}
|
||||
nodeEditor.registerBlockTypes(registry.all());
|
||||
Notification.show("Typ " + type.taskType() + " „" + type.label() + "“ gelöscht.");
|
||||
}
|
||||
|
||||
private VaadinIcon parseIcon(String key) {
|
||||
if (key == null || !key.startsWith("vaadin:")) return VaadinIcon.CIRCLE;
|
||||
try {
|
||||
@@ -215,45 +430,135 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
|
||||
}
|
||||
}
|
||||
|
||||
private Div buildPropertiesPanel() {
|
||||
Div panel = new Div();
|
||||
panel.addClassName("properties-panel");
|
||||
|
||||
H3 heading = new H3("Eigenschaften");
|
||||
heading.addClassName("panel-heading");
|
||||
panel.add(heading);
|
||||
|
||||
Div content = new Div();
|
||||
content.addClassName("properties-content");
|
||||
panel.add(content);
|
||||
|
||||
return panel;
|
||||
}
|
||||
|
||||
private void showProperties(int nodeId) {
|
||||
BlockInstance instance = instances.get(nodeId);
|
||||
if (instance == null) {
|
||||
showEmpty();
|
||||
/**
|
||||
* Öffnet die Einstellungen eines Blocks in einem Dialog. Beim Script-Block
|
||||
* werden zuvor die mit dem Eingang verbundenen Elemente aus dem aktuellen
|
||||
* Canvas-Graphen ermittelt, um sie als Variablen anzubieten.
|
||||
*/
|
||||
private void openSettingsDialog(BlockInstance instance) {
|
||||
// Rein virtuelle Elemente (Start/Abschluss) haben keine Einstellungen.
|
||||
if (instance.type().isVirtual()) {
|
||||
return;
|
||||
}
|
||||
propertiesContent.removeAll();
|
||||
if ("script".equals(instance.type().id())) {
|
||||
nodeEditor.exportGraph(graphJson -> openScriptDialog(instance, graphJson));
|
||||
return;
|
||||
}
|
||||
openBlockDialog(instance);
|
||||
}
|
||||
|
||||
Div badge = new Div();
|
||||
badge.addClassName("properties-badge");
|
||||
badge.getStyle().set("background", instance.type().color());
|
||||
badge.add(new Icon(parseIcon(instance.type().icon())));
|
||||
Span name = new Span(instance.type().label());
|
||||
name.addClassName("properties-name");
|
||||
|
||||
HorizontalLayout title = new HorizontalLayout(badge, name);
|
||||
title.setAlignItems(FlexComponent.Alignment.CENTER);
|
||||
title.addClassName("properties-title");
|
||||
propertiesContent.add(title);
|
||||
private void openBlockDialog(BlockInstance instance) {
|
||||
Dialog dialog = new Dialog();
|
||||
dialog.setHeaderTitle(instance.type().label());
|
||||
dialog.setWidth("440px");
|
||||
|
||||
Paragraph desc = new Paragraph(instance.type().description());
|
||||
desc.addClassName("properties-desc");
|
||||
propertiesContent.add(desc);
|
||||
|
||||
VerticalLayout content = new VerticalLayout(desc, topicField(instance));
|
||||
content.setPadding(false);
|
||||
content.setSpacing(true);
|
||||
for (PropertyDefinition def : instance.type().properties()) {
|
||||
content.add(buildField(instance, def));
|
||||
}
|
||||
dialog.add(content);
|
||||
|
||||
Button close = new Button("Schließen", ev -> dialog.close());
|
||||
close.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
|
||||
dialog.getFooter().add(close);
|
||||
dialog.open();
|
||||
}
|
||||
|
||||
private void openScriptDialog(BlockInstance instance, String graphJson) {
|
||||
List<BlockInstance> upstream = upstreamElements(graphJson, instance.id());
|
||||
List<VariableDef> variables = upstream.stream()
|
||||
.flatMap(b -> variablesFor(b).stream())
|
||||
.toList();
|
||||
|
||||
Dialog dialog = new Dialog();
|
||||
dialog.setHeaderTitle("Skript: " + instance.type().label());
|
||||
dialog.setWidth("82vw");
|
||||
dialog.setHeight("80vh");
|
||||
|
||||
// Verfügbare Variablen (mit dem Eingang verbundene Elemente) anzeigen.
|
||||
Div vars = new Div();
|
||||
vars.addClassName("script-vars");
|
||||
Span varsLabel = new Span("Verfügbare Variablen:");
|
||||
varsLabel.addClassName("script-vars-label");
|
||||
vars.add(varsLabel);
|
||||
if (variables.isEmpty()) {
|
||||
Span none = new Span("keine verbundenen Eingangselemente");
|
||||
none.addClassName("script-vars-empty");
|
||||
vars.add(none);
|
||||
} else {
|
||||
for (VariableDef variable : variables) {
|
||||
Span chip = new Span(variable.label());
|
||||
chip.addClassName("script-var-chip");
|
||||
vars.add(chip);
|
||||
}
|
||||
}
|
||||
|
||||
ScriptEditor editor = new ScriptEditor();
|
||||
editor.getStyle().set("flex", "1").set("minHeight", "0").set("minWidth", "0")
|
||||
.set("border", "1px solid var(--lumo-contrast-10pct)")
|
||||
.set("border-radius", "var(--lumo-border-radius-m)");
|
||||
|
||||
// Operatoren-Palette links (wie im Workflow-Editor).
|
||||
VerticalLayout palette = new VerticalLayout();
|
||||
palette.addClassName("script-palette");
|
||||
palette.setPadding(false);
|
||||
palette.setSpacing(false);
|
||||
palette.setWidth("190px");
|
||||
palette.setHeightFull();
|
||||
H3 paletteHeading = new H3("Operatoren");
|
||||
paletteHeading.addClassName("panel-heading");
|
||||
palette.add(paletteHeading,
|
||||
scriptPaletteTile("constant", "Konstante", "#0891b2", "C"),
|
||||
scriptPaletteTile("variable", "Variable", "#059669", "x"),
|
||||
scriptPaletteTile("compare", "Vergleich", "#2563eb", "="),
|
||||
scriptPaletteTile("if", "Wenn", "#d97706", "?"),
|
||||
scriptPaletteTile("and", "UND", "#7c3aed", "∧"),
|
||||
scriptPaletteTile("or", "ODER", "#7c3aed", "∨"),
|
||||
scriptPaletteTile("not", "NICHT", "#7c3aed", "¬"),
|
||||
scriptPaletteTile("result", "Ergebnis", "#dc2626", "✓"),
|
||||
scriptPaletteTile("output", "Ausgang", "#0f766e", "→")
|
||||
);
|
||||
|
||||
HorizontalLayout workspace = new HorizontalLayout(palette, editor);
|
||||
workspace.setSizeFull();
|
||||
workspace.setPadding(false);
|
||||
workspace.setSpacing(true);
|
||||
workspace.expand(editor);
|
||||
|
||||
VerticalLayout content = new VerticalLayout(topicField(instance), vars, workspace);
|
||||
content.setSizeFull();
|
||||
content.setPadding(false);
|
||||
content.setSpacing(true);
|
||||
content.expand(workspace);
|
||||
dialog.add(content);
|
||||
|
||||
Object existing = instance.get("script");
|
||||
if (existing != null && !existing.toString().isBlank()) {
|
||||
editor.setGraph(existing.toString());
|
||||
}
|
||||
editor.setVariables(toVariableArray(variables));
|
||||
|
||||
Button apply = new Button("Übernehmen", new Icon(VaadinIcon.CHECK), ev ->
|
||||
editor.exportGraph(json -> {
|
||||
instance.set("script", json);
|
||||
int outputs = countScriptOutputs(json);
|
||||
nodeEditor.setNodeOutputs(instance.id(), outputs);
|
||||
Notification.show("Skript übernommen (" + outputs + " Ausgang/Ausgänge).");
|
||||
dialog.close();
|
||||
}));
|
||||
apply.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
|
||||
Button cancel = new Button("Abbrechen", ev -> dialog.close());
|
||||
cancel.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
|
||||
dialog.getFooter().add(cancel, apply);
|
||||
dialog.open();
|
||||
}
|
||||
|
||||
private TextField topicField(BlockInstance instance) {
|
||||
TextField topic = new TextField("Bezeichnung");
|
||||
topic.setWidthFull();
|
||||
topic.setHelperText("Wird dem Bearbeiter angezeigt (topic).");
|
||||
@@ -264,11 +569,124 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
|
||||
nodeEditor.updateNodeLabel(instance.id(),
|
||||
value == null || value.isBlank() ? instance.type().label() : value);
|
||||
});
|
||||
propertiesContent.add(topic);
|
||||
|
||||
for (PropertyDefinition def : instance.type().properties()) {
|
||||
propertiesContent.add(buildField(instance, def));
|
||||
return topic;
|
||||
}
|
||||
|
||||
/** Ziehbare Operator-Kachel für die Script-Palette (Drag & Drop auf den Canvas). */
|
||||
private Component scriptPaletteTile(String typeId, String label, String color, String symbol) {
|
||||
Div tile = new Div();
|
||||
tile.addClassName("script-tile");
|
||||
tile.getElement().setAttribute("draggable", "true");
|
||||
tile.getElement().setAttribute("data-logictype", typeId);
|
||||
tile.getStyle().set("--block-color", color);
|
||||
|
||||
Div icon = new Div();
|
||||
icon.addClassName("script-tile-icon");
|
||||
icon.getStyle().set("background", color);
|
||||
icon.setText(symbol);
|
||||
|
||||
Span name = new Span(label);
|
||||
name.addClassName("script-tile-label");
|
||||
|
||||
tile.add(icon, name);
|
||||
return tile;
|
||||
}
|
||||
|
||||
/** Mit dem Eingang des Script-Blocks verbundene (vorgelagerte) Elemente. */
|
||||
private List<BlockInstance> upstreamElements(String graphJson, int scriptId) {
|
||||
return upstreamNodeIds(graphJson, scriptId).stream()
|
||||
.map(instances::get)
|
||||
.filter(java.util.Objects::nonNull)
|
||||
.filter(b -> !"script".equals(b.type().id()))
|
||||
.sorted((a, b) -> Integer.compare(a.id(), b.id()))
|
||||
.toList();
|
||||
}
|
||||
|
||||
/** Folgt den eingehenden Verbindungen des Knotens transitiv (alle Vorgänger). */
|
||||
private Set<Integer> upstreamNodeIds(String graphJson, int scriptId) {
|
||||
Set<Integer> result = new LinkedHashSet<>();
|
||||
if (graphJson == null || graphJson.isBlank()) {
|
||||
return result;
|
||||
}
|
||||
try {
|
||||
JsonNode data = objectMapper.readTree(graphJson).path("drawflow").path("Home").path("data");
|
||||
Deque<Integer> queue = new ArrayDeque<>();
|
||||
Set<Integer> visited = new HashSet<>();
|
||||
queue.add(scriptId);
|
||||
while (!queue.isEmpty()) {
|
||||
int current = queue.poll();
|
||||
if (!visited.add(current)) {
|
||||
continue;
|
||||
}
|
||||
JsonNode inputs = data.path(String.valueOf(current)).path("inputs");
|
||||
inputs.forEach(input -> input.path("connections").forEach(conn -> {
|
||||
JsonNode node = conn.path("node");
|
||||
if (!node.isMissingNode()) {
|
||||
int source = Integer.parseInt(node.asText());
|
||||
if (source != scriptId && result.add(source)) {
|
||||
queue.add(source);
|
||||
}
|
||||
}
|
||||
}));
|
||||
}
|
||||
} catch (Exception ignored) {
|
||||
// Ungültiger Graph -> keine Variablen.
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/** Zählt die „Ausgang"-Knoten im Skript – bestimmt die Ausgänge des Script-Elements. */
|
||||
private int countScriptOutputs(String json) {
|
||||
if (json == null || json.isBlank()) {
|
||||
return 0;
|
||||
}
|
||||
try {
|
||||
JsonNode data = objectMapper.readTree(json).path("drawflow").path("Home").path("data");
|
||||
int count = 0;
|
||||
for (JsonNode node : data) {
|
||||
if ("output".equals(node.path("name").asText())) {
|
||||
count++;
|
||||
}
|
||||
}
|
||||
return count;
|
||||
} catch (Exception ex) {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
private JsonArray toVariableArray(List<VariableDef> definitions) {
|
||||
JsonArray variables = Json.createArray();
|
||||
int i = 0;
|
||||
for (VariableDef def : definitions) {
|
||||
JsonObject obj = Json.createObject();
|
||||
obj.put("key", def.key());
|
||||
obj.put("label", def.label());
|
||||
variables.set(i++, obj);
|
||||
}
|
||||
return variables;
|
||||
}
|
||||
|
||||
/** Beschreibt eine vom Script referenzierbare Variable (Schlüssel + Anzeige). */
|
||||
private record VariableDef(String key, String label) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Liefert die Variablen, die ein Element dem Script bereitstellt.
|
||||
* Die meisten Elemente geben ihren erfassten Wert weiter; das Element
|
||||
* „Fotos aufnehmen" stellt die Anzahl der aufgenommenen Fotos bereit.
|
||||
*/
|
||||
private List<VariableDef> variablesFor(BlockInstance element) {
|
||||
String base = variableLabel(element);
|
||||
if ("fotos-aufnehmen".equals(element.type().id())) {
|
||||
return List.of(new VariableDef(element.id() + ".count", base + " · Anzahl Fotos"));
|
||||
}
|
||||
return List.of(new VariableDef(String.valueOf(element.id()), base));
|
||||
}
|
||||
|
||||
private String variableLabel(BlockInstance element) {
|
||||
return element.topic() == null || element.topic().isBlank()
|
||||
? element.type().label()
|
||||
: element.topic();
|
||||
}
|
||||
|
||||
private Component buildField(BlockInstance instance, PropertyDefinition def) {
|
||||
@@ -302,10 +720,111 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
|
||||
box.addValueChangeListener(e -> instance.set(def.id(), e.getValue()));
|
||||
return box;
|
||||
}
|
||||
case FIELD_LIST -> {
|
||||
return buildRowList(instance, def, current, true);
|
||||
}
|
||||
case NAME_LIST -> {
|
||||
return buildRowList(instance, def, current, false);
|
||||
}
|
||||
}
|
||||
return new Span();
|
||||
}
|
||||
|
||||
/**
|
||||
* Editor für eine wiederholbare Liste von Eingabefeldern. Jede Zeile besteht
|
||||
* aus einem Titel und – falls {@code withPlaceholder} – zusätzlich einem
|
||||
* Platzhalter. Der Wert wird als {@code List<Map<String,Object>>} unter der
|
||||
* Property-ID abgelegt (rundläuft über Mongo und Export).
|
||||
*/
|
||||
private Component buildRowList(BlockInstance instance, PropertyDefinition def, Object current,
|
||||
boolean withPlaceholder) {
|
||||
List<Map<String, Object>> rows = new ArrayList<>();
|
||||
if (current instanceof List<?> list) {
|
||||
for (Object o : list) {
|
||||
if (o instanceof Map<?, ?> m) {
|
||||
Map<String, Object> row = new LinkedHashMap<>();
|
||||
row.put("title", m.get("title") == null ? "" : m.get("title").toString());
|
||||
if (withPlaceholder) {
|
||||
row.put("placeholder", m.get("placeholder") == null ? "" : m.get("placeholder").toString());
|
||||
}
|
||||
rows.add(row);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
VerticalLayout wrapper = new VerticalLayout();
|
||||
wrapper.setPadding(false);
|
||||
wrapper.setSpacing(false);
|
||||
wrapper.setWidthFull();
|
||||
|
||||
Span label = new Span(def.label());
|
||||
label.addClassName("properties-fieldlist-label");
|
||||
wrapper.add(label);
|
||||
|
||||
VerticalLayout rowsBox = new VerticalLayout();
|
||||
rowsBox.setPadding(false);
|
||||
rowsBox.setSpacing(true);
|
||||
rowsBox.setWidthFull();
|
||||
wrapper.add(rowsBox);
|
||||
|
||||
Runnable commit = () -> instance.set(def.id(), new ArrayList<>(rows));
|
||||
Runnable[] render = new Runnable[1];
|
||||
render[0] = () -> {
|
||||
rowsBox.removeAll();
|
||||
for (Map<String, Object> row : rows) {
|
||||
TextField title = new TextField();
|
||||
title.setPlaceholder(withPlaceholder ? "Titel" : "Name");
|
||||
title.setValue(row.get("title").toString());
|
||||
title.addValueChangeListener(e -> {
|
||||
row.put("title", e.getValue());
|
||||
commit.run();
|
||||
});
|
||||
Button remove = new Button(new Icon(VaadinIcon.TRASH), ev -> {
|
||||
rows.remove(row);
|
||||
commit.run();
|
||||
render[0].run();
|
||||
});
|
||||
remove.addThemeVariants(ButtonVariant.LUMO_TERTIARY_INLINE, ButtonVariant.LUMO_ERROR);
|
||||
|
||||
HorizontalLayout line = new HorizontalLayout(title);
|
||||
line.setWidthFull();
|
||||
line.setFlexGrow(1, title);
|
||||
if (withPlaceholder) {
|
||||
TextField placeholder = new TextField();
|
||||
placeholder.setPlaceholder("Platzhalter");
|
||||
placeholder.setValue(row.get("placeholder").toString());
|
||||
placeholder.addValueChangeListener(e -> {
|
||||
row.put("placeholder", e.getValue());
|
||||
commit.run();
|
||||
});
|
||||
line.add(placeholder);
|
||||
line.setFlexGrow(1, placeholder);
|
||||
}
|
||||
line.add(remove);
|
||||
line.setAlignItems(FlexComponent.Alignment.BASELINE);
|
||||
rowsBox.add(line);
|
||||
}
|
||||
};
|
||||
render[0].run();
|
||||
|
||||
Button add = new Button(withPlaceholder ? "Feld hinzufügen" : "Eintrag hinzufügen",
|
||||
new Icon(VaadinIcon.PLUS), ev -> {
|
||||
Map<String, Object> row = new LinkedHashMap<>();
|
||||
row.put("title", "");
|
||||
if (withPlaceholder) {
|
||||
row.put("placeholder", "");
|
||||
}
|
||||
rows.add(row);
|
||||
commit.run();
|
||||
render[0].run();
|
||||
});
|
||||
add.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
|
||||
wrapper.add(add);
|
||||
|
||||
commit.run();
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
@Override
|
||||
public void beforeEnter(BeforeEnterEvent event) {
|
||||
List<String> tokens = event.getLocation().getQueryParameters()
|
||||
@@ -334,7 +853,6 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
|
||||
}
|
||||
|
||||
instances.clear();
|
||||
showEmpty();
|
||||
|
||||
nodeEditor.importTasks(descriptors, idsJson -> applyImportedIds(idsJson, resolved));
|
||||
}
|
||||
@@ -384,6 +902,7 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
|
||||
Button save = new Button("Speichern", new Icon(VaadinIcon.HARDDRIVE), ev -> {
|
||||
try {
|
||||
String id = canvasService.save(name.getValue(), layout, collectBlocks());
|
||||
elementSettingsService.saveForCanvas(id, name.getValue(), instances.values());
|
||||
currentListName = name.getValue();
|
||||
Notification.show("Canvas gespeichert (ID: " + id + ")");
|
||||
dialog.close();
|
||||
@@ -431,7 +950,7 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
|
||||
.withZone(ZoneId.systemDefault());
|
||||
|
||||
Grid<CanvasDocument> grid = new Grid<>();
|
||||
grid.addColumn(CanvasDocument::getName).setHeader("Name").setAutoWidth(true);
|
||||
grid.addColumn(d -> d.getName()).setHeader("Name").setAutoWidth(true);
|
||||
grid.addColumn(d -> d.getBlocks() == null ? 0 : d.getBlocks().size()).setHeader("Blöcke");
|
||||
grid.addColumn(d -> d.getCreatedAt() == null ? "" : fmt.format(d.getCreatedAt()))
|
||||
.setHeader("Gespeichert");
|
||||
@@ -475,7 +994,6 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
|
||||
}
|
||||
currentListName = document.getName();
|
||||
nodeEditor.importGraph(document.getLayout());
|
||||
showEmpty();
|
||||
Notification.show("Canvas „" + document.getName() + "“ geladen.");
|
||||
}
|
||||
|
||||
@@ -538,8 +1056,60 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
|
||||
dialog.open();
|
||||
}
|
||||
|
||||
private void showEmpty() {
|
||||
propertiesContent.removeAll();
|
||||
propertiesContent.add(propertiesEmpty);
|
||||
/**
|
||||
* Erzeugt das vollständige, von der stadtbote-App verarbeitbare Job-JSON
|
||||
* (Job → Tour → Tasks) und zeigt es in einem Dialog an.
|
||||
*/
|
||||
private void previewAppJson() {
|
||||
if (instances.isEmpty()) {
|
||||
Notification.show("Es sind keine Funktionsblöcke auf dem Canvas.");
|
||||
return;
|
||||
}
|
||||
nodeEditor.exportGraph(graphJson -> {
|
||||
try {
|
||||
TaskListService.AppJobResult result =
|
||||
taskListService.buildAppJob(currentListName, graphJson, instances);
|
||||
if (result.taskCount() == 0) {
|
||||
Notification.show("Keine app-verarbeitbaren Tasks gefunden.");
|
||||
return;
|
||||
}
|
||||
openAppJsonDialog(result);
|
||||
} catch (Exception ex) {
|
||||
Notification.show("App-JSON fehlgeschlagen: " + ex.getMessage());
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private void openAppJsonDialog(TaskListService.AppJobResult result) {
|
||||
Dialog dialog = new Dialog();
|
||||
dialog.setHeaderTitle("App-JSON für stadtbote (" + result.taskCount() + " Tasks)");
|
||||
dialog.setWidth("720px");
|
||||
|
||||
Paragraph hint = new Paragraph("Task-Array, das von der stadtbote-App fehlerfrei "
|
||||
+ "verarbeitet wird. Script-Blöcke werden ausgelassen.");
|
||||
hint.addClassName("properties-desc");
|
||||
|
||||
TextArea json = new TextArea("App-JSON (tasks-Array)");
|
||||
json.setWidthFull();
|
||||
json.setHeight("420px");
|
||||
json.setReadOnly(true);
|
||||
json.setValue(result.json());
|
||||
|
||||
VerticalLayout content = new VerticalLayout(hint, json);
|
||||
content.setPadding(false);
|
||||
content.setSpacing(true);
|
||||
dialog.add(content);
|
||||
|
||||
Button copy = new Button("In Zwischenablage kopieren", new Icon(VaadinIcon.COPY), ev -> {
|
||||
getElement().executeJs("navigator.clipboard.writeText($0)", result.json());
|
||||
Notification.show("JSON in die Zwischenablage kopiert.");
|
||||
});
|
||||
copy.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
|
||||
|
||||
Button close = new Button("Schließen", ev -> dialog.close());
|
||||
close.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
|
||||
|
||||
dialog.getFooter().add(close, copy);
|
||||
dialog.open();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,6 +16,31 @@ logging.level.org.atmosphere=WARN
|
||||
# startet auch ohne laufende MongoDB.
|
||||
spring.data.mongodb.uri=${MONGODB_URI:mongodb://localhost:27017}
|
||||
spring.data.mongodb.database=${MONGODB_DATABASE:tasklist_editor}
|
||||
# Legt die @Indexed-Indizes (u. a. eindeutige Typnummer) bei Bedarf an.
|
||||
spring.data.mongodb.auto-index-creation=true
|
||||
|
||||
# Health-Check soll nicht fehlschlagen, wenn keine MongoDB läuft.
|
||||
management.health.mongo.enabled=false
|
||||
|
||||
# Script-Block (grafisches Logik-Element) im Editor ausblenden.
|
||||
# Wird per .env (HIDE_SCRIPT_BLOCK) gesteuert.
|
||||
tasklist.hide-script-block=${HIDE_SCRIPT_BLOCK:false}
|
||||
|
||||
# --- Collections je Element-Typ ---------------------------------------------
|
||||
# Einstellungen der einzelnen Elemente werden beim Canvas-Speichern zusätzlich
|
||||
# je Element-Typ in eine eigene Collection geschrieben. Namen aus der .env
|
||||
# (MONGODB_ELEMENT_*), mit Default. Benutzerdefinierte Typen werden auf ihren
|
||||
# statischen Basistyp aufgelöst; für jeden Typ muss eine Zuordnung existieren.
|
||||
tasklist.element-collections[ankunft-melden]=${MONGODB_ELEMENT_ARRIVAL_COLLECTION:element_arrival}
|
||||
tasklist.element-collections[unterschrift-erfassen]=${MONGODB_ELEMENT_SIGNATURE_COLLECTION:element_signature}
|
||||
tasklist.element-collections[fotos-aufnehmen]=${MONGODB_ELEMENT_PHOTOS_COLLECTION:element_photos}
|
||||
tasklist.element-collections[quittungsgeber-erfassen]=${MONGODB_ELEMENT_RECEIPT_GIVER_COLLECTION:element_receipt_giver}
|
||||
tasklist.element-collections[bemerkung-erfassen]=${MONGODB_ELEMENT_REMARK_COLLECTION:element_remark}
|
||||
tasklist.element-collections[kommissionsnummer-erfassen]=${MONGODB_ELEMENT_COMMISSION_NUMBER_COLLECTION:element_commission_number}
|
||||
tasklist.element-collections[checkbox]=${MONGODB_ELEMENT_CHECKBOX_COLLECTION:element_checkbox}
|
||||
tasklist.element-collections[barcode-scannen]=${MONGODB_ELEMENT_BARCODE_COLLECTION:element_barcode}
|
||||
tasklist.element-collections[statusauswahl]=${MONGODB_ELEMENT_STATUS_SELECTION_COLLECTION:element_status_selection}
|
||||
tasklist.element-collections[text-liste-erfassen]=${MONGODB_ELEMENT_TEXT_LIST_COLLECTION:element_text_list}
|
||||
tasklist.element-collections[zahl-liste-erfassen]=${MONGODB_ELEMENT_NUMBER_LIST_COLLECTION:element_number_list}
|
||||
tasklist.element-collections[checkbox-liste-erfassen]=${MONGODB_ELEMENT_CHECKBOX_LIST_COLLECTION:element_checkbox_list}
|
||||
tasklist.element-collections[script]=${MONGODB_ELEMENT_SCRIPT_COLLECTION:element_script}
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
"noUnusedParameters": false,
|
||||
"experimentalDecorators": true,
|
||||
"useDefineForClassFields": false,
|
||||
"ignoreDeprecations": "5.0",
|
||||
"ignoreDeprecations": "6.0",
|
||||
"baseUrl": "src/main/frontend",
|
||||
"paths": {
|
||||
"@vaadin/flow-frontend": ["generated/jar-resources"],
|
||||
|
||||
Reference in New Issue
Block a user