quill-table-up 3.1.2 → 3.2.0

package/src/utils/drag-helper.ts

@@ -0,0 +1,112 @@
+import type { Position } from './types';
+
+export interface DragPosition {
+  startPosition: Position;
+  position: Position;
+  movePosition: Position;
+}
+export interface DragElementOptions {
+  axis: 'x' | 'y' | 'both';
+  onStart: (position: DragPosition, e: PointerEvent) => void | boolean;
+  onMove: (position: DragPosition, e: PointerEvent) => void;
+  onEnd: (position: DragPosition, e: PointerEvent) => void;
+  buttons: number[];
+  container: HTMLElement;
+  draggingElement: HTMLElement | Window | Document;
+  exact: boolean;
+}
+
+export function dragElement(target: HTMLElement, options: Partial<DragElementOptions> = {}) {
+  const {
+    axis = 'both',
+    onMove = () => {},
+    onStart = () => {},
+    onEnd = () => {},
+    buttons = [0],
+    container,
+    draggingElement = document,
+    exact = true,
+  } = options;
+
+  let position = { x: 0, y: 0 };
+  let startPosition: Position | undefined;
+  let startPoint = { x: 0, y: 0 };
+
+  function updatePositionByEvent(e: PointerEvent) {
+    if (!startPosition) return;
+    const targetRect = target.getBoundingClientRect();
+    let { x, y } = position;
+    if (axis === 'x' || axis === 'both') {
+      x = e.clientX - startPosition.x;
+      if (container) {
+        x = Math.min(Math.max(0, x), container.scrollWidth - targetRect!.width);
+      }
+    }
+    if (axis === 'y' || axis === 'both') {
+      y = e.clientY - startPosition.y;
+      if (container) {
+        y = Math.min(Math.max(0, y), container.scrollHeight - targetRect!.height);
+      }
+    }
+    position = {
+      x,
+      y,
+    };
+  }
+  function handlePointerDown(e: PointerEvent) {
+    if (!buttons.includes(e.button)) return;
+    if (exact && e.target !== target) return;
+
+    (draggingElement as HTMLElement).addEventListener('pointerup', handlePointerUp);
+    (draggingElement as HTMLElement).addEventListener('pointermove', handlePointerMove);
+
+    const containerRect = container?.getBoundingClientRect?.();
+    const targetRect = target.getBoundingClientRect();
+    const pos = {
+      x: e.clientX - (container ? targetRect.left - containerRect!.left + container.scrollLeft : targetRect.left),
+      y: e.clientY - (container ? targetRect.top - containerRect!.top + container.scrollTop : targetRect.top),
+    };
+    startPoint = { x: e.clientX, y: e.clientY };
+    if (onStart({
+      position,
+      startPosition: pos,
+      movePosition: { x: e.clientX - startPoint.x, y: e.clientY - startPoint.y },
+    }, e) === false) {
+      return;
+    }
+
+    startPosition = pos;
+    position = pos;
+  }
+  function handlePointerMove(e: PointerEvent) {
+    if (!startPosition) return;
+    updatePositionByEvent(e);
+    onMove({
+      position,
+      startPosition,
+      movePosition: { x: e.clientX - startPoint.x, y: e.clientY - startPoint.y },
+    }, e);
+  }
+  function handlePointerUp(e: PointerEvent) {
+    (draggingElement as HTMLElement).removeEventListener('pointermove', handlePointerMove);
+    (draggingElement as HTMLElement).removeEventListener('pointerup', handlePointerUp);
+    updatePositionByEvent(e);
+    onEnd({
+      position,
+      startPosition: startPosition!,
+      movePosition: { x: e.clientX - startPoint.x, y: e.clientY - startPoint.y },
+    }, e);
+    startPosition = undefined;
+    startPoint = { x: 0, y: 0 };
+    position = { x: 0, y: 0 };
+  }
+
+  (draggingElement as HTMLElement).addEventListener('pointerdown', handlePointerDown);
+
+  const stop = () => {
+    (draggingElement as HTMLElement).removeEventListener('pointerdown', handlePointerDown);
+  };
+  return {
+    stop,
+  };
+}

package/src/utils/index.ts

