@pie-element/number-line 0.1.0

package/src/controller/tickUtils.ts

@@ -0,0 +1,324 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/controller/src/tickUtils.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import * as math from 'mathjs';
+import { isNumber, isObject, uniqWith } from 'lodash-es';
+
+// All these functions are duplicated in  src/number-line/graph/tick-utils
+
+/*This will store the possible decimal tick values*/
+const decimalTickValues = [0.001, 0.01, 0.02, 0.04, 0.05, 0.1, 0.125, 0.2, 0.25, 0.5];
+
+/*This will store the possible fraction tick values*/
+const fractionTickValues = [
+  '1/1000',
+  '1/100',
+  '1/64',
+  '1/50',
+  '1/32',
+  '1/25',
+  '1/20',
+  '1/16',
+  '1/15',
+  '1/12',
+  '1/10',
+  '1/9',
+  '1/8',
+  '1/7',
+  '1/6',
+  '1/5',
+  '1/4',
+  '1/3',
+  '1/2',
+];
+
+/*This const will store possible multiplier for label interval that needs to be multiplied
+with tick interval with denominator represented with object key.*/
+const labelMultiplier = {
+  1: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+  2: [1, 2, 4, 6, 8, 10],
+  3: [1, 3, 6, 9],
+  4: [1, 2, 4, 8],
+  5: [1, 5, 10],
+  6: [1, 2, 3, 6],
+  7: [1, 7],
+  8: [1, 2, 4, 8],
+  9: [1, 3, 9],
+  10: [1, 2, 5, 10],
+  12: [1, 2, 3, 4, 6],
+  15: [1, 3, 5],
+  16: [1, 2, 4, 8],
+  20: [1, 2, 4, 5, 10],
+  25: [1, 5],
+  32: [1, 2, 4, 8],
+  50: [1, 2, 5, 10],
+  64: [1, 2, 4, 8],
+  100: [1, 2, 4, 5, 10],
+  1000: [1, 2, 4, 5, 8, 10],
+};
+
+const fractionRange = (start, end, interval) => {
+  const m = math.mod(math.abs(start), math.abs(interval));
+  if (!math.equal(m, 0)) {
+    throw new Error('start point must be divisible by interval');
+  }
+
+  if (math.equal(start, end)) {
+    return [];
+  }
+
+  const e = math.subtract(end, math.mod(end, math.abs(interval)));
+
+  const direction = math.larger(interval, 0) ? 'positive' : 'negative';
+
+  if (direction === 'negative' && math.largerEq(end, start)) {
+    throw new Error('start must be > than end when doing a negative decrement');
+  }
+  if (direction === 'positive' && math.smallerEq(end, start)) {
+    throw new Error('start must be < end when doing increments');
+  }
+  const compareFn = direction === 'positive' ? math.smallerEq : math.equal(e, end) ? math.largerEq : math.larger;
+  const out = [];
+
+  let next = start;
+  while (compareFn(next, e)) {
+    out.push(next);
+    next = math.add(next, interval);
+  }
+  return out;
+};
+
+const zbrErrorMessage = (start, end) =>
+  `Can only do a positive or negative range, but got: start: ${start} and end:${end}`;
+
+const zeroBasedRange = (start, end, interval) => {
+  start = math.fraction(start);
+  end = math.fraction(end);
+  interval = math.fraction(interval);
+
+  const length = math.abs(math.subtract(end, start));
+
+  if (math.larger(length, math.abs(end))) {
+    throw new Error(zbrErrorMessage(start, end));
+  }
+  const a = {
+    start: math.abs(start),
+    end: math.abs(end),
+    interval: math.abs(interval),
+    multiplier: math.smaller(interval, 0) ? -1 : 1,
+  };
+
+  const m = math.mod(a.start, a.interval);
+  const s = math.larger(m, 0) ? math.add(math.subtract(a.start, m), a.interval) : a.start;
+
+  const r = fractionRange(s, a.end, a.interval);
+  const out = a.multiplier === -1 ? r.map((v) => math.multiply(v, -1)) : r;
+
+  if (math.smaller(interval, 0)) {
+    out.reverse();
+  }
+  return out;
+};
+
+const fmin = (a, b) => {
+  a = math.fraction(a);
+  b = math.fraction(b);
+  return math.smaller(a, b) ? a : b;
+};
+
+const fmax = (a, b) => {
+  a = math.fraction(a);
+  b = math.fraction(b);
+  return math.larger(a, b) ? a : b;
+};
+/**
+ * the lodash range was causing too much variance in the rounding errors
+ * such that it was hard to round the numbers.
+ * This is a more simplistic version but makes rounding work.
+ */
+const simpleRange = (start, end, interval) => {
+  start = math.fraction(start);
+  end = math.fraction(end);
+  interval = math.fraction(interval);
+
+  const positiveRange = math.larger(end, 0) ? zeroBasedRange(fmax(0, start), end, interval) : [];
+
+  const negativeRange = math.smaller(start, 0) ? zeroBasedRange(fmin(0, end), start, math.multiply(interval, -1)) : [];
+  let together = negativeRange.concat(positiveRange);
+
+  const out = uniqWith(together, math.equal);
+  return out;
+};
+
+const closeTo = (a, b, precision) => {
+  precision = precision || 2;
+  const expectedDiff = Math.pow(10, -precision) / 2;
+  const receivedDiff = Math.abs(a - b);
+  return receivedDiff < expectedDiff;
+};
+
+const limit = (v, min, max) => {
+  if (math.smaller(fraction(v), fraction(min))) {
+    return min;
+  }
+
+  if (math.larger(fraction(v), fraction(max))) {
+    return max;
+  }
+
+  return v;
+};
+
+/*
+ * Function to get tick interval limits based on min, max and width entered by the user.
+ * @param domain object containing max and min value.
+ * @param width number represents width of number line.
+ * */
+export const getMinorLimits = (domain, width) => {
+  const end = domain.max - domain.min;
+  const min = math.number(math.multiply(10, math.divide(math.fraction(end), width)));
+  const max = math.number(math.multiply(20, min));
+  return {
+    min: min,
+    max: max,
+  };
+};
+
+const isMultiple = (multiple, src) => {
+  const mod = math.mod(multiple, src);
+  return math.equal(mod, 0);
+};
+
+/**
+ * Accepts a fraction object {n,d,s} or number.
+ * @param {*} v
+ * @return mathjs.fraction
+ */
+const fraction = (v) => {
+  if (isObject(v)) {
+    return math.fraction(v.n * v.s, v.d);
+  } else if (isNumber(v)) {
+    return math.fraction(v);
+  }
+};
+
+const normalizeTicks = (domain, width, ticks, opts) => {
+  const useLimit = opts ? opts.limit !== false : true;
+  const minorLimits = getMinorLimits(domain, width);
+
+  const minor = useLimit ? limit(fraction(ticks.minor), minorLimits.min, minorLimits.max) : fraction(ticks.minor);
+  const major = useLimit ? limit(fraction(ticks.major), minor, math.multiply(minor, 20)) : fraction(ticks.major);
+
+  const isMajorMultiple = isMultiple(major, minor);
+
+  if (!isMajorMultiple) {
+    const multiplier = math.divide(major, minor);
+    const multiplyBy = multiplier <= 2 ? 2 : Math.round(multiplier);
+
+    // major must be a multiple of minor
+    return { minor, major: math.multiply(minor, multiplyBy) };
+  }
+
+  return { major, minor };
+};
+
+/**
+ * Build ticks as an array of mathjs Fractions
+ */
+const buildTickDataAsFractions = (domain, width, ticks, opts) => {
+  ticks = normalizeTicks(domain, width, ticks, opts);
+  const rng = simpleRange(domain.min, domain.max, ticks.minor);
+
+  const o = rng
+    .filter((x) => math.smallerEq(x, math.fraction(domain.max)))
+    .map((x) => {
+      let type = 'minor';
+      const modulo = math.mod(x, ticks.major);
+
+      if (closeTo(math.number(modulo), 0)) {
+        type = 'major';
+      }
+
+      return { x, type };
+    });
+
+  return o;
+};
+
+/*
+ * This function will generate tick interval values based on min and max limits of ticks.
+ * @param minorLimits object containing min and max values
+ * @return out object containing three arrays 1. fraction values, 2. decimal values,
+ * */
+export const generateMinorValues = (minorLimits) => {
+  let out = { fraction: [], decimal: [] };
+  decimalTickValues.forEach((value) => {
+    if (value >= minorLimits.min && value <= minorLimits.max) {
+      out.decimal.push(value);
+    }
+  });
+  fractionTickValues.forEach((value) => {
+    let decimalValue = math.number(math.fraction(value));
+    if (decimalValue >= minorLimits.min && decimalValue <= minorLimits.max) {
+      out.fraction.push(value);
+    }
+  });
+  return out;
+};
+
+/*
+ * This function will generate label interval values for provided tick interval value.
+ * @param minor number representing tick interval value.
+ * @param domain object containing min and max values.
+ * @param width number representing width of number line.
+ * @return out object containing three arrays 1. fraction values, 2. decimal values,
+ * */
+export const generateMajorValuesForMinor = (minor, domain, width) => {
+  let out = { decimal: [], fraction: [] };
+  let fraction = math.fraction(math.number(math.number(minor)));
+  let n = fraction.n;
+  let d = fraction.d;
+  if (n >= 1 && d === 1) {
+    for (let i = 1; i <= 10; i++) {
+      let num = math.number(math.multiply(n, i));
+      //Here we check if this major value can plot at least 2 points on number line.
+      let ticksData = { minor: minor, major: num };
+      let output = buildTickData(domain, width, ticksData, { fraction: undefined });
+      if (output.filter((x) => x.type === 'major').length > 1) {
+        out.fraction.push(num.toString());
+        out.decimal.push(num);
+      }
+    }
+  } else {
+    for (const multiplierKey in labelMultiplier[d]) {
+      let num = math.multiply(math.fraction(n, d), labelMultiplier[d][multiplierKey]);
+      //Here we check if this major value can plot at least 2 points on number line.
+      let ticksData = { minor: minor, major: math.number(num) };
+      let output = buildTickData(domain, width, ticksData, { fraction: undefined });
+      if (output.filter((x) => x.type === 'major').length > 1) {
+        if (num.d !== 1) {
+          out.fraction.push(num.n + '/' + num.d);
+        } else {
+          out.fraction.push(num.n.toString());
+        }
+        out.decimal.push(math.number(num));
+      }
+    }
+  }
+  return out;
+};
+
+const buildTickData = (domain, width, ticks, opts) => {
+  const result = buildTickDataAsFractions(domain, width, ticks, opts);
+
+  const out = result.map((o) => (opts.fraction ? o : { ...o, x: math.number(o.x) || 0 }));
+
+  return out;
+};

