@jsenv/navi 0.29.506 → 0.29.508
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/dev/jsenv_navi.js +224 -64
- package/dist/dev/jsenv_navi.js.map +3 -3
- package/dist/jsenv_navi.js +224 -64
- package/dist/jsenv_navi.js.map +3 -3
- package/docs/drag_to_travel.md +4 -0
- package/docs/state_binding.md +28 -0
- package/package.json +1 -1
package/docs/drag_to_travel.md
CHANGED
|
@@ -122,6 +122,10 @@ So an inner box sitting on its last slide does not hand the gesture over
|
|
|
122
122
|
mid-drag: it leans on its wall, the way it does when it is alone. Travelling the
|
|
123
123
|
box around it means starting the gesture outside it.
|
|
124
124
|
|
|
125
|
+
When the boxes say ONE place between them — a row of titles in each slide of a
|
|
126
|
+
column of levels, the address naming a title — they bind one state: see
|
|
127
|
+
[state_binding.md](./state_binding.md#a-control-that-shows-part-of-a-bigger-answer).
|
|
128
|
+
|
|
125
129
|
### Something being carried inside a box
|
|
126
130
|
|
|
127
131
|
A drag (`interactions={{ move, reorder, land, toss, leave }}`, see
|
package/docs/state_binding.md
CHANGED
|
@@ -184,6 +184,34 @@ went on is still chosen when it goes off: nothing cleared it). A control binds
|
|
|
184
184
|
the state whose values it can show; a state holding more than that is more than
|
|
185
185
|
one question.
|
|
186
186
|
|
|
187
|
+
The opposite case is ONE answer drawn by two controls nested in each other: a
|
|
188
|
+
column of tournament levels with a row of titles in each, the address saying
|
|
189
|
+
which title (`?cup=P100:2`). The level is not a second question — nothing ever
|
|
190
|
+
chooses a level without landing on one of its titles, so it is read from the
|
|
191
|
+
title. Both containers bind the SAME signal, and nothing is wired between them:
|
|
192
|
+
|
|
193
|
+
```jsx
|
|
194
|
+
const cupSignal = stateSignal(undefined, { id: "cup" });
|
|
195
|
+
|
|
196
|
+
<SlideContainer layout="column" signal={cupSignal}>
|
|
197
|
+
{levels.map((level) => (
|
|
198
|
+
<Slide area={level.name}>
|
|
199
|
+
<SlideContainer signal={cupSignal} defaultCurrent={level.entryKey}>
|
|
200
|
+
{level.titles.map((title) => (
|
|
201
|
+
<Slide area={title.key}>…</Slide>
|
|
202
|
+
))}
|
|
203
|
+
</SlideContainer>
|
|
204
|
+
</Slide>
|
|
205
|
+
))}
|
|
206
|
+
</SlideContainer>;
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
The column shows the level holding the title the state names, a row off screen
|
|
210
|
+
keeps the title it was left on, and changing level writes that title. Not
|
|
211
|
+
`current` + `onCurrentChange` on each, ignoring `cause: "state"` and keeping a
|
|
212
|
+
map of where each row was left: that is the state held a second time, by hand.
|
|
213
|
+
What each part does is in `SlideContainer`'s JSDoc (`signal`).
|
|
214
|
+
|
|
187
215
|
## When there is no binding
|
|
188
216
|
|
|
189
217
|
Sometimes the state being wired by hand has no prop for it. That is not a
|