513 lines
20 KiB
JavaScript
513 lines
20 KiB
JavaScript
(() => {
|
|
const SVG_NS = 'http://www.w3.org/2000/svg';
|
|
const VIEWBOX_WIDTH = 2000;
|
|
const VIEWBOX_HEIGHT = 1000;
|
|
const SNAP_TOLERANCE = 12;
|
|
|
|
function initFloorSvgEditor() {
|
|
const editor = document.getElementById('floor-svg-editor');
|
|
const svg = document.getElementById('floor-svg-canvas');
|
|
const hiddenInput = document.getElementById('floor-svg-content');
|
|
if (!editor || !svg || !hiddenInput) {
|
|
return;
|
|
}
|
|
|
|
const controls = {
|
|
startPolyline: document.getElementById('floor-start-polyline'),
|
|
finishPolyline: document.getElementById('floor-finish-polyline'),
|
|
removeLastPoint: document.getElementById('floor-remove-last-point'),
|
|
deletePolyline: document.getElementById('floor-delete-polyline'),
|
|
clearDrawing: document.getElementById('floor-clear-drawing'),
|
|
lock45: document.getElementById('floor-lock-45'),
|
|
snapGuides: document.getElementById('floor-snap-guides'),
|
|
addGuide: document.getElementById('floor-add-guide'),
|
|
guideOrientation: document.getElementById('floor-guide-orientation'),
|
|
guidePosition: document.getElementById('floor-guide-position'),
|
|
guideList: document.getElementById('floor-guide-list')
|
|
};
|
|
|
|
const state = {
|
|
polylines: [],
|
|
guides: [],
|
|
selectedPolylineId: null,
|
|
activePolylineId: null,
|
|
draggingVertex: null
|
|
};
|
|
|
|
loadFromExistingSvg(hiddenInput.value, state);
|
|
bindControlEvents(controls, state, svg, hiddenInput);
|
|
bindCanvasEvents(svg, controls, state, hiddenInput);
|
|
render(svg, controls, state, hiddenInput);
|
|
}
|
|
|
|
function bindControlEvents(controls, state, svg, hiddenInput) {
|
|
controls.startPolyline.addEventListener('click', () => {
|
|
const id = createId('poly');
|
|
state.polylines.push({
|
|
id,
|
|
points: []
|
|
});
|
|
state.activePolylineId = id;
|
|
state.selectedPolylineId = id;
|
|
render(svg, controls, state, hiddenInput);
|
|
});
|
|
|
|
controls.finishPolyline.addEventListener('click', () => {
|
|
finishActivePolyline(state);
|
|
render(svg, controls, state, hiddenInput);
|
|
});
|
|
|
|
if (controls.removeLastPoint) {
|
|
controls.removeLastPoint.addEventListener('click', () => {
|
|
const targetId = state.activePolylineId || state.selectedPolylineId;
|
|
if (!targetId) {
|
|
return;
|
|
}
|
|
const targetLine = state.polylines.find((line) => line.id === targetId);
|
|
if (!targetLine || targetLine.points.length === 0) {
|
|
return;
|
|
}
|
|
targetLine.points.pop();
|
|
if (targetLine.points.length === 0) {
|
|
state.polylines = state.polylines.filter((line) => line.id !== targetLine.id);
|
|
if (state.activePolylineId === targetLine.id) {
|
|
state.activePolylineId = null;
|
|
}
|
|
if (state.selectedPolylineId === targetLine.id) {
|
|
state.selectedPolylineId = null;
|
|
}
|
|
}
|
|
render(svg, controls, state, hiddenInput);
|
|
});
|
|
}
|
|
|
|
controls.deletePolyline.addEventListener('click', () => {
|
|
if (!state.selectedPolylineId) {
|
|
return;
|
|
}
|
|
state.polylines = state.polylines.filter((line) => line.id !== state.selectedPolylineId);
|
|
if (state.activePolylineId === state.selectedPolylineId) {
|
|
state.activePolylineId = null;
|
|
}
|
|
state.selectedPolylineId = null;
|
|
render(svg, controls, state, hiddenInput);
|
|
});
|
|
|
|
controls.clearDrawing.addEventListener('click', () => {
|
|
state.polylines = [];
|
|
state.guides = [];
|
|
state.selectedPolylineId = null;
|
|
state.activePolylineId = null;
|
|
state.draggingVertex = null;
|
|
render(svg, controls, state, hiddenInput);
|
|
});
|
|
|
|
controls.addGuide.addEventListener('click', () => {
|
|
const orientation = controls.guideOrientation.value === 'horizontal' ? 'horizontal' : 'vertical';
|
|
const position = Number(controls.guidePosition.value);
|
|
if (!Number.isFinite(position)) {
|
|
return;
|
|
}
|
|
state.guides.push({
|
|
id: createId('guide'),
|
|
orientation,
|
|
position: Math.round(position)
|
|
});
|
|
controls.guidePosition.value = '';
|
|
render(svg, controls, state, hiddenInput);
|
|
});
|
|
|
|
controls.guideList.addEventListener('click', (event) => {
|
|
const target = event.target;
|
|
if (!(target instanceof HTMLElement)) {
|
|
return;
|
|
}
|
|
const id = target.getAttribute('data-remove-guide');
|
|
if (!id) {
|
|
return;
|
|
}
|
|
state.guides = state.guides.filter((guide) => guide.id !== id);
|
|
render(svg, controls, state, hiddenInput);
|
|
});
|
|
}
|
|
|
|
function bindCanvasEvents(svg, controls, state, hiddenInput) {
|
|
svg.addEventListener('pointerdown', (event) => {
|
|
const target = event.target;
|
|
if (!(target instanceof SVGElement)) {
|
|
return;
|
|
}
|
|
|
|
const vertex = target.closest('[data-vertex-index]');
|
|
if (vertex) {
|
|
const polylineId = vertex.getAttribute('data-polyline-id');
|
|
const vertexIndex = Number(vertex.getAttribute('data-vertex-index'));
|
|
if (polylineId && Number.isInteger(vertexIndex)) {
|
|
state.selectedPolylineId = polylineId;
|
|
state.draggingVertex = { polylineId, vertexIndex };
|
|
vertex.setPointerCapture(event.pointerId);
|
|
}
|
|
return;
|
|
}
|
|
|
|
const polylineEl = target.closest('[data-polyline-id]');
|
|
if (polylineEl) {
|
|
const polylineId = polylineEl.getAttribute('data-polyline-id');
|
|
if (polylineId) {
|
|
state.selectedPolylineId = polylineId;
|
|
if (!state.activePolylineId) {
|
|
state.activePolylineId = polylineId;
|
|
}
|
|
render(svg, controls, state, hiddenInput);
|
|
}
|
|
return;
|
|
}
|
|
|
|
const point = toSvgPoint(svg, event);
|
|
if (!point) {
|
|
return;
|
|
}
|
|
|
|
if (!state.activePolylineId) {
|
|
const id = createId('poly');
|
|
state.polylines.push({ id, points: [] });
|
|
state.activePolylineId = id;
|
|
state.selectedPolylineId = id;
|
|
}
|
|
|
|
const activeLine = state.polylines.find((line) => line.id === state.activePolylineId);
|
|
if (!activeLine) {
|
|
return;
|
|
}
|
|
|
|
let nextPoint = point;
|
|
if (controls.lock45.checked && activeLine.points.length > 0) {
|
|
nextPoint = lockTo45(activeLine.points[activeLine.points.length - 1], nextPoint);
|
|
}
|
|
if (controls.snapGuides.checked) {
|
|
nextPoint = snapPointToGuides(nextPoint, state.guides, SNAP_TOLERANCE);
|
|
}
|
|
|
|
activeLine.points.push({
|
|
x: Math.round(nextPoint.x),
|
|
y: Math.round(nextPoint.y)
|
|
});
|
|
render(svg, controls, state, hiddenInput);
|
|
});
|
|
|
|
svg.addEventListener('pointermove', (event) => {
|
|
if (!state.draggingVertex) {
|
|
return;
|
|
}
|
|
const point = toSvgPoint(svg, event);
|
|
if (!point) {
|
|
return;
|
|
}
|
|
|
|
const line = state.polylines.find((item) => item.id === state.draggingVertex.polylineId);
|
|
if (!line) {
|
|
return;
|
|
}
|
|
const index = state.draggingVertex.vertexIndex;
|
|
if (!line.points[index]) {
|
|
return;
|
|
}
|
|
|
|
let nextPoint = point;
|
|
if (controls.lock45.checked && index > 0 && line.points[index - 1]) {
|
|
nextPoint = lockTo45(line.points[index - 1], nextPoint);
|
|
}
|
|
if (controls.snapGuides.checked) {
|
|
nextPoint = snapPointToGuides(nextPoint, state.guides, SNAP_TOLERANCE);
|
|
}
|
|
|
|
line.points[index] = {
|
|
x: Math.round(nextPoint.x),
|
|
y: Math.round(nextPoint.y)
|
|
};
|
|
render(svg, controls, state, hiddenInput);
|
|
});
|
|
|
|
svg.addEventListener('pointerup', () => {
|
|
state.draggingVertex = null;
|
|
});
|
|
svg.addEventListener('pointercancel', () => {
|
|
state.draggingVertex = null;
|
|
});
|
|
}
|
|
|
|
function render(svg, controls, state, hiddenInput) {
|
|
const activeLine = state.polylines.find((line) => line.id === state.activePolylineId) || null;
|
|
const selectedLine = state.polylines.find((line) => line.id === state.selectedPolylineId) || null;
|
|
const undoLine = state.polylines.find((line) => line.id === (state.activePolylineId || state.selectedPolylineId)) || null;
|
|
|
|
svg.innerHTML = '';
|
|
svg.setAttribute('viewBox', `0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`);
|
|
|
|
const background = createSvgElement('rect');
|
|
background.setAttribute('x', '0');
|
|
background.setAttribute('y', '0');
|
|
background.setAttribute('width', String(VIEWBOX_WIDTH));
|
|
background.setAttribute('height', String(VIEWBOX_HEIGHT));
|
|
background.setAttribute('fill', '#fafafa');
|
|
background.setAttribute('stroke', '#e1e1e1');
|
|
background.setAttribute('stroke-width', '1');
|
|
svg.appendChild(background);
|
|
|
|
const style = createSvgElement('style');
|
|
style.textContent = '.floor-guide{display:none;}';
|
|
svg.appendChild(style);
|
|
|
|
state.guides.forEach((guide) => {
|
|
const line = createSvgElement('line');
|
|
if (guide.orientation === 'horizontal') {
|
|
line.setAttribute('x1', '0');
|
|
line.setAttribute('y1', String(guide.position));
|
|
line.setAttribute('x2', String(VIEWBOX_WIDTH));
|
|
line.setAttribute('y2', String(guide.position));
|
|
} else {
|
|
line.setAttribute('x1', String(guide.position));
|
|
line.setAttribute('y1', '0');
|
|
line.setAttribute('x2', String(guide.position));
|
|
line.setAttribute('y2', String(VIEWBOX_HEIGHT));
|
|
}
|
|
line.setAttribute('stroke', '#8f8f8f');
|
|
line.setAttribute('stroke-width', '1');
|
|
line.setAttribute('stroke-dasharray', '8 6');
|
|
line.setAttribute('opacity', '0.8');
|
|
line.setAttribute('data-guide-id', guide.id);
|
|
svg.appendChild(line);
|
|
});
|
|
|
|
state.polylines.forEach((polyline) => {
|
|
const line = createSvgElement('polyline');
|
|
line.setAttribute('fill', 'none');
|
|
line.setAttribute('stroke', polyline.id === state.selectedPolylineId ? '#007bff' : '#1f2937');
|
|
line.setAttribute('stroke-width', polyline.id === state.selectedPolylineId ? '5' : '3');
|
|
line.setAttribute('points', polyline.points.map((point) => `${point.x},${point.y}`).join(' '));
|
|
line.setAttribute('data-polyline-id', polyline.id);
|
|
svg.appendChild(line);
|
|
});
|
|
|
|
if (selectedLine) {
|
|
selectedLine.points.forEach((point, index) => {
|
|
const vertex = createSvgElement('circle');
|
|
vertex.setAttribute('cx', String(point.x));
|
|
vertex.setAttribute('cy', String(point.y));
|
|
vertex.setAttribute('r', '8');
|
|
vertex.setAttribute('fill', '#ffffff');
|
|
vertex.setAttribute('stroke', '#dc3545');
|
|
vertex.setAttribute('stroke-width', '3');
|
|
vertex.setAttribute('data-polyline-id', selectedLine.id);
|
|
vertex.setAttribute('data-vertex-index', String(index));
|
|
svg.appendChild(vertex);
|
|
});
|
|
}
|
|
|
|
controls.guideList.innerHTML = '';
|
|
state.guides.forEach((guide) => {
|
|
const li = document.createElement('li');
|
|
const label = guide.orientation === 'horizontal' ? 'Horizontal' : 'Vertikal';
|
|
li.innerHTML = `
|
|
<span>${label}: ${Math.round(guide.position)}</span>
|
|
<button type="button" class="button button-danger" data-remove-guide="${guide.id}">X</button>
|
|
`;
|
|
controls.guideList.appendChild(li);
|
|
});
|
|
|
|
if (controls.finishPolyline) {
|
|
controls.finishPolyline.disabled = !(activeLine && activeLine.points.length >= 2);
|
|
}
|
|
if (controls.removeLastPoint) {
|
|
controls.removeLastPoint.disabled = !(undoLine && undoLine.points.length > 0);
|
|
}
|
|
if (controls.deletePolyline) {
|
|
controls.deletePolyline.disabled = !selectedLine;
|
|
}
|
|
|
|
hiddenInput.value = buildSvgMarkup(state.polylines, state.guides);
|
|
}
|
|
|
|
function finishActivePolyline(state) {
|
|
const active = state.polylines.find((line) => line.id === state.activePolylineId);
|
|
if (active && active.points.length < 2) {
|
|
state.polylines = state.polylines.filter((line) => line.id !== active.id);
|
|
if (state.selectedPolylineId === active.id) {
|
|
state.selectedPolylineId = null;
|
|
}
|
|
}
|
|
state.activePolylineId = null;
|
|
}
|
|
|
|
function loadFromExistingSvg(raw, state) {
|
|
const content = String(raw || '').trim();
|
|
if (!content) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const parser = new DOMParser();
|
|
const doc = parser.parseFromString(content, 'image/svg+xml');
|
|
const root = doc.documentElement;
|
|
if (!root || root.nodeName.toLowerCase() === 'parsererror') {
|
|
return;
|
|
}
|
|
|
|
root.querySelectorAll('line[data-guide="1"], line.floor-guide').forEach((line) => {
|
|
const orientation = line.getAttribute('data-orientation') === 'horizontal' ? 'horizontal' : 'vertical';
|
|
const position = orientation === 'horizontal'
|
|
? Number(line.getAttribute('y1'))
|
|
: Number(line.getAttribute('x1'));
|
|
if (Number.isFinite(position)) {
|
|
state.guides.push({
|
|
id: createId('guide'),
|
|
orientation,
|
|
position: Math.round(position)
|
|
});
|
|
}
|
|
});
|
|
|
|
root.querySelectorAll('polyline').forEach((polyline) => {
|
|
const pointsAttr = polyline.getAttribute('points') || '';
|
|
const points = parsePoints(pointsAttr);
|
|
if (points.length < 2) {
|
|
return;
|
|
}
|
|
state.polylines.push({
|
|
id: createId('poly'),
|
|
points
|
|
});
|
|
});
|
|
|
|
if (state.polylines.length > 0) {
|
|
state.selectedPolylineId = state.polylines[0].id;
|
|
}
|
|
} catch (error) {
|
|
// ignore invalid svg content
|
|
}
|
|
}
|
|
|
|
function parsePoints(pointsAttr) {
|
|
return pointsAttr
|
|
.trim()
|
|
.split(/\s+/)
|
|
.map((pair) => {
|
|
const [x, y] = pair.split(',').map((value) => Number(value));
|
|
if (!Number.isFinite(x) || !Number.isFinite(y)) {
|
|
return null;
|
|
}
|
|
return { x: Math.round(x), y: Math.round(y) };
|
|
})
|
|
.filter(Boolean);
|
|
}
|
|
|
|
function buildSvgMarkup(polylines, guides) {
|
|
const svg = createSvgElement('svg');
|
|
svg.setAttribute('xmlns', SVG_NS);
|
|
svg.setAttribute('viewBox', `0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`);
|
|
|
|
const background = createSvgElement('rect');
|
|
background.setAttribute('x', '0');
|
|
background.setAttribute('y', '0');
|
|
background.setAttribute('width', String(VIEWBOX_WIDTH));
|
|
background.setAttribute('height', String(VIEWBOX_HEIGHT));
|
|
background.setAttribute('fill', '#fafafa');
|
|
background.setAttribute('stroke', '#e1e1e1');
|
|
background.setAttribute('stroke-width', '1');
|
|
svg.appendChild(background);
|
|
|
|
guides.forEach((guide) => {
|
|
const line = createSvgElement('line');
|
|
if (guide.orientation === 'horizontal') {
|
|
line.setAttribute('x1', '0');
|
|
line.setAttribute('y1', String(guide.position));
|
|
line.setAttribute('x2', String(VIEWBOX_WIDTH));
|
|
line.setAttribute('y2', String(guide.position));
|
|
} else {
|
|
line.setAttribute('x1', String(guide.position));
|
|
line.setAttribute('y1', '0');
|
|
line.setAttribute('x2', String(guide.position));
|
|
line.setAttribute('y2', String(VIEWBOX_HEIGHT));
|
|
}
|
|
line.setAttribute('stroke', '#8f8f8f');
|
|
line.setAttribute('stroke-width', '1');
|
|
line.setAttribute('stroke-dasharray', '8 6');
|
|
line.setAttribute('class', 'floor-guide');
|
|
line.setAttribute('data-guide', '1');
|
|
line.setAttribute('data-orientation', guide.orientation);
|
|
svg.appendChild(line);
|
|
});
|
|
|
|
polylines.forEach((polyline) => {
|
|
if (polyline.points.length < 2) {
|
|
return;
|
|
}
|
|
const line = createSvgElement('polyline');
|
|
line.setAttribute('fill', 'none');
|
|
line.setAttribute('stroke', '#1f2937');
|
|
line.setAttribute('stroke-width', '3');
|
|
line.setAttribute('class', 'floor-polyline');
|
|
line.setAttribute('points', polyline.points.map((point) => `${point.x},${point.y}`).join(' '));
|
|
svg.appendChild(line);
|
|
});
|
|
|
|
return new XMLSerializer().serializeToString(svg);
|
|
}
|
|
|
|
function lockTo45(origin, point) {
|
|
const dx = point.x - origin.x;
|
|
const dy = point.y - origin.y;
|
|
const length = Math.sqrt((dx * dx) + (dy * dy));
|
|
if (length === 0) {
|
|
return { x: origin.x, y: origin.y };
|
|
}
|
|
|
|
const angle = Math.atan2(dy, dx);
|
|
const step = Math.PI / 4;
|
|
const snapped = Math.round(angle / step) * step;
|
|
return {
|
|
x: origin.x + Math.cos(snapped) * length,
|
|
y: origin.y + Math.sin(snapped) * length
|
|
};
|
|
}
|
|
|
|
function snapPointToGuides(point, guides, tolerance) {
|
|
let next = { ...point };
|
|
guides.forEach((guide) => {
|
|
if (guide.orientation === 'vertical') {
|
|
if (Math.abs(next.x - guide.position) <= tolerance) {
|
|
next.x = guide.position;
|
|
}
|
|
} else if (Math.abs(next.y - guide.position) <= tolerance) {
|
|
next.y = guide.position;
|
|
}
|
|
});
|
|
return next;
|
|
}
|
|
|
|
function toSvgPoint(svg, event) {
|
|
const pt = svg.createSVGPoint();
|
|
pt.x = event.clientX;
|
|
pt.y = event.clientY;
|
|
const ctm = svg.getScreenCTM();
|
|
if (!ctm) {
|
|
return null;
|
|
}
|
|
const transformed = pt.matrixTransform(ctm.inverse());
|
|
return {
|
|
x: transformed.x,
|
|
y: transformed.y
|
|
};
|
|
}
|
|
|
|
function createSvgElement(name) {
|
|
return document.createElementNS(SVG_NS, name);
|
|
}
|
|
|
|
function createId(prefix) {
|
|
return `${prefix}_${Date.now()}_${Math.random().toString(16).slice(2, 8)}`;
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', initFloorSvgEditor);
|
|
})();
|