stickyflow 0.5.0 → 0.7.0

package/CHANGELOG.md

@@ -17,6 +17,48 @@ Two things count as breaking here that are easy to overlook:
 
 ## [Unreleased]
 
+## [0.7.0] - 2026-10-25
+
+### Added
+
+- The components `slider`, `progress` and `segmented`. A `slider` takes a value between `min` and `max` from the pointer, in steps of `step` if set. A `progress` shows a value as a bar or, with `variant: "ring"`, as a ring, and can write the share or the value into itself with `display`. A `segmented` shows the labels of `options`, separated by commas, and its value is the number of the chosen one, counted from 0.
+- Three shader programs for backgrounds, which draw a rectangle or a rounded rectangle of their own, as `reactivePanel` does. `ledMatrix` is a wall of small pill-shaped lights with a glow that rises and drifts. `lightBand` is a band of light with a glow that runs through three colors. `silkFolds` is a folded cloth of satin with thin bright edges. Each one has `cornerRadius`, as a share of the shorter side, and `speed`, where 0 gives a still picture. `ledMatrix` and `silkFolds` react to the pointer, and `reaction` sets how strongly. On `ledMatrix` the places the pointer has been dim down behind it, and `trail` is how many seconds that takes. `pointerSize` sets how wide that stripe is. Its light can be moved with `originX` and `originY`, sized with `spread` and put out with 0, and `drift` sets how far it sways.
+- A shader program can read `uWake`, 16 places the pointer has been over its surface, each as x, y and how much of it is left, when it has a number parameter `trail`, the seconds a place takes to fade out.
+- A shader program can read `uPointer`, where the pointer is over its surface from 0 to 1 and counted from the lower left, and `uHover`, which glides to 1 while the pointer is over the surface and back to 0 when it leaves.
+- The component `range`, a slider with two thumbs. `value` is the lower end and `valueEnd` the upper end, and both can be bound with `<->`, each to a field of its own. The nearer thumb follows the pointer, and the thumbs do not pass each other. It takes the `variant`, `direction` and `ticks` of the slider. Its interaction is `range`.
+- `valueEnd` is a bindable property of a component that has a number property of that name. `runtime.slide(id, x, y)` takes the position as fractions of the width and the height.
+- `componentTypes()` is exported from the main entry.
+- `category` on a component descriptor, and `COMPONENT_CATEGORIES`, the list of the shelves a component is filed on: actions, selection, value input, text input, indicators, instruments, navigation and containers. The built-in components name their shelf.
+- The component `knob`, a dial with an arc that fills up to the value. The pointer sets the value by its angle round the dial, between `min` and `max`, in steps of `step`. `start` and `sweep` set where the arc begins and how far it runs, and `display`, `thickness`, `face` and `dot` style it. Its interaction is `turn`.
+- `direction: "vertical"` on a `slider` and on a `progress` bar stands them upright, and they fill from below. `ticks` on a `slider` draws that many marks along it, the two ends included, and `tickColor` colors them.
+- `variant: "field"` on a `slider` draws a field that fills up to the value, with a thin handle at its end, the `label` at the left and the value at the right (`display` is `value`, `percent` or `none`). `surface`, `fill`, `radius`, `textColor` and `fontSize` style it.
+- The component interactions `slide` and `pick`, and `runtime.slide(id, fraction)` on a binding runtime, which turns a position along the width of a component into its value.
+- `animate` on `switch`, `checkbox`, `toggleButton` and `button`, and on the new components. It is the number of milliseconds a change of position, size, color or opacity takes to show. The default is 160 for the first four, 0 for `slider`, 300 for `progress` and 200 for `segmented`. A scene style can carry the same as `transition`, and the viewer patches the elements in place, so the browser does the animation.
+- The shader program `reactivePanel` draws a rounded panel that can send light into the scene and receive it. A panel with `emission` lights the edges of the panels near it on the side that faces it. `reception` sets how much a panel takes in, `emitterFill`, `grain` and `grainScale` light and texture the inside of an emitter, and `glowRadius`, `borderWidth` and `cornerRadius` shape the glow and the border.
+- `surfacePadding` on a `Shader` adds room around the shape for an outer glow, in canvas units. It is not a parameter of the program.
+- A shader on a `rectangle` or a `rounded_rectangle` is drawn when its program draws a rectangle of its own. Today that is `reactivePanel`. Every other program still needs a `circle` or an `oval`.
+- `self.id` in an expression is the id of the element the expression belongs to. In a binding of a `Shader` it is read separately for every shape that uses the shader, so one shader can light the tapped panel and no other. In an element handler it is the element that was pressed, so `onTap: glow.active <- self.id` works for any number of elements.
+
+### Changed
+
+- Every shader surface in the SVG carries `data-sf-shader-padding`, `0` when there is no padding.
+
+## [0.6.0] - 2026-10-22
+
+### Added
+
+- An `Isometric` block takes a `symbol`. The outline of the `Symbol` is extruded by the height, and every wall that faces the viewer is shaded on its own. It works for any closed outline of three or more points that does not cross itself.
+- `cornerRadius` in the style of an `Isometric` block rounds the vertical edges of the box or of an extruded symbol.
+- `shape: sphere` draws an `Isometric` block as a shaded ball that sits in the center of its box.
+- A point of a `Path` or a `Symbol` can carry a third value, its own tension. `0` makes the point a corner, so one outline can mix corners and curves. A point without one takes the `tension` of the whole path.
+- `pathToSymbol()` turns a `Path` into a `Symbol`, and `symbolToPath()` turns it back. `pathBounds()` and `flattenPath()` give the box of a path and the points of its curve as short straight edges. The types `PathFrame`, `PathPoint` and `PathSymbol` are exported.
+- The `Dimension` block draws a measure line with an arrow at each end, extension lines and a label. `start` and `end` are the two measured points, and `offset` is the distance of the line, positive to the left of the direction. Without `text` the label is the measured length, rounded to one decimal place, followed by `unit`. `isDimensionObject()` and the types `Dimension` and `SflDimensionObject` are exported, and `RenderInput` takes `dimensions`.
+
+### Changed
+
+- Moving a path through `applyMoveChange` keeps the tension of its points.
+- An `Isometric` block with a `symbol` that has curved points uses the curve as many short straight edges.
+
 ## [0.5.0] - 2026-10-18
 
 ### Added