@@ -1,14 +1,15 @@
-export * from './bem';
-export * from './blot-helper';
-export * from './color';
-export * from './components';
-export * from './constants';
-export * from './is';
-export * from './position';
-export * from './resize-observer-helper';
-export * from './scroll';
-export * from './style-helper';
-export * from './transformer';
-export * from './transition-event-helper';
-export * from './types';
-export * from './utils';
+export * from './bem';
+export * from './blot-helper';
+export * from './color';
+export * from './components';
+export * from './constants';
+export * from './drag-helper';
+export * from './is';
+export * from './position';
+export * from './resize-observer-helper';
+export * from './scroll';
+export * from './style-helper';
+export * from './transformer';
+export * from './transition-event-helper';
+export * from './types';
+export * from './utils';

package/src/utils/is.ts

@@ -1,9 +1,9 @@
-export const isFunction = (val: unknown): val is Function => typeof val === 'function';
-export const isBoolean = (val: unknown): val is boolean => typeof val === 'boolean';
-export const isArray = Array.isArray;
-export const isString = (val: unknown): val is string => typeof val === 'string';
-export const isNumber = (val: unknown): val is number => typeof val === 'number';
-export const isObject = (val: unknown): val is Record<any, any> => val !== null && typeof val === 'object';
-export const isUndefined = (val: unknown): val is undefined => val === undefined;
-export const isValidCellspan = (val: unknown): boolean => !Number.isNaN(val) && Number(val) > 0;
-export const ensureArray = <T>(val: T | T[]): T[] => isArray(val) ? val : [val];
+export const isFunction = (val: unknown): val is Function => typeof val === 'function';
+export const isBoolean = (val: unknown): val is boolean => typeof val === 'boolean';
+export const isArray = Array.isArray;
+export const isString = (val: unknown): val is string => typeof val === 'string';
+export const isNumber = (val: unknown): val is number => typeof val === 'number';
+export const isObject = (val: unknown): val is Record<any, any> => val !== null && typeof val === 'object';
+export const isUndefined = (val: unknown): val is undefined => val === undefined;
+export const isValidCellspan = (val: unknown): boolean => !Number.isNaN(val) && Number(val) > 0;
+export const ensureArray = <T>(val: T | T[]): T[] => isArray(val) ? val : [val];

package/src/utils/position.ts

