diff --git a/src/uix/soma/components/context-menu/context-menu-provider.svelte.ts b/src/uix/soma/components/context-menu/context-menu-provider.svelte.ts index 63b7d5ef0..bdf0e3112 100644 --- a/src/uix/soma/components/context-menu/context-menu-provider.svelte.ts +++ b/src/uix/soma/components/context-menu/context-menu-provider.svelte.ts @@ -31,7 +31,7 @@ import { import { SafePolygon } from '../../layers/floating/safe-polygon'; import { contextMenuMorfo } from '../../../morfo/components/context-menu'; -import type { SomaRuntimePart } from '../../runtime.svelte'; +import type { SomaRuntime, SomaRuntimePart } from '../../runtime.svelte'; const attrs = createAttrs(contextMenuMorfo); @@ -86,6 +86,8 @@ interface ContextMenuOpts export class ContextMenuProvider { readonly opts: ContextMenuOpts; readonly runtimePart: SomaRuntimePart; + readonly soma: Soma; + readonly runtime: SomaRuntime; static readonly ctx = context('ContextMenu'); static get(): ContextMenuProvider | undefined { return this.ctx.getOr(undefined) as ContextMenuProvider | undefined; @@ -98,7 +100,6 @@ export class ContextMenuProvider { return new ContextMenuProvider(opts); } - readonly config = Soma.get(); readonly floatingProvider: FloatingProvider; readonly contentPresence: Presence; readonly typeahead = new Typeahead(); @@ -118,7 +119,9 @@ export class ContextMenuProvider { private constructor(opts: ContextMenuOpts) { this.opts = opts; - this.runtimePart = Soma.require().runtime(contextMenuMorfo, {}).part('provider', { + this.soma = Soma.require(); + this.runtime = this.soma.runtime(contextMenuMorfo, {}); + this.runtimePart = this.runtime.part('provider', { id: opts.id, ref: opts.ref, owner: this, @@ -177,10 +180,12 @@ export class ContextMenuTriggerProvider { private constructor(opts: ContextMenuTriggerOpts) { this.opts = opts; - this.runtimePart = Soma.require() - .runtime(contextMenuMorfo, {}) - .part('trigger', { id: opts.id, ref: opts.ref, owner: this }); this.provider = ContextMenuProvider.require(); + this.runtimePart = this.provider.runtime.part('trigger', { + id: opts.id, + ref: opts.ref, + owner: this + }); this.provider.triggerId.current = opts.id.current; } @@ -253,17 +258,15 @@ export class ContextMenuContentProvider { private constructor(opts: ContextMenuContentOpts) { this.opts = opts; - this.runtimePart = Soma.require() - .runtime(contextMenuMorfo, {}) - .part('content', { - id: opts.id, - ref: opts.ref, - owner: this, - onRefChange: (el) => { - this.provider.setContentRef(el); - } - }); this.provider = ContextMenuProvider.require(); + this.runtimePart = this.provider.runtime.part('content', { + id: opts.id, + ref: opts.ref, + owner: this, + onRefChange: (el) => { + this.provider.setContentRef(el); + } + }); this.provider.contentId.current = opts.id.current; this.floating = FloatingContent.create({ @@ -322,7 +325,7 @@ export class ContextMenuContentProvider { this.textSelection = TextSelection.use({ ref: readableActive(() => opts.ref.current), - dom: Soma.require().dom, + dom: this.provider.soma.dom, enabled: readableActive(() => this.provider.opts.open.current), onPointerDown: readableActive(() => () => {}), onPointerUp: readableActive(() => () => {}) @@ -411,9 +414,12 @@ export class ContextMenuArrowProvider { private constructor(opts: ContextMenuArrowOpts) { this.opts = opts; - this.runtimePart = Soma.require() - .runtime(contextMenuMorfo, {}) - .part('arrow', { id: opts.id, ref: opts.ref, owner: this }); + const provider = ContextMenuProvider.require(); + this.runtimePart = provider.runtime.part('arrow', { + id: opts.id, + ref: opts.ref, + owner: this + }); this.floatingArrow = FloatingArrow.create(opts); } @@ -445,10 +451,12 @@ export class ContextMenuItemProvider { private constructor(opts: ContextMenuItemOpts) { this.opts = opts; - this.runtimePart = Soma.require() - .runtime(contextMenuMorfo, {}) - .part('item', { id: opts.id, ref: opts.ref, owner: this }); this.provider = ContextMenuProvider.require(); + this.runtimePart = this.provider.runtime.part('item', { + id: opts.id, + ref: opts.ref, + owner: this + }); } readonly onclick = (_e: SomaMouseEvent) => { @@ -503,7 +511,8 @@ export class ContextMenuGroupProvider { private constructor(opts: ContextMenuGroupOpts) { this.opts = opts; - this.runtimePart = Soma.require().runtime(contextMenuMorfo, {}).part('group', { + const provider = ContextMenuProvider.require(); + this.runtimePart = provider.runtime.part('group', { id: opts.id, ref: opts.ref, owner: this, @@ -533,9 +542,12 @@ export class ContextMenuGroupHeadingProvider { private constructor(opts: ContextMenuGroupHeadingOpts) { this.opts = opts; - this.runtimePart = Soma.require() - .runtime(contextMenuMorfo, {}) - .part('group-heading', { id: opts.id, ref: opts.ref, owner: this }); + const provider = ContextMenuProvider.require(); + this.runtimePart = provider.runtime.part('group-heading', { + id: opts.id, + ref: opts.ref, + owner: this + }); const group = ContextMenuGroupProvider.get(); if (group) { group.headingId.current = opts.id.current; @@ -560,9 +572,12 @@ export class ContextMenuSeparatorProvider { private constructor(opts: ContextMenuSeparatorOpts) { this.opts = opts; - this.runtimePart = Soma.require() - .runtime(contextMenuMorfo, {}) - .part('separator', { id: opts.id, ref: opts.ref, owner: this }); + const provider = ContextMenuProvider.require(); + this.runtimePart = provider.runtime.part('separator', { + id: opts.id, + ref: opts.ref, + owner: this + }); } readonly props = $derived.by(() => @@ -598,10 +613,12 @@ export class ContextMenuCheckboxItemProvider { private constructor(opts: ContextMenuCheckboxItemOpts) { this.opts = opts; - this.runtimePart = Soma.require() - .runtime(contextMenuMorfo, {}) - .part('checkbox-item', { id: opts.id, ref: opts.ref, owner: this }); this.provider = ContextMenuProvider.require(); + this.runtimePart = this.provider.runtime.part('checkbox-item', { + id: opts.id, + ref: opts.ref, + owner: this + }); } private activate() { @@ -660,7 +677,8 @@ export class ContextMenuRadioGroupProvider { private constructor(opts: ContextMenuRadioGroupOpts) { this.opts = opts; - this.runtimePart = Soma.require().runtime(contextMenuMorfo, {}).part('radio-group', { + const provider = ContextMenuProvider.require(); + this.runtimePart = provider.runtime.part('radio-group', { id: opts.id, ref: opts.ref, owner: this, @@ -701,10 +719,12 @@ export class ContextMenuRadioItemProvider { private constructor(opts: ContextMenuRadioItemOpts) { this.opts = opts; - this.runtimePart = Soma.require() - .runtime(contextMenuMorfo, {}) - .part('radio-item', { id: opts.id, ref: opts.ref, owner: this }); this.provider = ContextMenuProvider.require(); + this.runtimePart = this.provider.runtime.part('radio-item', { + id: opts.id, + ref: opts.ref, + owner: this + }); this.radioGroup = ContextMenuRadioGroupProvider.require(); } @@ -831,17 +851,15 @@ export class ContextMenuSubTriggerProvider { // A30: register subTriggerRef via `onRefChange` (attachRef fires at // mount/unmount inside `untrack`), avoiding the `$effect` feedback. this.opts = opts; - this.runtimePart = Soma.require() - .runtime(contextMenuMorfo, {}) - .part('sub-trigger', { - id: opts.id, - ref: opts.ref, - owner: this, - onRefChange: (el) => { - this.sub.subTriggerRef.current = el; - } - }); this.sub = ContextMenuSubProvider.require(); + this.runtimePart = this.sub.provider.runtime.part('sub-trigger', { + id: opts.id, + ref: opts.ref, + owner: this, + onRefChange: (el) => { + this.sub.subTriggerRef.current = el; + } + }); this.sub.subTriggerId.current = opts.id.current; FloatingAnchor.create({ @@ -943,17 +961,15 @@ export class ContextMenuSubContentProvider { private constructor(opts: ContextMenuSubContentOpts) { this.opts = opts; - this.runtimePart = Soma.require() - .runtime(contextMenuMorfo, {}) - .part('sub-content', { - id: opts.id, - ref: opts.ref, - owner: this, - onRefChange: (el) => { - this.sub.setContentRef(el); - } - }); this.sub = ContextMenuSubProvider.require(); + this.runtimePart = this.sub.provider.runtime.part('sub-content', { + id: opts.id, + ref: opts.ref, + owner: this, + onRefChange: (el) => { + this.sub.setContentRef(el); + } + }); this.sub.contentId.current = opts.id.current; this.floating = FloatingContent.create({