@@ -219,4 +261,5 @@ First versioned release. Not yet published to npm.
   across machines. Now a locale-independent code-point compare.
 
 [Unreleased]: https://github.com/D-Queck/stickyflow.js/compare/v0.1.0...HEAD
+[0.7.0]: https://github.com/D-Queck/stickyflow.js/releases/tag/v0.7.0
 [0.1.0]: https://github.com/D-Queck/stickyflow.js/releases/tag/v0.1.0

package/dist/binding/index.cjs

@@ -1,34 +1,34 @@
 'use strict';
 
-var chunkTWDLOXRM_cjs = require('../chunk-TWDLOXRM.cjs');
-require('../chunk-ZMLQIMJK.cjs');
-require('../chunk-XY2GZUHC.cjs');
+var chunkOWNVXKXN_cjs = require('../chunk-OWNVXKXN.cjs');
+require('../chunk-A73UJ5AQ.cjs');
+require('../chunk-KXYSO6GC.cjs');
 
 
 
 Object.defineProperty(exports, "buildBindingGraph", {
   enumerable: true,
-  get: function () { return chunkTWDLOXRM_cjs.buildBindingGraph; }
+  get: function () { return chunkOWNVXKXN_cjs.buildBindingGraph; }
 });
 Object.defineProperty(exports, "collectContracts", {
   enumerable: true,
-  get: function () { return chunkTWDLOXRM_cjs.collectContracts; }
+  get: function () { return chunkOWNVXKXN_cjs.collectContracts; }
 });
 Object.defineProperty(exports, "createBindingRuntime", {
   enumerable: true,
-  get: function () { return chunkTWDLOXRM_cjs.createBindingRuntime; }
+  get: function () { return chunkOWNVXKXN_cjs.createBindingRuntime; }
 });
 Object.defineProperty(exports, "createDataSource", {
   enumerable: true,
-  get: function () { return chunkTWDLOXRM_cjs.createDataSource; }
+  get: function () { return chunkOWNVXKXN_cjs.createDataSource; }
 });
 Object.defineProperty(exports, "interactiveElements", {
   enumerable: true,
-  get: function () { return chunkTWDLOXRM_cjs.interactiveElements; }
+  get: function () { return chunkOWNVXKXN_cjs.interactiveElements; }
 });
 Object.defineProperty(exports, "renderBound", {
   enumerable: true,
-  get: function () { return chunkTWDLOXRM_cjs.renderBound; }
+  get: function () { return chunkOWNVXKXN_cjs.renderBound; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/binding/index.d.cts

@@ -1,7 +1,7 @@
-import { S as SflDocument, D as DataSourceContract, B as BindingDiagnostic } from '../runtimeTypes-D60w6nyF.cjs';
-export { a as BindingGraph, b as BindingRuntime, c as BindingRuntimeOptions, d as BindingTarget, e as BindingType, f as BindingValue, g as BoundAssignment, h as BoundHandler, i as BoundProperty, j as DataSource, E as ElementInfo, k as ElementState, I as InteractiveElements, M as MutableDataSource, l as buildBindingGraph, m as createDataSource, n as interactiveElements } from '../runtimeTypes-D60w6nyF.cjs';
-export { R as RenderBoundOptions, c as createBindingRuntime, r as renderBound } from '../runtime-reWgr7MP.cjs';
-import '../render-CgX_y15a.cjs';
+import { S as SflDocument, D as DataSourceContract, B as BindingDiagnostic } from '../runtimeTypes-BIP70z72.cjs';
+export { a as BindingGraph, b as BindingRuntime, c as BindingRuntimeOptions, d as BindingTarget, e as BindingType, f as BindingValue, g as BoundAssignment, h as BoundHandler, i as BoundProperty, j as DataSource, E as ElementInfo, k as ElementState, I as InteractiveElements, M as MutableDataSource, l as buildBindingGraph, m as createDataSource, n as interactiveElements } from '../runtimeTypes-BIP70z72.cjs';
+export { R as RenderBoundOptions, c as createBindingRuntime, r as renderBound } from '../runtime-B7KiTmn8.cjs';
+import '../render-BU2uYzjG.cjs';
 
 declare function collectContracts(sflDocument: SflDocument): {
     contracts: Map<string, DataSourceContract>;

package/dist/binding/index.d.ts

@@ -1,7 +1,7 @@
-import { S as SflDocument, D as DataSourceContract, B as BindingDiagnostic } from '../runtimeTypes-CEBGueYM.js';
-export { a as BindingGraph, b as BindingRuntime, c as BindingRuntimeOptions, d as BindingTarget, e as BindingType, f as BindingValue, g as BoundAssignment, h as BoundHandler, i as BoundProperty, j as DataSource, E as ElementInfo, k as ElementState, I as InteractiveElements, M as MutableDataSource, l as buildBindingGraph, m as createDataSource, n as interactiveElements } from '../runtimeTypes-CEBGueYM.js';
-export { R as RenderBoundOptions, c as createBindingRuntime, r as renderBound } from '../runtime-DnUxca3Y.js';
-import '../render-CgX_y15a.js';
+import { S as SflDocument, D as DataSourceContract, B as BindingDiagnostic } from '../runtimeTypes-DalvhScn.js';
+export { a as BindingGraph, b as BindingRuntime, c as BindingRuntimeOptions, d as BindingTarget, e as BindingType, f as BindingValue, g as BoundAssignment, h as BoundHandler, i as BoundProperty, j as DataSource, E as ElementInfo, k as ElementState, I as InteractiveElements, M as MutableDataSource, l as buildBindingGraph, m as createDataSource, n as interactiveElements } from '../runtimeTypes-DalvhScn.js';
+export { R as RenderBoundOptions, c as createBindingRuntime, r as renderBound } from '../runtime-BPzyD-Nd.js';
+import '../render-BU2uYzjG.js';
 
 declare function collectContracts(sflDocument: SflDocument): {
     contracts: Map<string, DataSourceContract>;

package/dist/binding/index.js

@@ -1,5 +1,5 @@
-export { buildBindingGraph, collectContracts, createBindingRuntime, createDataSource, interactiveElements, renderBound } from '../chunk-BODZN3ZI.js';
-import '../chunk-LTGF5OHP.js';
-import '../chunk-IEHE6WVN.js';
+export { buildBindingGraph, collectContracts, createBindingRuntime, createDataSource, interactiveElements, renderBound } from '../chunk-JCRPLPKV.js';
+import '../chunk-SDMQRSRW.js';
+import '../chunk-JQK4IGXJ.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map