The bitsies here, inside all the computer's caretaking, being typed in.

The stuff in the middle, in the container of what matters.

How shall we scuttle them?

Like this?

I review my notes from when I built this before the summer break:

Record $C is the Record** until now
and $B is:
items
a copy of bloube/*
times
a copy of kommit/*

I make variables amongst prose explicit by prefixing with $

* could be any amount of anything

usually something

in this case a stack of time we are inside.

The kommit/ is like a table, the * inside it, or linked from it. It's a path going in.

The times/* are to be chewed on (rendered down) and copied back to kommit/*, the latter being what goes into the picture we take over time.

Some of the things in kommit/* may be very old. Imagine a beach.

Ordering the sounds...

    # a mode, complements I.Pi
    function Inspherical({Con,s}) {
        ...
        # make coming and going smooth
        Con.sc.animal = 1
    }

The insphere contains what matters, the data that gets saved|done|housed.

We add an animal quality, to transition in and out of being.

We must unpack that somewhere in the Con**

Animation

An element that uses the animate directive must be the immediate child of a keyed each block

No doing animation by wrapping things in a Moves.svelte,

No deciding to have a transition or not, eg:

    {#if C.sc.animal}
        <span transition ... >
    {:else}
        <span ... >
    {/if}

The language we write here has html and templating in one - not templating and then html!

No strange if placement, eg:

{#each o_(C) as n (n.t)}
<span {#if C.sc.animal}transition:slide={{ duration: 90, easing: quintOut }}{/if}
style="display:inline-block; vertical-align: middle; border:2px solid gainsboro; border-right:none; padding: 0 3px; margin: 0 3px; border-radius: 3px;">
<svelte:component on:reCon="{reCon}" this={pis[n.c.pi]} C={n}/>
</span>
{/each}

It's tempting to think it might know what all this is.

However, needing a keyed each block seems to indicate that Svelte avoids individuating the many (components|things within) on update.

They simply fall out of some non-formula as a complete set, not replacing their previous selves, piece-wise.

So we give it a keyed each.

n.t could (one day) instead be Cip.

Cip is Aip for space we resolve $n (see 'resolve $n').

Each Cip is owned by an individual item

as best we can resolve it (amongst its peers in the set)

across reformulations of the space (usually to adjust details periphery to this individual)

This all spurs me to ask AI how can I list the components within a component in svelte?

(then descend on the town with a violin)

to come back and read Svelte doesn't provide...

You're meant to have the component to begin with, then

Anyway, in the universal atom src/lib/pi/Con.svelte I go with:

    ...
    let duration = 0
    if (C.sc.animal) {
        duration = 90
    }
</script>
...
{#each o_(C) as n (n.t)}
    <span transition:slide={{ duration, easing: quintOut }}
        ...

This simply shortens the duration if not animal.

Which should be default?

Who knows.

It then dances with this loop in src/routes/t/TestBetimes.svelte,

    let tocken = async (spam) => {
        await tock(spam)
        if (!asapily) await new Promise(resolve => setTimeout(resolve, 72));
        await tick()
    }

More on spam later. It is liable to be maimed passing through the system. Someone may have put ads in it.

Ie it can change and you might change it.

Looks a bit bouncy. Hmm.

This reminds me of the time

I had to label some columns

When html couldn't rotate text

And then we wake up in the now

When html couldn't move well

Anyway

Without wandering back to cytoscape with screenshots of html for nodes, interactively and ongoingly...

Let's do a sort of carpentry across "the pretty blocks" making up our composition

In Con.svelte:

    afterUpdate(() => {
        ...
        let geo = wrapper.getBoundingClientRect().toJSON()
        let ge = sex({},geo,'width,height,top,left')
        ...        

You might find sex() gets nothing from geo because !geo.hasOwnProperty('width')., so says

It (a DOMRect object) wants us to call .toJSON() to get a plain hash, that then works with Y/Pic
The browser should be invisible.

Anyway, lets see what these values do:

{#if geometricating}
    <Chart {spam} /> 
{/if}

Our height (blue) increases a bit.

Our top (red) changes as we scroll.

Here are some more things from geo

It's terribly slow, these are supposed to be 11hz or so:

Reducing load, mix-blend-mode: screen;

We obviously want to join the nodes in one graph, having several distinct lines...

focus on positioning

Here's the html.

<nodule style="display: table; position: sticky;">
    <div id="spacer" style="width: 107.9px;height: 162px;"></div>
    <div id="wrapper" style="left: 1px; top: 1px; position: absolute;"> 
        ...

The left|top position: absolute is going to be from the nodule with position: sticky

If I gave nodule a top: 0px, you get an idea of what sticky is supposed to do:

It can also just be position: relative - anything but the default (initial): position: static

an element with position: absolute; will look upwards in the DOM tree until it finds an ancestor that has a position value other than the default static to determine its reference point for positioning

This #spacer is set to the size of the #wrapper,

    let animalsizing = async (uniquely,ttl,was) => {

...

        if (C.t != 'treeh 16') return

...

        was ||= ex({},sizing)
        ex(sizing,getnumbers(wrapper,'width,height'))
        if (was && heq(was,sizing)) return
        sizing = sizing
        ...        

animalsizing runs as part of afterUpdate for all Con.svelte

We focus|limit this new feature to two of them (kommit|times/treeh 16)

We remember what sizing was

#wrapper's width+height -> sizing

If sizing changes, cause an update: sizing = sizing

We were also going to try and set left|top, but with that we can now set them to:

ex(sizing,{top:1,left:1})

shrinkage

but then! the width of #wrapper shrinks to that of #spacer, for some reason...

with css adjusted via devtools

It's not clear why #wrapper is deciding to break onto many lines because of (its sibling) #spacer's width...

Though it must be that left|top of 1px whittling it down:

        ex(sizing,{top:0,left:0})

It is now undetectable!

Except treeh 16 is breaking like so:

Unless we forget to add a little exaggeration to the width!?:

        ex(sizing,getnumbers(wrapper,'width,height'))
        sizing.width += 3

That must be squeezed by a border width somewhere?

Then there's the slight growth in width over time.

I blame non-monospaced numbers?

Then we can highlight those that do animalsizing:

    let backgroundism
    $: backgroundism = spatialising ? "#ffc2" : "none"

Then just to refresh us all what happens to width (blue) over time:

If I zoom out a bit:

the jiggles

The Con:kommit shows some good input data:

Then somewhere after 90a2c4523d012c,

let spacerHeight = tweened(0, {

        duration: 300,
        easing: quintOut
    });

Hilarity:

I fix that:

And that:

        // was may be passed from a longer-ago moment of animalsizing
        was ||= ex({},sizing)
        let ge = {
            width: wrapper.offsetWidth,
            height: wrapper.offsetHeight
        }
        // animated transition
        spacerWidth.set(ge.width + 3)
        spacerHeight.set(ge.height)
        // sizing stabilises
        ex(sizing,ge)
        if (was && heq(was,sizing)) return

Try this:

The wrapper collapses.

We could table the wrapper:

<div id="wrapper" bind:this={wrapper}
    style="...
        display:table-row;
        wdith:100%;
    ">

and each thing (Con/$pi):

{#each o_(C) as n (n.t)}
    <span
        transition:slide={{ duration, easing: quintOut }}
        style="...
               display:table-cell;
               wdith:100%;
               ">

So:

The Cont (the labels, eg 'C treeh 27') are breaking...

The columns don't line up! So up in Conz:

    {#each nodules as n (n.t)}
        <nodule style="display:table; position: relative;" >

I adjust our selection of Con to do animalsizing for:

        // if (!(goodnumbers.includes(number) || C.t == 'times' || C.c.d == 1)) return
        // if (C.c.d == 0) return
        if (C.c.d > 2) return

Add this wrapper in case C.c.d == 0 and it has n <nodules> above it

<nondual style="position: relative;" >

Then I sprinkle some of these about:

wdith:100%;

This is odd. I did not expect the wrapper not to wrap everything inside it...

Anyway, lets sprinkle some more:

{#if nodules.length}
    <nodules style="
        display:block;
        vertical-align: middle;
        border:5px solid #f8c;
        border-right:none;
        padding: 0 3px; margin: 0 3px;
        border-radius: 3px;
        width:100%;
        ">
    <!-- the (n.t) means indexed by that, should be a Cid - they are reused for identity -->
    {#each nodules as n (n.t)}
        <nodule style="
            display:table;
            position: relative;
            width:100%;
            " >

Note the Cid - this is a humanised Cip. Instead of numbers exclusively, use noise from the object itself, as usual in naming.

This extra width prevents Cont (the labels, eg 'C treeh 27') breaking into lines!

widening

Obviously I need to research the forces going on here:

<nondual style="position: relative; width:97%; display:inline-block;" >
    <!--  -->
<div id="spacer" bind:this={spacer} style="width: {$spacerWidth||0}px; height: {$spacerHeight||0}px;"></div>
<div
    id="wrapper"
    bind:this={wrapper}

    style="
        left: {sizing.left||0}px;
         top: {sizing.top||0}px;
         position:{spaciness};
         display:table-row;
         width:100%;

    ">

The width:97%; trick worked in isolation,

but causes everything to deflate and widen like an ooze.

I try:

<nondual style="position: relative; width:100%; display:table;" >

Looks messier.

Then!

Some more something.

Might we decide that <giverto>...<takerto> is too wasteful and switch to many rows in that case?

I teeter around with setting width:100% on here:

    <nodules style="
        display:inline-table;

from being block, causes this:

and with

    <nodules style="

        display:inline-block;

So it seems okay where it is...

We are now letz.git 3fd7e61289c6d29d3 table is widening

Let us now slower the loop than the transition:

Maybe just a little bit more:

They look more like fades?

Adding in a general update-hilighter:

    // flash a background colour
    let givenbg = tweened(0,{duration:300,easing:linear})
    function itisgiven() {
        givenbg.set(1, { hard: true });
        // .then(() => {
            givenbg.set(0);
        // });
    }

To be called at the end of animalsizing().

It starts going towards 0 as soon as 1 is set.

Doing .then(... makes it stay 1 for a duration I think...

This looks nice:

Like green fire.

Lovely but endless: our tween is reactivity? And reactivity causes our tween?

Lets only animalsizing() (and tween) if we have new geometry:

        let change = !heq(was,sizing)
        ...
        change && await animalsizing(ge)

And make it happen to a floating mark called sleeve.

There is one on every -Con/-$pi (-Cont, -Rec, -Conz):

    <giverto ... >
        <sleeve style="width:cal(100% + 6px);height:100%;position:absolute;
            border-left:1em solid hsla(120, 100%, 75%, {$givenbg});
            border-radius: 0.3em;
            top:-3px;
            left:-3px;
            "></sleeve>

buffering

        // desired shape of spacer, given recent turmoil
        let de = good_size(ge)

This looks calmer.

Bits of html overlap as they change size slowly.

We are missing the final adjustment once things stop changing, which I simulate by clicking on things.

Hows Ecology Squad

Wednesday, 6 March 2024

Betime + svelte part 1