package/src/controller/utils.ts

@@ -0,0 +1,159 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/controller/src/utils.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import * as math from 'mathjs';
+import { generateMajorValuesForMinor, generateMinorValues, getMinorLimits } from './tickUtils.js';
+
+/*
+ * This function is duplicated in configure/main.js
+ * This function will update major value whenever minor value is changed or tick type is changed
+ * @param graph object containing domain, ticks and width value
+ * @return graph object with updated ticks values
+ * */
+const updateMajorValue = (graph) => {
+  const { domain, ticks, width } = graph;
+  const majorValues = generateMajorValuesForMinor(ticks.minor, domain, width);
+  if (majorValues.decimal.indexOf(ticks.major) === -1) {
+    let currIndex = 0;
+    if (ticks.tickIntervalType === 'Integer') {
+      currIndex = majorValues.decimal.length > 4 ? 4 : majorValues.decimal.length - 1;
+    } else {
+      currIndex = majorValues.decimal.length - 1;
+    }
+    ticks.major = majorValues.decimal[currIndex];
+  }
+  graph.fraction = ticks.tickIntervalType === 'Fraction' && ticks.major < 1;
+  return { ...graph, ticks };
+};
+
+/*
+ * This function is duplicated in configure/main.js
+ * This function will reload ticks data whenever graph object is changed and also sets required tick object
+ * for rendering Ticks Components.
+ * @param graph object containing domain, ticks and width value
+ * @return graph object with updated ticks values
+ * */
+
+export const reloadTicksData = (graph) => {
+  const { domain, ticks = {}, width } = graph;
+  //Set tick interval type if not present for legacy number line models depending upon minor value
+  if (!ticks.tickIntervalType) {
+    if (ticks.minor > 0.5) {
+      ticks.tickIntervalType = 'Integer';
+    } else {
+      ticks.tickIntervalType = 'Decimal';
+    }
+  }
+  // This section will calculate minor and major values array and assign respective value
+  // to different tick types object
+  const minorLimits = getMinorLimits(domain, width);
+  if (minorLimits.min >= 1) {
+    /*
+     * In this scenario only integer tick will be enabled
+     * */
+    ticks.tickIntervalType = 'Integer';
+    ticks.minor =
+      ticks.minor < 1
+        ? math.number(math.ceil(minorLimits.min))
+        : ticks.minor >= math.number(math.ceil(minorLimits.min)) &&
+          ticks.minor <= math.number(math.floor(minorLimits.max))
+        ? ticks.minor
+        : math.number(math.ceil(minorLimits.min));
+    ticks.integerTick = ticks.minor;
+    const minorValues = { decimal: [], fraction: [] };
+    ticks.fractionTick = '0';
+    ticks.decimalTick = 0;
+  } else if (minorLimits.min >= 0 && minorLimits.max < 1) {
+    /*
+     * In this scenario only decimal or fraction tick will be enabled
+     * */
+    if (ticks.tickIntervalType === 'Integer') {
+      ticks.tickIntervalType = 'Fraction';
+    }
+    const minorValues = generateMinorValues(minorLimits);
+    let minValue = math.number(math.fraction(minorValues.fraction[0]));
+    let maxValue = math.number(math.fraction(minorValues.fraction[minorValues.fraction.length - 1]));
+    if (ticks.minor < minValue || ticks.minor > maxValue) {
+      switch (ticks.tickIntervalType) {
+        case 'Fraction':
+          ticks.minor = math.number(math.fraction(minorValues.fraction[minorValues.fraction.length - 1]));
+          ticks.fractionTick = minorValues.fraction[minorValues.fraction.length - 1];
+          ticks.decimalTick = minorValues.decimal[0];
+          break;
+        case 'Decimal':
+        case 'Integer':
+          ticks.minor = minorValues.decimal[minorValues.decimal.length - 1];
+          ticks.decimalTick = minorValues.decimal[minorValues.decimal.length - 1];
+          ticks.fractionTick = minorValues.fraction[0];
+      }
+    } else {
+      switch (ticks.tickIntervalType) {
+        case 'Fraction':
+          let fraction = math.fraction(math.number(ticks.minor));
+          ticks.fractionTick = fraction.n + '/' + fraction.d;
+          ticks.decimalTick = ticks.decimalTick ? ticks.decimalTick : minorValues.decimal[0];
+          break;
+        case 'Decimal':
+        case 'Integer':
+          ticks.decimalTick = ticks.minor;
+          ticks.fractionTick = ticks.fractionTick ? ticks.fractionTick : minorValues.fraction[0];
+      }
+    }
+    ticks.integerTick = 1;
+  } else if (minorLimits.min < 1 && minorLimits.max >= 1) {
+    /*
+     * In this scenario all integer, decimal or fraction tick will be enabled
+     * */
+    const minorValues = generateMinorValues(minorLimits);
+    if (!(ticks.minor >= minorLimits.min && ticks.minor <= minorLimits.max)) {
+      if (minorLimits.min > 0.5) {
+        ticks.tickIntervalType = 'Integer';
+      }
+      switch (ticks.tickIntervalType) {
+        case 'Integer':
+          ticks.minor = math.number(math.ceil(minorLimits.min));
+          ticks.integerTick = ticks.minor;
+          ticks.decimalTick = minorLimits.min > 0.5 ? 0 : minorValues.decimal[0];
+          ticks.fractionTick = minorLimits.min > 0.5 ? '0' : minorValues.fraction[0];
+          break;
+        case 'Decimal':
+          ticks.minor = minorValues.decimal[0];
+          ticks.integerTick = 1;
+          ticks.decimalTick = ticks.minor;
+          ticks.fractionTick = minorValues.fraction[0];
+          break;
+        case 'Fraction':
+          ticks.minor = math.number(math.fraction(minorValues.fraction[0]));
+          ticks.integerTick = 1;
+          ticks.decimalTick = minorValues.decimal[0];
+          ticks.fractionTick = minorValues.fraction[0];
+      }
+    } else {
+      switch (ticks.tickIntervalType) {
+        case 'Integer':
+          ticks.integerTick = ticks.minor;
+          ticks.decimalTick = minorLimits.min > 0.5 ? 0 : minorValues.decimal[0];
+          ticks.fractionTick = minorLimits.min > 0.5 ? '0' : minorValues.fraction[0];
+          break;
+        case 'Decimal':
+          ticks.integerTick = 1;
+          ticks.decimalTick = ticks.minor;
+          ticks.fractionTick = minorValues.fraction[0];
+          break;
+        case 'Fraction':
+          ticks.integerTick = 1;
+          ticks.decimalTick = minorValues.decimal[0];
+          let fraction = math.fraction(math.number(ticks.minor));
+          ticks.fractionTick = fraction.n + '/' + fraction.d;
+      }
+    }
+  }
+  return updateMajorValue({ ...graph, ticks });
+};

