lit-litelements 2.2.5 → 2.2.6

package/dist/component/chart.lit.d.ts

@@ -20,10 +20,12 @@ interface StockData {
 }
 declare class ChartElement extends LitElement {
     stockData: StockData[];
+    zoomEnabled: boolean;
     chart: Chart | null;
     constructor();
     firstUpdated(): void;
     _resetZoom(): void;
+    _Zoomenalbe(): void;
     willUpdate(changedProperties: {
         has: (arg0: string) => any;
     }): Promise<void>;

package/dist/component/chart.lit.js

@@ -24,6 +24,7 @@ let ChartElement = class ChartElement extends LitElement {
     constructor() {
         super();
         this.stockData = [];
+        this.zoomEnabled = false;
         this.chart = null;
         // Define the custom plugin
         this.customLinePlugin = {
@@ -110,17 +111,6 @@ let ChartElement = class ChartElement extends LitElement {
                         ctx.fillText("Bear", x + 6, y - 6);
                         const stop = currClose * (1 + RISK_PERCENT);
                         const target = currClose - (stop - currClose) * REWARD_RATIO;
-                        const yStop = scales.yPrice.getPixelForValue(stop);
-                        const yTarget = scales.yPrice.getPixelForValue(target);
-                        // // Stop-Loss (SL) line
-                        // ctx.fillStyle = "purple";
-                        // ctx.fillRect(x, yStop, 100, 1); // 100px wide, 1px high
-                        // ctx.font = "bold 12px sans-serif";
-                        // ctx.fillText("BEAR-SL", x + 12, yStop - 4);
-                        // // Take-Profit (TP) line
-                        // ctx.fillStyle = "purple";
-                        // ctx.fillRect(x, yTarget, 100, 1); // 100px wide, 1px high
-                        // ctx.fillText("BEAR-TP", x + 12, yTarget - 4);
                     }
                     ctx.setLineDash([]);
                 }
@@ -136,6 +126,21 @@ let ChartElement = class ChartElement extends LitElement {
         var _a;
         (_a = this.chart) === null || _a === void 0 ? void 0 : _a.resetZoom();
     }
+    _Zoomenalbe() {
+        var _a, _b, _c, _d;
+        if ((_b = (_a = this.chart) === null || _a === void 0 ? void 0 : _a.options.plugins) === null || _b === void 0 ? void 0 : _b.zoom) {
+            const zoomOptions = this.chart.options.plugins.zoom;
+            const newState = !this.zoomEnabled;
+            if ((_c = zoomOptions.zoom) === null || _c === void 0 ? void 0 : _c.wheel)
+                zoomOptions.zoom.wheel.enabled = newState;
+            if ((_d = zoomOptions.zoom) === null || _d === void 0 ? void 0 : _d.pinch)
+                zoomOptions.zoom.pinch.enabled = newState;
+            if (zoomOptions.pan)
+                zoomOptions.pan.enabled = newState;
+            this.zoomEnabled = newState;
+            this.chart.update();
+        }
+    }
     willUpdate(changedProperties) {
         return __awaiter(this, void 0, void 0, function* () {
             if (changedProperties.has("stockData")) {
@@ -397,16 +402,16 @@ let ChartElement = class ChartElement extends LitElement {
                     tooltip: { mode: "index", axis: "x" },
                     zoom: {
                         pan: {
-                            enabled: true,
+                            enabled: false,
                             mode: "xy",
                             modifierKey: undefined, // Optional: only pan while holding Ctrl
                         },
                         zoom: {
                             wheel: {
-                                enabled: true,
+                                enabled: false,
                             },
                             pinch: {
-                                enabled: true,
+                                enabled: false,
                             },
                             mode: "x",
                         },
@@ -420,6 +425,10 @@ let ChartElement = class ChartElement extends LitElement {
     }
     render() {
         return html `
+      <button @click="${this._Zoomenalbe}">
+        ${this.zoomEnabled ? "Disable Zoom" : "Enable Zoom"}
+      </button>
+
       <button @click="${this._resetZoom}">Reset Zoom</button>
       <canvas id="stockChart"></canvas>
     `;
@@ -429,6 +438,10 @@ __decorate([
     property({ type: Array }),
     __metadata("design:type", Array)
 ], ChartElement.prototype, "stockData", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], ChartElement.prototype, "zoomEnabled", void 0);
 ChartElement = __decorate([
     customElement("stock-chart-display"),
     __metadata("design:paramtypes", [])