@antv/infographic 0.1.1 → 0.1.3

package/src/editor/plugins/edit-bar/components/popover.ts

@@ -0,0 +1,446 @@
+import { COMPONENT_ROLE } from '../../../../constants';
+import { injectStyleOnce, setElementRole } from '../../../../utils';
+
+export type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
+export type PopoverPlacementPreference = PopoverPlacement | PopoverPlacement[];
+
+export interface PopoverProps {
+  content: HTMLElement | string | (() => HTMLElement | string);
+  target?: HTMLElement;
+  getContainer?: HTMLElement | (() => HTMLElement);
+  placement?: PopoverPlacementPreference;
+  padding?: number | string;
+  open?: boolean;
+  closeOnOutsideClick?: boolean;
+  trigger?: 'hover' | 'click' | ('hover' | 'click')[];
+  mouseEnterDelay?: number;
+  mouseLeaveDelay?: number;
+  offset?: number;
+}
+
+export interface PopoverHandle {
+  setOpen: (open: boolean) => void;
+  toggle: () => void;
+  setContent: (content: PopoverProps['content']) => void;
+  setPlacement: (placement: PopoverPlacementPreference) => void;
+  destroy: () => void;
+}
+
+const POPOVER_CLASS = 'infographic-edit-popover';
+const POPOVER_CONTENT_CLASS = `${POPOVER_CLASS}__content`;
+const POPOVER_ARROW_CLASS = `${POPOVER_CLASS}__arrow`;
+const POPOVER_STYLE_ID = 'infographic-edit-popover-style';
+
+export function Popover(props: PopoverProps): HTMLDivElement & PopoverHandle {
+  ensurePopoverStyle();
+
+  const placement = props.placement ?? 'top';
+  const closeOnOutsideClick = props.closeOnOutsideClick ?? true;
+  const triggerActions = Array.isArray(props.trigger)
+    ? props.trigger
+    : [props.trigger || 'hover'];
+  const hoverOpenDelay = props.mouseEnterDelay ?? 50;
+  const hoverCloseDelay = props.mouseLeaveDelay ?? 150;
+  const offset = props.offset ?? 8;
+  const arrowSize = 8;
+  const arrowInnerSize = 7;
+  const bodyPadding =
+    typeof props.padding === 'number'
+      ? `${props.padding}px`
+      : (props.padding ?? '4px');
+
+  const container = document.createElement('div');
+  container.classList.add(POPOVER_CLASS);
+
+  const trigger = props.target ?? document.createElement('div');
+  container.appendChild(trigger);
+
+  const getContentContainer = () => {
+    const next =
+      typeof props.getContainer === 'function'
+        ? props.getContainer()
+        : props.getContainer;
+    return next ?? document.body;
+  };
+
+  const content = document.createElement('div');
+  content.classList.add(POPOVER_CONTENT_CLASS);
+  setElementRole(content, COMPONENT_ROLE);
+  content.dataset.placement = Array.isArray(placement)
+    ? placement[0]
+    : placement;
+  content.setAttribute('data-open', String(Boolean(props.open)));
+  content.style.setProperty('--popover-gap', `${offset}px`);
+  content.style.setProperty('--popover-arrow-size', `${arrowSize}px`);
+  content.style.setProperty(
+    '--popover-arrow-inner-size',
+    `${arrowInnerSize}px`,
+  );
+
+  const contentContainer = getContentContainer();
+  const isPortal = contentContainer !== container;
+
+  const arrow = document.createElement('div');
+  arrow.classList.add(POPOVER_ARROW_CLASS);
+  content.appendChild(arrow);
+
+  const body = document.createElement('div');
+  body.classList.add(`${POPOVER_CONTENT_CLASS}-body`);
+  body.style.padding = bodyPadding;
+  content.appendChild(body);
+
+  contentContainer.appendChild(content);
+
+  let open = Boolean(props.open);
+  let placementPriority = Array.isArray(placement) ? placement : [placement];
+  let currentPlacement: PopoverPlacement = placementPriority[0] ?? 'top';
+
+  const updatePosition = () => {
+    const targetRect = trigger.getBoundingClientRect();
+    const contentRect = content.getBoundingClientRect();
+    const scrollX = window.scrollX || document.documentElement.scrollLeft;
+    const scrollY = window.scrollY || document.documentElement.scrollTop;
+    const viewportWidth = document.documentElement.clientWidth;
+    const viewportHeight = document.documentElement.clientHeight;
+    let left = 0;
+    let top = 0;
+
+    const calcPosition = (placementValue: PopoverPlacement) => {
+      switch (placementValue) {
+        case 'top':
+          return {
+            left:
+              scrollX +
+              targetRect.left +
+              targetRect.width / 2 -
+              contentRect.width / 2,
+            top: scrollY + targetRect.top - contentRect.height - offset,
+          };
+        case 'bottom':
+          return {
+            left:
+              scrollX +
+              targetRect.left +
+              targetRect.width / 2 -
+              contentRect.width / 2,
+            top: scrollY + targetRect.bottom + offset,
+          };
+        case 'left':
+          return {
+            left: scrollX + targetRect.left - contentRect.width - offset,
+            top:
+              scrollY +
+              targetRect.top +
+              targetRect.height / 2 -
+              contentRect.height / 2,
+          };
+        case 'right':
+        default:
+          return {
+            left: scrollX + targetRect.right + offset,
+            top:
+              scrollY +
+              targetRect.top +
+              targetRect.height / 2 -
+              contentRect.height / 2,
+          };
+      }
+    };
+
+    const fitsViewport = (nextLeft: number, nextTop: number) =>
+      nextLeft >= scrollX &&
+      nextTop >= scrollY &&
+      nextLeft + contentRect.width <= scrollX + viewportWidth &&
+      nextTop + contentRect.height <= scrollY + viewportHeight;
+
+    let chosenPlacement = placementPriority[0] ?? 'top';
+    let position = calcPosition(chosenPlacement);
+    for (const candidate of placementPriority) {
+      const nextPosition = calcPosition(candidate);
+      position = nextPosition;
+      if (fitsViewport(nextPosition.left, nextPosition.top)) {
+        chosenPlacement = candidate;
+        break;
+      }
+    }
+
+    currentPlacement = chosenPlacement;
+    content.dataset.placement = currentPlacement;
+
+    if (!isPortal) return;
+
+    ({ left, top } = position);
+    content.style.left = `${left}px`;
+    content.style.top = `${top}px`;
+    content.style.right = 'auto';
+    content.style.bottom = 'auto';
+    content.style.transform = 'translate(0, 0)';
+  };
+
+  if (isPortal) {
+    content.style.position = 'absolute';
+    window.addEventListener('resize', updatePosition);
+    window.addEventListener('scroll', updatePosition, true);
+  }
+
+  const setContent = (next: PopoverProps['content']) => {
+    let nextContent = next;
+    if (typeof nextContent === 'function') {
+      nextContent = nextContent();
+    }
+    body.innerHTML = '';
+    if (nextContent instanceof HTMLElement) {
+      body.appendChild(nextContent);
+    } else {
+      body.textContent = nextContent ?? '';
+    }
+    updatePosition();
+  };
+
+  const setPlacement = (next: PopoverPlacementPreference) => {
+    placementPriority = Array.isArray(next) ? next : [next];
+    currentPlacement = placementPriority[0] ?? 'top';
+    updatePosition();
+  };
+
+  const setOpen = (value: boolean) => {
+    open = value;
+    content.setAttribute('data-open', String(open));
+    if (open) updatePosition();
+    if (open && closeOnOutsideClick) {
+      document.addEventListener('click', handleOutsideClick, true);
+    } else {
+      document.removeEventListener('click', handleOutsideClick, true);
+    }
+  };
+
+  const toggle = () => setOpen(!open);
+
+  const handleOutsideClick = (event: MouseEvent) => {
+    const targetNode = event.target as Node;
+    if (
+      !container.contains(targetNode) &&
+      (isPortal ? !content.contains(targetNode) : true)
+    ) {
+      setOpen(false);
+    }
+  };
+
+  let openTimer: number | undefined;
+  let closeTimer: number | undefined;
+
+  const hasHover = triggerActions.includes('hover');
+  const hasClick = triggerActions.includes('click');
+
+  const clearTimers = () => {
+    if (openTimer !== undefined) {
+      clearTimeout(openTimer);
+      openTimer = undefined;
+    }
+    if (closeTimer !== undefined) {
+      clearTimeout(closeTimer);
+      closeTimer = undefined;
+    }
+  };
+
+  const handleMouseEnter = () => {
+    if (!hasHover) return;
+    clearTimers();
+    openTimer = window.setTimeout(() => setOpen(true), hoverOpenDelay);
+  };
+
+  const handleMouseLeave = () => {
+    if (!hasHover) return;
+    clearTimers();
+    closeTimer = window.setTimeout(() => setOpen(false), hoverCloseDelay);
+  };
+
+  if (hasClick) {
+    trigger.addEventListener('click', toggle);
+  }
+  if (hasHover) {
+    container.addEventListener('mouseenter', handleMouseEnter);
+    container.addEventListener('mouseleave', handleMouseLeave);
+    content.addEventListener('mouseenter', handleMouseEnter);
+    content.addEventListener('mouseleave', handleMouseLeave);
+  }
+
+  setContent(props.content);
+  setPlacement(placement);
+  setOpen(open);
+
+  const api: PopoverHandle = {
+    setOpen,
+    toggle,
+    setContent,
+    setPlacement,
+    destroy: () => {
+      document.removeEventListener('click', handleOutsideClick, true);
+      if (hasClick) trigger.removeEventListener('click', toggle);
+      if (hasHover) {
+        container.removeEventListener('mouseenter', handleMouseEnter);
+        container.removeEventListener('mouseleave', handleMouseLeave);
+        content.removeEventListener('mouseenter', handleMouseEnter);
+        content.removeEventListener('mouseleave', handleMouseLeave);
+        clearTimers();
+      }
+      if (isPortal) {
+        window.removeEventListener('resize', updatePosition);
+        window.removeEventListener('scroll', updatePosition, true);
+        content.remove();
+      }
+      container.remove();
+    },
+  };
+
+  return Object.assign(container, api);
+}
+
+function ensurePopoverStyle() {
+  injectStyleOnce(
+    POPOVER_STYLE_ID,
+    `
+.${POPOVER_CLASS} {
+  position: relative;
+  display: inline-flex;
+}
+.${POPOVER_CONTENT_CLASS} {
+  position: absolute;
+  z-index: 1200;
+  padding: 0;
+  --popover-gap: 8px;
+  --popover-arrow-size: 8px;
+  --popover-arrow-inner-size: 7px;
+  background: #fff;
+  border-radius: 8px;
+  border: 1px solid rgba(239, 240, 240, 0.9);
+  box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 2px -2px, rgba(0, 0, 0, 0.04) 0px 2px 6px, rgba(0, 0, 0, 0.02) 0px 4px 8px 1px;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
+}
+.${POPOVER_CONTENT_CLASS}-body {
+  padding: 4px;
+  color: #000000d9;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.${POPOVER_CONTENT_CLASS}[data-open="true"] {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+.${POPOVER_ARROW_CLASS} {
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+.${POPOVER_ARROW_CLASS}::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="top"] {
+  left: 50%;
+  bottom: calc(100% + var(--popover-gap));
+  transform: translate(-50%, calc(-1 * var(--popover-gap) / 2));
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="top"] .${POPOVER_ARROW_CLASS} {
+  left: 50%;
+  bottom: calc(-1 * var(--popover-arrow-size));
+  transform: translateX(-50%);
+  border-left: var(--popover-arrow-size) solid transparent;
+  border-right: var(--popover-arrow-size) solid transparent;
+  border-top: var(--popover-arrow-size) solid rgba(239, 240, 240, 0.9);
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="top"] .${POPOVER_ARROW_CLASS}::after {
+  left: 50%;
+  bottom: 1px;
+  transform: translateX(-50%);
+  border-left: var(--popover-arrow-inner-size) solid transparent;
+  border-right: var(--popover-arrow-inner-size) solid transparent;
+  border-top: var(--popover-arrow-inner-size) solid #fff;
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="top"][data-open="true"] {
+  transform: translate(-50%, 0);
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="bottom"] {
+  left: 50%;
+  top: calc(100% + var(--popover-gap));
+  transform: translate(-50%, calc(var(--popover-gap) / 2));
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="bottom"] .${POPOVER_ARROW_CLASS} {
+  left: 50%;
+  top: calc(-1 * var(--popover-arrow-size) + 2px);
+  transform: translateX(-50%);
+  border-left: var(--popover-arrow-size) solid transparent;
+  border-right: var(--popover-arrow-size) solid transparent;
+  border-bottom: var(--popover-arrow-size) solid rgba(239, 240, 240, 0.9);
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="bottom"] .${POPOVER_ARROW_CLASS}::after {
+  left: 50%;
+  top: 1px;
+  transform: translateX(-50%);
+  border-left: var(--popover-arrow-inner-size) solid transparent;
+  border-right: var(--popover-arrow-inner-size) solid transparent;
+  border-bottom: var(--popover-arrow-inner-size) solid #fff;
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="bottom"][data-open="true"] {
+  transform: translate(-50%, 0);
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="left"] {
+  right: calc(100% + var(--popover-gap));
+  top: 50%;
+  transform: translate(calc(-1 * var(--popover-gap) / 2), -50%);
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="left"] .${POPOVER_ARROW_CLASS} {
+  right: calc(-1 * var(--popover-arrow-size) + 1px);
+  top: 50%;
+  transform: translateY(-50%);
+  border-top: var(--popover-arrow-size) solid transparent;
+  border-bottom: var(--popover-arrow-size) solid transparent;
+  border-left: var(--popover-arrow-size) solid rgba(239, 240, 240, 0.9);
+  border-right: 0;
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="left"] .${POPOVER_ARROW_CLASS}::after {
+  right: 1px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-top: var(--popover-arrow-inner-size) solid transparent;
+  border-bottom: var(--popover-arrow-inner-size) solid transparent;
+  border-left: var(--popover-arrow-inner-size) solid #fff;
+  border-right: 0;
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="left"][data-open="true"] {
+  transform: translate(0, -50%);
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="right"] {
+  left: calc(100% + var(--popover-gap));
+  top: 50%;
+  transform: translate(calc(var(--popover-gap) / 2), -50%);
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="right"] .${POPOVER_ARROW_CLASS} {
+  left: calc(-1 * var(--popover-arrow-size) + 1px);
+  top: 50%;
+  transform: translateY(-50%);
+  border-top: var(--popover-arrow-size) solid transparent;
+  border-bottom: var(--popover-arrow-size) solid transparent;
+  border-right: var(--popover-arrow-size) solid rgba(239, 240, 240, 0.9);
+  border-left: 0;
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="right"] .${POPOVER_ARROW_CLASS}::after {
+  left: 1px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-top: var(--popover-arrow-inner-size) solid transparent;
+  border-bottom: var(--popover-arrow-inner-size) solid transparent;
+  border-right: var(--popover-arrow-inner-size) solid #fff;
+}
+.${POPOVER_CONTENT_CLASS}[data-placement="right"][data-open="true"] {
+  transform: translate(0, -50%);
+}
+`,
+  );
+}

