hyperprop-charting-library 0.1.18 → 0.1.20

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.
Files changed (9) hide show
  1. package/dist/hyperprop-charting-library.cjs +24 -5
  2. package/dist/hyperprop-charting-library.d.ts +1 -0
  3. package/dist/hyperprop-charting-library.js +24 -5
  4. package/dist/index.cjs +24 -5
  5. package/dist/index.d.cts +1 -0
  6. package/dist/index.d.ts +1 -0
  7. package/dist/index.js +24 -5
  8. package/docs/API.md +1 -0
  9. package/package.json +1 -1
package/dist/hyperprop-charting-library.cjs CHANGED
@@ -104,6 +104,7 @@ var DEFAULT_ORDER_LINE_OPTIONS = {
104
104
  labelBorderRadius: 3,
105
105
  showCloseButton: true,
106
106
  widgetPosition: "left",
107
+ widgetPaddingRight: 10,
107
108
  draggable: false,
108
109
  actionButtonAction: "execute",
109
110
  actionButtonTextColor: "#dbeafe",
@@ -630,7 +631,16 @@ function createChart(element, options = {}) {
630
631
  const closeWidth = showCloseButton ? 24 : 0;
631
632
  const mainWidgetWidth = qtyWidth + centerWidth + closeWidth;
632
633
  const totalWidth = mainWidgetWidth + actionButtonsGap + actionButtonsTotalWidth;
633
- const rightMarginInsideChart = 10;
634
+ const crosshair = { ...DEFAULT_CROSSHAIR_OPTIONS, ...mergedOptions.crosshair ?? {} };
635
+ const crosshairActionInset = crosshair.visible && crosshair.showPriceLabel && crosshair.showPriceActionButton ? Math.max(
636
+ 0,
637
+ Math.round(crosshair.priceActionButtonGap) + (clamp(Math.round(crosshair.priceActionButtonSize), 12, Math.max(12, labelHeight - 4)) + 10) - 4
638
+ ) + 6 : 0;
639
+ const rightMarginInsideChart = Math.max(
640
+ 0,
641
+ mergedLine.widgetPaddingRight,
642
+ crosshairActionInset
643
+ );
634
644
  const maxWidgetX = chartRight - totalWidth - rightMarginInsideChart;
635
645
  const leftWidgetXBase = chartLeft + 8;
636
646
  let leftWidgetX = leftWidgetXBase;
@@ -1519,7 +1529,6 @@ function createChart(element, options = {}) {
1519
1529
  lastPointerX = point.x;
1520
1530
  lastPointerY = point.y;
1521
1531
  canvas.setPointerCapture(event.pointerId);
1522
- setCrosshairPoint(null);
1523
1532
  };
1524
1533
  const onPointerMove = (event) => {
1525
1534
  const point = getCanvasPoint(event);
@@ -1601,7 +1610,7 @@ function createChart(element, options = {}) {
1601
1610
  }
1602
1611
  const hoverRegion = getHitRegion(point.x, point.y);
1603
1612
  if (hoverRegion === "plot") {
1604
- canvas.style.cursor = "default";
1613
+ canvas.style.cursor = doubleClickEnabled ? "default" : "crosshair";
1605
1614
  setCrosshairPoint(point);
1606
1615
  emitCrosshairMove(point.x, point.y, "plot");
1607
1616
  } else if (hoverRegion === "x-axis") {
@@ -1621,7 +1630,7 @@ function createChart(element, options = {}) {
1621
1630
  const deltaX = point.x - lastPointerX;
1622
1631
  const deltaY = point.y - lastPointerY;
1623
1632
  if (dragMode === "plot") {
1624
- canvas.style.cursor = "default";
1633
+ canvas.style.cursor = "grabbing";
1625
1634
  pan(deltaX, deltaY, true, true);
1626
1635
  setCrosshairPoint(null);
1627
1636
  } else if (dragMode === "x-axis") {
@@ -1679,7 +1688,6 @@ function createChart(element, options = {}) {
1679
1688
  dragMode = null;
1680
1689
  activePointerId = null;
1681
1690
  canvas.style.cursor = "default";
1682
- setCrosshairPoint(null);
1683
1691
  if (event && pointerDownInfo && event.pointerId === pointerDownInfo.pointerId) {
1684
1692
  if (!pointerDownInfo.moved) {
1685
1693
  const clickPrice = pointerDownInfo.region === "plot" ? Number(priceFromCanvasY(pointerDownInfo.y).toFixed(2)) : void 0;
@@ -1689,10 +1697,21 @@ function createChart(element, options = {}) {
1689
1697
  ...clickPrice === void 0 ? {} : { price: clickPrice },
1690
1698
  region: pointerDownInfo.region
1691
1699
  });
1700
+ if (pointerDownInfo.region === "plot") {
1701
+ const clickPoint = { x: pointerDownInfo.x, y: pointerDownInfo.y };
1702
+ setCrosshairPoint(clickPoint);
1703
+ emitCrosshairMove(clickPoint.x, clickPoint.y, "plot");
1704
+ canvas.style.cursor = doubleClickEnabled ? "default" : "crosshair";
1705
+ } else {
1706
+ setCrosshairPoint(null);
1707
+ }
1708
+ } else {
1709
+ setCrosshairPoint(null);
1692
1710
  }
1693
1711
  pointerDownInfo = null;
1694
1712
  } else if (!event) {
1695
1713
  pointerDownInfo = null;
1714
+ setCrosshairPoint(null);
1696
1715
  }
1697
1716
  };
1698
1717
  const onWheel = (event) => {
package/dist/hyperprop-charting-library.d.ts CHANGED
@@ -126,6 +126,7 @@ interface OrderLineOptions {
126
126
  labelBorderRadius?: number;
127
127
  showCloseButton?: boolean;
128
128
  widgetPosition?: "left" | "center" | "right";
129
+ widgetPaddingRight?: number;
129
130
  draggable?: boolean;
130
131
  actionButtonText?: string;
131
132
  actionButtonAction?: "execute" | "cancel" | "close" | string;
package/dist/hyperprop-charting-library.js CHANGED
@@ -80,6 +80,7 @@ var DEFAULT_ORDER_LINE_OPTIONS = {
80
80
  labelBorderRadius: 3,
81
81
  showCloseButton: true,
82
82
  widgetPosition: "left",
83
+ widgetPaddingRight: 10,
83
84
  draggable: false,
84
85
  actionButtonAction: "execute",
85
86
  actionButtonTextColor: "#dbeafe",
@@ -606,7 +607,16 @@ function createChart(element, options = {}) {
606
607
  const closeWidth = showCloseButton ? 24 : 0;
607
608
  const mainWidgetWidth = qtyWidth + centerWidth + closeWidth;
608
609
  const totalWidth = mainWidgetWidth + actionButtonsGap + actionButtonsTotalWidth;
609
- const rightMarginInsideChart = 10;
610
+ const crosshair = { ...DEFAULT_CROSSHAIR_OPTIONS, ...mergedOptions.crosshair ?? {} };
611
+ const crosshairActionInset = crosshair.visible && crosshair.showPriceLabel && crosshair.showPriceActionButton ? Math.max(
612
+ 0,
613
+ Math.round(crosshair.priceActionButtonGap) + (clamp(Math.round(crosshair.priceActionButtonSize), 12, Math.max(12, labelHeight - 4)) + 10) - 4
614
+ ) + 6 : 0;
615
+ const rightMarginInsideChart = Math.max(
616
+ 0,
617
+ mergedLine.widgetPaddingRight,
618
+ crosshairActionInset
619
+ );
610
620
  const maxWidgetX = chartRight - totalWidth - rightMarginInsideChart;
611
621
  const leftWidgetXBase = chartLeft + 8;
612
622
  let leftWidgetX = leftWidgetXBase;
@@ -1495,7 +1505,6 @@ function createChart(element, options = {}) {
1495
1505
  lastPointerX = point.x;
1496
1506
  lastPointerY = point.y;
1497
1507
  canvas.setPointerCapture(event.pointerId);
1498
- setCrosshairPoint(null);
1499
1508
  };
1500
1509
  const onPointerMove = (event) => {
1501
1510
  const point = getCanvasPoint(event);
@@ -1577,7 +1586,7 @@ function createChart(element, options = {}) {
1577
1586
  }
1578
1587
  const hoverRegion = getHitRegion(point.x, point.y);
1579
1588
  if (hoverRegion === "plot") {
1580
- canvas.style.cursor = "default";
1589
+ canvas.style.cursor = doubleClickEnabled ? "default" : "crosshair";
1581
1590
  setCrosshairPoint(point);
1582
1591
  emitCrosshairMove(point.x, point.y, "plot");
1583
1592
  } else if (hoverRegion === "x-axis") {
@@ -1597,7 +1606,7 @@ function createChart(element, options = {}) {
1597
1606
  const deltaX = point.x - lastPointerX;
1598
1607
  const deltaY = point.y - lastPointerY;
1599
1608
  if (dragMode === "plot") {
1600
- canvas.style.cursor = "default";
1609
+ canvas.style.cursor = "grabbing";
1601
1610
  pan(deltaX, deltaY, true, true);
1602
1611
  setCrosshairPoint(null);
1603
1612
  } else if (dragMode === "x-axis") {
@@ -1655,7 +1664,6 @@ function createChart(element, options = {}) {
1655
1664
  dragMode = null;
1656
1665
  activePointerId = null;
1657
1666
  canvas.style.cursor = "default";
1658
- setCrosshairPoint(null);
1659
1667
  if (event && pointerDownInfo && event.pointerId === pointerDownInfo.pointerId) {
1660
1668
  if (!pointerDownInfo.moved) {
1661
1669
  const clickPrice = pointerDownInfo.region === "plot" ? Number(priceFromCanvasY(pointerDownInfo.y).toFixed(2)) : void 0;
@@ -1665,10 +1673,21 @@ function createChart(element, options = {}) {
1665
1673
  ...clickPrice === void 0 ? {} : { price: clickPrice },
1666
1674
  region: pointerDownInfo.region
1667
1675
  });
1676
+ if (pointerDownInfo.region === "plot") {
1677
+ const clickPoint = { x: pointerDownInfo.x, y: pointerDownInfo.y };
1678
+ setCrosshairPoint(clickPoint);
1679
+ emitCrosshairMove(clickPoint.x, clickPoint.y, "plot");
1680
+ canvas.style.cursor = doubleClickEnabled ? "default" : "crosshair";
1681
+ } else {
1682
+ setCrosshairPoint(null);
1683
+ }
1684
+ } else {
1685
+ setCrosshairPoint(null);
1668
1686
  }
1669
1687
  pointerDownInfo = null;
1670
1688
  } else if (!event) {
1671
1689
  pointerDownInfo = null;
1690
+ setCrosshairPoint(null);
1672
1691
  }
1673
1692
  };
1674
1693
  const onWheel = (event) => {
package/dist/index.cjs CHANGED
@@ -104,6 +104,7 @@ var DEFAULT_ORDER_LINE_OPTIONS = {
104
104
  labelBorderRadius: 3,
105
105
  showCloseButton: true,
106
106
  widgetPosition: "left",
107
+ widgetPaddingRight: 10,
107
108
  draggable: false,
108
109
  actionButtonAction: "execute",
109
110
  actionButtonTextColor: "#dbeafe",
@@ -630,7 +631,16 @@ function createChart(element, options = {}) {
630
631
  const closeWidth = showCloseButton ? 24 : 0;
631
632
  const mainWidgetWidth = qtyWidth + centerWidth + closeWidth;
632
633
  const totalWidth = mainWidgetWidth + actionButtonsGap + actionButtonsTotalWidth;
633
- const rightMarginInsideChart = 10;
634
+ const crosshair = { ...DEFAULT_CROSSHAIR_OPTIONS, ...mergedOptions.crosshair ?? {} };
635
+ const crosshairActionInset = crosshair.visible && crosshair.showPriceLabel && crosshair.showPriceActionButton ? Math.max(
636
+ 0,
637
+ Math.round(crosshair.priceActionButtonGap) + (clamp(Math.round(crosshair.priceActionButtonSize), 12, Math.max(12, labelHeight - 4)) + 10) - 4
638
+ ) + 6 : 0;
639
+ const rightMarginInsideChart = Math.max(
640
+ 0,
641
+ mergedLine.widgetPaddingRight,
642
+ crosshairActionInset
643
+ );
634
644
  const maxWidgetX = chartRight - totalWidth - rightMarginInsideChart;
635
645
  const leftWidgetXBase = chartLeft + 8;
636
646
  let leftWidgetX = leftWidgetXBase;
@@ -1519,7 +1529,6 @@ function createChart(element, options = {}) {
1519
1529
  lastPointerX = point.x;
1520
1530
  lastPointerY = point.y;
1521
1531
  canvas.setPointerCapture(event.pointerId);
1522
- setCrosshairPoint(null);
1523
1532
  };
1524
1533
  const onPointerMove = (event) => {
1525
1534
  const point = getCanvasPoint(event);
@@ -1601,7 +1610,7 @@ function createChart(element, options = {}) {
1601
1610
  }
1602
1611
  const hoverRegion = getHitRegion(point.x, point.y);
1603
1612
  if (hoverRegion === "plot") {
1604
- canvas.style.cursor = "default";
1613
+ canvas.style.cursor = doubleClickEnabled ? "default" : "crosshair";
1605
1614
  setCrosshairPoint(point);
1606
1615
  emitCrosshairMove(point.x, point.y, "plot");
1607
1616
  } else if (hoverRegion === "x-axis") {
@@ -1621,7 +1630,7 @@ function createChart(element, options = {}) {
1621
1630
  const deltaX = point.x - lastPointerX;
1622
1631
  const deltaY = point.y - lastPointerY;
1623
1632
  if (dragMode === "plot") {
1624
- canvas.style.cursor = "default";
1633
+ canvas.style.cursor = "grabbing";
1625
1634
  pan(deltaX, deltaY, true, true);
1626
1635
  setCrosshairPoint(null);
1627
1636
  } else if (dragMode === "x-axis") {
@@ -1679,7 +1688,6 @@ function createChart(element, options = {}) {
1679
1688
  dragMode = null;
1680
1689
  activePointerId = null;
1681
1690
  canvas.style.cursor = "default";
1682
- setCrosshairPoint(null);
1683
1691
  if (event && pointerDownInfo && event.pointerId === pointerDownInfo.pointerId) {
1684
1692
  if (!pointerDownInfo.moved) {
1685
1693
  const clickPrice = pointerDownInfo.region === "plot" ? Number(priceFromCanvasY(pointerDownInfo.y).toFixed(2)) : void 0;
@@ -1689,10 +1697,21 @@ function createChart(element, options = {}) {
1689
1697
  ...clickPrice === void 0 ? {} : { price: clickPrice },
1690
1698
  region: pointerDownInfo.region
1691
1699
  });
1700
+ if (pointerDownInfo.region === "plot") {
1701
+ const clickPoint = { x: pointerDownInfo.x, y: pointerDownInfo.y };
1702
+ setCrosshairPoint(clickPoint);
1703
+ emitCrosshairMove(clickPoint.x, clickPoint.y, "plot");
1704
+ canvas.style.cursor = doubleClickEnabled ? "default" : "crosshair";
1705
+ } else {
1706
+ setCrosshairPoint(null);
1707
+ }
1708
+ } else {
1709
+ setCrosshairPoint(null);
1692
1710
  }
1693
1711
  pointerDownInfo = null;
1694
1712
  } else if (!event) {
1695
1713
  pointerDownInfo = null;
1714
+ setCrosshairPoint(null);
1696
1715
  }
1697
1716
  };
1698
1717
  const onWheel = (event) => {
package/dist/index.d.cts CHANGED
@@ -126,6 +126,7 @@ interface OrderLineOptions {
126
126
  labelBorderRadius?: number;
127
127
  showCloseButton?: boolean;
128
128
  widgetPosition?: "left" | "center" | "right";
129
+ widgetPaddingRight?: number;
129
130
  draggable?: boolean;
130
131
  actionButtonText?: string;
131
132
  actionButtonAction?: "execute" | "cancel" | "close" | string;
package/dist/index.d.ts CHANGED
@@ -126,6 +126,7 @@ interface OrderLineOptions {
126
126
  labelBorderRadius?: number;
127
127
  showCloseButton?: boolean;
128
128
  widgetPosition?: "left" | "center" | "right";
129
+ widgetPaddingRight?: number;
129
130
  draggable?: boolean;
130
131
  actionButtonText?: string;
131
132
  actionButtonAction?: "execute" | "cancel" | "close" | string;
package/dist/index.js CHANGED
@@ -80,6 +80,7 @@ var DEFAULT_ORDER_LINE_OPTIONS = {
80
80
  labelBorderRadius: 3,
81
81
  showCloseButton: true,
82
82
  widgetPosition: "left",
83
+ widgetPaddingRight: 10,
83
84
  draggable: false,
84
85
  actionButtonAction: "execute",
85
86
  actionButtonTextColor: "#dbeafe",
@@ -606,7 +607,16 @@ function createChart(element, options = {}) {
606
607
  const closeWidth = showCloseButton ? 24 : 0;
607
608
  const mainWidgetWidth = qtyWidth + centerWidth + closeWidth;
608
609
  const totalWidth = mainWidgetWidth + actionButtonsGap + actionButtonsTotalWidth;
609
- const rightMarginInsideChart = 10;
610
+ const crosshair = { ...DEFAULT_CROSSHAIR_OPTIONS, ...mergedOptions.crosshair ?? {} };
611
+ const crosshairActionInset = crosshair.visible && crosshair.showPriceLabel && crosshair.showPriceActionButton ? Math.max(
612
+ 0,
613
+ Math.round(crosshair.priceActionButtonGap) + (clamp(Math.round(crosshair.priceActionButtonSize), 12, Math.max(12, labelHeight - 4)) + 10) - 4
614
+ ) + 6 : 0;
615
+ const rightMarginInsideChart = Math.max(
616
+ 0,
617
+ mergedLine.widgetPaddingRight,
618
+ crosshairActionInset
619
+ );
610
620
  const maxWidgetX = chartRight - totalWidth - rightMarginInsideChart;
611
621
  const leftWidgetXBase = chartLeft + 8;
612
622
  let leftWidgetX = leftWidgetXBase;
@@ -1495,7 +1505,6 @@ function createChart(element, options = {}) {
1495
1505
  lastPointerX = point.x;
1496
1506
  lastPointerY = point.y;
1497
1507
  canvas.setPointerCapture(event.pointerId);
1498
- setCrosshairPoint(null);
1499
1508
  };
1500
1509
  const onPointerMove = (event) => {
1501
1510
  const point = getCanvasPoint(event);
@@ -1577,7 +1586,7 @@ function createChart(element, options = {}) {
1577
1586
  }
1578
1587
  const hoverRegion = getHitRegion(point.x, point.y);
1579
1588
  if (hoverRegion === "plot") {
1580
- canvas.style.cursor = "default";
1589
+ canvas.style.cursor = doubleClickEnabled ? "default" : "crosshair";
1581
1590
  setCrosshairPoint(point);
1582
1591
  emitCrosshairMove(point.x, point.y, "plot");
1583
1592
  } else if (hoverRegion === "x-axis") {
@@ -1597,7 +1606,7 @@ function createChart(element, options = {}) {
1597
1606
  const deltaX = point.x - lastPointerX;
1598
1607
  const deltaY = point.y - lastPointerY;
1599
1608
  if (dragMode === "plot") {
1600
- canvas.style.cursor = "default";
1609
+ canvas.style.cursor = "grabbing";
1601
1610
  pan(deltaX, deltaY, true, true);
1602
1611
  setCrosshairPoint(null);
1603
1612
  } else if (dragMode === "x-axis") {
@@ -1655,7 +1664,6 @@ function createChart(element, options = {}) {
1655
1664
  dragMode = null;
1656
1665
  activePointerId = null;
1657
1666
  canvas.style.cursor = "default";
1658
- setCrosshairPoint(null);
1659
1667
  if (event && pointerDownInfo && event.pointerId === pointerDownInfo.pointerId) {
1660
1668
  if (!pointerDownInfo.moved) {
1661
1669
  const clickPrice = pointerDownInfo.region === "plot" ? Number(priceFromCanvasY(pointerDownInfo.y).toFixed(2)) : void 0;
@@ -1665,10 +1673,21 @@ function createChart(element, options = {}) {
1665
1673
  ...clickPrice === void 0 ? {} : { price: clickPrice },
1666
1674
  region: pointerDownInfo.region
1667
1675
  });
1676
+ if (pointerDownInfo.region === "plot") {
1677
+ const clickPoint = { x: pointerDownInfo.x, y: pointerDownInfo.y };
1678
+ setCrosshairPoint(clickPoint);
1679
+ emitCrosshairMove(clickPoint.x, clickPoint.y, "plot");
1680
+ canvas.style.cursor = doubleClickEnabled ? "default" : "crosshair";
1681
+ } else {
1682
+ setCrosshairPoint(null);
1683
+ }
1684
+ } else {
1685
+ setCrosshairPoint(null);
1668
1686
  }
1669
1687
  pointerDownInfo = null;
1670
1688
  } else if (!event) {
1671
1689
  pointerDownInfo = null;
1690
+ setCrosshairPoint(null);
1672
1691
  }
1673
1692
  };
1674
1693
  const onWheel = (event) => {
package/docs/API.md CHANGED
@@ -205,6 +205,7 @@ Common optional fields:
205
205
  - `labelBorderRadius?: number` (default `3`)
206
206
  - `showCloseButton?: boolean` (default `true`)
207
207
  - `widgetPosition?: "left" | "center" | "right"` (default `"left"`)
208
+ - `widgetPaddingRight?: number` (default `10`, extra right margin when `widgetPosition` is `"right"`)
208
209
  - `draggable?: boolean` (default `false`)
209
210
 
210
211
  Legacy single action button:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hyperprop-charting-library",
3
- "version": "0.1.18",
3
+ "version": "0.1.20",
4
4
  "description": "Lightweight TypeScript charting core",
5
5
  "type": "module",
6
6
  "main": "./dist/hyperprop-charting-library.cjs",