@primeui/vue-chart 0.0.1-alpha.1

package/dist/chunk-NLXOJSKK.mjs

@@ -0,0 +1,727 @@
+import { useChartMethods } from './chunk-HANSF33Z.mjs';
+import { defineComponent, computed, ref, onBeforeUnmount, watch, openBlock, createElementBlock, normalizeStyle, createElementVNode, Fragment, renderList, createCommentVNode, toDisplayString, unref } from 'vue';
+import { resolveNavigatorConfig, calculateNavigatorLayout, configureCanvasHiDPI, renderNavigatorCanvas, HANDLE_WIDTH, GRIP_LINE_GAP, computeNavigatorJump, computeNavigatorJumpY, hitTestNavigator, computeNavigatorPan, computeNavigatorResizeLeft, computeNavigatorResizeRight, computeNavigatorPanY, computeNavigatorResizeTop, computeNavigatorResizeBottom } from '@primeui/chart-core';
+
+var _hoisted_1 = ["transform"];
+var _hoisted_2 = [
+  "width",
+  "height",
+  "fill"
+];
+var _hoisted_3 = ["id"];
+var _hoisted_4 = ["width", "height"];
+var _hoisted_5 = ["clip-path"];
+var _hoisted_6 = [
+  "x1",
+  "x2",
+  "y2",
+  "stroke"
+];
+var _hoisted_7 = ["clip-path"];
+var _hoisted_8 = [
+  "cx",
+  "cy",
+  "fill"
+];
+var _hoisted_9 = [
+  "x",
+  "y",
+  "width",
+  "height",
+  "fill",
+  "fill-opacity"
+];
+var _hoisted_10 = [
+  "d",
+  "fill",
+  "fill-opacity"
+];
+var _hoisted_11 = ["d", "stroke"];
+var _hoisted_12 = ["clip-path"];
+var _hoisted_13 = ["d", "stroke"];
+var _hoisted_14 = ["clip-path"];
+var _hoisted_15 = [
+  "x",
+  "y",
+  "fill"
+];
+var _hoisted_16 = [
+  "width",
+  "height",
+  "fill"
+];
+var _hoisted_17 = [
+  "y",
+  "width",
+  "height",
+  "fill"
+];
+var _hoisted_18 = [
+  "y",
+  "width",
+  "height",
+  "fill"
+];
+var _hoisted_19 = [
+  "x",
+  "y",
+  "width",
+  "height",
+  "fill"
+];
+var _hoisted_20 = [
+  "x",
+  "y",
+  "width",
+  "height",
+  "fill",
+  "stroke"
+];
+var _hoisted_21 = [
+  "x",
+  "y",
+  "width",
+  "height"
+];
+var _hoisted_22 = [
+  "x",
+  "y",
+  "width",
+  "height"
+];
+var _hoisted_23 = [
+  "x",
+  "y",
+  "width",
+  "height"
+];
+var _hoisted_24 = [
+  "x",
+  "y",
+  "width",
+  "height"
+];
+var _hoisted_25 = { "pointer-events": "none" };
+var _hoisted_26 = [
+  "x1",
+  "y1",
+  "x2",
+  "y2",
+  "stroke"
+];
+var _hoisted_27 = [
+  "x1",
+  "y1",
+  "x2",
+  "y2",
+  "stroke"
+];
+var _hoisted_28 = [
+  "x1",
+  "y1",
+  "x2",
+  "y2",
+  "stroke"
+];
+var _hoisted_29 = [
+  "x1",
+  "y1",
+  "x2",
+  "y2",
+  "stroke"
+];
+var _hoisted_30 = [
+  "width",
+  "height",
+  "fill"
+];
+var _hoisted_31 = [
+  "x",
+  "width",
+  "height",
+  "fill"
+];
+var _hoisted_32 = [
+  "x",
+  "width",
+  "height",
+  "fill",
+  "stroke"
+];
+var _hoisted_33 = [
+  "x",
+  "width",
+  "height"
+];
+var _hoisted_34 = [
+  "x",
+  "width",
+  "height"
+];
+var _hoisted_35 = { "pointer-events": "none" };
+var _hoisted_36 = [
+  "x1",
+  "y1",
+  "x2",
+  "y2",
+  "stroke"
+];
+var _hoisted_37 = [
+  "x1",
+  "y1",
+  "x2",
+  "y2",
+  "stroke"
+];
+var _hoisted_38 = [
+  "x1",
+  "y1",
+  "x2",
+  "y2",
+  "stroke"
+];
+var _hoisted_39 = [
+  "x1",
+  "y1",
+  "x2",
+  "y2",
+  "stroke"
+];
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NavigatorRenderer",
+  props: {
+    area: {},
+    config: {},
+    datasets: {},
+    zoomState: {},
+    updateZoom: { type: Function },
+    chartId: {},
+    renderer: {},
+    locale: {},
+    isTimeAxis: { type: Boolean },
+    tickFormat: { type: [Function, String] }
+  },
+  setup(__props) {
+    const props = __props;
+    const ZONE_CURSORS = {
+      "resize-left": "ew-resize",
+      "resize-right": "ew-resize",
+      "resize-top": "ns-resize",
+      "resize-bottom": "ns-resize",
+      pan: "grab",
+      background: "pointer"
+    };
+    const methods = useChartMethods();
+    const resolved = computed(() => resolveNavigatorConfig(props.config, methods.theme));
+    const w = computed(() => props.area.width);
+    const h = computed(() => props.area.height);
+    const layout = computed(() => calculateNavigatorLayout({
+      x: 0,
+      y: 0,
+      width: w.value,
+      height: h.value
+    }, props.config, props.datasets, props.zoomState, props.isTimeAxis, props.tickFormat, props.locale, methods.theme));
+    const bgFill = computed(() => `var(--p-chart-band-fill, ${resolved.value.backgroundColor})`);
+    const gridStroke = computed(() => `var(--p-chart-grid, ${resolved.value.gridColor})`);
+    const labelFill = computed(() => `var(--p-chart-tick-label-color, ${resolved.value.labelColor})`);
+    const seriesFill = computed(() => `var(--p-chart-navigator-series, ${resolved.value.color})`);
+    const maskFill = computed(() => `var(--p-chart-navigator-mask, ${resolved.value.maskColor})`);
+    const selStroke = computed(() => `var(--p-chart-navigator-selection, ${resolved.value.selectionColor})`);
+    const selFill = computed(() => `var(--p-chart-navigator-selection-fill, ${resolved.value.selectionFill})`);
+    const data = computed(() => layout.value.data);
+    const scales = computed(() => layout.value.scales);
+    const paths = computed(() => layout.value.paths);
+    const selection = computed(() => layout.value.selection);
+    const ticks = computed(() => layout.value.ticks);
+    const additionalSeries = computed(() => layout.value.allSeries.slice(1));
+    const is2DNav = computed(() => data.value?.isNumericAxis ?? false);
+    const clipId = computed(() => `nav-clip-${props.chartId}`);
+    const gripY1 = computed(() => h.value * 0.3);
+    const gripY2 = computed(() => h.value * 0.7);
+    let dragCurrent = null;
+    const isDragging = ref(false);
+    function beginDrag(type, clientX, clientY, target, pointerId) {
+      if (!props.zoomState.x || !scales.value) return;
+      target.setPointerCapture(pointerId);
+      dragCurrent = {
+        type,
+        startClientX: clientX,
+        startClientY: clientY,
+        startMin: props.zoomState.x.min,
+        startMax: props.zoomState.x.max,
+        startMinY: props.zoomState.y?.min ?? 0,
+        startMaxY: props.zoomState.y?.max ?? 0
+      };
+      isDragging.value = true;
+      window.addEventListener("pointermove", handleWindowPointerMove);
+      window.addEventListener("pointerup", handleWindowPointerUp);
+    }
+    function handleWindowPointerMove(e) {
+      if (!dragCurrent || !scales.value || !data.value) return;
+      const deltaX = e.clientX - dragCurrent.startClientX;
+      const deltaY = e.clientY - dragCurrent.startClientY;
+      let xResult;
+      if (dragCurrent.type === "pan") {
+        xResult = computeNavigatorPan(dragCurrent.startMin, dragCurrent.startMax, deltaX, scales.value.x, data.value.xDomain);
+      } else if (dragCurrent.type === "resize-left") {
+        xResult = computeNavigatorResizeLeft(dragCurrent.startMin, dragCurrent.startMax, deltaX, scales.value.x, data.value.xDomain);
+      } else if (dragCurrent.type === "resize-right") {
+        xResult = computeNavigatorResizeRight(dragCurrent.startMin, dragCurrent.startMax, deltaX, scales.value.x, data.value.xDomain);
+      }
+      let yResult = props.zoomState.y;
+      if (is2DNav.value && data.value.yDomain) {
+        if (dragCurrent.type === "pan") {
+          const yr = computeNavigatorPanY(dragCurrent.startMinY, dragCurrent.startMaxY, deltaY, scales.value.y, data.value.yDomain);
+          yResult = {
+            min: yr.min,
+            max: yr.max
+          };
+        } else if (dragCurrent.type === "resize-top") {
+          const yr = computeNavigatorResizeTop(dragCurrent.startMinY, dragCurrent.startMaxY, deltaY, scales.value.y, data.value.yDomain);
+          yResult = {
+            min: yr.min,
+            max: yr.max
+          };
+        } else if (dragCurrent.type === "resize-bottom") {
+          const yr = computeNavigatorResizeBottom(dragCurrent.startMinY, dragCurrent.startMaxY, deltaY, scales.value.y, data.value.yDomain);
+          yResult = {
+            min: yr.min,
+            max: yr.max
+          };
+        }
+      }
+      props.updateZoom({
+        x: xResult ? {
+          min: xResult.min,
+          max: xResult.max
+        } : props.zoomState.x,
+        y: yResult
+      });
+    }
+    function handleWindowPointerUp() {
+      dragCurrent = null;
+      isDragging.value = false;
+      window.removeEventListener("pointermove", handleWindowPointerMove);
+      window.removeEventListener("pointerup", handleWindowPointerUp);
+    }
+    onBeforeUnmount(() => {
+      window.removeEventListener("pointermove", handleWindowPointerMove);
+      window.removeEventListener("pointerup", handleWindowPointerUp);
+    });
+    function startDragSvg(type, e) {
+      e.preventDefault();
+      e.stopPropagation();
+      beginDrag(type, e.clientX, e.clientY, e.target, e.pointerId);
+    }
+    function handleBackgroundClickSvg(e) {
+      if (!scales.value || !data.value) return;
+      const svg = e.target.closest("svg");
+      if (!svg) return;
+      const rect = svg.getBoundingClientRect();
+      const clickX = e.clientX - rect.left - props.area.x;
+      const clickY = e.clientY - rect.top - props.area.y;
+      const currentWidth = props.zoomState.x ? props.zoomState.x.max - props.zoomState.x.min : null;
+      const xResult = computeNavigatorJump(clickX, currentWidth, scales.value.x, data.value.xDomain);
+      let yResult = props.zoomState.y;
+      if (is2DNav.value && data.value.yDomain) {
+        const currentHeight = props.zoomState.y ? props.zoomState.y.max - props.zoomState.y.min : null;
+        yResult = computeNavigatorJumpY(clickY, currentHeight, scales.value.y, data.value.yDomain);
+      }
+      props.updateZoom({
+        x: {
+          min: xResult.min,
+          max: xResult.max
+        },
+        y: yResult
+      });
+    }
+    const canvasRef = ref(null);
+    watch([
+      canvasRef,
+      layout,
+      w,
+      h
+    ], () => {
+      if (props.renderer !== "canvas" || !canvasRef.value) return;
+      configureCanvasHiDPI(canvasRef.value, w.value, h.value);
+      const ctx = canvasRef.value.getContext("2d");
+      if (!ctx) return;
+      ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height);
+      renderNavigatorCanvas(ctx, layout.value);
+    }, { flush: "post" });
+    function handleCanvasPointerDown(e) {
+      if (!scales.value || !data.value) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const rect = e.target.getBoundingClientRect();
+      const localX = e.clientX - rect.left;
+      const localY = e.clientY - rect.top;
+      const zone = hitTestNavigator(localX, selection.value, localY, resolved.value.handleWidth);
+      if (!zone) return;
+      if (zone === "background") {
+        const currentWidth = props.zoomState.x ? props.zoomState.x.max - props.zoomState.x.min : null;
+        const xResult = computeNavigatorJump(localX, currentWidth, scales.value.x, data.value.xDomain);
+        let yResult = props.zoomState.y;
+        if (is2DNav.value && data.value.yDomain) {
+          const currentHeight = props.zoomState.y ? props.zoomState.y.max - props.zoomState.y.min : null;
+          yResult = computeNavigatorJumpY(localY, currentHeight, scales.value.y, data.value.yDomain);
+        }
+        props.updateZoom({
+          x: {
+            min: xResult.min,
+            max: xResult.max
+          },
+          y: yResult
+        });
+      } else {
+        beginDrag(zone, e.clientX, e.clientY, e.target, e.pointerId);
+      }
+    }
+    function handleCanvasPointerMoveCursor(e) {
+      if (dragCurrent) {
+        const dt = dragCurrent.type;
+        e.target.style.cursor = dt === "pan" ? "grabbing" : dt === "resize-top" || dt === "resize-bottom" ? "ns-resize" : "ew-resize";
+        return;
+      }
+      const rect = e.target.getBoundingClientRect();
+      const localX = e.clientX - rect.left;
+      const localY = e.clientY - rect.top;
+      const zone = hitTestNavigator(localX, selection.value, localY, resolved.value.handleWidth);
+      e.target.style.cursor = zone ? ZONE_CURSORS[zone] : "default";
+    }
+    return (_ctx, _cache) => {
+      return __props.renderer === "canvas" ? (openBlock(), createElementBlock("canvas", {
+        key: 0,
+        ref: (el) => {
+          canvasRef.value = el;
+        },
+        style: normalizeStyle({
+          position: "absolute",
+          left: `${__props.area.x}px`,
+          top: `${__props.area.y}px`,
+          width: `${w.value}px`,
+          height: `${h.value}px`
+        }),
+        onPointerdown: handleCanvasPointerDown,
+        onPointermove: handleCanvasPointerMoveCursor
+      }, null, 36)) : (openBlock(), createElementBlock("g", {
+        key: 1,
+        class: "chart-navigator",
+        transform: `translate(${__props.area.x},${__props.area.y})`
+      }, [
+        createElementVNode("rect", {
+          width: w.value,
+          height: h.value,
+          fill: bgFill.value,
+          rx: "3"
+        }, null, 8, _hoisted_2),
+        createElementVNode("clipPath", { id: clipId.value }, [createElementVNode("rect", {
+          width: w.value,
+          height: h.value,
+          rx: "3"
+        }, null, 8, _hoisted_4)], 8, _hoisted_3),
+        createElementVNode("g", {
+          "clip-path": `url(#${clipId.value})`,
+          "pointer-events": "none"
+        }, [(openBlock(true), createElementBlock(Fragment, null, renderList(ticks.value, (tick, i) => {
+          return openBlock(), createElementBlock("line", {
+            key: "g" + i,
+            x1: tick.px,
+            y1: 0,
+            x2: tick.px,
+            y2: h.value,
+            stroke: gridStroke.value,
+            "stroke-width": "1"
+          }, null, 8, _hoisted_6);
+        }), 128))], 8, _hoisted_5),
+        paths.value ? (openBlock(), createElementBlock("g", {
+          key: 0,
+          "clip-path": `url(#${clipId.value})`
+        }, [paths.value.dots ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(paths.value.dots, (dot, i) => {
+          return openBlock(), createElementBlock("circle", {
+            key: i,
+            cx: dot.px,
+            cy: dot.py,
+            r: "2",
+            fill: seriesFill.value,
+            opacity: "0.7"
+          }, null, 8, _hoisted_8);
+        }), 128)) : paths.value.bars ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(paths.value.bars, (bar, i) => {
+          return openBlock(), createElementBlock("rect", {
+            key: i,
+            x: bar.px,
+            y: bar.py,
+            width: bar.width,
+            height: bar.height,
+            fill: seriesFill.value,
+            "fill-opacity": resolved.value.opacity
+          }, null, 8, _hoisted_9);
+        }), 128)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createElementVNode("path", {
+          d: paths.value.areaPath,
+          fill: seriesFill.value,
+          "fill-opacity": resolved.value.opacity
+        }, null, 8, _hoisted_10), createElementVNode("path", {
+          d: paths.value.linePath,
+          stroke: seriesFill.value,
+          fill: "none",
+          "stroke-width": "1.5"
+        }, null, 8, _hoisted_11)], 64))], 8, _hoisted_7)) : createCommentVNode("", true),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(additionalSeries.value, (entry, si) => {
+          return openBlock(), createElementBlock("g", {
+            key: "add-" + si,
+            "clip-path": `url(#${clipId.value})`,
+            "pointer-events": "none"
+          }, [entry.paths.linePath ? (openBlock(), createElementBlock("path", {
+            key: 0,
+            d: entry.paths.linePath,
+            stroke: entry.color,
+            fill: "none",
+            "stroke-width": "1.5"
+          }, null, 8, _hoisted_13)) : createCommentVNode("", true)], 8, _hoisted_12);
+        }), 128)),
+        createElementVNode("g", {
+          "clip-path": `url(#${clipId.value})`,
+          "pointer-events": "none"
+        }, [(openBlock(true), createElementBlock(Fragment, null, renderList(ticks.value, (tick, i) => {
+          return openBlock(), createElementBlock("text", {
+            key: "t" + i,
+            x: tick.px + 3,
+            y: h.value - 3,
+            "font-size": "10",
+            "font-family": "sans-serif",
+            "dominant-baseline": "auto",
+            fill: labelFill.value,
+            "text-anchor": "start"
+          }, toDisplayString(tick.label), 9, _hoisted_15);
+        }), 128))], 8, _hoisted_14),
+        selection.value.isZoomed && selection.value.is2D && selection.value.y != null && selection.value.height != null ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          createElementVNode("rect", {
+            x: 0,
+            y: 0,
+            width: w.value,
+            height: selection.value.y,
+            fill: maskFill.value,
+            style: { "cursor": "pointer" },
+            "pointer-events": "all",
+            onPointerdown: handleBackgroundClickSvg
+          }, null, 40, _hoisted_16),
+          createElementVNode("rect", {
+            x: 0,
+            y: selection.value.y + selection.value.height,
+            width: w.value,
+            height: h.value - selection.value.y - selection.value.height,
+            fill: maskFill.value,
+            style: { "cursor": "pointer" },
+            "pointer-events": "all",
+            onPointerdown: handleBackgroundClickSvg
+          }, null, 40, _hoisted_17),
+          createElementVNode("rect", {
+            x: 0,
+            y: selection.value.y,
+            width: selection.value.x,
+            height: selection.value.height,
+            fill: maskFill.value,
+            style: { "cursor": "pointer" },
+            "pointer-events": "all",
+            onPointerdown: handleBackgroundClickSvg
+          }, null, 40, _hoisted_18),
+          createElementVNode("rect", {
+            x: selection.value.x + selection.value.width,
+            y: selection.value.y,
+            width: w.value - selection.value.x - selection.value.width,
+            height: selection.value.height,
+            fill: maskFill.value,
+            style: { "cursor": "pointer" },
+            "pointer-events": "all",
+            onPointerdown: handleBackgroundClickSvg
+          }, null, 40, _hoisted_19),
+          createElementVNode("rect", {
+            x: selection.value.x,
+            y: selection.value.y,
+            width: selection.value.width,
+            height: selection.value.height,
+            fill: selFill.value,
+            stroke: selStroke.value,
+            "stroke-width": "1",
+            style: normalizeStyle({ cursor: isDragging.value ? "grabbing" : "grab" }),
+            "pointer-events": "all",
+            onPointerdown: _cache[0] || (_cache[0] = (e) => startDragSvg("pan", e))
+          }, null, 44, _hoisted_20),
+          createElementVNode("rect", {
+            x: selection.value.x - unref(HANDLE_WIDTH) / 2,
+            y: selection.value.y,
+            width: unref(HANDLE_WIDTH),
+            height: selection.value.height,
+            fill: "transparent",
+            style: { "cursor": "ew-resize" },
+            "pointer-events": "all",
+            onPointerdown: _cache[1] || (_cache[1] = (e) => startDragSvg("resize-left", e))
+          }, null, 40, _hoisted_21),
+          createElementVNode("rect", {
+            x: selection.value.x + selection.value.width - unref(HANDLE_WIDTH) / 2,
+            y: selection.value.y,
+            width: unref(HANDLE_WIDTH),
+            height: selection.value.height,
+            fill: "transparent",
+            style: { "cursor": "ew-resize" },
+            "pointer-events": "all",
+            onPointerdown: _cache[2] || (_cache[2] = (e) => startDragSvg("resize-right", e))
+          }, null, 40, _hoisted_22),
+          createElementVNode("rect", {
+            x: selection.value.x,
+            y: selection.value.y - unref(HANDLE_WIDTH) / 2,
+            width: selection.value.width,
+            height: unref(HANDLE_WIDTH),
+            fill: "transparent",
+            style: { "cursor": "ns-resize" },
+            "pointer-events": "all",
+            onPointerdown: _cache[3] || (_cache[3] = (e) => startDragSvg("resize-top", e))
+          }, null, 40, _hoisted_23),
+          createElementVNode("rect", {
+            x: selection.value.x,
+            y: selection.value.y + selection.value.height - unref(HANDLE_WIDTH) / 2,
+            width: selection.value.width,
+            height: unref(HANDLE_WIDTH),
+            fill: "transparent",
+            style: { "cursor": "ns-resize" },
+            "pointer-events": "all",
+            onPointerdown: _cache[4] || (_cache[4] = (e) => startDragSvg("resize-bottom", e))
+          }, null, 40, _hoisted_24),
+          createElementVNode("g", _hoisted_25, [
+            createElementVNode("line", {
+              x1: selection.value.x,
+              y1: selection.value.y + selection.value.height / 2 - Math.min(selection.value.height * 0.3, 12),
+              x2: selection.value.x,
+              y2: selection.value.y + selection.value.height / 2 + Math.min(selection.value.height * 0.3, 12),
+              stroke: selStroke.value,
+              "stroke-width": "2",
+              "stroke-linecap": "round"
+            }, null, 8, _hoisted_26),
+            createElementVNode("line", {
+              x1: selection.value.x + selection.value.width,
+              y1: selection.value.y + selection.value.height / 2 - Math.min(selection.value.height * 0.3, 12),
+              x2: selection.value.x + selection.value.width,
+              y2: selection.value.y + selection.value.height / 2 + Math.min(selection.value.height * 0.3, 12),
+              stroke: selStroke.value,
+              "stroke-width": "2",
+              "stroke-linecap": "round"
+            }, null, 8, _hoisted_27),
+            createElementVNode("line", {
+              x1: selection.value.x + selection.value.width / 2 - Math.min(selection.value.width * 0.3, 12),
+              y1: selection.value.y,
+              x2: selection.value.x + selection.value.width / 2 + Math.min(selection.value.width * 0.3, 12),
+              y2: selection.value.y,
+              stroke: selStroke.value,
+              "stroke-width": "2",
+              "stroke-linecap": "round"
+            }, null, 8, _hoisted_28),
+            createElementVNode("line", {
+              x1: selection.value.x + selection.value.width / 2 - Math.min(selection.value.width * 0.3, 12),
+              y1: selection.value.y + selection.value.height,
+              x2: selection.value.x + selection.value.width / 2 + Math.min(selection.value.width * 0.3, 12),
+              y2: selection.value.y + selection.value.height,
+              stroke: selStroke.value,
+              "stroke-width": "2",
+              "stroke-linecap": "round"
+            }, null, 8, _hoisted_29)
+          ])
+        ], 64)) : createCommentVNode("", true),
+        selection.value.isZoomed && !selection.value.is2D ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+          selection.value.x > 0 ? (openBlock(), createElementBlock("rect", {
+            key: 0,
+            x: 0,
+            width: selection.value.x,
+            height: h.value,
+            fill: maskFill.value,
+            rx: "3",
+            style: { "cursor": "pointer" },
+            "pointer-events": "all",
+            onPointerdown: handleBackgroundClickSvg
+          }, null, 40, _hoisted_30)) : createCommentVNode("", true),
+          selection.value.x + selection.value.width < w.value ? (openBlock(), createElementBlock("rect", {
+            key: 1,
+            x: selection.value.x + selection.value.width,
+            width: w.value - selection.value.x - selection.value.width,
+            height: h.value,
+            fill: maskFill.value,
+            style: { "cursor": "pointer" },
+            "pointer-events": "all",
+            onPointerdown: handleBackgroundClickSvg
+          }, null, 40, _hoisted_31)) : createCommentVNode("", true),
+          createElementVNode("rect", {
+            x: selection.value.x,
+            width: selection.value.width,
+            height: h.value,
+            fill: selFill.value,
+            stroke: selStroke.value,
+            "stroke-width": "1",
+            style: normalizeStyle({ cursor: isDragging.value ? "grabbing" : "grab" }),
+            "pointer-events": "all",
+            onPointerdown: _cache[5] || (_cache[5] = (e) => startDragSvg("pan", e))
+          }, null, 44, _hoisted_32),
+          createElementVNode("rect", {
+            x: selection.value.x - unref(HANDLE_WIDTH) / 2,
+            width: unref(HANDLE_WIDTH),
+            height: h.value,
+            fill: "transparent",
+            style: { "cursor": "ew-resize" },
+            "pointer-events": "all",
+            onPointerdown: _cache[6] || (_cache[6] = (e) => startDragSvg("resize-left", e))
+          }, null, 40, _hoisted_33),
+          createElementVNode("rect", {
+            x: selection.value.x + selection.value.width - unref(HANDLE_WIDTH) / 2,
+            width: unref(HANDLE_WIDTH),
+            height: h.value,
+            fill: "transparent",
+            style: { "cursor": "ew-resize" },
+            "pointer-events": "all",
+            onPointerdown: _cache[7] || (_cache[7] = (e) => startDragSvg("resize-right", e))
+          }, null, 40, _hoisted_34),
+          createElementVNode("g", _hoisted_35, [
+            createElementVNode("line", {
+              x1: selection.value.x,
+              y1: gripY1.value,
+              x2: selection.value.x,
+              y2: gripY2.value,
+              stroke: selStroke.value,
+              "stroke-width": "2",
+              "stroke-linecap": "round"
+            }, null, 8, _hoisted_36),
+            createElementVNode("line", {
+              x1: selection.value.x + unref(GRIP_LINE_GAP),
+              y1: gripY1.value + 2,
+              x2: selection.value.x + unref(GRIP_LINE_GAP),
+              y2: gripY2.value - 2,
+              stroke: selStroke.value,
+              "stroke-width": "1",
+              "stroke-linecap": "round",
+              opacity: "0.5"
+            }, null, 8, _hoisted_37),
+            createElementVNode("line", {
+              x1: selection.value.x + selection.value.width,
+              y1: gripY1.value,
+              x2: selection.value.x + selection.value.width,
+              y2: gripY2.value,
+              stroke: selStroke.value,
+              "stroke-width": "2",
+              "stroke-linecap": "round"
+            }, null, 8, _hoisted_38),
+            createElementVNode("line", {
+              x1: selection.value.x + selection.value.width - unref(GRIP_LINE_GAP),
+              y1: gripY1.value + 2,
+              x2: selection.value.x + selection.value.width - unref(GRIP_LINE_GAP),
+              y2: gripY2.value - 2,
+              stroke: selStroke.value,
+              "stroke-width": "1",
+              "stroke-linecap": "round",
+              opacity: "0.5"
+            }, null, 8, _hoisted_39)
+          ])
+        ], 64)) : createCommentVNode("", true)
+      ], 8, _hoisted_1));
+    };
+  }
+});
+var NavigatorRenderer_default = _sfc_main;
+
+export { NavigatorRenderer_default };