package/src/editor/plugins/edit-bar/components/select.ts

@@ -0,0 +1,247 @@
+import { injectStyleOnce } from '../../../../utils';
+
+export type SelectValue = string;
+
+export type SelectOption = {
+  label?: string;
+  value: SelectValue;
+  disabled?: boolean;
+  render?: () => HTMLElement;
+};
+
+export type SelectProps = {
+  options: SelectOption[];
+  value?: SelectValue;
+  placeholder?: string;
+  onChange?: (value: SelectValue, option?: SelectOption) => void;
+  renderOption?: (option: SelectOption) => HTMLElement;
+  renderLabel?: (
+    option: SelectOption | undefined,
+  ) => HTMLElement | string | null | undefined;
+};
+
+export type SelectHandle = {
+  setValue: (value: SelectValue) => void;
+  getValue: () => SelectValue | undefined;
+  setOptions: (options: SelectOption[]) => void;
+  destroy: () => void;
+};
+
+const SELECT_CLASS = 'infographic-edit-select';
+const SELECT_STYLE_ID = 'infographic-edit-select-style';
+const OPTION_CLASS = `${SELECT_CLASS}__option`;
+const DROPDOWN_CLASS = `${SELECT_CLASS}__dropdown`;
+const TRIGGER_CLASS = `${SELECT_CLASS}__trigger`;
+const LABEL_CLASS = `${SELECT_CLASS}__label`;
+const ARROW_CLASS = `${SELECT_CLASS}__arrow`;
+
+export function Select(props: SelectProps): HTMLDivElement & SelectHandle {
+  ensureSelectStyle();
+
+  let open = false;
+  let options = props.options || [];
+  let selected: SelectValue | undefined = props.value;
+
+  const container = document.createElement('div');
+  container.classList.add(SELECT_CLASS);
+  container.tabIndex = 0;
+
+  const trigger = document.createElement('button');
+  trigger.type = 'button';
+  trigger.classList.add(TRIGGER_CLASS);
+
+  const label = document.createElement('span');
+  label.classList.add(LABEL_CLASS);
+  trigger.appendChild(label);
+
+  const arrow = document.createElement('span');
+  arrow.classList.add(ARROW_CLASS);
+  arrow.textContent = 'v';
+  trigger.appendChild(arrow);
+
+  const dropdown = document.createElement('div');
+  dropdown.classList.add(DROPDOWN_CLASS);
+  dropdown.setAttribute('data-open', 'false');
+
+  container.appendChild(trigger);
+  container.appendChild(dropdown);
+
+  const handleDocumentClick = (event: MouseEvent) => {
+    if (!container.contains(event.target as Node)) {
+      setOpen(false);
+    }
+  };
+
+  const renderLabel = () => {
+    const option = options.find((opt) => opt.value === selected);
+    const custom = props.renderLabel?.(option);
+    if (typeof custom === 'string') {
+      label.textContent = custom;
+    } else if (custom instanceof HTMLElement) {
+      label.replaceChildren(custom);
+    } else if (custom === null || custom === undefined) {
+      if (option) {
+        label.textContent = option.label ?? option.value;
+      } else {
+        label.textContent = props.placeholder ?? '请选择';
+      }
+    } else {
+      label.textContent = String(custom);
+    }
+  };
+
+  const renderOptions = () => {
+    dropdown.innerHTML = '';
+    options.forEach((option) => {
+      const optionNode =
+        props.renderOption?.(option) ??
+        option.render?.() ??
+        defaultOptionNode(option);
+
+      optionNode.classList.add(OPTION_CLASS);
+      optionNode.setAttribute('data-value', option.value);
+      if (option.disabled) {
+        optionNode.setAttribute('aria-disabled', 'true');
+        optionNode.classList.add(`${OPTION_CLASS}--disabled`);
+      } else {
+        optionNode.addEventListener('click', () => {
+          selectValue(option.value, option);
+        });
+      }
+      dropdown.appendChild(optionNode);
+    });
+  };
+
+  const selectValue = (value: SelectValue, option?: SelectOption) => {
+    selected = value;
+    renderLabel();
+    props.onChange?.(value, option);
+    setOpen(false);
+  };
+
+  const setOpen = (value: boolean) => {
+    open = value;
+    dropdown.setAttribute('data-open', String(open));
+    container.setAttribute('data-open', String(open));
+    if (open) {
+      document.addEventListener('click', handleDocumentClick);
+    } else {
+      document.removeEventListener('click', handleDocumentClick);
+    }
+  };
+
+  trigger.addEventListener('click', () => setOpen(!open));
+
+  renderLabel();
+  renderOptions();
+
+  const api: SelectHandle = {
+    setValue: (value) => {
+      selected = value;
+      renderLabel();
+    },
+    getValue: () => selected,
+    setOptions: (nextOptions) => {
+      options = nextOptions;
+      renderOptions();
+      renderLabel();
+    },
+    destroy: () => {
+      document.removeEventListener('click', handleDocumentClick);
+      container.remove();
+    },
+  };
+
+  return Object.assign(container, api);
+}
+
+function ensureSelectStyle() {
+  injectStyleOnce(
+    SELECT_STYLE_ID,
+    `
+.${SELECT_CLASS} {
+  position: relative;
+  display: inline-flex;
+  min-width: 140px;
+  font-family: "Helvetica Neue", Arial, sans-serif;
+}
+.${TRIGGER_CLASS} {
+  width: 100%;
+  height: 32px;
+  padding: 4px 28px 4px 8px;
+  background: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  color: #000000d9;
+  cursor: pointer;
+  outline: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.${TRIGGER_CLASS}:hover {
+  border-color: #4096ff;
+}
+.${TRIGGER_CLASS}:focus-visible {
+  border-color: #4096ff;
+  box-shadow: 0 0 0 2px rgba(64, 150, 255, 0.2);
+}
+.${LABEL_CLASS} {
+  flex: 1;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.${ARROW_CLASS} {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 6px;
+  font-size: 10px;
+  color: #8c8c8c;
+}
+.${DROPDOWN_CLASS} {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(100% + 4px);
+  background: #fff;
+  border: 1px solid #e5e5e5;
+  border-radius: 6px;
+  box-shadow: 0 6px 16px rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05);
+  padding: 4px 0;
+  z-index: 1000;
+  max-height: 200px;
+  overflow-y: auto;
+  display: none;
+}
+.${DROPDOWN_CLASS}[data-open="true"] {
+  display: block;
+}
+.${OPTION_CLASS} {
+  padding: 6px 12px;
+  font-size: 12px;
+  color: #000000d9;
+  cursor: pointer;
+  line-height: 1.5;
+}
+.${OPTION_CLASS}:hover {
+  background: #f5f5f5;
+}
+.${OPTION_CLASS}--disabled {
+  color: #bfbfbf;
+  cursor: not-allowed;
+}
+.${OPTION_CLASS}--disabled:hover {
+  background: transparent;
+}
+`,
+  );
+}
+
+function defaultOptionNode(option: SelectOption) {
+  const node = document.createElement('div');
+  node.textContent = option.label ?? option.value;
+  return node;
+}