refactor(Composite): add ICompositeLayout interface & enhance children area assignment

This commit is contained in:
Samuel Andert 2023-07-25 20:33:57 +02:00
parent 75d58eafea
commit a2fe8b136b
3 changed files with 50 additions and 35 deletions

View File

@ -4,15 +4,28 @@
import services from '$lib/servicesLoader';
import { createComponentStore, getComponentStore } from '$lib/stores/componentStores.ts';
export let componentsData = {
layout: '',
children: []
interface ICompositeLayout {
areas: string;
columns?: string;
rows?: string;
gap?: string;
tailwindClasses?: string;
}
export let componentsData: {
layout: ICompositeLayout;
children: Array<any>;
};
$: layoutStyle = `
grid-template-areas: ${componentsData.layout.areas};
gap: ${componentsData.layout.gap || '0px'};
grid-template-columns: ${componentsData.layout.columns || '1fr'};
grid-template-rows: ${componentsData.layout.rows || 'auto'};
${componentsData.layout.gap ? `gap: ${componentsData.layout.gap};` : ''}
${
componentsData.layout.columns
? `grid-template-columns: ${componentsData.layout.columns};`
: ''
}
${componentsData.layout.rows ? `grid-template-rows: ${componentsData.layout.rows};` : ''}
`;
function initializeComponentState(child) {
@ -28,7 +41,7 @@
}
function mapAndSubscribe(component) {
console.log('Mapping and subscribing for:', component.id); // Debug line
console.log('Mapping and subscribing for:', component.id);
if (component.map) {
const localStore = getComponentStore(component.id);
@ -38,7 +51,7 @@
const externalStore = getComponentStore(externalID);
if (externalStore) {
externalStore.subscribe((externalState) => {
console.log('External state:', externalState); // Debug line
console.log('External state:', externalState);
if (externalState && externalKey in externalState) {
localStore.update((storeValue) => {
storeValue = storeValue || {};
@ -78,6 +91,7 @@
}
return null;
}
async function getServiceProps(component) {
const loadedServices = [];
if (component.services) {
@ -92,14 +106,11 @@
}
</script>
<div
class={`grid w-full h-full ${componentsData.layout.customTailwind || ''}`}
style="display: grid; {layoutStyle}"
>
<div class={`grid w-full h-full ${componentsData.layout.tailwindClasses}`} style={layoutStyle}>
{#each componentsData.children as component (component.id)}
{#await Promise.all( [getComponent(component.componentName), getServiceProps(component)] ) then [Component, serviceProps]}
{#if Component}
<div class="w-full h-full overflow-hidden {component.slot}">
<div class={`w-full h-full overflow-hidden`} style={`grid-area: ${component.slot}`}>
{#await Promise.all( [getComponent(component.componentName), getServiceProps(component)] ) then [Component, serviceProps]}
{#if Component}
<svelte:component
this={Component}
id={component.id}
@ -127,10 +138,10 @@
{#if component.children && component.children.length}
<Composite componentsData={component} />
{/if}
</div>
{:else}
<p>Component {component.componentName} not found.</p>
{/if}
{/await}
{:else}
<p>Component {component.componentName} not found.</p>
{/if}
{/await}
</div>
{/each}
</div>

View File

@ -14,6 +14,7 @@
});
</script>
PkpWallet
{#if pkpWallet}
<div class="mb-4 text-lg font-medium">
PKP Wallet: <span class="text-blue-600">{pkpWallet.address}</span>

View File

@ -3,10 +3,13 @@
let componentsData = {
layout: {
areas: `"nav", "main", "footer"`,
gap: '10px',
columns: '1fr',
template: 'auto 1fr auto'
areas: `
"header header header"
"main main aside"
"footer footer footer";
`,
columns: '1fr 1fr 1fr',
rows: 'auto 1fr auto'
},
children: [
{
@ -18,18 +21,18 @@
{
id: '2',
componentName: 'Messages',
slot: 'Main'
slot: 'main'
},
{
id: '4',
componentName: 'Wallet',
slot: 'aside',
state: {
rpcURL: 'https://rpc.gnosischain.com/',
pkpPubKey:
'046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571'
}
},
// {
// id: '2',
// componentName: 'Wallet',
// slot: 'main',
// state: {
// rpcURL: 'https://rpc.gnosischain.com/',
// pkpPubKey:
// '046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571'
// }
// },
{
id: '3',
componentName: 'Terminal',