feat: refactor CircuitPreview component and implement ShareModal using createPortal; mark subproject commits as dirty
This commit is contained in:
parent
4d6dc25ec7
commit
5202bdae7f
|
|
@ -207,10 +207,6 @@ export const CircuitPreview: React.FC<CircuitPreviewProps> = ({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Wire endpoints also need to resolve by componentId
|
|
||||||
// Build a fast id→id map for wire routing (componentId → item.id)
|
|
||||||
const idSet = new Set(items.map(i => i.id));
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={className}
|
className={className}
|
||||||
|
|
@ -250,31 +246,6 @@ export const CircuitPreview: React.FC<CircuitPreviewProps> = ({
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|
||||||
{/* ── Wire overlay ─────────────────────────────────────────────────── */}
|
|
||||||
<svg
|
|
||||||
style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}
|
|
||||||
width={width}
|
|
||||||
height={height}
|
|
||||||
>
|
|
||||||
{example.wires?.map((wire, i) => {
|
|
||||||
const from = centreMap[wire.start.componentId] ?? (idSet.has(wire.start.componentId) ? undefined : null);
|
|
||||||
const to = centreMap[wire.end.componentId] ?? (idSet.has(wire.end.componentId) ? undefined : null);
|
|
||||||
if (!from || !to) return null;
|
|
||||||
const ddx = to[0] - from[0], ddy = to[1] - from[1];
|
|
||||||
if (ddx * ddx + ddy * ddy < 9) return null;
|
|
||||||
return (
|
|
||||||
<line
|
|
||||||
key={i}
|
|
||||||
x1={from[0]} y1={from[1]}
|
|
||||||
x2={to[0]} y2={to[1]}
|
|
||||||
stroke={wire.color || '#888'}
|
|
||||||
strokeWidth={Math.max(1, 1.5 * scale)}
|
|
||||||
strokeOpacity={0.75}
|
|
||||||
strokeLinecap="round"
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
import { createPortal } from 'react-dom';
|
||||||
import { useProjectStore } from '../../store/useProjectStore';
|
import { useProjectStore } from '../../store/useProjectStore';
|
||||||
import { updateProject } from '../../services/projectService';
|
import { updateProject } from '../../services/projectService';
|
||||||
|
|
||||||
|
|
@ -40,7 +41,7 @@ export const ShareModal: React.FC<ShareModalProps> = ({ onClose }) => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return createPortal(
|
||||||
<div style={styles.overlay} onClick={onClose}>
|
<div style={styles.overlay} onClick={onClose}>
|
||||||
<div style={styles.modal} onClick={(e) => e.stopPropagation()}>
|
<div style={styles.modal} onClick={(e) => e.stopPropagation()}>
|
||||||
<h2 style={styles.title}>Share project</h2>
|
<h2 style={styles.title}>Share project</h2>
|
||||||
|
|
@ -111,7 +112,8 @@ export const ShareModal: React.FC<ShareModalProps> = ({ onClose }) => {
|
||||||
<button onClick={onClose} style={styles.closeBtn}>Close</button>
|
<button onClick={onClose} style={styles.closeBtn}>Close</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>,
|
||||||
|
document.body
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue