@knotx/plugins-canvas-scrollbar 0.4.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 格桑
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,377 @@
+'use strict';
+
+const jsxRuntime = require('@knotx/jsx/jsx-runtime');
+const core = require('@knotx/core');
+const decorators = require('@knotx/decorators');
+const react = require('react');
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => {
+  var _a2;
+  return [, , , __create((_a2 = base == null ? void 0 : base[__knownSymbol("metadata")]) != null ? _a2 : null)];
+};
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _render_dec, _init_dec, _addListener_dec, _transform_dec, _contentSize_dec, _container_dec, _showScrollbars_dec, _a, _init;
+const defaultProps = {
+  style: {
+    track: {},
+    thumb: {}
+  },
+  offset: 3,
+  size: 8,
+  minThumbSize: 30,
+  hideTimeout: 0
+};
+class CanvasScrollbar extends (_a = core.BasePlugin, _showScrollbars_dec = [decorators.observable()], _container_dec = [decorators.inject.container()], _contentSize_dec = [decorators.inject.canvas.contentSize()], _transform_dec = [decorators.inject.canvas.transform()], _addListener_dec = [decorators.inject.canvas.addListener()], _init_dec = [decorators.OnInit], _render_dec = [decorators.layer(core.Layer.Canvas)], _a) {
+  constructor() {
+    super(...arguments);
+    __runInitializers(_init, 5, this);
+    __publicField(this, "config");
+    __publicField(this, "scrollbarTimeout", null);
+    __publicField(this, "isDraggingHorizontal", false);
+    __publicField(this, "isDraggingVertical", false);
+    __publicField(this, "startDragPos", { x: 0, y: 0 });
+    __publicField(this, "startScrollPos", { x: 0, y: 0 });
+    __publicField(this, "name", "canvasScrollbar");
+    __publicField(this, "showScrollbars", __runInitializers(_init, 8, this, false)), __runInitializers(_init, 11, this);
+    __publicField(this, "container", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __publicField(this, "contentSize", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __publicField(this, "transform", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    __publicField(this, "addListener", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
+    // 滚动条拖拽事件处理
+    __publicField(this, "handleMouseDown", (e, type) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (type === "horizontal") {
+        this.isDraggingHorizontal = true;
+        this.startDragPos.x = e.clientX;
+        this.startScrollPos.x = -this.transform.positionX;
+      } else {
+        this.isDraggingVertical = true;
+        this.startDragPos.y = e.clientY;
+        this.startScrollPos.y = -this.transform.positionY;
+      }
+      const handleMouseMove = (e2) => {
+        if (!this.transform || !this.contentSize)
+          return;
+        if (this.isDraggingHorizontal) {
+          const horizontalTracker = this.getScrollTracker("horizontal");
+          const horizontalThumb = this.getScrollThumb("vertical");
+          const trackWidth = (horizontalTracker == null ? void 0 : horizontalTracker.clientWidth) || 0;
+          const thumbWidth = (horizontalThumb == null ? void 0 : horizontalThumb.clientWidth) || 0;
+          const contentWidth = this.contentSize.width * this.transform.scale;
+          const maxScroll = contentWidth - this.container.width;
+          const deltaX = e2.clientX - this.startDragPos.x;
+          const deltaScrollPercentage = deltaX / (trackWidth - thumbWidth);
+          const deltaScroll = deltaScrollPercentage * maxScroll;
+          const newScrollX = Math.max(0, Math.min(maxScroll, this.startScrollPos.x + deltaScroll));
+          this.callTool("canvas", "setTransform", {
+            positionX: -newScrollX,
+            positionY: this.transform.positionY,
+            scale: this.transform.scale,
+            animationTime: 0
+          });
+        }
+        if (this.isDraggingVertical) {
+          const verticalTracker = this.getScrollTracker("vertical");
+          const verticalThumb = this.getScrollThumb("vertical");
+          const trackHeight = (verticalTracker == null ? void 0 : verticalTracker.clientHeight) || 0;
+          const thumbHeight = (verticalThumb == null ? void 0 : verticalThumb.clientHeight) || 0;
+          const contentHeight = this.contentSize.height * this.transform.scale;
+          const maxScroll = contentHeight - this.container.height;
+          const deltaY = e2.clientY - this.startDragPos.y;
+          const deltaScrollPercentage = deltaY / (trackHeight - thumbHeight);
+          const deltaScroll = deltaScrollPercentage * maxScroll;
+          const newScrollY = Math.max(0, Math.min(maxScroll, this.startScrollPos.y + deltaScroll));
+          this.callTool("canvas", "setTransform", {
+            positionX: this.transform.positionX,
+            positionY: -newScrollY,
+            scale: this.transform.scale,
+            animationTime: 0
+          });
+        }
+      };
+      const handleMouseUp = () => {
+        this.isDraggingHorizontal = false;
+        this.isDraggingVertical = false;
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    });
+    // 滚动条轨道点击事件
+    __publicField(this, "handleTrackerClick", (e, direction) => {
+      const horizontalTracker = this.getScrollTracker("horizontal");
+      const verticalTracker = this.getScrollTracker("vertical");
+      const horizontalThumb = this.getScrollThumb("horizontal");
+      const verticalThumb = this.getScrollThumb("vertical");
+      if (direction === "horizontal" && e.target === horizontalThumb || direction === "vertical" && e.target === verticalThumb) {
+        return;
+      }
+      if (!this.contentSize)
+        return;
+      if (direction === "horizontal" && horizontalTracker && horizontalThumb) {
+        const trackRect = horizontalTracker.getBoundingClientRect();
+        const thumbRect = horizontalThumb.getBoundingClientRect();
+        const clickPosition = e.clientX - trackRect.left;
+        const thumbHalfWidth = thumbRect.width / 2;
+        const trackWidth = trackRect.width;
+        const contentWidth = this.contentSize.width * this.transform.scale;
+        const maxScroll = contentWidth - this.container.width;
+        const clickPercentage = (clickPosition - thumbHalfWidth) / (trackWidth - thumbRect.width);
+        const newScrollX = Math.max(0, Math.min(maxScroll, clickPercentage * maxScroll));
+        this.callTool("canvas", "setTransform", {
+          positionX: -newScrollX,
+          positionY: this.transform.positionY,
+          scale: this.transform.scale
+        });
+      }
+      if (direction === "vertical" && verticalTracker && verticalThumb) {
+        const trackRect = verticalTracker.getBoundingClientRect();
+        const thumbRect = verticalThumb.getBoundingClientRect();
+        const clickPosition = e.clientY - trackRect.top;
+        const thumbHalfHeight = thumbRect.height / 2;
+        const trackHeight = trackRect.height;
+        const contentHeight = this.contentSize.height * this.transform.scale;
+        const maxScroll = contentHeight - this.container.height;
+        const clickPercentage = (clickPosition - thumbHalfHeight) / (trackHeight - thumbRect.height);
+        const newScrollY = Math.max(0, Math.min(maxScroll, clickPercentage * maxScroll));
+        this.callTool("canvas", "setTransform", {
+          positionX: this.transform.positionX,
+          positionY: -newScrollY,
+          scale: this.transform.scale
+        });
+      }
+    });
+    __publicField(this, "getScrollTracker", (direction) => {
+      return document.querySelector(`[data-plugin-id="${this.pluginId}"][data-tracker-type="${direction}"]`);
+    });
+    __publicField(this, "getScrollThumb", (direction) => {
+      return document.querySelector(`[data-plugin-id="${this.pluginId}"][data-thumb-type="${direction}"]`);
+    });
+    __publicField(this, "handleMouseEnter", () => {
+      this.showScrollbars = true;
+      if (this.scrollbarTimeout) {
+        clearTimeout(this.scrollbarTimeout);
+        this.scrollbarTimeout = null;
+      }
+    });
+    __publicField(this, "handleMouseLeave", () => {
+      if (this.scrollbarTimeout) {
+        clearTimeout(this.scrollbarTimeout);
+      }
+      this.scrollbarTimeout = window.setTimeout(() => {
+        this.showScrollbars = false;
+      }, this.config.hideTimeout);
+    });
+  }
+  init(config) {
+    this.config = __spreadValues(__spreadValues({}, defaultProps), config);
+    this.addListener("mouseenter", this.handleMouseEnter);
+    this.addListener("mouseleave", this.handleMouseLeave);
+  }
+  // 更新滚动条位置与状态
+  getUpdatedScrollbarsStyle(config, container, transform, contentSize, showScrollbars) {
+    if (!contentSize) {
+      return [void 0, void 0];
+    }
+    const basicTrackStyle = __spreadValues({
+      position: "absolute",
+      borderRadius: "6px",
+      backgroundColor: "rgba(0, 0, 0, 0.1)",
+      transition: showScrollbars ? "opacity 0.2s" : "opacity 0.2s",
+      pointerEvents: showScrollbars ? "auto" : "none",
+      opacity: showScrollbars ? 0.6 : 0,
+      zIndex: core.Layer.Foreground
+    }, config.style.track);
+    const basicThumbStyle = __spreadValues({
+      position: "absolute",
+      borderRadius: "6px",
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+      cursor: "pointer",
+      transition: "background-color 0.2s"
+    }, config.style.thumb);
+    const { scale, positionX, positionY } = transform;
+    let [horizontalStyle, verticalStyle] = [void 0, void 0];
+    const contentWidth = contentSize.width * scale;
+    if (container.width < contentWidth) {
+      const thumbWidthPercentage = Math.min(1, container.width / contentWidth);
+      const thumbWidth = Math.max(config.minThumbSize, container.width * thumbWidthPercentage);
+      const maxScrollX = contentWidth - container.width;
+      const scrollPercentage = maxScrollX > 0 ? Math.max(0, Math.min(1, -positionX / maxScrollX)) : 0;
+      const maxThumbOffset = container.width - thumbWidth;
+      const horizontalThumbOffset = scrollPercentage * maxThumbOffset;
+      horizontalStyle = {
+        track: __spreadProps(__spreadValues({}, basicTrackStyle), {
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: config.size
+        }),
+        thumb: __spreadProps(__spreadValues({}, basicThumbStyle), {
+          transform: `translateX(${horizontalThumbOffset}px)`,
+          height: "100%",
+          width: `${thumbWidth}px`
+        })
+      };
+    }
+    const contentHeight = contentSize.height * scale;
+    if (container.height < contentHeight) {
+      const thumbHeightPercentage = Math.min(1, container.height / contentHeight);
+      const thumbHeight = Math.max(config.minThumbSize, container.height * thumbHeightPercentage);
+      const maxScrollY = contentHeight - container.height;
+      const scrollPercentage = maxScrollY > 0 ? Math.max(0, Math.min(1, -positionY / maxScrollY)) : 0;
+      const maxThumbOffset = container.height - thumbHeight;
+      const verticalThumbOffset = scrollPercentage * maxThumbOffset;
+      verticalStyle = {
+        track: __spreadProps(__spreadValues({}, basicTrackStyle), {
+          top: 0,
+          right: 0,
+          bottom: 0,
+          width: config.size
+        }),
+        thumb: __spreadProps(__spreadValues({}, basicThumbStyle), {
+          transform: `translateY(${verticalThumbOffset}px)`,
+          height: `${thumbHeight}px`,
+          width: "100%"
+        })
+      };
+    }
+    return [horizontalStyle, verticalStyle];
+  }
+  render({ children } = { children: null }) {
+    const config = core.use(() => this.config);
+    const container = core.use(() => this.container);
+    const transform = core.use(() => this.transform);
+    const contentSize = core.use(() => this.contentSize);
+    const showScrollbars = core.use(() => this.showScrollbars);
+    const [horizontalStyle, verticalStyle] = this.getUpdatedScrollbarsStyle(
+      config,
+      container,
+      transform,
+      contentSize,
+      showScrollbars
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+      children,
+      horizontalStyle && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "data-plugin-id": this.pluginId,
+          "data-tracker-type": "horizontal",
+          className: core.bem(this.name, "track-horizontal"),
+          style: horizontalStyle.track,
+          onClick: (e) => this.handleTrackerClick(e, "horizontal"),
+          onMouseEnter: this.handleMouseEnter,
+          onMouseLeave: this.handleMouseLeave,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-plugin-id": this.pluginId,
+              "data-thumb-type": "horizontal",
+              className: core.bem(this.name, "thumb-horizontal"),
+              style: horizontalStyle.thumb,
+              onMouseDown: (e) => this.handleMouseDown(e, "horizontal")
+            }
+          )
+        }
+      ),
+      verticalStyle && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "data-plugin-id": this.pluginId,
+          "data-tracker-type": "vertical",
+          className: core.bem(this.name, "track-vertical"),
+          style: verticalStyle.track,
+          onClick: (e) => this.handleTrackerClick(e, "vertical"),
+          onMouseEnter: this.handleMouseEnter,
+          onMouseLeave: this.handleMouseLeave,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-plugin-id": this.pluginId,
+              "data-thumb-type": "vertical",
+              className: core.bem(this.name, "thumb-vertical"),
+              style: verticalStyle.thumb,
+              onMouseDown: (e) => this.handleMouseDown(e, "vertical")
+            }
+          )
+        }
+      )
+    ] });
+  }
+}
+_init = __decoratorStart(_a);
+__decorateElement(_init, 1, "init", _init_dec, CanvasScrollbar);
+__decorateElement(_init, 1, "render", _render_dec, CanvasScrollbar);
+__decorateElement(_init, 5, "showScrollbars", _showScrollbars_dec, CanvasScrollbar);
+__decorateElement(_init, 5, "container", _container_dec, CanvasScrollbar);
+__decorateElement(_init, 5, "contentSize", _contentSize_dec, CanvasScrollbar);
+__decorateElement(_init, 5, "transform", _transform_dec, CanvasScrollbar);
+__decorateElement(_init, 5, "addListener", _addListener_dec, CanvasScrollbar);
+__decoratorMetadata(_init, CanvasScrollbar);
+
+exports.CanvasScrollbar = CanvasScrollbar;

