@design.estate/dees-catalog 3.98.1 → 3.99.1

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.98.1',
+  version: '3.99.1',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

package/ts_web/elements/00group-chart/dees-chart-area/component.ts

@@ -33,6 +33,11 @@ export type TChartPriceLine = 'avg' | 'max';
 
 export const CHART_LEGEND_STATS: TChartLegendStat[] = ['latest', 'min', 'max', 'avg'];
 
+export interface IChartSelectedRange {
+  from: number;
+  to: number;
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     'dees-chart-area': DeesChartArea;
@@ -100,6 +105,12 @@ export class DeesChartArea extends DeesElement {
   @property({ type: Array })
   accessor chartLines: TChartPriceLine[] = ['avg', 'max'];
 
+
+  @property({ type: Boolean })
+  accessor rangeSelectionEnabled = false;
+
+  @property({ attribute: false })
+  accessor selectedRange: IChartSelectedRange | null = null;
   private internalChartData: ChartSeriesConfig = [];
   private autoScrollTimer: number | null = null;
   private lcBundle: ILightweightChartsBundle | null = null;
@@ -110,6 +121,62 @@ export class DeesChartArea extends DeesElement {
   private pendingRealtimePrune = false;
   private crosshairMoveHandler: ((param: MouseEventParams) => void) | null = null;
   private chartContainer: HTMLDivElement | null = null;
+  private rangeOverlay: HTMLDivElement | null = null;
+  private rangeResizeObserver: ResizeObserver | null = null;
+  private rangeDrag: { pointerId: number; startX: number; startMs: number } | null = null;
+  private readonly rangePointerDownHandler = (event: PointerEvent): void => {
+    if (!this.rangeSelectionEnabled || event.button !== 0 || !this.chartContainer) return;
+    const x = this.getRangePointerX(event);
+    const timeMs = this.coordinateToEpochMs(x);
+    if (timeMs === null) return;
+    event.preventDefault();
+    this.rangeDrag = { pointerId: event.pointerId, startX: x, startMs: timeMs };
+    try { this.chartContainer.setPointerCapture(event.pointerId); } catch { /* synthetic event */ }
+    window.addEventListener('keydown', this.rangeKeydownHandler);
+    this.paintRangeOverlay(x, x);
+  };
+  private readonly rangePointerMoveHandler = (event: PointerEvent): void => {
+    if (!this.rangeDrag || event.pointerId !== this.rangeDrag.pointerId) return;
+    event.preventDefault();
+    this.paintRangeOverlay(this.rangeDrag.startX, this.getRangePointerX(event));
+  };
+  private readonly rangePointerUpHandler = (event: PointerEvent): void => {
+    const drag = this.rangeDrag;
+    if (!drag || event.pointerId !== drag.pointerId) return;
+    const endX = this.getRangePointerX(event);
+    const endMs = this.coordinateToEpochMs(endX);
+    this.finishRangeDrag(event.pointerId);
+    if (endMs === null || Math.abs(endX - drag.startX) < 4) {
+      this.syncRangeOverlay();
+      return;
+    }
+    const from = Math.min(drag.startMs, endMs);
+    const to = Math.max(drag.startMs, endMs);
+    if (!Number.isSafeInteger(from) || !Number.isSafeInteger(to) || from >= to) {
+      this.syncRangeOverlay();
+      return;
+    }
+    this.dispatchEvent(new CustomEvent<IChartSelectedRange>('range-change', {
+      detail: { from, to },
+      bubbles: true,
+      composed: true,
+    }));
+    this.syncRangeOverlay();
+  };
+  private readonly rangePointerCancelHandler = (event: PointerEvent): void => {
+    if (!this.rangeDrag || event.pointerId !== this.rangeDrag.pointerId) return;
+    this.finishRangeDrag(event.pointerId);
+    this.syncRangeOverlay();
+  };
+  private readonly rangeKeydownHandler = (event: KeyboardEvent): void => {
+    if (event.key !== 'Escape' || !this.rangeDrag) return;
+    const pointerId = this.rangeDrag.pointerId;
+    this.finishRangeDrag(pointerId);
+    this.syncRangeOverlay();
+  };
+  private readonly rangeVisibleTimeChangeHandler = (): void => {
+    this.syncRangeOverlay();
+  };
   private readonly chartMouseLeaveHandler = () => {
     this.chart?.clearCrosshairPosition();
     this.handleCrosshairCleared();
@@ -122,11 +189,15 @@ export class DeesChartArea extends DeesElement {
       this.stopAutoScroll();
       const chart = this.chart;
       const crosshairMoveHandler = this.crosshairMoveHandler;
-      this.chart = null;
       this.crosshairMoveHandler = null;
       this.chartContainer?.removeEventListener('mouseleave', this.chartMouseLeaveHandler);
+      this.teardownRangeSelection();
+      this.chart = null;
+      this.rangeResizeObserver?.disconnect();
+      this.rangeResizeObserver = null;
       this.chartContainer = null;
       this.tooltipEl = null;
+      this.rangeOverlay = null;
       this.crosshairActive = false;
       this.pendingRealtimePrune = false;
       if (crosshairMoveHandler && chart) {
@@ -155,6 +226,90 @@ export class DeesChartArea extends DeesElement {
 
   // --- Helpers ---
 
+  private getRangePointerX(event: PointerEvent): number {
+    const rect = this.chartContainer!.getBoundingClientRect();
+    return Math.min(Math.max(event.clientX - rect.left, 0), rect.width);
+  }
+
+  private coordinateToEpochMs(coordinateArg: number): number | null {
+    const time = this.chart?.timeScale().coordinateToTime(coordinateArg);
+    if (typeof time !== 'number' || !Number.isFinite(time)) return null;
+    const epochMs = Math.round(time * 1000);
+    return Number.isSafeInteger(epochMs) && epochMs >= 0 ? epochMs : null;
+  }
+
+  private paintRangeOverlay(firstXArg: number, secondXArg: number): void {
+    if (!this.rangeOverlay) return;
+    const left = Math.min(firstXArg, secondXArg);
+    const width = Math.abs(secondXArg - firstXArg);
+    this.rangeOverlay.style.display = 'block';
+    this.rangeOverlay.style.left = `${left}px`;
+    this.rangeOverlay.style.width = `${Math.max(width, 1)}px`;
+  }
+
+  private finishRangeDrag(pointerIdArg: number): void {
+    this.rangeDrag = null;
+    window.removeEventListener('keydown', this.rangeKeydownHandler);
+    try { this.chartContainer?.releasePointerCapture(pointerIdArg); } catch { /* already released */ }
+  }
+
+  private setupRangeSelection(): void {
+    if (!this.chartContainer) return;
+    this.rangeOverlay = this.chartContainer.querySelector('.rangeSelectionOverlay');
+    this.chart?.timeScale().subscribeVisibleTimeRangeChange(this.rangeVisibleTimeChangeHandler);
+    this.chartContainer.addEventListener('pointerdown', this.rangePointerDownHandler);
+    this.chartContainer.addEventListener('pointermove', this.rangePointerMoveHandler);
+    this.chartContainer.addEventListener('pointerup', this.rangePointerUpHandler);
+    this.chartContainer.addEventListener('pointercancel', this.rangePointerCancelHandler);
+    this.chartContainer.addEventListener('lostpointercapture', this.rangePointerCancelHandler);
+    this.rangeResizeObserver = new ResizeObserver(() => this.syncRangeOverlay());
+    this.rangeResizeObserver.observe(this.chartContainer);
+    this.syncRangeOverlay();
+  }
+
+  private teardownRangeSelection(): void {
+    if (!this.chartContainer) return;
+    this.chart?.timeScale().unsubscribeVisibleTimeRangeChange(this.rangeVisibleTimeChangeHandler);
+    this.chartContainer.removeEventListener('pointerdown', this.rangePointerDownHandler);
+    this.chartContainer.removeEventListener('pointermove', this.rangePointerMoveHandler);
+    this.chartContainer.removeEventListener('pointerup', this.rangePointerUpHandler);
+    this.chartContainer.removeEventListener('pointercancel', this.rangePointerCancelHandler);
+    this.chartContainer.removeEventListener('lostpointercapture', this.rangePointerCancelHandler);
+    window.removeEventListener('keydown', this.rangeKeydownHandler);
+    if (this.rangeDrag) {
+      try { this.chartContainer.releasePointerCapture(this.rangeDrag.pointerId); } catch { /* no capture */ }
+    }
+    this.rangeDrag = null;
+  }
+
+  private syncRangeOverlay(): void {
+    if (!this.rangeOverlay || !this.chart || !this.rangeSelectionEnabled || !this.selectedRange) {
+      if (this.rangeOverlay) this.rangeOverlay.style.display = 'none';
+      return;
+    }
+    const { from, to } = this.selectedRange;
+    if (
+      !Number.isSafeInteger(from)
+      || !Number.isSafeInteger(to)
+      || from < 0
+      || to <= from
+    ) {
+      this.rangeOverlay.style.display = 'none';
+      return;
+    }
+    const fromCoordinate = this.chart.timeScale().timeToCoordinate(
+      Math.floor(from / 1000) as UTCTimestamp,
+    );
+    const toCoordinate = this.chart.timeScale().timeToCoordinate(
+      Math.floor(to / 1000) as UTCTimestamp,
+    );
+    if (fromCoordinate === null || toCoordinate === null) {
+      this.rangeOverlay.style.display = 'none';
+      return;
+    }
+    this.paintRangeOverlay(fromCoordinate, toCoordinate);
+  }
+
   private convertDataToLC(data: Array<{ x: any; y: number }>): Array<{ time: UTCTimestamp; value: number }> {
     const pointsByTime = new Map<number, { time: UTCTimestamp; value: number }>();
     for (const point of data) {
@@ -580,6 +735,7 @@ export class DeesChartArea extends DeesElement {
       this.internalChartData = canonicalSeries;
       this.recreateSeries(canonicalSeries);
       this.setupTooltip();
+      this.setupRangeSelection();
       this.syncAutoScroll();
     } catch (error) {
       console.error('Failed to initialize chart:', error);
@@ -620,6 +776,13 @@ export class DeesChartArea extends DeesElement {
       this.syncAutoScroll();
     }
 
+    if (
+      changedProperties.has('selectedRange')
+      || changedProperties.has('rangeSelectionEnabled')
+    ) {
+      this.syncRangeOverlay();
+    }
+
     if (changedProperties.has('chartLines') && this.chart) {
       this.refreshPriceLines();
     }

package/ts_web/elements/00group-chart/dees-chart-area/styles.ts

@@ -50,6 +50,16 @@ export const chartAreaStyles = [
         position: absolute;
         inset: 0 0 4px 0;
       }
+      .rangeSelectionOverlay {
+        position: absolute;
+        display: none;
+        top: 0;
+        bottom: 0;
+        z-index: 3;
+        pointer-events: none;
+        background: color-mix(in srgb, var(--dees-color-accent, #3b82f6) 18%, transparent);
+        border-inline: 1px solid color-mix(in srgb, var(--dees-color-accent, #3b82f6) 70%, transparent);
+      }
       .statsBar {
         min-height: 32px;
         padding: 4px 16px;

package/ts_web/elements/00group-chart/dees-chart-area/template.ts

@@ -11,7 +11,9 @@ export const renderChartArea = (component: DeesChartArea): TemplateResult => {
               <dees-icon .icon=${component.isFullPage ? 'lucide:Minimize2' : 'lucide:Maximize2'} .iconSize=${14}></dees-icon>
             </button>
           </div>
-          <div class="chartContainer"></div>
+          <div class="chartContainer">
+            <div class="rangeSelectionOverlay" aria-hidden="true"></div>
+          </div>
           ${component.seriesStats.length > 0 && !component.hideLegend ? html`
             <div slot="footer" class="statsBar">
               ${component.seriesStats.map(s => html`

package/ts_web/elements/00group-dataview/dees-table/dees-table.ts

@@ -116,6 +116,15 @@ export class DeesTable<T> extends DeesElement {
     type: Array,
   })
   accessor dataActions: ITableAction<T>[] = [];
+  private readonly __searchAction: ITableAction<T> = {
+    name: 'Search',
+    iconName: 'lucide:Search',
+    type: ['header'],
+    actionFunc: async () => {
+      const searchGrid = this.shadowRoot!.querySelector('.searchGrid');
+      searchGrid!.classList.toggle('hidden');
+    },
+  };
 
   // schema-first columns API
   @property({ attribute: false })
@@ -854,7 +863,7 @@ export class DeesTable<T> extends DeesElement {
                 ${this.renderSortIndicator(col)}
               </th>`;
           })}
-        ${this.dataActions && this.dataActions.length > 0
+        ${this.__getEffectiveDataActions().length > 0
           ? html`<th class="actionsCol">Actions</th>`
           : html``}
       </tr>
@@ -873,7 +882,7 @@ export class DeesTable<T> extends DeesElement {
                     @input=${(e: Event) => this.setColumnFilter(key, (e.target as HTMLInputElement).value)} />
                 </th>`;
               })}
-            ${this.dataActions && this.dataActions.length > 0
+            ${this.__getEffectiveDataActions().length > 0
               ? html`<th></th>`
               : html``}
           </tr>`
@@ -1512,21 +1521,6 @@ export class DeesTable<T> extends DeesElement {
       this.__syncFloatingHeader();
     }
     if (this.searchable) {
-      const existing = this.dataActions.find((actionArg) => actionArg.type?.includes('header') && actionArg.name === 'Search');
-      if (!existing) {
-        this.dataActions.unshift({
-          name: 'Search',
-          iconName: 'lucide:Search',
-          type: ['header'],
-          actionFunc: async () => {
-            console.log('open search');
-            const searchGrid = this.shadowRoot!.querySelector('.searchGrid');
-            searchGrid!.classList.toggle('hidden');
-          }
-        });
-        console.log(this.dataActions);
-        this.requestUpdate();
-      };
       // wire search inputs
       this.wireSearchInputs();
     }
@@ -1595,7 +1589,9 @@ export class DeesTable<T> extends DeesElement {
       const width = window.getComputedStyle(cell).width;
       if (cell.textContent.includes('Actions')) {
         const neededWidth =
-          this.dataActions.filter((actionArg) => actionArg.type?.includes('inRow')).length * 36;
+          this.__getEffectiveDataActions().filter((actionArg) =>
+            actionArg.type?.includes('inRow')
+          ).length * 36;
         cell.style.width = `${Math.max(neededWidth, 68)}px`;
       } else {
         cell.style.width = width;
@@ -2121,7 +2117,7 @@ export class DeesTable<T> extends DeesElement {
       this.startEditing(cell.item, cell.col);
       return;
     }
-    const dblAction = this.dataActions.find(
+    const dblAction = this.__getEffectiveDataActions().find(
       (action) =>
         action.type?.includes('doubleClick')
         && this.isActionRelevant(action, cell.item)
@@ -2349,9 +2345,21 @@ export class DeesTable<T> extends DeesElement {
     );
   }
 
+  private __getEffectiveDataActions(): ITableAction<T>[] {
+    if (
+      !this.searchable
+      || this.dataActions.some((actionArg) =>
+        actionArg.type?.includes('header') && actionArg.name === 'Search'
+      )
+    ) {
+      return this.dataActions;
+    }
+    return [this.__searchAction, ...this.dataActions];
+  }
+
   getActionsForType(typeArg: ITableAction['type'][0]) {
     const actions: ITableAction[] = [];
-    for (const action of this.dataActions) {
+    for (const action of this.__getEffectiveDataActions()) {
       if (!action.type?.includes(typeArg)) continue;
       actions.push(action);
     }