Add device dock search, IDs drag-to-assign tab, and label drop-target highlight
- Add search filter to Devices tab in right dock - Add IDs tab: flat list of unassigned device IDs, drag onto placed symbol to assign label - Highlight drop target symbol with cyan glow during label drag - Add labelDropTarget state and dropTarget theme entry Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
6f0ac836fb
commit
93afd0a554
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { layout } from '$lib/stores/layout.svelte.js';
|
||||
import { SYMBOLS } from '$lib/symbols.js';
|
||||
import { startPaletteDrag } from '$lib/canvas/interactions.js';
|
||||
import { startPaletteDrag, startLabelDrag } from '$lib/canvas/interactions.js';
|
||||
|
||||
interface DeviceEntry {
|
||||
id: string;
|
||||
@ -12,6 +12,8 @@
|
||||
let allDevices = $state<Record<string, DeviceEntry[]>>({});
|
||||
let collapsed = $state(false);
|
||||
let collapsedZones = $state<Set<string>>(new Set());
|
||||
let activeTab = $state<'devices' | 'ids'>('devices');
|
||||
let searchQuery = $state('');
|
||||
|
||||
// Load manifest
|
||||
async function loadManifest() {
|
||||
@ -29,10 +31,17 @@
|
||||
return list.filter(d => !placedLabels.has(d.id));
|
||||
});
|
||||
|
||||
// Apply search filter
|
||||
let filteredDevices = $derived.by(() => {
|
||||
if (!searchQuery.trim()) return mcmDevices;
|
||||
const q = searchQuery.trim().toLowerCase();
|
||||
return mcmDevices.filter(d => d.id.toLowerCase().includes(q) || d.svg.toLowerCase().includes(q));
|
||||
});
|
||||
|
||||
// Group by SVG type
|
||||
let svgGroups = $derived.by(() => {
|
||||
const map = new Map<string, DeviceEntry[]>();
|
||||
for (const d of mcmDevices) {
|
||||
for (const d of filteredDevices) {
|
||||
const name = SYMBOLS.find(s => s.id === d.svg)?.name || d.svg;
|
||||
if (!map.has(name)) map.set(name, []);
|
||||
map.get(name)!.push(d);
|
||||
@ -62,6 +71,26 @@
|
||||
return SYMBOLS.find(s => s.id === svgId)?.file || '';
|
||||
}
|
||||
|
||||
// --- IDs tab ---
|
||||
let idSearchQuery = $state('');
|
||||
|
||||
// Unassigned device IDs: all MCM device IDs minus already-used labels
|
||||
let unassignedIds = $derived.by(() => {
|
||||
const list = allDevices[layout.currentMcm] || [];
|
||||
const placedLabels = new Set(layout.symbols.map(s => s.label).filter(Boolean));
|
||||
let ids = list.filter(d => !placedLabels.has(d.id));
|
||||
if (idSearchQuery.trim()) {
|
||||
const q = idSearchQuery.trim().toLowerCase();
|
||||
ids = ids.filter(d => d.id.toLowerCase().includes(q));
|
||||
}
|
||||
return ids;
|
||||
});
|
||||
|
||||
function onLabelMousedown(e: MouseEvent, deviceId: string) {
|
||||
if (e.button !== 0) return;
|
||||
e.preventDefault();
|
||||
startLabelDrag(e, deviceId);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="device-dock" class:collapsed>
|
||||
@ -71,42 +100,102 @@
|
||||
|
||||
{#if !collapsed}
|
||||
<div class="dock-content">
|
||||
<div class="dock-header">
|
||||
Devices
|
||||
<span class="dock-count">{totalAll - totalCount}/{totalAll}</span>
|
||||
<!-- Tabs -->
|
||||
<div class="tabs">
|
||||
<button
|
||||
class="tab" class:active={activeTab === 'devices'}
|
||||
onclick={() => activeTab = 'devices'}
|
||||
>Devices</button>
|
||||
<button
|
||||
class="tab" class:active={activeTab === 'ids'}
|
||||
onclick={() => activeTab = 'ids'}
|
||||
>IDs</button>
|
||||
</div>
|
||||
|
||||
{#if totalCount === 0}
|
||||
<div class="dock-empty">All placed</div>
|
||||
{/if}
|
||||
<!-- ============ DEVICES TAB ============ -->
|
||||
{#if activeTab === 'devices'}
|
||||
<div class="dock-header">
|
||||
<span class="dock-count">{totalAll - totalCount}/{totalAll} placed</span>
|
||||
</div>
|
||||
|
||||
<div class="dock-list">
|
||||
{#each svgGroups as [groupName, devices] (groupName)}
|
||||
<button class="zone-toggle" onclick={() => toggleGroup(groupName)}>
|
||||
<span class="chevron" class:open={!collapsedZones.has(groupName)}></span>
|
||||
{groupName}
|
||||
<span class="zone-count">{devices.length}</span>
|
||||
</button>
|
||||
{#if !collapsedZones.has(groupName)}
|
||||
<div class="zone-items">
|
||||
{#each devices as device (device.id)}
|
||||
<button
|
||||
class="device-item"
|
||||
title={device.id}
|
||||
onmousedown={(e) => onMousedown(e, device)}
|
||||
>
|
||||
<img
|
||||
src={getSymbolFile(device.svg)}
|
||||
alt={device.svg}
|
||||
draggable="false"
|
||||
/>
|
||||
<span class="device-label">{device.id}</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="search-box">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search devices..."
|
||||
bind:value={searchQuery}
|
||||
/>
|
||||
{#if searchQuery}
|
||||
<button class="clear-search" onclick={() => searchQuery = ''}>x</button>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if filteredDevices.length === 0}
|
||||
<div class="dock-empty">{searchQuery ? 'No matches' : 'All placed'}</div>
|
||||
{/if}
|
||||
|
||||
<div class="dock-list">
|
||||
{#each svgGroups as [groupName, devices] (groupName)}
|
||||
<button class="zone-toggle" onclick={() => toggleGroup(groupName)}>
|
||||
<span class="chevron" class:open={!collapsedZones.has(groupName)}></span>
|
||||
{groupName}
|
||||
<span class="zone-count">{devices.length}</span>
|
||||
</button>
|
||||
{#if !collapsedZones.has(groupName)}
|
||||
<div class="zone-items">
|
||||
{#each devices as device (device.id)}
|
||||
<button
|
||||
class="device-item"
|
||||
title={device.id}
|
||||
onmousedown={(e) => onMousedown(e, device)}
|
||||
>
|
||||
<img
|
||||
src={getSymbolFile(device.svg)}
|
||||
alt={device.svg}
|
||||
draggable="false"
|
||||
/>
|
||||
<span class="device-label">{device.id}</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- ============ IDS TAB ============ -->
|
||||
{:else}
|
||||
<div class="dock-header">
|
||||
<span class="dock-count">{unassignedIds.length} unassigned</span>
|
||||
</div>
|
||||
|
||||
<div class="search-box">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search IDs..."
|
||||
bind:value={idSearchQuery}
|
||||
/>
|
||||
{#if idSearchQuery}
|
||||
<button class="clear-search" onclick={() => idSearchQuery = ''}>x</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="ids-hint">Drag onto a symbol to assign</div>
|
||||
|
||||
{#if unassignedIds.length === 0}
|
||||
<div class="dock-empty">{idSearchQuery ? 'No matches' : 'All IDs assigned'}</div>
|
||||
{/if}
|
||||
|
||||
<div class="dock-list">
|
||||
{#each unassignedIds as device (device.id)}
|
||||
<button
|
||||
class="id-drag-item"
|
||||
title="Drag onto a symbol to assign: {device.id}"
|
||||
onmousedown={(e) => onLabelMousedown(e, device.id)}
|
||||
>
|
||||
{device.id}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@ -154,6 +243,7 @@
|
||||
|
||||
.dock-content {
|
||||
padding: 6px;
|
||||
padding-top: 38px;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
@ -161,16 +251,45 @@
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex: 1;
|
||||
padding: 5px 0;
|
||||
background: #0d2847;
|
||||
border: 1px solid #1a1a5e;
|
||||
border-radius: 4px 4px 0 0;
|
||||
color: #667;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
background: #0f3460;
|
||||
color: #e94560;
|
||||
border-bottom-color: #0f3460;
|
||||
}
|
||||
|
||||
.dock-header {
|
||||
font-size: 10px;
|
||||
color: #e94560;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 600;
|
||||
padding: 5px 6px 6px 30px;
|
||||
padding: 2px 6px 4px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@ -180,6 +299,57 @@
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Search */
|
||||
.search-box {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
width: 100%;
|
||||
padding: 5px 22px 5px 8px;
|
||||
background: #0f3460;
|
||||
border: 1px solid #1a1a5e;
|
||||
color: #e0e0e0;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-box input:focus {
|
||||
border-color: #e94560;
|
||||
}
|
||||
|
||||
.search-box input::placeholder {
|
||||
color: #556;
|
||||
}
|
||||
|
||||
.clear-search {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #667;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.clear-search:hover {
|
||||
color: #e94560;
|
||||
}
|
||||
|
||||
.dock-empty {
|
||||
font-size: 11px;
|
||||
color: #556;
|
||||
@ -286,4 +456,43 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* IDs tab */
|
||||
.ids-hint {
|
||||
font-size: 9px;
|
||||
color: #556;
|
||||
padding: 0 6px 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.id-drag-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 4px 8px;
|
||||
margin-bottom: 1px;
|
||||
background: #0f3460;
|
||||
border: 1px solid #1a1a5e;
|
||||
border-radius: 3px;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
transition: all 0.15s ease;
|
||||
color: #e0e0e0;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.id-drag-item:hover {
|
||||
background: #1a1a5e;
|
||||
border-color: #e94560;
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
.id-drag-item:active {
|
||||
cursor: grabbing;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,15 +4,19 @@ import { isResizable, isCurvedType, isSpurType, isEpcType, isInductionType, EPC_
|
||||
import { THEME } from './render-theme.js';
|
||||
import type { PlacedSymbol } from '../types.js';
|
||||
|
||||
/** Transform a point into a symbol's unrotated local space */
|
||||
/** Transform a point into a symbol's unrotated, unmirrored local space */
|
||||
export function toSymbolLocal(px: number, py: number, sym: PlacedSymbol): { x: number; y: number } {
|
||||
if (!sym.rotation) return { x: px, y: py };
|
||||
if (!sym.rotation && !sym.mirrored) return { x: px, y: py };
|
||||
const scx = sym.x + sym.w / 2;
|
||||
const scy = sym.y + sym.h / 2;
|
||||
const rad = (-sym.rotation * Math.PI) / 180;
|
||||
const rad = (-(sym.rotation || 0) * Math.PI) / 180;
|
||||
const cos = Math.cos(rad), sin = Math.sin(rad);
|
||||
const dx = px - scx, dy = py - scy;
|
||||
return { x: dx * cos - dy * sin + scx, y: dx * sin + dy * cos + scy };
|
||||
// Inverse of render transform: un-rotate then un-mirror
|
||||
let rx = dx * cos - dy * sin;
|
||||
const ry = dx * sin + dy * cos;
|
||||
if (sym.mirrored) rx = -rx;
|
||||
return { x: rx + scx, y: ry + scy };
|
||||
}
|
||||
|
||||
export function pointInRect(px: number, py: number, rx: number, ry: number, rw: number, rh: number): boolean {
|
||||
@ -56,11 +60,37 @@ export function hitEpcSegmentMidpoint(cx: number, cy: number, sym: PlacedSymbol)
|
||||
return -1;
|
||||
}
|
||||
|
||||
/** Find nearest EPC segment to a point. Returns insert index or -1.
|
||||
* Used for right-click add-waypoint — matches any point near a segment, not just midpoints. */
|
||||
export function hitEpcSegmentNearest(cx: number, cy: number, sym: PlacedSymbol): number {
|
||||
if (!isEpcType(sym.symbolId)) return -1;
|
||||
const waypoints = sym.epcWaypoints || EPC_CONFIG.defaultWaypoints;
|
||||
const { x: lx, y: ly } = toSymbolLocal(cx, cy, sym);
|
||||
const maxDist = 12;
|
||||
let bestIdx = -1;
|
||||
let bestDist = maxDist;
|
||||
for (let i = 0; i < waypoints.length - 1; i++) {
|
||||
const ax = sym.x + waypoints[i].x, ay = sym.y + waypoints[i].y;
|
||||
const bx = sym.x + waypoints[i + 1].x, by = sym.y + waypoints[i + 1].y;
|
||||
const dx = bx - ax, dy = by - ay;
|
||||
const len2 = dx * dx + dy * dy;
|
||||
if (len2 === 0) continue;
|
||||
const t = Math.max(0, Math.min(1, ((lx - ax) * dx + (ly - ay) * dy) / len2));
|
||||
const nx = ax + t * dx, ny = ay + t * dy;
|
||||
const dist = Math.sqrt((lx - nx) ** 2 + (ly - ny) ** 2);
|
||||
if (dist < bestDist) {
|
||||
bestDist = dist;
|
||||
bestIdx = i + 1;
|
||||
}
|
||||
}
|
||||
return bestIdx;
|
||||
}
|
||||
|
||||
/** Hit test resize handles. Caller must verify single-selection. */
|
||||
export function hitResizeHandle(cx: number, cy: number, sym: PlacedSymbol): 'left' | 'right' | 'spur-top' | 'spur-bottom' | null {
|
||||
if (!isResizable(sym.symbolId)) return null;
|
||||
|
||||
const hs = THEME.resizeHandle.size;
|
||||
const hs = THEME.resizeHandle.hitSize;
|
||||
const { x: lx, y: ly } = toSymbolLocal(cx, cy, sym);
|
||||
|
||||
if (isCurvedType(sym.symbolId)) {
|
||||
|
||||
@ -3,7 +3,7 @@ import { isCurvedType, isEpcType, SYMBOLS, EPC_CONFIG } from '../symbols.js';
|
||||
import type { EpcWaypoint } from '../types.js';
|
||||
import { getAABB, snapToGrid, clamp, findValidPosition } from './collision.js';
|
||||
import { orientedBoxCorners, pastDragThreshold } from './geometry.js';
|
||||
import { toSymbolLocal, pointInRect, pointInTrapezoid, hitEpcWaypoint, hitEpcSegmentMidpoint, hitResizeHandle, hitTestSymbols } from './hit-testing.js';
|
||||
import { toSymbolLocal, pointInRect, pointInTrapezoid, hitEpcWaypoint, hitEpcSegmentMidpoint, hitEpcSegmentNearest, hitResizeHandle, hitTestSymbols } from './hit-testing.js';
|
||||
|
||||
/** Ensure an EPC symbol has its waypoints array initialized */
|
||||
function ensureEpcWaypoints(sym: { epcWaypoints?: import('../types.js').EpcWaypoint[] }) {
|
||||
@ -22,7 +22,7 @@ const CONVEYOR_MIN_W = 40;
|
||||
const DRAG_THRESHOLD = 4; // pixels before drag actually starts
|
||||
|
||||
interface DragState {
|
||||
type: 'palette' | 'move' | 'multi-move' | 'resize-left' | 'resize-right' | 'resize-spur-top' | 'resize-spur-bottom' | 'epc-waypoint' | 'pdf';
|
||||
type: 'palette' | 'move' | 'multi-move' | 'resize-left' | 'resize-right' | 'resize-spur-top' | 'resize-spur-bottom' | 'epc-waypoint' | 'pdf' | 'assign-label';
|
||||
placedId?: number;
|
||||
offsetX?: number;
|
||||
offsetY?: number;
|
||||
@ -254,6 +254,31 @@ function onCanvasMousedown(e: MouseEvent) {
|
||||
function onContextMenu(e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
const pos = screenToCanvas(e.clientX, e.clientY);
|
||||
|
||||
// Right-click on selected EPC: add waypoint at nearest segment
|
||||
if (layout.selectedIds.size === 1) {
|
||||
const selId = [...layout.selectedIds][0];
|
||||
const sel = layout.symbols.find(s => s.id === selId);
|
||||
if (sel && isEpcType(sel.symbolId)) {
|
||||
const insertIdx = hitEpcSegmentNearest(pos.x, pos.y, sel);
|
||||
if (insertIdx >= 0) {
|
||||
layout.pushUndo();
|
||||
ensureEpcWaypoints(sel);
|
||||
const prev = sel.epcWaypoints![insertIdx - 1];
|
||||
const next = sel.epcWaypoints![insertIdx];
|
||||
const local = toSymbolLocal(pos.x, pos.y, sel);
|
||||
sel.epcWaypoints!.splice(insertIdx, 0, {
|
||||
x: local.x - sel.x,
|
||||
y: local.y - sel.y,
|
||||
});
|
||||
recalcEpcBounds(sel);
|
||||
layout.markDirty();
|
||||
layout.saveMcmState();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const hitId = hitTest(pos.x, pos.y);
|
||||
if (hitId !== null && contextMenuCallback) {
|
||||
contextMenuCallback(e.clientX, e.clientY, hitId);
|
||||
@ -419,38 +444,14 @@ function onMousemove(e: MouseEvent) {
|
||||
let localX = local.x - sym.x;
|
||||
let localY = local.y - sym.y;
|
||||
|
||||
// Snap to grid (in local coords, grid aligns with symbol origin in world)
|
||||
// Snap to grid
|
||||
if (layout.snapEnabled && !e.ctrlKey) {
|
||||
// Snap the world position, then convert back to local
|
||||
const worldSnappedX = Math.round((sym.x + localX) / layout.gridSize) * layout.gridSize;
|
||||
const worldSnappedY = Math.round((sym.y + localY) / layout.gridSize) * layout.gridSize;
|
||||
localX = worldSnappedX - sym.x;
|
||||
localY = worldSnappedY - sym.y;
|
||||
}
|
||||
|
||||
// Constrain to 0/45/90 degree angles relative to adjacent waypoint
|
||||
const anchor = wpIdx > 0 ? wps[wpIdx - 1] : (wpIdx < wps.length - 1 ? wps[wpIdx + 1] : null);
|
||||
if (anchor) {
|
||||
const dx = localX - anchor.x;
|
||||
const dy = localY - anchor.y;
|
||||
const dist = Math.sqrt(dx * dx + dy * dy);
|
||||
if (dist > 0.1) {
|
||||
// Snap angle to nearest 15-degree increment
|
||||
const rawAngle = Math.atan2(dy, dx);
|
||||
const snappedAngle = Math.round(rawAngle / (Math.PI / 12)) * (Math.PI / 12);
|
||||
localX = anchor.x + dist * Math.cos(snappedAngle);
|
||||
localY = anchor.y + dist * Math.sin(snappedAngle);
|
||||
|
||||
// Re-snap to grid after angle constraint
|
||||
if (layout.snapEnabled && !e.ctrlKey) {
|
||||
const worldSnappedX = Math.round((sym.x + localX) / layout.gridSize) * layout.gridSize;
|
||||
const worldSnappedY = Math.round((sym.y + localY) / layout.gridSize) * layout.gridSize;
|
||||
localX = worldSnappedX - sym.x;
|
||||
localY = worldSnappedY - sym.y;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
wps[wpIdx] = { x: localX, y: localY };
|
||||
// Recalculate bounding box
|
||||
recalcEpcBounds(sym);
|
||||
@ -463,6 +464,17 @@ function onMousemove(e: MouseEvent) {
|
||||
dragState.ghost.style.top = (e.clientY - sym.h / 2) + 'px';
|
||||
}
|
||||
|
||||
if (dragState.type === 'assign-label' && dragState.ghost) {
|
||||
dragState.ghost.style.left = (e.clientX + 8) + 'px';
|
||||
dragState.ghost.style.top = (e.clientY - 10) + 'px';
|
||||
const pos = screenToCanvas(e.clientX, e.clientY);
|
||||
const hoverId = hitTest(pos.x, pos.y);
|
||||
if (layout.labelDropTarget !== hoverId) {
|
||||
layout.labelDropTarget = hoverId;
|
||||
layout.markDirty();
|
||||
}
|
||||
}
|
||||
|
||||
if (dragState.type === 'move' && dragState.placedId != null) {
|
||||
const pos = screenToCanvas(e.clientX, e.clientY);
|
||||
if (!dragState.dragActivated) {
|
||||
@ -544,6 +556,24 @@ function onMouseup(e: MouseEvent) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (dragState.type === 'assign-label' && dragState.ghost && dragState.deviceLabel) {
|
||||
dragState.ghost.remove();
|
||||
layout.labelDropTarget = null;
|
||||
const pos = screenToCanvas(e.clientX, e.clientY);
|
||||
const hitId = hitTest(pos.x, pos.y);
|
||||
if (hitId !== null) {
|
||||
const sym = layout.symbols.find(s => s.id === hitId);
|
||||
if (sym) {
|
||||
layout.pushUndo();
|
||||
sym.label = dragState.deviceLabel;
|
||||
layout.markDirty();
|
||||
layout.saveMcmState();
|
||||
}
|
||||
}
|
||||
dragState = null;
|
||||
return;
|
||||
}
|
||||
|
||||
if (dragState.type === 'palette' && dragState.ghost && dragState.symbolDef) {
|
||||
dragState.ghost.remove();
|
||||
const sym = dragState.symbolDef;
|
||||
@ -679,3 +709,27 @@ export function startPaletteDrag(e: MouseEvent, symbolDef: (typeof SYMBOLS)[numb
|
||||
|
||||
dragState = { type: 'palette', symbolDef, ghost, deviceLabel };
|
||||
}
|
||||
|
||||
// Called from DeviceDock IDs tab to drag a label onto a placed symbol
|
||||
export function startLabelDrag(e: MouseEvent, label: string) {
|
||||
const ghost = document.createElement('div');
|
||||
ghost.style.cssText = `
|
||||
position: fixed;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
background: #e94560;
|
||||
color: #fff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
opacity: 0.85;
|
||||
`;
|
||||
ghost.textContent = label;
|
||||
ghost.style.left = (e.clientX + 8) + 'px';
|
||||
ghost.style.top = (e.clientY - 10) + 'px';
|
||||
document.body.appendChild(ghost);
|
||||
|
||||
dragState = { type: 'assign-label', ghost, deviceLabel: label };
|
||||
}
|
||||
|
||||
@ -7,19 +7,29 @@ export const THEME = {
|
||||
},
|
||||
selection: {
|
||||
strokeColor: '#00ff88',
|
||||
lineWidth: 2,
|
||||
shadowColor: 'rgba(0, 255, 136, 0.4)',
|
||||
shadowBlur: 6,
|
||||
lineWidth: 0.5,
|
||||
pad: 1,
|
||||
shadowColor: 'rgba(0, 255, 136, 0.3)',
|
||||
shadowBlur: 2,
|
||||
},
|
||||
collision: {
|
||||
strokeColor: '#ff0000',
|
||||
lineWidth: 2,
|
||||
shadowColor: 'rgba(255, 0, 0, 0.6)',
|
||||
shadowBlur: 8,
|
||||
lineWidth: 0.5,
|
||||
pad: 1,
|
||||
shadowColor: 'rgba(255, 0, 0, 0.4)',
|
||||
shadowBlur: 3,
|
||||
},
|
||||
hover: {
|
||||
strokeColor: 'rgba(233, 69, 96, 0.3)',
|
||||
lineWidth: 1,
|
||||
strokeColor: 'rgba(233, 69, 96, 0.2)',
|
||||
lineWidth: 0.5,
|
||||
},
|
||||
dropTarget: {
|
||||
strokeColor: '#00ccff',
|
||||
lineWidth: 1.5,
|
||||
pad: 3,
|
||||
shadowColor: 'rgba(0, 204, 255, 0.5)',
|
||||
shadowBlur: 6,
|
||||
fillColor: 'rgba(0, 204, 255, 0.08)',
|
||||
},
|
||||
label: {
|
||||
color: '#e94560',
|
||||
@ -27,10 +37,11 @@ export const THEME = {
|
||||
offsetY: -3,
|
||||
},
|
||||
resizeHandle: {
|
||||
size: 10,
|
||||
size: 6,
|
||||
hitSize: 14,
|
||||
fillColor: '#00ff88',
|
||||
strokeColor: '#009955',
|
||||
lineWidth: 1,
|
||||
lineWidth: 0.5,
|
||||
},
|
||||
epcWaypoint: {
|
||||
size: 6,
|
||||
|
||||
@ -407,6 +407,20 @@ function drawSymbolBody(ctx: CanvasRenderingContext2D, sym: PlacedSymbol): boole
|
||||
drawInductionSymbol(ctx, sym);
|
||||
} else if (isCurvedType(sym.symbolId)) {
|
||||
drawCurvedSymbol(ctx, sym);
|
||||
} else if (isSpurType(sym.symbolId)) {
|
||||
// Draw trapezoid programmatically so w and w2 are respected during resize
|
||||
const w2 = sym.w2 ?? sym.w;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(sym.x, sym.y);
|
||||
ctx.lineTo(sym.x + w2, sym.y);
|
||||
ctx.lineTo(sym.x + sym.w, sym.y + sym.h);
|
||||
ctx.lineTo(sym.x, sym.y + sym.h);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = '#000000';
|
||||
ctx.strokeStyle = '#000000';
|
||||
ctx.lineWidth = 0.5;
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
} else {
|
||||
const img = getSymbolImage(sym.file);
|
||||
if (!img) return false;
|
||||
@ -429,7 +443,7 @@ function drawSymbolOverlays(ctx: CanvasRenderingContext2D, sym: PlacedSymbol) {
|
||||
ctx.lineWidth = THEME.selection.lineWidth;
|
||||
ctx.shadowColor = THEME.selection.shadowColor;
|
||||
ctx.shadowBlur = THEME.selection.shadowBlur;
|
||||
strokeOutline(ctx, sym, 2);
|
||||
strokeOutline(ctx, sym, THEME.selection.pad);
|
||||
ctx.shadowBlur = 0;
|
||||
if (layout.selectedIds.size === 1) {
|
||||
if (isEpcType(sym.symbolId)) {
|
||||
@ -446,12 +460,28 @@ function drawSymbolOverlays(ctx: CanvasRenderingContext2D, sym: PlacedSymbol) {
|
||||
ctx.lineWidth = THEME.collision.lineWidth;
|
||||
ctx.shadowColor = THEME.collision.shadowColor;
|
||||
ctx.shadowBlur = THEME.collision.shadowBlur;
|
||||
strokeOutline(ctx, sym, 2);
|
||||
strokeOutline(ctx, sym, THEME.collision.pad);
|
||||
ctx.shadowBlur = 0;
|
||||
}
|
||||
|
||||
// Label drop-target highlight
|
||||
if (layout.labelDropTarget === sym.id) {
|
||||
ctx.fillStyle = THEME.dropTarget.fillColor;
|
||||
ctx.strokeStyle = THEME.dropTarget.strokeColor;
|
||||
ctx.lineWidth = THEME.dropTarget.lineWidth;
|
||||
ctx.shadowColor = THEME.dropTarget.shadowColor;
|
||||
ctx.shadowBlur = THEME.dropTarget.shadowBlur;
|
||||
// Fill + stroke the outline
|
||||
ctx.beginPath();
|
||||
ctx.rect(sym.x - THEME.dropTarget.pad, sym.y - THEME.dropTarget.pad,
|
||||
sym.w + THEME.dropTarget.pad * 2, sym.h + THEME.dropTarget.pad * 2);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.shadowBlur = 0;
|
||||
}
|
||||
|
||||
// Hover border (non-selected)
|
||||
if (!isSelected) {
|
||||
if (!isSelected && layout.labelDropTarget !== sym.id) {
|
||||
ctx.strokeStyle = THEME.hover.strokeColor;
|
||||
ctx.lineWidth = THEME.hover.lineWidth;
|
||||
strokeOutline(ctx, sym, 0);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { layout } from './stores/layout.svelte.js';
|
||||
import { isEpcType, isInductionType, EPC_CONFIG, INDUCTION_CONFIG } from './symbols.js';
|
||||
import { isEpcType, isInductionType, isSpurType, isCurvedType, EPC_CONFIG, INDUCTION_CONFIG, getCurveGeometry } from './symbols.js';
|
||||
import { deserializeSymbol } from './serialization.js';
|
||||
import type { PlacedSymbol } from './types.js';
|
||||
|
||||
@ -112,6 +112,32 @@ export async function exportSVG() {
|
||||
lines.push(` <g${idAttr}>`);
|
||||
lines.push(` <path d="${d}" fill="#000000"${rotAttr} />`);
|
||||
lines.push(' </g>');
|
||||
} else if (isCurvedType(sym.symbolId)) {
|
||||
const angle = sym.curveAngle || 90;
|
||||
const { arcCx, arcCy, outerR, innerR } = getCurveGeometry(sym.symbolId, sym.x, sym.y, sym.w, sym.h);
|
||||
const sweepRad = (angle * Math.PI) / 180;
|
||||
// Outer arc: from angle=0 to angle=-sweep (CCW in SVG = large-arc with sweep-flag 0)
|
||||
const outerEndX = arcCx + outerR * Math.cos(sweepRad);
|
||||
const outerEndY = arcCy - outerR * Math.sin(sweepRad);
|
||||
const innerEndX = arcCx + innerR * Math.cos(sweepRad);
|
||||
const innerEndY = arcCy - innerR * Math.sin(sweepRad);
|
||||
const largeArc = angle > 180 ? 1 : 0;
|
||||
const d = [
|
||||
`M ${arcCx + outerR},${arcCy}`,
|
||||
`A ${outerR},${outerR} 0 ${largeArc},0 ${outerEndX},${outerEndY}`,
|
||||
`L ${innerEndX},${innerEndY}`,
|
||||
`A ${innerR},${innerR} 0 ${largeArc},1 ${arcCx + innerR},${arcCy}`,
|
||||
'Z',
|
||||
].join(' ');
|
||||
lines.push(` <g${idAttr}${rotAttr}>`);
|
||||
lines.push(` <path d="${d}" fill="#000000" stroke="#000000" stroke-width="0.5" />`);
|
||||
lines.push(' </g>');
|
||||
} else if (isSpurType(sym.symbolId)) {
|
||||
const w2 = sym.w2 ?? sym.w;
|
||||
const points = `${sym.x},${sym.y} ${sym.x + w2},${sym.y} ${sym.x + sym.w},${sym.y + sym.h} ${sym.x},${sym.y + sym.h}`;
|
||||
lines.push(` <g${idAttr}${rotAttr}>`);
|
||||
lines.push(` <polygon points="${points}" fill="#000000" stroke="#000000" stroke-width="0.5" />`);
|
||||
lines.push(' </g>');
|
||||
} else {
|
||||
try {
|
||||
const svgText = await (await fetch(sym.file)).text();
|
||||
|
||||
@ -32,6 +32,9 @@ class LayoutStore {
|
||||
pdfLoaded = $state(false);
|
||||
editingBackground = $state(false);
|
||||
|
||||
// Label-drag drop target highlight (symbol id or null)
|
||||
labelDropTarget = $state<number | null>(null);
|
||||
|
||||
// Dirty flag for canvas re-render
|
||||
dirty = $state(0);
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user