package/dist/index.d.cts

@@ -0,0 +1,57 @@
+import { BasePlugin, Container, PluginData } from '@knotx/core';
+import { CanvasEventType, CanvasEventListener } from '@knotx/plugins-canvas';
+import { CSSProperties, ReactNode } from 'react';
+
+interface ScrollbarStyle {
+    track: CSSProperties;
+    thumb: CSSProperties;
+}
+interface CanvasScrollbarConfig {
+    /**
+     * 轨道以及滑块的css样式
+     */
+    style?: ScrollbarStyle;
+    /**
+     * 轨道以及滑块的宽度/高度
+     */
+    size?: number;
+    /**
+     * 距离边界的距离
+     */
+    offset?: number;
+    /**
+     * 滑块的最小宽度/高度
+     */
+    minThumbSize?: number;
+    /**
+     * 滚动条消失延迟
+     */
+    hideTimeout?: number;
+}
+declare class CanvasScrollbar extends BasePlugin<'canvasScrollbar', CanvasScrollbarConfig> {
+    private config;
+    private scrollbarTimeout;
+    private isDraggingHorizontal;
+    private isDraggingVertical;
+    private startDragPos;
+    private startScrollPos;
+    name: "canvasScrollbar";
+    showScrollbars: boolean;
+    container: Container;
+    contentSize: PluginData['canvas']['contentSize'];
+    transform: PluginData['canvas']['transform'];
+    addListener: (type: CanvasEventType, listener: CanvasEventListener) => void;
+    init(config: CanvasScrollbarConfig): void;
+    private getUpdatedScrollbarsStyle;
+    private handleMouseDown;
+    private handleTrackerClick;
+    private getScrollTracker;
+    private getScrollThumb;
+    render({ children }?: {
+        children: ReactNode;
+    }): JSX.Element;
+    private handleMouseEnter;
+    private handleMouseLeave;
+}
+
+export { CanvasScrollbar, type CanvasScrollbarConfig, type ScrollbarStyle };

