website: add screenshot feature

websites/default/scripts/chart.js

@@ -21,6 +21,7 @@ const CANDLE = "candle";
  * @param {Elements} args.elements
  * @param {VecsResources} args.vecsResources
  * @param {VecIdToIndexes} args.vecIdToIndexes
+ * @param {Packages} args.packages
  */
 export function init({
   colors,
@@ -32,6 +33,7 @@ export function init({
   webSockets,
   vecsResources,
   vecIdToIndexes,
+  packages,
 }) {
   elements.charts.append(utils.dom.createShadow("left"));
   elements.charts.append(utils.dom.createShadow("right"));
@@ -95,6 +97,33 @@ export function init({
     },
   });
 
+  const chartBottomRightCanvas = Array.from(
+    chart.inner.chartElement().getElementsByTagName("tr"),
+  ).at(-1)?.lastChild?.firstChild?.firstChild;
+  if (chartBottomRightCanvas) {
+    const charts = elements.charts;
+    const domain = window.document.createElement("p");
+    domain.innerText = `${window.location.host}`;
+    domain.id = "domain";
+    const screenshotButton = window.document.createElement("button");
+    screenshotButton.id = "screenshot";
+    const camera = "[ ◉¯]";
+    screenshotButton.innerHTML = camera;
+    screenshotButton.title = "Screenshot";
+    chartBottomRightCanvas.replaceWith(screenshotButton);
+    screenshotButton.addEventListener("click", () => {
+      packages.modernScreenshot().then(async ({ screenshot }) => {
+        elements.body.dataset.screenshot = "true";
+        charts.append(domain);
+        seriesTypeField.hidden = true;
+        await screenshot(charts);
+        charts.removeChild(domain);
+        seriesTypeField.hidden = false;
+        elements.body.dataset.screenshot = "false";
+      });
+    });
+  }
+
   chart.inner.timeScale().subscribeVisibleLogicalRangeChange(
     utils.debounce((t) => {
       if (t) {
@@ -525,6 +554,12 @@ function createIndexSelector({ option, vecIdToIndexes, signals, utils }) {
   });
 
   const fieldset = window.document.createElement("fieldset");
+  fieldset.id = "interval";
+
+  const screenshotSpan = window.document.createElement("span");
+  screenshotSpan.innerText = "interval:";
+  fieldset.append(screenshotSpan);
+
   fieldset.append(field);
   fieldset.dataset.size = "sm";
 

websites/default/scripts/main.js

@@ -3,7 +3,7 @@
 /**
  * @import { Option, PartialChartOption, ChartOption, AnyPartialOption, ProcessedOptionAddons, OptionsTree, SimulationOption, AnySeriesBlueprint, SeriesType } from "./options"
  * @import { Valued,  SingleValueData, CandlestickData, OHLCTuple, Series, ISeries, HistogramData, LineData, BaselineData, LineSeriesPartialOptions, BaselineSeriesPartialOptions, HistogramSeriesPartialOptions, CandlestickSeriesPartialOptions } from "../packages/lightweight-charts/wrapper"
- * @import * as _ from "../packages/leeoniya-ufuzzy/1.0.18/dist/uFuzzy.d.ts"
+ * @import * as _ from "../packages/leeoniya-ufuzzy/1.0.19/dist/uFuzzy.d.ts"
  * @import { SerializedChartableIndex } from "./chart";
  * @import { Signal, Signals, Accessor } from "../packages/solidjs-signals/wrapper";
  * @import { DateIndex, DecadeIndex, DifficultyEpoch, Index, HalvingEpoch, Height, MonthIndex, P2PK33AddressIndex, P2PK65AddressIndex, P2PKHAddressIndex, P2SHAddressIndex, P2MSOutputIndex, P2AAddressIndex, P2TRAddressIndex, P2WPKHAddressIndex, P2WSHAddressIndex, TxIndex, InputIndex, OutputIndex, VecId, WeekIndex, SemesterIndex, YearIndex, VecIdToIndexes, QuarterIndex, EmptyOutputIndex, OpReturnIndex, UnknownOutputIndex } from "./vecid-to-indexes"
@@ -78,10 +78,13 @@ function initPackages() {
       return import("../packages/lean-qr/2.5.0/index.mjs").then((d) => d);
     },
     async ufuzzy() {
-      return import("../packages/leeoniya-ufuzzy/1.0.18/dist/uFuzzy.mjs").then(
+      return import("../packages/leeoniya-ufuzzy/1.0.19/dist/uFuzzy.mjs").then(
         ({ default: d }) => d,
       );
     },
+    async modernScreenshot() {
+      return import("../packages/modern-screenshot/wrapper.js").then((d) => d);
+    },
   };
 
   /**
@@ -106,6 +109,7 @@ function initPackages() {
     lightweightCharts: importPackage("lightweightCharts"),
     leanQr: importPackage("leanQr"),
     ufuzzy: importPackage("ufuzzy"),
+    modernScreenshot: importPackage("modernScreenshot"),
   };
 }
 /**
@@ -2282,6 +2286,7 @@ function main() {
                               webSockets,
                               vecsResources,
                               vecIdToIndexes,
+                              packages,
                             }),
                           ),
                         ),