refactor: unwrap goView components + improve context menu closing
This commit is contained in:
parent
4cee6bc6f5
commit
6f5e587064
@ -182,14 +182,26 @@ export function Canvas(props: CanvasProps) {
|
|||||||
if (e.key === 'Escape') setCtx(null);
|
if (e.key === 'Escape') setCtx(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onAnyPointerDown = () => setCtx(null);
|
const close = () => setCtx(null);
|
||||||
|
|
||||||
|
// Close on any outside interaction to keep UI parity with common editors.
|
||||||
|
const onAnyPointerDown = () => close();
|
||||||
|
const onAnyWheel = () => close();
|
||||||
|
const onScroll = () => close();
|
||||||
|
const onBlur = () => close();
|
||||||
|
|
||||||
window.addEventListener('keydown', onKeyDown);
|
window.addEventListener('keydown', onKeyDown);
|
||||||
window.addEventListener('pointerdown', onAnyPointerDown);
|
window.addEventListener('pointerdown', onAnyPointerDown);
|
||||||
|
window.addEventListener('wheel', onAnyWheel, { passive: true });
|
||||||
|
window.addEventListener('scroll', onScroll, true);
|
||||||
|
window.addEventListener('blur', onBlur);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
window.removeEventListener('keydown', onKeyDown);
|
window.removeEventListener('keydown', onKeyDown);
|
||||||
window.removeEventListener('pointerdown', onAnyPointerDown);
|
window.removeEventListener('pointerdown', onAnyPointerDown);
|
||||||
|
window.removeEventListener('wheel', onAnyWheel);
|
||||||
|
window.removeEventListener('scroll', onScroll, true);
|
||||||
|
window.removeEventListener('blur', onBlur);
|
||||||
};
|
};
|
||||||
}, [ctx]);
|
}, [ctx]);
|
||||||
|
|
||||||
|
|||||||
@ -63,17 +63,26 @@ export interface GoViewProjectLike {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function unwrapComponent(c: GoViewComponentLike): GoViewComponentLike {
|
function unwrapComponent(c: GoViewComponentLike): GoViewComponentLike {
|
||||||
// Prefer the nested component shape but keep outer fields as fallback.
|
// Prefer nested component shapes but keep outer fields as fallback.
|
||||||
// This handles exports like: { id, attr, component: { chartConfig, option } }
|
// Some exports wrap components multiple times like:
|
||||||
const inner = c.component;
|
// { id, attr, component: { component: { chartConfig, option } } }
|
||||||
if (!inner) return c;
|
// We unwrap iteratively to avoid recursion pitfalls.
|
||||||
return {
|
let out: GoViewComponentLike = c;
|
||||||
|
let depth = 0;
|
||||||
|
|
||||||
|
while (out.component && depth < 6) {
|
||||||
|
const inner = out.component;
|
||||||
|
out = {
|
||||||
// Prefer outer for geometry/id, but prefer inner for identity/option when present.
|
// Prefer outer for geometry/id, but prefer inner for identity/option when present.
|
||||||
...c,
|
...out,
|
||||||
...inner,
|
...inner,
|
||||||
// ensure the nested component doesn't get lost
|
// keep unwrapping if there are more layers
|
||||||
component: inner.component,
|
component: inner.component,
|
||||||
};
|
};
|
||||||
|
depth++;
|
||||||
|
}
|
||||||
|
|
||||||
|
return out;
|
||||||
}
|
}
|
||||||
|
|
||||||
function keyOf(cIn: GoViewComponentLike): string {
|
function keyOf(cIn: GoViewComponentLike): string {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user