@@ -1,60 +1,60 @@
-import type { RelactiveRect } from './types';
-
-export function isRectanglesIntersect<T extends Omit<RelactiveRect, 'width' | 'height'>>(a: T, b: T, tolerance = 0, edgeJudge: boolean = true) {
-  const { x: minAx, y: minAy, x1: maxAx, y1: maxAy } = a;
-  const { x: minBx, y: minBy, x1: maxBx, y1: maxBy } = b;
-
-  let notOverlapX;
-  let notOverlapY;
-  if (edgeJudge) {
-    notOverlapX = maxAx < minBx + tolerance || minAx - tolerance > maxBx;
-    notOverlapY = maxAy < minBy + tolerance || minAy - tolerance > maxBy;
-  }
-  else {
-    notOverlapX = maxAx <= minBx + tolerance || minAx - tolerance >= maxBx;
-    notOverlapY = maxAy <= minBy + tolerance || minAy - tolerance >= maxBy;
-  }
-  return !(notOverlapX || notOverlapY);
-}
-
-export function getRelativeRect(targetRect: Omit<RelactiveRect, 'x1' | 'y1'>, container: HTMLElement): RelactiveRect {
-  const containerRect = container.getBoundingClientRect();
-  return {
-    x: targetRect.x - containerRect.x - container.scrollLeft,
-    y: targetRect.y - containerRect.y - container.scrollTop,
-    x1: targetRect.x - containerRect.x - container.scrollLeft + targetRect.width,
-    y1: targetRect.y - containerRect.y - container.scrollTop + targetRect.height,
-    width: targetRect.width,
-    height: targetRect.height,
-  };
-}
-
-const viewportPadding = 8;
-export function limitDomInViewPort(rect: { left: number; top: number; width: number; height: number }) {
-  let { left, top, width, height } = rect;
-  const { clientWidth, clientHeight } = document.documentElement;
-  let leftLimited = false;
-  let topLimited = false;
-  if (left + width > clientWidth) {
-    left = clientWidth - width - viewportPadding;
-    leftLimited = true;
-  }
-  else if (left < 0) {
-    left = viewportPadding;
-    leftLimited = true;
-  }
-  if (top + height > clientHeight) {
-    top = clientHeight - height - viewportPadding;
-    topLimited = true;
-  }
-  else if (top < 0) {
-    top = viewportPadding;
-    topLimited = true;
-  }
-  return {
-    left,
-    top,
-    leftLimited,
-    topLimited,
-  };
-}
+import type { RelactiveRect } from './types';
+
+export function isRectanglesIntersect<T extends Omit<RelactiveRect, 'width' | 'height'>>(a: T, b: T, tolerance = 0, edgeJudge: boolean = true) {
+  const { x: minAx, y: minAy, x1: maxAx, y1: maxAy } = a;
+  const { x: minBx, y: minBy, x1: maxBx, y1: maxBy } = b;
+
+  let notOverlapX;
+  let notOverlapY;
+  if (edgeJudge) {
+    notOverlapX = maxAx < minBx + tolerance || minAx - tolerance > maxBx;
+    notOverlapY = maxAy < minBy + tolerance || minAy - tolerance > maxBy;
+  }
+  else {
+    notOverlapX = maxAx <= minBx + tolerance || minAx - tolerance >= maxBx;
+    notOverlapY = maxAy <= minBy + tolerance || minAy - tolerance >= maxBy;
+  }
+  return !(notOverlapX || notOverlapY);
+}
+
+export function getRelativeRect(targetRect: Omit<RelactiveRect, 'x1' | 'y1'>, container: HTMLElement): RelactiveRect {
+  const containerRect = container.getBoundingClientRect();
+  return {
+    x: targetRect.x - containerRect.x - container.scrollLeft,
+    y: targetRect.y - containerRect.y - container.scrollTop,
+    x1: targetRect.x - containerRect.x - container.scrollLeft + targetRect.width,
+    y1: targetRect.y - containerRect.y - container.scrollTop + targetRect.height,
+    width: targetRect.width,
+    height: targetRect.height,
+  };
+}
+
+const viewportPadding = 8;
+export function limitDomInViewPort(rect: { left: number; top: number; width: number; height: number }) {
+  let { left, top, width, height } = rect;
+  const { clientWidth, clientHeight } = document.documentElement;
+  let leftLimited = false;
+  let topLimited = false;
+  if (left + width > clientWidth) {
+    left = clientWidth - width - viewportPadding;
+    leftLimited = true;
+  }
+  else if (left < 0) {
+    left = viewportPadding;
+    leftLimited = true;
+  }
+  if (top + height > clientHeight) {
+    top = clientHeight - height - viewportPadding;
+    topLimited = true;
+  }
+  else if (top < 0) {
+    top = viewportPadding;
+    topLimited = true;
+  }
+  return {
+    left,
+    top,
+    leftLimited,
+    topLimited,
+  };
+}

package/src/utils/resize-observer-helper.ts