package/dist/index.d.mts

@@ -0,0 +1,57 @@
+import { BasePlugin, Container, PluginData } from '@knotx/core';
+import { CanvasEventType, CanvasEventListener } from '@knotx/plugins-canvas';
+import { CSSProperties, ReactNode } from 'react';
+
+interface ScrollbarStyle {
+    track: CSSProperties;
+    thumb: CSSProperties;
+}
+interface CanvasScrollbarConfig {
+    /**
+     * 轨道以及滑块的css样式
+     */
+    style?: ScrollbarStyle;
+    /**
+     * 轨道以及滑块的宽度/高度
+     */
+    size?: number;
+    /**
+     * 距离边界的距离
+     */
+    offset?: number;
+    /**
+     * 滑块的最小宽度/高度
+     */
+    minThumbSize?: number;
+    /**
+     * 滚动条消失延迟
+     */
+    hideTimeout?: number;
+}
+declare class CanvasScrollbar extends BasePlugin<'canvasScrollbar', CanvasScrollbarConfig> {
+    private config;
+    private scrollbarTimeout;
+    private isDraggingHorizontal;
+    private isDraggingVertical;
+    private startDragPos;
+    private startScrollPos;
+    name: "canvasScrollbar";
+    showScrollbars: boolean;
+    container: Container;
+    contentSize: PluginData['canvas']['contentSize'];
+    transform: PluginData['canvas']['transform'];
+    addListener: (type: CanvasEventType, listener: CanvasEventListener) => void;
+    init(config: CanvasScrollbarConfig): void;
+    private getUpdatedScrollbarsStyle;
+    private handleMouseDown;
+    private handleTrackerClick;
+    private getScrollTracker;
+    private getScrollThumb;
+    render({ children }?: {
+        children: ReactNode;
+    }): JSX.Element;
+    private handleMouseEnter;
+    private handleMouseLeave;
+}
+
+export { CanvasScrollbar, type CanvasScrollbarConfig, type ScrollbarStyle };