package/src/delivery/data-converter.ts

@@ -0,0 +1,88 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/src/data-converter.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+export const lineIsSwitched = (line) => {
+  let { position } = line;
+  return position.left > position.right;
+};
+
+export const switchGraphLine = (line) => {
+  let { position } = line;
+
+  if (position.left < position.right) {
+    return line;
+  }
+
+  let { leftPoint: newRightPoint, rightPoint: newLeftPoint } = line;
+
+  return {
+    leftPoint: newLeftPoint,
+    rightPoint: newRightPoint,
+    position: switchPosition(position),
+    type: 'line',
+  };
+};
+
+export const switchPosition = (p) => {
+  let { left: newRight, right: newLeft } = p;
+  return { left: newLeft, right: newRight };
+};
+
+export const toSessionFormat = (gf) => {
+  if (gf.type === 'point') {
+    return {
+      type: 'point',
+      pointType: gf.pointType,
+      domainPosition: gf.position,
+    };
+  } else if (gf.type === 'line') {
+    return {
+      type: 'line',
+      size: gf.position.right - gf.position.left,
+      domainPosition: gf.position.left,
+      leftPoint: gf.leftPoint,
+      rightPoint: gf.rightPoint,
+    };
+  } else if (gf.type === 'ray') {
+    return {
+      type: 'ray',
+      domainPosition: gf.position,
+      pointType: gf.pointType,
+      direction: gf.direction,
+    };
+  }
+};
+
+export const toGraphFormat = (sf) => {
+  if (sf.type === 'point') {
+    return {
+      type: 'point',
+      pointType: sf.pointType,
+      position: sf.domainPosition,
+    };
+  } else if (sf.type === 'line') {
+    return {
+      type: 'line',
+      position: {
+        left: sf.domainPosition,
+        right: sf.domainPosition + sf.size,
+      },
+      leftPoint: sf.leftPoint,
+      rightPoint: sf.rightPoint,
+    };
+  } else if (sf.type === 'ray') {
+    return {
+      type: 'ray',
+      position: sf.domainPosition,
+      pointType: sf.pointType,
+      direction: sf.direction,
+    };
+  }
+};