@@ -1,47 +1,47 @@
-export interface CreateResizeObserverOptions {
-  ignoreFirstBind: boolean;
-}
-export function createResizeObserver(callback: (entries: ResizeObserverEntry[]) => void, options: Partial<CreateResizeObserverOptions> = {}) {
-  const ignoreFirstBindSymbol = Symbol('ignoreFirstBind');
-  type ResizeObserveTarget = Element & { [ignoreFirstBindSymbol]?: boolean };
-  const observeEls: Set<ResizeObserveTarget> = new Set();
-  const observer = new ResizeObserver((entries) => {
-    // prevent when element first bind
-    if (
-      options.ignoreFirstBind
-      && entries.some((entry) => {
-        const target = entry.target as ResizeObserveTarget;
-        const originVal = target[ignoreFirstBindSymbol];
-        target[ignoreFirstBindSymbol] = true;
-        return !originVal;
-      })
-    ) {
-      return;
-    }
-    callback(entries);
-  });
-  const originObserve = observer.observe;
-  observer.observe = (target: ResizeObserveTarget, options?: ResizeObserverOptions) => {
-    observeEls.add(target);
-    originObserve.call(observer, target, options);
-  };
-
-  const originUnobserve = observer.unobserve;
-  observer.unobserve = (target: ResizeObserveTarget) => {
-    if (observeEls.has(target)) {
-      observeEls.delete(target);
-      target[ignoreFirstBindSymbol] = undefined;
-    }
-    originUnobserve.call(observer, target);
-  };
-
-  const originDisconnect = observer.disconnect;
-  observer.disconnect = () => {
-    for (const target of observeEls.values()) {
-      target[ignoreFirstBindSymbol] = undefined;
-    }
-    originDisconnect.call(observer);
-  };
-
-  return observer;
-}
+export interface CreateResizeObserverOptions {
+  ignoreFirstBind: boolean;
+}
+export function createResizeObserver(callback: (entries: ResizeObserverEntry[]) => void, options: Partial<CreateResizeObserverOptions> = {}) {
+  const ignoreFirstBindSymbol = Symbol('ignoreFirstBind');
+  type ResizeObserveTarget = Element & { [ignoreFirstBindSymbol]?: boolean };
+  const observeEls: Set<ResizeObserveTarget> = new Set();
+  const observer = new ResizeObserver((entries) => {
+    // prevent when element first bind
+    if (
+      options.ignoreFirstBind
+      && entries.some((entry) => {
+        const target = entry.target as ResizeObserveTarget;
+        const originVal = target[ignoreFirstBindSymbol];
+        target[ignoreFirstBindSymbol] = true;
+        return !originVal;
+      })
+    ) {
+      return;
+    }
+    callback(entries);
+  });
+  const originObserve = observer.observe.bind(observer);
+  observer.observe = (target: ResizeObserveTarget, options?: ResizeObserverOptions) => {
+    observeEls.add(target);
+    originObserve(target, options);
+  };
+
+  const originUnobserve = observer.unobserve;
+  observer.unobserve = (target: ResizeObserveTarget) => {
+    if (observeEls.has(target)) {
+      observeEls.delete(target);
+      target[ignoreFirstBindSymbol] = undefined;
+    }
+    originUnobserve.call(observer, target);
+  };
+
+  const originDisconnect = observer.disconnect;
+  observer.disconnect = () => {
+    for (const target of observeEls.values()) {
+      target[ignoreFirstBindSymbol] = undefined;
+    }
+    originDisconnect.call(observer);
+  };
+
+  return observer;
+}

package/src/utils/scroll.ts