package/dist/index.d.ts

@@ -0,0 +1,57 @@
+import { BasePlugin, Container, PluginData } from '@knotx/core';
+import { CanvasEventType, CanvasEventListener } from '@knotx/plugins-canvas';
+import { CSSProperties, ReactNode } from 'react';
+
+interface ScrollbarStyle {
+    track: CSSProperties;
+    thumb: CSSProperties;
+}
+interface CanvasScrollbarConfig {
+    /**
+     * 轨道以及滑块的css样式
+     */
+    style?: ScrollbarStyle;
+    /**
+     * 轨道以及滑块的宽度/高度
+     */
+    size?: number;
+    /**
+     * 距离边界的距离
+     */
+    offset?: number;
+    /**
+     * 滑块的最小宽度/高度
+     */
+    minThumbSize?: number;
+    /**
+     * 滚动条消失延迟
+     */
+    hideTimeout?: number;
+}
+declare class CanvasScrollbar extends BasePlugin<'canvasScrollbar', CanvasScrollbarConfig> {
+    private config;
+    private scrollbarTimeout;
+    private isDraggingHorizontal;
+    private isDraggingVertical;
+    private startDragPos;
+    private startScrollPos;
+    name: "canvasScrollbar";
+    showScrollbars: boolean;
+    container: Container;
+    contentSize: PluginData['canvas']['contentSize'];
+    transform: PluginData['canvas']['transform'];
+    addListener: (type: CanvasEventType, listener: CanvasEventListener) => void;
+    init(config: CanvasScrollbarConfig): void;
+    private getUpdatedScrollbarsStyle;
+    private handleMouseDown;
+    private handleTrackerClick;
+    private getScrollTracker;
+    private getScrollThumb;
+    render({ children }?: {
+        children: ReactNode;
+    }): JSX.Element;
+    private handleMouseEnter;
+    private handleMouseLeave;
+}
+
+export { CanvasScrollbar, type CanvasScrollbarConfig, type ScrollbarStyle };