package/src/delivery/draggable/index.ts

@@ -0,0 +1,116 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/src/draggable/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+// Draggable.jsx
+import React from 'react';
+import { useDraggable, useDndMonitor } from '@dnd-kit/core';
+
+/**
+ * Shared dnd-kit wrapper for Line + Point.
+ *
+ * Props:
+ *  - id: string (unique)
+ *  - disabled: boolean
+ *  - grid: [stepX] (like grid={[is]})
+ *  - bounds: { left: number, right: number } in px (like scaledLineBounds)
+ *  - onMouseDown: (event) => void
+ *  - onDragStart?: () => void
+ *  - onDragMove?: (deltaX: number) => void      // snapped + clamped
+ *  - onDragEnd?: (deltaX: number) => void       // snapped + clamped
+ *  - children: ({ setNodeRef, attributes, listeners, translateX, isDragging, onMouseDown }) => ReactNode
+ */
+export function Draggable({
+  id,
+  disabled,
+  grid,
+  bounds,
+  onMouseDown,
+  onDragStart,
+  onDragMove,
+  onDragEnd,
+  children,
+}) {
+  const { attributes, listeners, setNodeRef, transform } = useDraggable({
+    id,
+    disabled,
+  });
+
+  const step = grid && grid[0] ? grid[0] : null;
+
+  // current transform.x from dnd-kit
+  let rawX = transform?.x ?? 0;
+
+  // grid snapping (grid={[step]})
+  if (step) {
+    rawX = Math.round(rawX / step) * step;
+  }
+
+  // clamp to bounds in px
+  if (bounds) {
+    if (typeof bounds.left === 'number') {
+      rawX = Math.max(bounds.left, rawX);
+    }
+    if (typeof bounds.right === 'number') {
+      rawX = Math.min(bounds.right, rawX);
+    }
+  }
+
+  const translateX = rawX;
+  const isDragging = !!transform;
+
+  // helpers to apply same snap+clamp to deltaX before callbacks
+  const snapClampDeltaX = (deltaX) => {
+    let x = deltaX;
+    if (step) {
+      x = Math.round(x / step) * step;
+    }
+    if (bounds) {
+      if (typeof bounds.left === 'number') {
+        x = Math.max(bounds.left, x);
+      }
+      if (typeof bounds.right === 'number') {
+        x = Math.min(bounds.right, x);
+      }
+    }
+    return x;
+  };
+
+  useDndMonitor({
+    onDragStart(event) {
+      if (event.active.id !== id || disabled) return;
+      onDragStart?.();
+    },
+    onDragMove(event) {
+      if (event.active.id !== id || disabled) return;
+      const deltaX = event.delta.x || 0;
+      onDragMove?.(snapClampDeltaX(deltaX));
+    },
+    onDragEnd(event) {
+      if (event.active.id !== id || disabled) return;
+      const deltaX = event.delta.x || 0;
+      onDragEnd?.(snapClampDeltaX(deltaX));
+    },
+  });
+
+  const handleMouseDown = (e) => {
+    // same as before: prevent text selection
+    e.nativeEvent.preventDefault();
+    onMouseDown?.(e);
+  };
+
+  return children({
+    setNodeRef,
+    attributes,
+    listeners,
+    translateX,
+    isDragging,
+    onMouseDown: handleMouseDown,
+  });
+}