@@ -1,47 +1,145 @@
-export interface ScrollHandle {
-  scrollHandler: [HTMLElement, (e: Event) => void][];
-}
-export function addScrollEvent(this: ScrollHandle, dom: HTMLElement, handle: (e: Event) => void) {
-  dom.addEventListener('scroll', handle);
-  this.scrollHandler.push([dom, handle]);
-}
-
-export function clearScrollEvent(this: ScrollHandle) {
-  for (let i = 0; i < this.scrollHandler.length; i++) {
-    const [dom, handle] = this.scrollHandler[i];
-    dom.removeEventListener('scroll', handle);
-  }
-  this.scrollHandler = [];
-}
-
-export function getElementScrollPosition(el: HTMLElement) {
-  return {
-    y: el.scrollTop,
-    x: el.scrollLeft,
-  };
-}
-
-export function getScrollBarWidth({ target = document.body } = {}): number {
-  const outer = document.createElement('div');
-  Object.assign(outer.style, {
-    visibility: 'hidden',
-    width: '100px',
-    height: '100%',
-    overflow: 'auto',
-    position: 'absolute',
-    top: '-9999px',
-  });
-  target.appendChild(outer);
-
-  const widthNoScroll = outer.offsetWidth;
-  outer.style.overflow = 'scroll';
-
-  const inner = document.createElement('div');
-  inner.style.width = '100%';
-  outer.appendChild(inner);
-
-  const widthWithScroll = inner.offsetWidth;
-  outer.parentNode?.removeChild(outer);
-
-  return widthNoScroll - widthWithScroll;
-}
+export interface ScrollHandle {
+  scrollHandler: [HTMLElement, (e: Event) => void][];
+}
+export function addScrollEvent(this: ScrollHandle, dom: HTMLElement, handle: (e: Event) => void) {
+  dom.addEventListener('scroll', handle);
+  this.scrollHandler.push([dom, handle]);
+}
+
+export function removeScrollEvent(this: ScrollHandle, dom: HTMLElement, handle: (e: Event) => void) {
+  for (let i = 0; i < this.scrollHandler.length; i++) {
+    const [_dom, _handle] = this.scrollHandler[i];
+    if (_dom === dom && _handle === handle) {
+      this.scrollHandler.splice(i, 1);
+      break;
+    }
+  }
+}
+
+export function clearScrollEvent(this: ScrollHandle) {
+  for (const [dom, handle] of this.scrollHandler) {
+    dom.removeEventListener('scroll', handle);
+  }
+  this.scrollHandler = [];
+}
+
+export function getElementScrollPosition(el: HTMLElement) {
+  return {
+    y: el.scrollTop,
+    x: el.scrollLeft,
+  };
+}
+
+export function getScrollBarWidth({ target = document.body } = {}): number {
+  const outer = document.createElement('div');
+  Object.assign(outer.style, {
+    visibility: 'hidden',
+    width: '100px',
+    height: '100%',
+    overflow: 'auto',
+    position: 'absolute',
+    top: '-9999px',
+  });
+  target.appendChild(outer);
+
+  const widthNoScroll = outer.offsetWidth;
+  outer.style.overflow = 'scroll';
+
+  const inner = document.createElement('div');
+  inner.style.width = '100%';
+  outer.appendChild(inner);
+
+  const widthWithScroll = inner.offsetWidth;
+  outer.parentNode?.removeChild(outer);
+
+  return widthNoScroll - widthWithScroll;
+}
+
+export class AutoScroller {
+  mouseY = 0;
+  mouseX = 0;
+  private animationId: number | null = null;
+
+  constructor(
+    public scrollThresholdX: number = 50,
+    public scrollThresholdY: number = 20,
+    public maxScrollSpeed: number = 20,
+  ) {}
+
+  checkMinY(containerRect: DOMRect) {
+    return this.mouseY < containerRect.top + this.scrollThresholdY;
+  }
+
+  checkMaxY(containerRect: DOMRect) {
+    return this.mouseY > containerRect.bottom - this.scrollThresholdY;
+  }
+
+  checkMinX(containerRect: DOMRect) {
+    return this.mouseX < containerRect.left + this.scrollThresholdX;
+  }
+
+  checkMaxX(containerRect: DOMRect) {
+    return this.mouseX > containerRect.right - this.scrollThresholdX;
+  }
+
+  start(container: HTMLElement, onScroll?: (speedX: number, speedY: number) => void) {
+    // before call `start` also need call `updateMousePosition`
+    // consider if needed put `getBoundingClientRect` in `scroll`
+    const rect = container.getBoundingClientRect();
+    const scroll = () => {
+      let scrolled = false;
+      let speedX = 0;
+      let speedY = 0;
+      if (this.checkMinY(rect)) {
+        const distance = rect.top + this.scrollThresholdY - this.mouseY;
+        const speed = Math.min(distance / this.scrollThresholdY * this.maxScrollSpeed, this.maxScrollSpeed);
+        container.scrollTop -= speed;
+        speedY = -1 * speed;
+        scrolled = true;
+      }
+      else if (this.checkMaxY(rect)) {
+        const distance = this.mouseY - (rect.bottom - this.scrollThresholdY);
+        const speed = Math.min(distance / this.scrollThresholdY * this.maxScrollSpeed, this.maxScrollSpeed);
+        container.scrollTop += speed;
+        speedY = speed;
+        scrolled = true;
+      }
+
+      if (this.checkMinX(rect)) {
+        const distance = rect.left + this.scrollThresholdX - this.mouseX;
+        const speed = Math.min(distance / this.scrollThresholdX * this.maxScrollSpeed, this.maxScrollSpeed);
+        container.scrollLeft -= speed;
+        speedX = -1 * speed;
+        scrolled = true;
+      }
+      else if (this.checkMaxX(rect)) {
+        const distance = this.mouseX - (rect.right - this.scrollThresholdX);
+        const speed = Math.min(distance / this.scrollThresholdX * this.maxScrollSpeed, this.maxScrollSpeed);
+        container.scrollLeft += speed;
+        speedX = speed;
+        scrolled = true;
+      }
+
+      if (scrolled && onScroll) {
+        onScroll(speedX, speedY);
+      }
+      this.animationId = requestAnimationFrame(scroll);
+    };
+
+    this.animationId = requestAnimationFrame(scroll);
+  }
+
+  // update mouse position when `mousemove` event triggered
+  updateMousePosition(x: number, y: number) {
+    this.mouseX = x;
+    this.mouseY = y;
+  }
+
+  // stop listening scroll event when `mouseup` event triggered
+  stop() {
+    if (this.animationId !== null) {
+      cancelAnimationFrame(this.animationId);
+      this.animationId = null;
+    }
+  }
+}

