Compare commits

..

No commits in common. "a11dd87d5ad3a7239fb577dc6c2133050484c0a7" and "52321dffe839481eb849a92ec02dd3727246adef" have entirely different histories.

4 changed files with 28 additions and 91 deletions

View File

@ -230,7 +230,6 @@ export const SimulatorCanvas = () => {
const currentTouchRef = useRef({ x: 0, y: 0 }); // latest screen position for timeout callback
const [wireAiming, setWireAiming] = useState(false); // React state for rendering (crosshair visible)
const [aimPosition, setAimPosition] = useState<{ x: number; y: number } | null>(null); // world coords of crosshair
const [aimHoveredPinName, setAimHoveredPinName] = useState<string | null>(null); // Name of pin hovered by crosshair
// Convert viewport coords to world (canvas) coords
const toWorld = useCallback((screenX: number, screenY: number) => {
@ -403,9 +402,6 @@ export const SimulatorCanvas = () => {
// Any phase that uses aiming: cancel previous timer first
if (wireAimingTimerRef.current) { clearTimeout(wireAimingTimerRef.current); wireAimingTimerRef.current = null; }
// Check if touch is on a segment handle - if so, skip aiming timer (handle drag takes priority)
const isOnSegmentHandle = target?.closest('[data-segment-handle]');
const aimPhase = wireAimingPhaseRef.current;
// Already in an aiming phase (aiming_start or aiming_end) → touch updates crosshair immediately
@ -419,11 +415,7 @@ export const SimulatorCanvas = () => {
// wire_started → long press to aim for endpoint, short drag = pan
if (aimPhase === 'wire_started') {
// Only start aiming timer if NOT on a segment handle
if (!isOnSegmentHandle) {
wireAimingTimerRef.current = setTimeout(() => {
// Double-check: only activate if segment drag hasn't started
if (segmentDragRef.current) return;
wireAimingPhaseRef.current = 'aiming_end';
setWireAiming(true);
if (navigator.vibrate) navigator.vibrate(30);
@ -431,14 +423,8 @@ export const SimulatorCanvas = () => {
const aimX = world.x;
const aimY = world.y + AIMING_OFFSET_Y;
setAimPosition({ x: aimX, y: aimY });
const snapDist = AIMING_PIN_SNAP_DIST / zoomRef.current;
const nearPin = findNearestPin(aimX, aimY, snapDist);
setAimHoveredPinName(nearPin ? nearPin.pinName : null);
useSimulatorStore.getState().updateWireInProgress(aimX, aimY);
}, AIMING_LONG_PRESS_MS);
}
isPanningRef.current = true;
panStartRef.current = {
@ -493,21 +479,13 @@ export const SimulatorCanvas = () => {
}
} else {
// ── 6. Empty canvas → start pan + long press starts aiming (idle phase only) ──
if (aimPhase === 'idle' && !isOnSegmentHandle) {
if (aimPhase === 'idle') {
wireAimingTimerRef.current = setTimeout(() => {
// Double-check: only activate if segment drag hasn't started
if (segmentDragRef.current) return;
wireAimingPhaseRef.current = 'aiming_start';
setWireAiming(true);
if (navigator.vibrate) navigator.vibrate(30);
const world = toWorld(currentTouchRef.current.x, currentTouchRef.current.y);
const aimX = world.x;
const aimY = world.y + AIMING_OFFSET_Y;
setAimPosition({ x: aimX, y: aimY });
const snapDist = AIMING_PIN_SNAP_DIST / zoomRef.current;
const nearPin = findNearestPin(aimX, aimY, snapDist);
setAimHoveredPinName(nearPin ? nearPin.pinName : null);
setAimPosition({ x: world.x, y: world.y + AIMING_OFFSET_Y });
}, AIMING_LONG_PRESS_MS);
}
isPanningRef.current = true;
@ -560,11 +538,6 @@ export const SimulatorCanvas = () => {
// ── Segment drag (wire editing) via touch ──
if (segmentDragRef.current) {
// Cancel any pending aiming timer - segment drag takes priority
if (wireAimingTimerRef.current) {
clearTimeout(wireAimingTimerRef.current);
wireAimingTimerRef.current = null;
}
const world = toWorld(touch.clientX, touch.clientY);
const sd = segmentDragRef.current;
sd.isDragging = true;
@ -584,11 +557,6 @@ export const SimulatorCanvas = () => {
const aimX = world.x;
const aimY = world.y + AIMING_OFFSET_Y;
setAimPosition({ x: aimX, y: aimY });
const snapDist = AIMING_PIN_SNAP_DIST / zoomRef.current;
const nearPin = findNearestPin(aimX, aimY, snapDist);
setAimHoveredPinName(nearPin ? nearPin.pinName : null);
if (aimPhase === 'aiming_end') {
useSimulatorStore.getState().updateWireInProgress(aimX, aimY);
}
@ -704,7 +672,7 @@ export const SimulatorCanvas = () => {
const snapDist = AIMING_PIN_SNAP_DIST / zoomRef.current;
const nearPin = findNearestPin(aimX, aimY, snapDist);
setWireAiming(false); setAimPosition(null); setAimHoveredPinName(null);
setWireAiming(false); setAimPosition(null);
if (nearPin) {
// Start wire from this pin
startWireCreation(
@ -728,7 +696,7 @@ export const SimulatorCanvas = () => {
const snapDist = AIMING_PIN_SNAP_DIST / zoomRef.current;
const nearPin = findNearestPin(aimX, aimY, snapDist);
setWireAiming(false); setAimPosition(null); setAimHoveredPinName(null);
setWireAiming(false); setAimPosition(null);
if (nearPin) {
// Finish wire at this pin
finishWireCreation({ componentId: nearPin.componentId, pinName: nearPin.pinName, x: nearPin.x, y: nearPin.y });
@ -1740,27 +1708,6 @@ export const SimulatorCanvas = () => {
<circle cx={aimPosition.x} cy={aimPosition.y} r="2" fill="rgba(0, 200, 255, 0.9)" />
</svg>
)}
{/* Aim Hover Tooltip for Touch Devices */}
{wireAiming && aimPosition && aimHoveredPinName && (
<div style={{
position: 'absolute',
left: aimPosition.x + 15,
top: aimPosition.y - 20,
backgroundColor: 'rgba(0, 0, 0, 0.8)',
color: 'white',
padding: '4px 8px',
borderRadius: '4px',
fontSize: '12px',
pointerEvents: 'none',
zIndex: 45,
whiteSpace: 'nowrap',
boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
border: '1px solid rgba(255,255,255,0.1)'
}}>
{aimHoveredPinName}
</div>
)}
</div>
{/* Wire creation mode banner — visible on both desktop and mobile */}

View File

@ -55,10 +55,7 @@ export const WireLayer: React.FC<WireLayerProps> = ({
zIndex: 35,
}}
>
{wires.map((wire) => {
// Skip null/undefined wires (can happen during circuit loading)
if (!wire) return null;
return (
{wires.map((wire) => (
<WireRenderer
key={wire.id}
wire={wire}
@ -70,8 +67,7 @@ export const WireLayer: React.FC<WireLayerProps> = ({
: undefined
}
/>
);
})}
))}
{/* Segment handles for the selected wire — scaled inversely to zoom for constant screen size */}
{segmentHandles.map((handle) => {
@ -88,7 +84,6 @@ export const WireLayer: React.FC<WireLayerProps> = ({
stroke="#007acc"
strokeWidth={sw}
style={{ pointerEvents: 'all', cursor: handle.axis === 'horizontal' ? 'ns-resize' : 'ew-resize', touchAction: 'none' }}
data-segment-handle={handle.segIndex}
onMouseDown={(e) => onHandleMouseDown(e, handle.segIndex)}
onTouchStart={(e) => onHandleTouchStart?.(e, handle.segIndex)}
/>

View File

@ -24,9 +24,6 @@ export const WireRenderer: React.FC<WireRendererProps> = ({
previewWaypoints,
overridePath,
}) => {
// Guard against null/undefined wire
if (!wire || !wire.start || !wire.end) return null;
const waypoints = previewWaypoints ?? wire.waypoints;
const path = overridePath ?? generateOrthogonalPath(wire.start, waypoints, wire.end);

View File

@ -92,9 +92,7 @@ class EmbedBridge {
// Set wires if provided
if (data.wires && Array.isArray(data.wires)) {
// Filter out null/undefined wires to prevent runtime errors
const validWires = data.wires.filter((w) => w && w.start && w.end && w.id) as never[];
store.setWires(validWires);
store.setWires(data.wires as never[]);
}
break;
}