stickyflow 0.5.0 → 0.7.0

package/dist/{chunk-TWDLOXRM.cjs → chunk-OWNVXKXN.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkZMLQIMJK_cjs = require('./chunk-ZMLQIMJK.cjs');
-var chunkXY2GZUHC_cjs = require('./chunk-XY2GZUHC.cjs');
+var chunkA73UJ5AQ_cjs = require('./chunk-A73UJ5AQ.cjs');
+var chunkKXYSO6GC_cjs = require('./chunk-KXYSO6GC.cjs');
 
 // src/binding/types.ts
 var DECLARED = {
@@ -100,12 +100,12 @@ function createDataSource(initial) {
 }
 
 // src/binding/componentBinding.ts
-var BINDABLE_COMPONENT_PROPERTIES = ["value", "disabled"];
+var BINDABLE_COMPONENT_PROPERTIES = ["value", "valueEnd", "disabled"];
 function acceptsUserChange(componentType) {
-  return chunkXY2GZUHC_cjs.getComponentDescriptor(componentType)?.value?.writable === true;
+  return chunkKXYSO6GC_cjs.getComponentDescriptor(componentType)?.value?.writable === true;
 }
 function componentStateType(componentType, state) {
-  const descriptor = chunkXY2GZUHC_cjs.getComponentDescriptor(componentType);
+  const descriptor = chunkKXYSO6GC_cjs.getComponentDescriptor(componentType);
   if (state === "focused") {
     return "boolean";
   }
@@ -118,7 +118,10 @@ function componentPropertyType(componentType, property) {
   if (property === "disabled") {
     return "boolean";
   }
-  return property === "value" ? chunkXY2GZUHC_cjs.getComponentDescriptor(componentType)?.value?.type : void 0;
+  if (property === "valueEnd") {
+    return chunkKXYSO6GC_cjs.getComponentDescriptor(componentType)?.properties.valueEnd?.type === "number" ? "number" : void 0;
+  }
+  return property === "value" ? chunkKXYSO6GC_cjs.getComponentDescriptor(componentType)?.value?.type : void 0;
 }
 function twoWayTargetProblem(key, expr, contracts) {
   const target = expr.kind === "ref" ? expr.path : void 0;
@@ -262,7 +265,7 @@ function inferType(expr, scope, report) {
         const name = expr.path.join(".");
         report(
           "unknown-reference",
-          name === "time.delta" ? "'time.delta' is only available in an onTick handler." : `Unknown reference '${name}'. Use <DataSource>.<field>, or <element>.pressed / hovered / pointer.`
+          name === "time.delta" ? "'time.delta' is only available in an onTick handler." : `Unknown reference '${name}'. Use <DataSource>.<field>, self.id, or <element>.pressed / hovered / pointer.`
         );
       }
       return type;
@@ -431,12 +434,15 @@ function elementStateType(element, state) {
   }
   return element.kind === "Component" ? componentStateType(element.componentType, state) : void 0;
 }
-function createScope(contracts, elements, ticking = false) {
+function createScope(contracts, elements, ticking = false, selfAvailable = false) {
   return {
     resolve(path) {
       if (path.length !== 2) {
         return void 0;
       }
+      if (selfAvailable && path[0] === "self" && path[1] === "id") {
+        return "string";
+      }
       const contract = contracts.get(path[0]);
       if (contract) {
         return fieldType(contract, path[1]);
@@ -544,7 +550,7 @@ function bindHandler(site, contracts, elements, diagnostics) {
     report("tick-needs-record", `DataSource '${name}' has to be a record source to change its fields on every tick.`);
     return void 0;
   }
-  const scope = createScope(contracts, elements, ticking);
+  const scope = createScope(contracts, elements, ticking, !ticking);
   const assignments = handler.assignments.flatMap(
     (assignment) => bindAssignment(assignment, name, own, contracts, scope, report) ?? []
   );
@@ -583,7 +589,7 @@ function expectedType(site, elements) {
 }
 function canBindTwoWay(site, elements) {
   const { kind, path, binding } = site;
-  return kind === "Component" && binding.key === "value" && acceptsUserChange(elements.get(path[0])?.componentType);
+  return kind === "Component" && (binding.key === "value" || binding.key === "valueEnd") && acceptsUserChange(elements.get(path[0])?.componentType);
 }
 function rejectedOperator(site, elements, contracts) {
   const { binding } = site;
@@ -650,7 +656,7 @@ function buildBindingGraph(sflDocument) {
   const { contracts, diagnostics } = collectContracts(sflDocument);
   const elements = collectElements(sflDocument);
   warnNameCollisions(contracts, elements, diagnostics);
-  const scope = createScope(contracts, elements);
+  const scope = createScope(contracts, elements, false, true);
   const sites = [];
   collectSites(sflDocument.blocks, [], sites);
   const bindings = sites.flatMap((site) => bindProperty(site, scope, elements, contracts, diagnostics) ?? []);
@@ -661,7 +667,7 @@ function buildBindingGraph(sflDocument) {
 }
 
 // src/binding/interactive.ts
-var OPERATED = /* @__PURE__ */ new Set(["toggle", "press"]);
+var OPERATED = /* @__PURE__ */ new Set(["toggle", "press", "slide", "pick", "turn", "range"]);
 function interactiveElements(graph) {
   const pressable = /* @__PURE__ */ new Set();
   const scales = /* @__PURE__ */ new Set();
@@ -683,7 +689,7 @@ function interactiveElements(graph) {
     collectRefs(binding.expr).forEach(note);
   }
   for (const [name, info] of graph.elements) {
-    const interaction = chunkXY2GZUHC_cjs.getComponentDescriptor(info.componentType)?.interaction;
+    const interaction = chunkKXYSO6GC_cjs.getComponentDescriptor(info.componentType)?.interaction;
     if (info.kind === "Component" && interaction && OPERATED.has(interaction) && !graph.contracts.has(name)) {
       pressable.add(name);
     }
@@ -733,17 +739,23 @@ function writeComponentValue(input, id, value) {
   if (!component) {
     return;
   }
-  component.value = chunkXY2GZUHC_cjs.isGenericComponent(component) ? value : String(value);
+  component.value = chunkKXYSO6GC_cjs.isGenericComponent(component) ? value : String(value);
+}
+function writeComponentValueEnd(input, id, value) {
+  const component = findComponent(input, id);
+  if (component && chunkKXYSO6GC_cjs.isGenericComponent(component)) {
+    component.properties.valueEnd = value;
+  }
 }
 function writeComponentDisabled(input, id, disabled) {
   const component = findComponent(input, id);
-  if (component && chunkXY2GZUHC_cjs.isGenericComponent(component)) {
+  if (component && chunkKXYSO6GC_cjs.isGenericComponent(component)) {
     component.disabled = disabled;
   }
 }
 function isComponentDisabled(input, id) {
   const component = findComponent(input, id);
-  return component !== void 0 && chunkXY2GZUHC_cjs.isGenericComponent(component) && component.disabled;
+  return component !== void 0 && chunkKXYSO6GC_cjs.isGenericComponent(component) && component.disabled;
 }
 function setShape(input, path, change) {
   const shape = input.shapes.find((candidate) => candidate.id === path[0]);
@@ -777,13 +789,17 @@ var APPLY = {
   "Shape.textColor": (input, path, value) => setShape(input, path, (shape) => shape.textColor = value),
   "Shape.opacity": (input, path, value) => setShape(input, path, (shape) => shape.opacity = value),
   "Component.value": (input, path, value) => writeComponentValue(input, path[0], value),
+  "Component.valueEnd": (input, path, value) => writeComponentValueEnd(input, path[0], value),
   "Component.disabled": (input, path, value) => writeComponentDisabled(input, path[0], value === true)
 };
-function applyShader(input, binding, value) {
+function applyShader(input, binding, value, ownerId) {
   const owners = [];
   for (const shape of input.shapes) {
-    if (shape.shader?.name === binding.ownerPath[0]) {
-      shape.shader.parameters = { ...shape.shader.parameters, [binding.property]: value };
+    if (shape.shader?.name === binding.ownerPath[0] && (ownerId === void 0 || shape.id === ownerId)) {
+      shape.shader = {
+        ...shape.shader,
+        parameters: { ...shape.shader.parameters, [binding.property]: value }
+      };
       owners.push(shape.id);
     }
   }
@@ -792,7 +808,7 @@ function applyShader(input, binding, value) {
 
 // src/binding/runtimeState.ts
 function initialValue(input, id, componentType) {
-  const descriptor = chunkXY2GZUHC_cjs.getComponentDescriptor(componentType);
+  const descriptor = chunkKXYSO6GC_cjs.getComponentDescriptor(componentType);
   const current = findComponent(input, id)?.value;
   if (current === void 0) {
     return descriptor?.value?.default ?? 0;
@@ -804,8 +820,8 @@ function initialValue(input, id, componentType) {
   return current;
 }
 function createRuntimeState(sfl, options) {
-  const graph = buildBindingGraph(chunkXY2GZUHC_cjs.parseSource(sfl));
-  const input = structuredClone(chunkZMLQIMJK_cjs.sflToRenderInput(sfl));
+  const graph = buildBindingGraph(chunkKXYSO6GC_cjs.parseSource(sfl));
+  const input = structuredClone(chunkA73UJ5AQ_cjs.sflToRenderInput(sfl));
   const elementState = /* @__PURE__ */ new Map();
   for (const [name, info] of graph.elements) {
     if (!graph.contracts.has(name)) {
@@ -848,7 +864,7 @@ function readValue(state, path) {
   return Array.isArray(data) ? data.map((row) => row[field]) : data[field];
 }
 function missingSource(state, binding) {
-  return binding.dependencies.map((dependency) => dependency.split(".")[0]).find((name) => !state.sources.has(name) && !state.elementState.has(name));
+  return binding.dependencies.map((dependency) => dependency.split(".")[0]).find((name) => name !== "self" && !state.sources.has(name) && !state.elementState.has(name));
 }
 
 // src/binding/evaluation.ts
@@ -865,7 +881,7 @@ function applyComponentValue(state, binding, value) {
     element.value = value;
     markDirty(state, id);
   }
-  if (!chunkXY2GZUHC_cjs.isBuiltInComponentType(state.graph.elements.get(id)?.componentType)) {
+  if (!chunkKXYSO6GC_cjs.isBuiltInComponentType(state.graph.elements.get(id)?.componentType)) {
     return true;
   }
   announce(state, binding.id, { kind: "component", id, value });
@@ -890,7 +906,32 @@ function evaluateBinding(state, binding) {
     warnMissingSource(state, binding, missing);
     return false;
   }
-  const value = evaluate(binding.expr, { read: (path) => readValue(state, path) });
+  const readsSelf = binding.dependencies.includes("self.id");
+  if (binding.ownerKind === "Shader" && readsSelf) {
+    const owners = state.input.shapes.filter((shape) => shape.shader?.name === binding.ownerPath[0]);
+    for (const owner of owners) {
+      const value2 = evaluate(binding.expr, {
+        read: (path) => path[0] === "self" && path[1] === "id" ? owner.id : readValue(state, path)
+      });
+      const appliedId = `${binding.id}.${owner.id}`;
+      const key2 = JSON.stringify(value2);
+      if (state.applied.get(appliedId) === key2) {
+        continue;
+      }
+      state.applied.set(appliedId, key2);
+      applyShader(state.input, binding, value2, owner.id);
+      announce(state, appliedId, {
+        kind: "shader",
+        owners: [owner.id],
+        parameters: { [binding.property]: value2 }
+      });
+    }
+    return false;
+  }
+  const selfId = binding.ownerKind === "Shader" ? void 0 : binding.ownerPath[0];
+  const value = evaluate(binding.expr, {
+    read: (path) => path[0] === "self" && path[1] === "id" && selfId ? selfId : readValue(state, path)
+  });
   const key = JSON.stringify(value);
   if (state.applied.get(binding.id) === key) {
     return false;
@@ -925,7 +966,7 @@ function flush(state) {
   if (!changed) {
     return null;
   }
-  const result = chunkZMLQIMJK_cjs.renderCanvas(state.input, { ...state.options.renderOptions, linkHitAreas: true });
+  const result = chunkA73UJ5AQ_cjs.renderCanvas(state.input, { ...state.options.renderOptions, linkHitAreas: true });
   for (const listener of [...state.listeners]) {
     listener(result);
   }
@@ -948,14 +989,22 @@ function markDirty(state, name) {
 }
 
 // src/binding/handlers.ts
-function runHandler(state, handler, delta) {
+function runHandler(state, handler, delta, selfId) {
   const env = {
-    read: (path) => path[0] === "time" && path[1] === "delta" ? delta ?? 0 : readValue(state, path)
+    read: (path) => {
+      if (path[0] === "time" && path[1] === "delta") {
+        return delta ?? 0;
+      }
+      if (path[0] === "self" && path[1] === "id" && selfId) {
+        return selfId;
+      }
+      return readValue(state, path);
+    }
   };
   for (const assignment of handler.assignments) {
     const target = state.sources.get(assignment.source);
     const readable = collectRefs(assignment.expr).every(
-      ([name]) => name === "time" || state.sources.has(name) || state.elementState.has(name)
+      ([name]) => name === "time" || name === "self" && Boolean(selfId) || state.sources.has(name) || state.elementState.has(name)
     );
     if (!target || !("set" in target) || !readable) {
       continue;
@@ -976,7 +1025,7 @@ function runHandler(state, handler, delta) {
 function dispatch(state, id, event) {
   for (const handler of state.graph.handlers) {
     if (handler.event === event && handler.ownerKind !== "DataSource" && handler.ownerPath[0] === id) {
-      runHandler(state, handler);
+      runHandler(state, handler, void 0, id);
     }
   }
 }
@@ -1000,11 +1049,11 @@ function setElementState(state, id, patch) {
 // src/binding/userInput.ts
 function descriptorOf(state, id) {
   const info = state.graph.elements.get(id);
-  return info?.kind === "Component" ? chunkXY2GZUHC_cjs.getComponentDescriptor(info.componentType) : void 0;
+  return info?.kind === "Component" ? chunkKXYSO6GC_cjs.getComponentDescriptor(info.componentType) : void 0;
 }
-function valueBinding(state, id) {
+function valueBinding(state, id, property = "value") {
   return state.graph.bindings.find(
-    (binding) => binding.ownerKind === "Component" && binding.ownerPath[0] === id && binding.property === "value"
+    (binding) => binding.ownerKind === "Component" && binding.ownerPath[0] === id && binding.property === property
   );
 }
 function writeBack(state, binding, value) {
@@ -1018,7 +1067,30 @@ function writeBack(state, binding, value) {
     source.set({ ...row, [target[1]]: value });
   }
 }
-function changeComponentValue(state, id, next) {
+function changeValueEnd(state, id, next) {
+  const component = findComponent(state.input, id);
+  if (!component || !chunkKXYSO6GC_cjs.isGenericComponent(component) || component.properties.valueEnd === next || isComponentDisabled(state.input, id)) {
+    return false;
+  }
+  const binding = valueBinding(state, id, "valueEnd");
+  if (binding && binding.operator !== "<->") {
+    return false;
+  }
+  writeComponentValueEnd(state.input, id, next);
+  state.renderNeeded = true;
+  if (binding) {
+    state.applied.set(binding.id, JSON.stringify(next));
+    writeBack(state, binding, next);
+  }
+  markDirty(state, id);
+  dispatch(state, id, CHANGE_EVENT);
+  schedule(state);
+  return true;
+}
+function changeComponentValue(state, id, next, property = "value") {
+  if (property === "valueEnd") {
+    return typeof next === "number" && changeValueEnd(state, id, next);
+  }
   const spec = descriptorOf(state, id)?.value;
   const element = state.elementState.get(id);
   if (!spec?.writable || !element || typeof next !== spec.type || element.value === next) {
@@ -1043,6 +1115,64 @@ function changeComponentValue(state, id, next) {
   schedule(state);
   return true;
 }
+var TAU = Math.PI * 2;
+var grabbed = /* @__PURE__ */ new WeakMap();
+var within = (value) => Math.min(1, Math.max(0, value));
+function slideAlong(properties, width, height, x, y) {
+  const vertical = properties.direction === "vertical";
+  const length = vertical ? height : width;
+  const reach = chunkA73UJ5AQ_cjs.sliderReach(properties.variant, vertical ? width : height);
+  const position = vertical ? 1 - y : x;
+  return length > reach * 2 ? within((position * length - reach) / (length - reach * 2)) : position;
+}
+function turnAlong(properties, width, height, x, y) {
+  const start = Number(properties.start ?? 225) * Math.PI / 180;
+  const sweep = Number(properties.sweep ?? 270) * Math.PI / 180;
+  const gap = TAU - sweep;
+  const angle = Math.atan2(-(y - 0.5) * height, (x - 0.5) * width);
+  const shifted = start - angle + gap / 2;
+  return within(((shifted % TAU + TAU) % TAU - gap / 2) / sweep);
+}
+function slideElement(state, id, x, y = 0) {
+  const component = findComponent(state.input, id);
+  if (!component || !chunkKXYSO6GC_cjs.isGenericComponent(component)) {
+    return;
+  }
+  const kind = descriptorOf(state, id)?.interaction;
+  const { properties } = component;
+  if (kind === "pick") {
+    const count = String(properties.options ?? "").split(",").filter((option) => option.trim()).length;
+    if (count > 0) {
+      changeComponentValue(state, id, Math.min(count - 1, Math.floor(x * count)));
+    }
+    return;
+  }
+  const along = kind === "turn" ? turnAlong(properties, component.width, component.height, x, y) : slideAlong(properties, component.width, component.height, x, y);
+  const min = Number(properties.min ?? 0);
+  const max = Number(properties.max ?? 100);
+  const step = Number(properties.step ?? 0);
+  let value = min + along * (max - min);
+  if (step > 0) {
+    value = min + Math.round((value - min) / step) * step;
+  }
+  const taken = Number(Math.min(max, Math.max(min, value)).toFixed(6));
+  if (kind !== "range") {
+    changeComponentValue(state, id, taken);
+    return;
+  }
+  const low = Number(component.value);
+  const high = Number(properties.valueEnd ?? max);
+  const holds = grabbed.get(state) ?? /* @__PURE__ */ new Map();
+  grabbed.set(state, holds);
+  if (!holds.has(id)) {
+    holds.set(id, taken >= high || taken > low && taken - low > high - taken ? "end" : "start");
+  }
+  if (holds.get(id) === "start") {
+    changeComponentValue(state, id, Math.min(taken, high));
+  } else {
+    changeComponentValue(state, id, Math.max(taken, low), "valueEnd");
+  }
+}
 function reactToActivation(state, id) {
   const element = state.elementState.get(id);
   const descriptor = descriptorOf(state, id);
@@ -1051,6 +1181,7 @@ function reactToActivation(state, id) {
   }
 }
 function pressElement(state, id) {
+  grabbed.get(state)?.delete(id);
   if (isComponentDisabled(state.input, id)) {
     return;
   }
@@ -1058,6 +1189,7 @@ function pressElement(state, id) {
   dispatch(state, id, "onPress");
 }
 function releaseElement(state, id, tapped) {
+  grabbed.get(state)?.delete(id);
   setElementState(state, id, { pressed: false });
   if (isComponentDisabled(state.input, id)) {
     return;
@@ -1154,6 +1286,7 @@ function createBindingRuntime(sfl, options = {}) {
     release: (id, tapped) => releaseElement(state, id, tapped),
     activate: (id) => activateElement(state, id),
     change: (id, value) => changeComponentValue(state, id, value),
+    slide: (id, x, y) => slideElement(state, id, x, y),
     drag(id, pointer) {
       if (pointer !== void 0) {
         setElementState(state, id, { pointer });
@@ -1176,7 +1309,7 @@ function renderBound(sfl, options = {}) {
     runtime.registerSource(name, { get: () => rows, subscribe: () => () => void 0 });
   }
   runtime.flush();
-  return chunkZMLQIMJK_cjs.renderCanvas(runtime.input, renderOptions);
+  return chunkA73UJ5AQ_cjs.renderCanvas(runtime.input, renderOptions);
 }
 
 exports.buildBindingGraph = buildBindingGraph;
@@ -1185,5 +1318,5 @@ exports.createBindingRuntime = createBindingRuntime;
 exports.createDataSource = createDataSource;
 exports.interactiveElements = interactiveElements;
 exports.renderBound = renderBound;
-//# sourceMappingURL=chunk-TWDLOXRM.cjs.map
-//# sourceMappingURL=chunk-TWDLOXRM.cjs.map
+//# sourceMappingURL=chunk-OWNVXKXN.cjs.map
+//# sourceMappingURL=chunk-OWNVXKXN.cjs.map