package/src/utils/style-helper.ts

@@ -1,47 +1,47 @@
-import { toCamelCase, toKebabCase } from './transformer';
-
-export function getInlineStyles(domNode: HTMLElement): Record<string, string> {
-  const inlineStyles: Record<string, string> = {};
-  if (!domNode.style.cssText) {
-    return inlineStyles;
-  }
-
-  const cssText = domNode.style.cssText;
-  const declarations = cssText.split(';').filter(decl => decl.trim());
-  for (const declaration of declarations) {
-    const colonIndex = declaration.indexOf(':');
-    if (colonIndex === -1) continue;
-
-    const property = declaration.slice(0, colonIndex).trim();
-    const value = declaration.slice(colonIndex + 1).trim();
-    inlineStyles[property] = value;
-  }
-
-  return inlineStyles;
-}
-
-export function cssTextToObject(cssText: string): Record<string, string> {
-  const styleObject: Record<string, string> = {};
-
-  const styles = cssText.trim().split(';');
-
-  for (let i = 0; i < styles.length; i++) {
-    const style = styles[i].trim();
-    if (!style) continue;
-
-    const colonPosition = style.indexOf(':');
-    if (colonPosition === -1) continue;
-
-    const property = style.slice(0, Math.max(0, colonPosition)).trim();
-    const value = style.slice(Math.max(0, colonPosition + 1)).trim();
-    styleObject[toCamelCase(property)] = value;
-  }
-
-  return styleObject;
-}
-
-export function objectToCssText(obj: Record<string, any>): string {
-  return Object.entries(obj)
-    .map(([key, value]) => `${toKebabCase(key)}: ${value};`)
-    .join(' ');
-}
+import { toCamelCase, toKebabCase } from './transformer';
+
+export function getInlineStyles(domNode: HTMLElement): Record<string, string> {
+  const inlineStyles: Record<string, string> = {};
+  if (!domNode.style.cssText) {
+    return inlineStyles;
+  }
+
+  const cssText = domNode.style.cssText;
+  const declarations = cssText.split(';').filter(decl => decl.trim());
+  for (const declaration of declarations) {
+    const colonIndex = declaration.indexOf(':');
+    if (colonIndex === -1) continue;
+
+    const property = declaration.slice(0, colonIndex).trim();
+    const value = declaration.slice(colonIndex + 1).trim();
+    inlineStyles[property] = value;
+  }
+
+  return inlineStyles;
+}
+
+export function cssTextToObject(cssText: string): Record<string, string> {
+  const styleObject: Record<string, string> = {};
+
+  const styles = cssText.trim().split(';');
+
+  for (const item of styles) {
+    const style = item.trim();
+    if (!style) continue;
+
+    const colonPosition = style.indexOf(':');
+    if (colonPosition === -1) continue;
+
+    const property = style.slice(0, Math.max(0, colonPosition)).trim();
+    const value = style.slice(Math.max(0, colonPosition + 1)).trim();
+    styleObject[toCamelCase(property)] = value;
+  }
+
+  return styleObject;
+}
+
+export function objectToCssText(obj: Record<string, any>): string {
+  return Object.entries(obj)
+    .map(([key, value]) => `${toKebabCase(key)}: ${value};`)
+    .join(' ');
+}