package/dist/index.js

@@ -0,0 +1,375 @@
+import { jsxs, jsx } from '@knotx/jsx/jsx-runtime';
+import { Layer, use, bem, BasePlugin } from '@knotx/core';
+import { observable, inject, layer, OnInit } from '@knotx/decorators';
+import { Fragment } from 'react';
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => {
+  var _a2;
+  return [, , , __create((_a2 = base == null ? void 0 : base[__knownSymbol("metadata")]) != null ? _a2 : null)];
+};
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _render_dec, _init_dec, _addListener_dec, _transform_dec, _contentSize_dec, _container_dec, _showScrollbars_dec, _a, _init;
+const defaultProps = {
+  style: {
+    track: {},
+    thumb: {}
+  },
+  offset: 3,
+  size: 8,
+  minThumbSize: 30,
+  hideTimeout: 0
+};
+class CanvasScrollbar extends (_a = BasePlugin, _showScrollbars_dec = [observable()], _container_dec = [inject.container()], _contentSize_dec = [inject.canvas.contentSize()], _transform_dec = [inject.canvas.transform()], _addListener_dec = [inject.canvas.addListener()], _init_dec = [OnInit], _render_dec = [layer(Layer.Canvas)], _a) {
+  constructor() {
+    super(...arguments);
+    __runInitializers(_init, 5, this);
+    __publicField(this, "config");
+    __publicField(this, "scrollbarTimeout", null);
+    __publicField(this, "isDraggingHorizontal", false);
+    __publicField(this, "isDraggingVertical", false);
+    __publicField(this, "startDragPos", { x: 0, y: 0 });
+    __publicField(this, "startScrollPos", { x: 0, y: 0 });
+    __publicField(this, "name", "canvasScrollbar");
+    __publicField(this, "showScrollbars", __runInitializers(_init, 8, this, false)), __runInitializers(_init, 11, this);
+    __publicField(this, "container", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __publicField(this, "contentSize", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __publicField(this, "transform", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    __publicField(this, "addListener", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
+    // 滚动条拖拽事件处理
+    __publicField(this, "handleMouseDown", (e, type) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (type === "horizontal") {
+        this.isDraggingHorizontal = true;
+        this.startDragPos.x = e.clientX;
+        this.startScrollPos.x = -this.transform.positionX;
+      } else {
+        this.isDraggingVertical = true;
+        this.startDragPos.y = e.clientY;
+        this.startScrollPos.y = -this.transform.positionY;
+      }
+      const handleMouseMove = (e2) => {
+        if (!this.transform || !this.contentSize)
+          return;
+        if (this.isDraggingHorizontal) {
+          const horizontalTracker = this.getScrollTracker("horizontal");
+          const horizontalThumb = this.getScrollThumb("vertical");
+          const trackWidth = (horizontalTracker == null ? void 0 : horizontalTracker.clientWidth) || 0;
+          const thumbWidth = (horizontalThumb == null ? void 0 : horizontalThumb.clientWidth) || 0;
+          const contentWidth = this.contentSize.width * this.transform.scale;
+          const maxScroll = contentWidth - this.container.width;
+          const deltaX = e2.clientX - this.startDragPos.x;
+          const deltaScrollPercentage = deltaX / (trackWidth - thumbWidth);
+          const deltaScroll = deltaScrollPercentage * maxScroll;
+          const newScrollX = Math.max(0, Math.min(maxScroll, this.startScrollPos.x + deltaScroll));
+          this.callTool("canvas", "setTransform", {
+            positionX: -newScrollX,
+            positionY: this.transform.positionY,
+            scale: this.transform.scale,
+            animationTime: 0
+          });
+        }
+        if (this.isDraggingVertical) {
+          const verticalTracker = this.getScrollTracker("vertical");
+          const verticalThumb = this.getScrollThumb("vertical");
+          const trackHeight = (verticalTracker == null ? void 0 : verticalTracker.clientHeight) || 0;
+          const thumbHeight = (verticalThumb == null ? void 0 : verticalThumb.clientHeight) || 0;
+          const contentHeight = this.contentSize.height * this.transform.scale;
+          const maxScroll = contentHeight - this.container.height;
+          const deltaY = e2.clientY - this.startDragPos.y;
+          const deltaScrollPercentage = deltaY / (trackHeight - thumbHeight);
+          const deltaScroll = deltaScrollPercentage * maxScroll;
+          const newScrollY = Math.max(0, Math.min(maxScroll, this.startScrollPos.y + deltaScroll));
+          this.callTool("canvas", "setTransform", {
+            positionX: this.transform.positionX,
+            positionY: -newScrollY,
+            scale: this.transform.scale,
+            animationTime: 0
+          });
+        }
+      };
+      const handleMouseUp = () => {
+        this.isDraggingHorizontal = false;
+        this.isDraggingVertical = false;
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    });
+    // 滚动条轨道点击事件
+    __publicField(this, "handleTrackerClick", (e, direction) => {
+      const horizontalTracker = this.getScrollTracker("horizontal");
+      const verticalTracker = this.getScrollTracker("vertical");
+      const horizontalThumb = this.getScrollThumb("horizontal");
+      const verticalThumb = this.getScrollThumb("vertical");
+      if (direction === "horizontal" && e.target === horizontalThumb || direction === "vertical" && e.target === verticalThumb) {
+        return;
+      }
+      if (!this.contentSize)
+        return;
+      if (direction === "horizontal" && horizontalTracker && horizontalThumb) {
+        const trackRect = horizontalTracker.getBoundingClientRect();
+        const thumbRect = horizontalThumb.getBoundingClientRect();
+        const clickPosition = e.clientX - trackRect.left;
+        const thumbHalfWidth = thumbRect.width / 2;
+        const trackWidth = trackRect.width;
+        const contentWidth = this.contentSize.width * this.transform.scale;
+        const maxScroll = contentWidth - this.container.width;
+        const clickPercentage = (clickPosition - thumbHalfWidth) / (trackWidth - thumbRect.width);
+        const newScrollX = Math.max(0, Math.min(maxScroll, clickPercentage * maxScroll));
+        this.callTool("canvas", "setTransform", {
+          positionX: -newScrollX,
+          positionY: this.transform.positionY,
+          scale: this.transform.scale
+        });
+      }
+      if (direction === "vertical" && verticalTracker && verticalThumb) {
+        const trackRect = verticalTracker.getBoundingClientRect();
+        const thumbRect = verticalThumb.getBoundingClientRect();
+        const clickPosition = e.clientY - trackRect.top;
+        const thumbHalfHeight = thumbRect.height / 2;
+        const trackHeight = trackRect.height;
+        const contentHeight = this.contentSize.height * this.transform.scale;
+        const maxScroll = contentHeight - this.container.height;
+        const clickPercentage = (clickPosition - thumbHalfHeight) / (trackHeight - thumbRect.height);
+        const newScrollY = Math.max(0, Math.min(maxScroll, clickPercentage * maxScroll));
+        this.callTool("canvas", "setTransform", {
+          positionX: this.transform.positionX,
+          positionY: -newScrollY,
+          scale: this.transform.scale
+        });
+      }
+    });
+    __publicField(this, "getScrollTracker", (direction) => {
+      return document.querySelector(`[data-plugin-id="${this.pluginId}"][data-tracker-type="${direction}"]`);
+    });
+    __publicField(this, "getScrollThumb", (direction) => {
+      return document.querySelector(`[data-plugin-id="${this.pluginId}"][data-thumb-type="${direction}"]`);
+    });
+    __publicField(this, "handleMouseEnter", () => {
+      this.showScrollbars = true;
+      if (this.scrollbarTimeout) {
+        clearTimeout(this.scrollbarTimeout);
+        this.scrollbarTimeout = null;
+      }
+    });
+    __publicField(this, "handleMouseLeave", () => {
+      if (this.scrollbarTimeout) {
+        clearTimeout(this.scrollbarTimeout);
+      }
+      this.scrollbarTimeout = window.setTimeout(() => {
+        this.showScrollbars = false;
+      }, this.config.hideTimeout);
+    });
+  }
+  init(config) {
+    this.config = __spreadValues(__spreadValues({}, defaultProps), config);
+    this.addListener("mouseenter", this.handleMouseEnter);
+    this.addListener("mouseleave", this.handleMouseLeave);
+  }
+  // 更新滚动条位置与状态
+  getUpdatedScrollbarsStyle(config, container, transform, contentSize, showScrollbars) {
+    if (!contentSize) {
+      return [void 0, void 0];
+    }
+    const basicTrackStyle = __spreadValues({
+      position: "absolute",
+      borderRadius: "6px",
+      backgroundColor: "rgba(0, 0, 0, 0.1)",
+      transition: showScrollbars ? "opacity 0.2s" : "opacity 0.2s",
+      pointerEvents: showScrollbars ? "auto" : "none",
+      opacity: showScrollbars ? 0.6 : 0,
+      zIndex: Layer.Foreground
+    }, config.style.track);
+    const basicThumbStyle = __spreadValues({
+      position: "absolute",
+      borderRadius: "6px",
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+      cursor: "pointer",
+      transition: "background-color 0.2s"
+    }, config.style.thumb);
+    const { scale, positionX, positionY } = transform;
+    let [horizontalStyle, verticalStyle] = [void 0, void 0];
+    const contentWidth = contentSize.width * scale;
+    if (container.width < contentWidth) {
+      const thumbWidthPercentage = Math.min(1, container.width / contentWidth);
+      const thumbWidth = Math.max(config.minThumbSize, container.width * thumbWidthPercentage);
+      const maxScrollX = contentWidth - container.width;
+      const scrollPercentage = maxScrollX > 0 ? Math.max(0, Math.min(1, -positionX / maxScrollX)) : 0;
+      const maxThumbOffset = container.width - thumbWidth;
+      const horizontalThumbOffset = scrollPercentage * maxThumbOffset;
+      horizontalStyle = {
+        track: __spreadProps(__spreadValues({}, basicTrackStyle), {
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: config.size
+        }),
+        thumb: __spreadProps(__spreadValues({}, basicThumbStyle), {
+          transform: `translateX(${horizontalThumbOffset}px)`,
+          height: "100%",
+          width: `${thumbWidth}px`
+        })
+      };
+    }
+    const contentHeight = contentSize.height * scale;
+    if (container.height < contentHeight) {
+      const thumbHeightPercentage = Math.min(1, container.height / contentHeight);
+      const thumbHeight = Math.max(config.minThumbSize, container.height * thumbHeightPercentage);
+      const maxScrollY = contentHeight - container.height;
+      const scrollPercentage = maxScrollY > 0 ? Math.max(0, Math.min(1, -positionY / maxScrollY)) : 0;
+      const maxThumbOffset = container.height - thumbHeight;
+      const verticalThumbOffset = scrollPercentage * maxThumbOffset;
+      verticalStyle = {
+        track: __spreadProps(__spreadValues({}, basicTrackStyle), {
+          top: 0,
+          right: 0,
+          bottom: 0,
+          width: config.size
+        }),
+        thumb: __spreadProps(__spreadValues({}, basicThumbStyle), {
+          transform: `translateY(${verticalThumbOffset}px)`,
+          height: `${thumbHeight}px`,
+          width: "100%"
+        })
+      };
+    }
+    return [horizontalStyle, verticalStyle];
+  }
+  render({ children } = { children: null }) {
+    const config = use(() => this.config);
+    const container = use(() => this.container);
+    const transform = use(() => this.transform);
+    const contentSize = use(() => this.contentSize);
+    const showScrollbars = use(() => this.showScrollbars);
+    const [horizontalStyle, verticalStyle] = this.getUpdatedScrollbarsStyle(
+      config,
+      container,
+      transform,
+      contentSize,
+      showScrollbars
+    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      children,
+      horizontalStyle && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-plugin-id": this.pluginId,
+          "data-tracker-type": "horizontal",
+          className: bem(this.name, "track-horizontal"),
+          style: horizontalStyle.track,
+          onClick: (e) => this.handleTrackerClick(e, "horizontal"),
+          onMouseEnter: this.handleMouseEnter,
+          onMouseLeave: this.handleMouseLeave,
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-plugin-id": this.pluginId,
+              "data-thumb-type": "horizontal",
+              className: bem(this.name, "thumb-horizontal"),
+              style: horizontalStyle.thumb,
+              onMouseDown: (e) => this.handleMouseDown(e, "horizontal")
+            }
+          )
+        }
+      ),
+      verticalStyle && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-plugin-id": this.pluginId,
+          "data-tracker-type": "vertical",
+          className: bem(this.name, "track-vertical"),
+          style: verticalStyle.track,
+          onClick: (e) => this.handleTrackerClick(e, "vertical"),
+          onMouseEnter: this.handleMouseEnter,
+          onMouseLeave: this.handleMouseLeave,
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-plugin-id": this.pluginId,
+              "data-thumb-type": "vertical",
+              className: bem(this.name, "thumb-vertical"),
+              style: verticalStyle.thumb,
+              onMouseDown: (e) => this.handleMouseDown(e, "vertical")
+            }
+          )
+        }
+      )
+    ] });
+  }
+}
+_init = __decoratorStart(_a);
+__decorateElement(_init, 1, "init", _init_dec, CanvasScrollbar);
+__decorateElement(_init, 1, "render", _render_dec, CanvasScrollbar);
+__decorateElement(_init, 5, "showScrollbars", _showScrollbars_dec, CanvasScrollbar);
+__decorateElement(_init, 5, "container", _container_dec, CanvasScrollbar);
+__decorateElement(_init, 5, "contentSize", _contentSize_dec, CanvasScrollbar);
+__decorateElement(_init, 5, "transform", _transform_dec, CanvasScrollbar);
+__decorateElement(_init, 5, "addListener", _addListener_dec, CanvasScrollbar);
+__decoratorMetadata(_init, CanvasScrollbar);
+
+export { CanvasScrollbar };

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@knotx/plugins-canvas-scrollbar",
+  "version": "0.4.6",
+  "description": "Canvas Scrollbar Plugin for Knotx",
+  "author": "boenfu",
+  "license": "MIT",
+  "homepage": "https://github.com/boenfu/knotx#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/boenfu/knotx.git",
+    "directory": "packages/plugins-canvas-scrollbar"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "@knotx/jsx": "0.4.6",
+    "@knotx/plugins-canvas": "0.4.6"
+  },
+  "dependencies": {
+    "@knotx/core": "0.4.6",
+    "@knotx/decorators": "0.4.6"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "react": "^17.0.0",
+    "@knotx/build-config": "0.4.6",
+    "@knotx/eslint-config": "0.4.6",
+    "@knotx/jsx": "0.4.6",
+    "@knotx/plugins-canvas": "0.4.6",
+    "@knotx/typescript-config": "0.4.6"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "dev": "unbuild --stub",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit"
+  }
+}