@expcat/tigercat-vue 1.0.7 → 1.1.0

package/dist/{chunk-S276SM7L.mjs → chunk-DMV26JNR.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, onBeforeUnmount, h } from 'vue';
-import { defaultResizeHandles, classNames, resizableBaseClasses, coerceClassValue, getResizableHandleClasses, calculateResizeDelta, applyAspectRatio, clampDimensions } from '@expcat/tigercat-core';
+import { defaultResizeHandles, classNames, resizableBaseClasses, coerceClassValue, getResizableHandleClasses, createDocumentDragSession, calculateResizeDelta, applyAspectRatio, clampDimensions } from '@expcat/tigercat-core';
 
 // src/components/Resizable.ts
 var Resizable = defineComponent({
@@ -36,6 +36,7 @@ var Resizable = defineComponent({
     const startMouseY = ref(0);
     const startWidth = ref(0);
     const startHeight = ref(0);
+    let dragSession = null;
     const containerClasses = computed(
       () => classNames(
         resizableBaseClasses,
@@ -50,9 +51,14 @@ var Resizable = defineComponent({
       if (height.value != null) s.height = `${height.value}px`;
       return s;
     });
+    const cleanupDragSession = () => {
+      dragSession?.dispose();
+      dragSession = null;
+    };
     const onMouseDown = (handle, e) => {
       if (props.disabled) return;
       e.preventDefault();
+      cleanupDragSession();
       draggingHandle.value = handle;
       startMouseX.value = e.clientX;
       startMouseY.value = e.clientY;
@@ -65,15 +71,27 @@ var Resizable = defineComponent({
         deltaX: 0,
         deltaY: 0
       });
-      document.addEventListener("mousemove", onMouseMove);
-      document.addEventListener("mouseup", onMouseUp);
+      dragSession = createDocumentDragSession({
+        startX: e.clientX,
+        startY: e.clientY,
+        ownerDocument: e.currentTarget?.ownerDocument,
+        onMove: ({ currentX, currentY }) => {
+          applyResize(currentX, currentY, (event) => emit("resize", event));
+        },
+        onEnd: ({ currentX, currentY }) => {
+          applyResize(currentX, currentY, (event) => emit("resize-end", event));
+          draggingHandle.value = null;
+          dragSession = null;
+        }
+      });
     };
-    const onMouseMove = (e) => {
-      if (!draggingHandle.value) return;
-      const mouseDeltaX = e.clientX - startMouseX.value;
-      const mouseDeltaY = e.clientY - startMouseY.value;
+    const applyResize = (currentX, currentY, notify) => {
+      const handle = draggingHandle.value;
+      if (!handle) return;
+      const mouseDeltaX = currentX - startMouseX.value;
+      const mouseDeltaY = currentY - startMouseY.value;
       const { deltaWidth, deltaHeight } = calculateResizeDelta(
-        draggingHandle.value,
+        handle,
         mouseDeltaX,
         mouseDeltaY,
         props.axis
@@ -95,31 +113,16 @@ var Resizable = defineComponent({
       );
       width.value = clamped.width;
       height.value = clamped.height;
-      emit("resize", {
+      notify({
         width: clamped.width,
         height: clamped.height,
-        handle: draggingHandle.value,
+        handle,
         deltaX: clamped.width - startWidth.value,
         deltaY: clamped.height - startHeight.value
       });
     };
-    const onMouseUp = () => {
-      if (draggingHandle.value) {
-        emit("resize-end", {
-          width: width.value ?? 0,
-          height: height.value ?? 0,
-          handle: draggingHandle.value,
-          deltaX: (width.value ?? 0) - startWidth.value,
-          deltaY: (height.value ?? 0) - startHeight.value
-        });
-      }
-      draggingHandle.value = null;
-      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener("mouseup", onMouseUp);
-    };
     onBeforeUnmount(() => {
-      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener("mouseup", onMouseUp);
+      cleanupDragSession();
     });
     return () => {
       const handleNodes = props.handles.map(

package/dist/{chunk-UUGAOKYR.js → chunk-DZXZ3YEL.js}

@@ -38,7 +38,7 @@ var BackTop = vue.defineComponent({
       default: () => window
     },
     /**
-     * Duration of scroll animation in milliseconds
+     * Use immediate scroll when set to 0; positive values use native smooth scrolling
      * @default 450
      */
     duration: {
@@ -58,11 +58,7 @@ var BackTop = vue.defineComponent({
   setup(props, { slots, emit, attrs }) {
     const visible = vue.ref(false);
     const targetElement = vue.shallowRef(null);
-    const handleScroll = () => {
-      if (!targetElement.value) return;
-      const scrollTop = tigercatCore.getScrollTop(targetElement.value);
-      visible.value = scrollTop >= props.visibilityHeight;
-    };
+    let visibilityController;
     const handleClick = (event) => {
       if (!targetElement.value) return;
       tigercatCore.scrollToTop(targetElement.value, props.duration);
@@ -70,13 +66,23 @@ var BackTop = vue.defineComponent({
     };
     vue.onMounted(() => {
       targetElement.value = props.target() ?? window;
-      targetElement.value.addEventListener("scroll", handleScroll, { passive: true });
-      handleScroll();
+      visibilityController = tigercatCore.createBackTopVisibilityController({
+        target: targetElement.value,
+        getVisibilityHeight: () => props.visibilityHeight,
+        onChange: (nextVisible) => {
+          visible.value = nextVisible;
+        }
+      });
+      targetElement.value.addEventListener("scroll", visibilityController.schedule, {
+        passive: true
+      });
+      visibilityController.update();
     });
     vue.onBeforeUnmount(() => {
-      if (targetElement.value) {
-        targetElement.value.removeEventListener("scroll", handleScroll);
+      if (targetElement.value && visibilityController) {
+        targetElement.value.removeEventListener("scroll", visibilityController.schedule);
       }
+      visibilityController?.cancel();
     });
     const buttonClasses = vue.computed(() => {
       const target = targetElement.value ?? props.target();

package/dist/chunk-E3BSOB7P.mjs

@@ -0,0 +1,89 @@
+import { defineComponent, ref, watch, computed, provide, inject } from 'vue';
+import { getImmediateTigerLocale, isLazyTigerLocale, resolveTigerLocale, mergeTigerLocale, ThemeManager } from '@expcat/tigercat-core';
+
+// src/components/ConfigProvider.ts
+var TigerConfigKey = /* @__PURE__ */ Symbol("TigerConfig");
+function useTigerConfig() {
+  return inject(
+    TigerConfigKey,
+    computed(() => ({}))
+  );
+}
+var ConfigProvider = defineComponent({
+  name: "TigerConfigProvider",
+  props: {
+    locale: {
+      type: [Object, Function, Promise],
+      default: void 0
+    },
+    theme: {
+      type: String,
+      default: void 0
+    },
+    colorScheme: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props, { slots }) {
+    const parent = useTigerConfig();
+    const resolvedLocale = ref(
+      isLazyTigerLocale(props.locale) ? void 0 : getImmediateTigerLocale(props.locale)
+    );
+    const localeLoading = ref(isLazyTigerLocale(props.locale));
+    let loadId = 0;
+    watch(
+      () => props.locale,
+      (locale) => {
+        if (!isLazyTigerLocale(locale)) {
+          resolvedLocale.value = getImmediateTigerLocale(locale);
+          localeLoading.value = false;
+          return;
+        }
+        const thisId = ++loadId;
+        localeLoading.value = true;
+        resolveTigerLocale(locale).then(
+          (result) => {
+            if (thisId === loadId) {
+              resolvedLocale.value = result;
+              localeLoading.value = false;
+            }
+          },
+          () => {
+            if (thisId === loadId) {
+              localeLoading.value = false;
+            }
+          }
+        );
+      },
+      { immediate: true }
+    );
+    const merged = computed(() => {
+      return {
+        locale: mergeTigerLocale(parent.value.locale, resolvedLocale.value),
+        localeLoading: localeLoading.value || parent.value.localeLoading,
+        theme: props.theme ?? parent.value.theme,
+        colorScheme: props.colorScheme ?? parent.value.colorScheme
+      };
+    });
+    watch(
+      () => merged.value.theme,
+      (name) => {
+        if (name) ThemeManager.setTheme(name);
+      },
+      { immediate: true }
+    );
+    watch(
+      () => merged.value.colorScheme,
+      (scheme) => {
+        if (scheme) ThemeManager.setColorScheme(scheme);
+      },
+      { immediate: true }
+    );
+    provide(TigerConfigKey, merged);
+    return () => slots.default?.();
+  }
+});
+var ConfigProvider_default = ConfigProvider;
+
+export { ConfigProvider, ConfigProvider_default, TigerConfigKey, useTigerConfig };

package/dist/{chunk-LRHJZP2C.mjs → chunk-E6RGBYI3.mjs}

@@ -1,8 +1,95 @@
-import { defineComponent, ref, computed, watch, onMounted, nextTick, onBeforeUnmount, reactive, provide, h } from 'vue';
-import { classNames, getAnchorWrapperClasses, coerceClassValue, getAnchorInkContainerClasses, getAnchorInkActiveClasses, getAnchorLinkListClasses, mergeStyleValues, findActiveAnchor, scrollToAnchor } from '@expcat/tigercat-core';
+import { defineComponent, inject, onMounted, onBeforeUnmount, computed, h, ref, watch, nextTick, reactive, provide } from 'vue';
+import { classNames, getAnchorLinkClasses, coerceClassValue, getAnchorWrapperClasses, getAnchorInkContainerClasses, getAnchorInkActiveClasses, getAnchorLinkListClasses, mergeStyleValues, createAnchorObserver, scrollToAnchor } from '@expcat/tigercat-core';
 
 // src/components/Anchor.ts
 var AnchorContextKey = /* @__PURE__ */ Symbol("AnchorContext");
+var AnchorLink = defineComponent({
+  name: "TigerAnchorLink",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Target anchor ID (with #)
+     */
+    href: {
+      type: String,
+      required: true
+    },
+    /**
+     * Link title/text
+     */
+    title: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Link target attribute
+     */
+    target: {
+      type: String,
+      default: void 0
+    },
+    className: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const anchorContext = inject(AnchorContextKey, null);
+    onMounted(() => {
+      anchorContext?.registerLink(props.href);
+    });
+    onBeforeUnmount(() => {
+      anchorContext?.unregisterLink(props.href);
+    });
+    const handleClick = (event) => {
+      event.preventDefault();
+      anchorContext?.handleLinkClick(props.href, event);
+    };
+    const linkClasses = computed(() => {
+      const isActive = anchorContext?.activeLink === props.href;
+      return classNames(
+        getAnchorLinkClasses(isActive, props.className),
+        coerceClassValue(attrs.class)
+      );
+    });
+    return () => {
+      const slotContent = slots.default?.();
+      const hasNestedLinks = slotContent && Array.isArray(slotContent) && slotContent.some(
+        (vnode) => vnode.type && vnode.type.name === "TigerAnchorLink"
+      );
+      if (hasNestedLinks) {
+        return h("div", { class: "anchor-link-wrapper" }, [
+          h(
+            "a",
+            {
+              ...attrs,
+              href: props.href,
+              target: props.target,
+              class: linkClasses.value,
+              "data-anchor-href": props.href,
+              onClick: handleClick
+            },
+            props.title
+          ),
+          h("div", { class: "pl-3 mt-1 space-y-1" }, slotContent)
+        ]);
+      }
+      const content = slotContent ?? props.title;
+      return h(
+        "a",
+        {
+          ...attrs,
+          href: props.href,
+          target: props.target,
+          class: linkClasses.value,
+          "data-anchor-href": props.href,
+          onClick: handleClick
+        },
+        content
+      );
+    };
+  }
+});
 var Anchor = defineComponent({
   name: "TigerAnchor",
   inheritAttrs: false,
@@ -85,7 +172,6 @@ var Anchor = defineComponent({
     const anchorRef = ref(null);
     const inkRef = ref(null);
     const isScrolling = ref(false);
-    let animationFrameId = null;
     let scrollTimeoutId = null;
     const getContainer = () => props.getContainer();
     const scrollOffset = computed(() => props.targetOffset ?? props.offsetTop);
@@ -97,23 +183,21 @@ var Anchor = defineComponent({
     const unregisterLink = (href) => {
       links.value = links.value.filter((l) => l !== href);
     };
-    const handleScroll = () => {
-      if (isScrolling.value) return;
-      if (animationFrameId !== null) {
-        cancelAnimationFrame(animationFrameId);
-      }
-      animationFrameId = requestAnimationFrame(() => {
-        const container = getContainer();
-        const newActiveLink = findActiveAnchor(
-          links.value,
-          container,
-          props.bounds,
-          scrollOffset.value
-        );
-        const finalActiveLink = props.getCurrentAnchor ? props.getCurrentAnchor(newActiveLink) : newActiveLink;
-        if (finalActiveLink !== activeLink.value) {
-          activeLink.value = finalActiveLink;
-          emit("change", finalActiveLink);
+    let stopObserver = null;
+    const setupObserver = () => {
+      stopObserver?.();
+      const container = getContainer();
+      const root = container === window ? null : container;
+      stopObserver = createAnchorObserver(links.value, {
+        offsetTop: scrollOffset.value,
+        root,
+        onChange: (newActiveLink) => {
+          if (isScrolling.value) return;
+          const finalActiveLink = props.getCurrentAnchor ? props.getCurrentAnchor(newActiveLink) : newActiveLink;
+          if (finalActiveLink !== activeLink.value) {
+            activeLink.value = finalActiveLink;
+            emit("change", finalActiveLink);
+          }
         }
       });
     };
@@ -155,22 +239,17 @@ var Anchor = defineComponent({
       updateInkPosition();
     });
     watch(() => props.direction, updateInkPosition);
-    let currentContainer = null;
     onMounted(() => {
       nextTick(() => {
-        currentContainer = getContainer();
-        currentContainer.addEventListener("scroll", handleScroll, { passive: true });
-        handleScroll();
+        setupObserver();
         setTimeout(updateInkPosition, 0);
       });
     });
+    watch([links, scrollOffset, () => props.getContainer], () => {
+      nextTick(() => setupObserver());
+    });
     onBeforeUnmount(() => {
-      if (currentContainer) {
-        currentContainer.removeEventListener("scroll", handleScroll);
-      }
-      if (animationFrameId !== null) {
-        cancelAnimationFrame(animationFrameId);
-      }
+      stopObserver?.();
       if (scrollTimeoutId !== null) {
         clearTimeout(scrollTimeoutId);
       }
@@ -244,4 +323,4 @@ var Anchor = defineComponent({
 });
 var Anchor_default = Anchor;
 
-export { Anchor, AnchorContextKey, Anchor_default };
+export { Anchor, AnchorContextKey, AnchorLink, Anchor_default };

package/dist/{chunk-TYFUO6PE.mjs → chunk-E74ERZGQ.mjs}

@@ -1,12 +1,12 @@
-import { useChartInteraction } from './chunk-DU2NXX75.mjs';
-import { ChartLegend } from './chunk-F5HOHSFH.mjs';
+import { useChartInteraction } from './chunk-N4GS2LSN.mjs';
+import { ChartLegend } from './chunk-VVS2CQS4.mjs';
 import { ChartSeries } from './chunk-2ZUEXCVJ.mjs';
-import { ChartTooltip } from './chunk-FXGIIFGN.mjs';
+import { ChartTooltip } from './chunk-OK4PVFQG.mjs';
 import { ChartAxis } from './chunk-ZWVA7HT3.mjs';
-import { ChartCanvas } from './chunk-5WHLXWWT.mjs';
+import { ChartCanvas } from './chunk-W5RZPTFD.mjs';
 import { ChartGrid } from './chunk-MI6TL3CQ.mjs';
 import { defineComponent, ref, computed, h } from 'vue';
-import { getAreaGradientPrefix, getChartInnerRect, resolveSeriesData, stackSeriesData, getNumberExtent, createLinearScale, createPointScale, resolveChartPalette, createLinePath, createAreaPath, getChartElementOpacity, buildChartLegendItems, resolveMultiSeriesTooltipContent, defaultSeriesXYTooltipFormatter, classNames } from '@expcat/tigercat-core';
+import { getAreaGradientPrefix, getChartInnerRect, resolveSeriesData, stackSeriesData, getNumberExtent, createLinearScale, createPointScale, resolveChartPalette, buildChartSeriesKeys, createLinePath, createAreaPath, getChartElementOpacity, buildChartLegendItems, resolveMultiSeriesTooltipContent, defaultSeriesXYTooltipFormatter, classNames, linePointTransitionClasses } from '@expcat/tigercat-core';
 
 var AreaChart = defineComponent({
   name: "TigerAreaChart",
@@ -172,7 +172,7 @@ var AreaChart = defineComponent({
     },
     gradient: {
       type: Boolean,
-      default: false
+      default: true
     },
     animated: {
       type: Boolean,
@@ -182,6 +182,14 @@ var AreaChart = defineComponent({
       type: Boolean,
       default: false
     },
+    strokeGradient: {
+      type: Boolean,
+      default: false
+    },
+    pointGradient: {
+      type: Boolean,
+      default: false
+    },
     tooltipFormatter: {
       type: Function
     },
@@ -270,9 +278,13 @@ var AreaChart = defineComponent({
     const shouldShowXAxis = computed(() => props.showAxis && props.showXAxis);
     const shouldShowYAxis = computed(() => props.showAxis && props.showYAxis);
     const palette = computed(() => resolveChartPalette(props.colors));
+    const seriesKeys = computed(
+      () => buildChartSeriesKeys(resolvedSeries.value, { prefix: "area-" })
+    );
     const seriesData = computed(() => {
       const stackedData = props.stacked ? stackSeriesData(resolvedSeries.value.map((s) => s.data)) : null;
       return resolvedSeries.value.map((series, seriesIndex) => {
+        const seriesKey = seriesKeys.value[seriesIndex];
         const color = series.color ?? palette.value[seriesIndex % palette.value.length];
         const fillColor = series.fillColor ?? color;
         const seriesFillOpacity = series.fillOpacity ?? props.fillOpacity;
@@ -313,6 +325,7 @@ var AreaChart = defineComponent({
         return {
           series,
           seriesIndex,
+          seriesKey,
           color,
           fillColor,
           fillOpacity: seriesFillOpacity,
@@ -393,7 +406,7 @@ var AreaChart = defineComponent({
         {
           default: () => [
             // Gradient defs and animation styles
-            props.gradient || props.animated ? h("defs", null, [
+            props.gradient || props.animated || props.strokeGradient || props.pointGradient ? h("defs", null, [
               // Animation keyframes
               props.animated ? h(
                 "style",
@@ -413,8 +426,8 @@ var AreaChart = defineComponent({
                 (sd) => h(
                   "linearGradient",
                   {
-                    key: `area-grad-${sd.seriesIndex}`,
-                    id: `${gradientPrefix}-${sd.seriesIndex}`,
+                    key: `area-grad-${sd.seriesKey}`,
+                    id: `${gradientPrefix}-${sd.seriesKey}`,
                     x1: "0",
                     y1: "0",
                     x2: "0",
@@ -433,6 +446,61 @@ var AreaChart = defineComponent({
                     })
                   ]
                 )
+              ) : [],
+              // Point fill radial gradients (bright center → series color edge)
+              ...props.pointGradient ? reversedSeriesData.map(
+                (sd) => h(
+                  "radialGradient",
+                  {
+                    key: `point-grad-${sd.seriesKey}`,
+                    id: `${gradientPrefix}-point-${sd.seriesKey}`,
+                    cx: "0.5",
+                    cy: "0.5",
+                    r: "0.5"
+                  },
+                  [
+                    h("stop", {
+                      offset: "0%",
+                      "stop-color": `color-mix(in oklab, ${sd.color} 100%, white 30%)`
+                    }),
+                    h("stop", {
+                      offset: "70%",
+                      "stop-color": sd.color
+                    }),
+                    h("stop", {
+                      offset: "100%",
+                      "stop-color": `color-mix(in oklab, ${sd.color} 100%, black 12%)`
+                    })
+                  ]
+                )
+              ) : [],
+              // Stroke gradients (3-stop horizontal brightness ramp)
+              ...props.strokeGradient ? reversedSeriesData.map(
+                (sd) => h(
+                  "linearGradient",
+                  {
+                    key: `stroke-grad-${sd.seriesKey}`,
+                    id: `${gradientPrefix}-stroke-${sd.seriesKey}`,
+                    x1: "0",
+                    y1: "0",
+                    x2: "1",
+                    y2: "0"
+                  },
+                  [
+                    h("stop", {
+                      offset: "0%",
+                      "stop-color": `color-mix(in oklab, ${sd.color} 100%, white 12%)`
+                    }),
+                    h("stop", {
+                      offset: "50%",
+                      "stop-color": sd.color
+                    }),
+                    h("stop", {
+                      offset: "100%",
+                      "stop-color": `color-mix(in oklab, ${sd.color} 100%, black 8%)`
+                    })
+                  ]
+                )
               ) : []
             ]) : null,
             props.showGrid ? h(ChartGrid, {
@@ -468,11 +536,12 @@ var AreaChart = defineComponent({
               (sd) => h(
                 ChartSeries,
                 {
-                  key: `series-${sd.seriesIndex}`,
+                  key: sd.seriesKey,
                   data: sd.series.data,
                   name: sd.series.name,
                   type: "area",
                   opacity: sd.opacity,
+                  "data-series-key": sd.seriesKey,
                   class: classNames(
                     sd.series.className,
                     (props.hoverable || props.selectable) && "cursor-pointer",
@@ -489,17 +558,18 @@ var AreaChart = defineComponent({
                     // Area fill
                     h("path", {
                       d: sd.areaPath,
-                      fill: props.gradient ? `url(#${gradientPrefix}-${sd.seriesIndex})` : sd.fillColor,
+                      fill: props.gradient ? `url(#${gradientPrefix}-${sd.seriesKey})` : sd.fillColor,
                       "fill-opacity": props.gradient ? 1 : sd.fillOpacity,
                       stroke: "none",
                       class: "transition-opacity duration-300",
-                      "data-area-series": sd.seriesIndex
+                      "data-area-series": sd.seriesIndex,
+                      "data-series-key": sd.seriesKey
                     }),
                     // Line stroke
                     h("path", {
                       d: sd.linePath,
                       fill: "none",
-                      stroke: sd.color,
+                      stroke: props.strokeGradient ? `url(#${gradientPrefix}-stroke-${sd.seriesKey})` : sd.color,
                       "stroke-width": sd.strokeWidth,
                       "stroke-dasharray": props.animated ? sd.strokeDasharray ?? "1" : sd.strokeDasharray,
                       "stroke-dashoffset": props.animated ? "1" : void 0,
@@ -519,21 +589,26 @@ var AreaChart = defineComponent({
             ...seriesData.value.filter((sd) => sd.showPoints).map(
               (sd) => h(
                 "g",
-                { key: `points-${sd.seriesIndex}`, opacity: sd.opacity },
+                {
+                  key: `points-${sd.seriesKey}`,
+                  opacity: sd.opacity,
+                  "data-series-key": sd.seriesKey
+                },
                 sd.points.map((point) => {
                   const isHovered = hoveredPointInfo.value?.seriesIndex === sd.seriesIndex && hoveredPointInfo.value?.pointIndex === point.pointIndex;
                   const hoverSize = sd.pointSize + 2;
                   return h("circle", {
-                    key: `point-${sd.seriesIndex}-${point.pointIndex}`,
+                    key: `point-${sd.seriesKey}-${point.pointIndex}`,
                     cx: point.x,
                     cy: point.y,
                     r: isHovered ? hoverSize : sd.pointSize,
-                    fill: sd.pointHollow ? "white" : sd.pointColor,
+                    fill: sd.pointHollow ? "white" : props.pointGradient ? `url(#${gradientPrefix}-point-${sd.seriesKey})` : sd.pointColor,
                     stroke: sd.pointHollow ? sd.pointColor : "none",
                     "stroke-width": sd.pointHollow ? 2 : 0,
-                    class: "transition-all duration-200 ease-out",
+                    class: linePointTransitionClasses,
                     style: isHovered ? `filter: drop-shadow(0 0 4px ${sd.color})` : void 0,
                     "data-point-index": point.pointIndex,
+                    "data-series-key": sd.seriesKey,
                     onMouseenter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
                     onMousemove: handlePointMouseMove,
                     onMouseleave: handlePointMouseLeave,