@alphacifer/slidev-addon-theme 0.0.4 → 0.0.6

package/utils/arcArrowProcess/createArcArrowProcessGeometry.ts

@@ -0,0 +1,137 @@
+export interface IPoint {
+  readonly x: number;
+  readonly y: number;
+}
+
+export interface IArcArrowProcessArrowPathData {
+  readonly id: string;
+  readonly path: string;
+  readonly rotation: number;
+  readonly tip: IPoint;
+  readonly notch: IPoint;
+  readonly center: IPoint;
+  readonly gradientStart: IPoint;
+  readonly gradientEnd: IPoint;
+}
+
+export interface IArcArrowProcessGeometry {
+  readonly viewBoxWidth: number;
+  readonly viewBoxHeight: number;
+  readonly viewBoxMinY: number;
+  readonly cx: number;
+  readonly cy: number;
+  readonly arrows: readonly IArcArrowProcessArrowPathData[];
+  readonly count: number;
+}
+
+export const DEFAULT_ARC_ARROW_PATH = [
+  'M -64.99 416.33',
+  'L -92.91 387',
+  'A 398 398 0 0 0 92.91 387',
+  'L 82.88 370.9',
+  'L 152.5 395.32',
+  'L 101.55 448.69',
+  'L 103.18 429.79',
+  'A 442 442 0 0 1 -103.18 429.79',
+  'Z',
+].join(' ');
+
+export const LONGER_MIDDLE_ARC_ARROW_PATH = [
+  'M -86.69 412.36',
+  'L -113.04 381.61',
+  'A 398 398 0 0 0 113.04 381.61',
+  'L 102.17 366.06',
+  'L 172.98 386.8',
+  'L 124.89 442.76',
+  'L 125.53 423.8',
+  'A 442 442 0 0 1 -125.53 423.8',
+  'Z',
+].join(' ');
+
+export function createArcArrowProcessGeometry(
+  count = 4,
+  rotationOffset?: number,
+): IArcArrowProcessGeometry {
+  const viewBoxWidth = 1000;
+  const viewBoxHeight = 370;
+  const viewBoxMinY = -30;
+  const cx = 500;
+  const cy = -220;
+  const step = 39;
+  const defaultOffset = count === 3 ? 5 : 0;
+  const offset = rotationOffset ?? defaultOffset;
+
+  const arrows: IArcArrowProcessArrowPathData[] = [];
+
+  for (let i = 0; i < count; i++) {
+    let rotation: number;
+    let path = DEFAULT_ARC_ARROW_PATH;
+    let tipOffset = 0;
+    let notchOffset = 0;
+
+    if (count === 3) {
+      const actualStep = 42; // step (39) + extra span (3) for equal visual width
+
+      if (i === 0) {
+        rotation = Number((actualStep + offset).toFixed(2));
+      } else if (i === 1) {
+        rotation = Number(offset.toFixed(2));
+        path = LONGER_MIDDLE_ARC_ARROW_PATH;
+        tipOffset = -3;
+        notchOffset = 3;
+      } else {
+        rotation = Number((-actualStep + offset).toFixed(2));
+      }
+    } else {
+      rotation = Number(
+        ((count - 1) * (step / 2) - i * step + offset).toFixed(2),
+      );
+    }
+
+    const thetaTip = ((68.91 + tipOffset + rotation) * Math.PI) / 180;
+    const thetaNotch = ((98.87 + notchOffset + rotation) * Math.PI) / 180;
+    const thetaCenter = ((83.89 + rotation) * Math.PI) / 180;
+
+    const tip: IPoint = {
+      x: Number((cx + 424 * Math.cos(thetaTip)).toFixed(2)),
+      y: Number((cy + 424 * Math.sin(thetaTip)).toFixed(2)),
+    };
+
+    const notch: IPoint = {
+      x: Number((cx + 421 * Math.cos(thetaNotch)).toFixed(2)),
+      y: Number((cy + 421 * Math.sin(thetaNotch)).toFixed(2)),
+    };
+
+    const center: IPoint = {
+      x: Number((cx + 420 * Math.cos(thetaCenter)).toFixed(2)),
+      y: Number((cy + 420 * Math.sin(thetaCenter)).toFixed(2)),
+    };
+
+    arrows.push({
+      id: `arrow-${count}-${i}`,
+      path,
+      rotation,
+      tip,
+      notch,
+      center,
+      gradientStart: {
+        x: notch.x,
+        y: notch.y,
+      },
+      gradientEnd: {
+        x: tip.x,
+        y: tip.y,
+      },
+    });
+  }
+
+  return {
+    viewBoxWidth,
+    viewBoxHeight,
+    viewBoxMinY,
+    cx,
+    cy,
+    arrows,
+    count,
+  };
+}

package/utils/arcArrowProcess/index.ts

@@ -0,0 +1,3 @@
+export * from './context';
+export * from './createArcArrowProcessGeometry';
+export * from './resolveArcArrowProcessItems';

package/utils/arcArrowProcess/resolveArcArrowProcessItems.ts

@@ -0,0 +1,189 @@
+export interface IArcArrowProcessItem {
+  readonly id?: string | number;
+  readonly color?: string;
+  readonly gradientEnd?: string;
+  readonly title?: string;
+  readonly description?: string;
+  readonly icon?: string | object | false;
+  readonly titleColor?: string;
+  readonly textColor?: string;
+}
+
+export interface IResolvedArcArrowProcessItem {
+  readonly id: string | number;
+  readonly color: string;
+  readonly gradientEnd: string;
+  readonly title: string;
+  readonly description: string;
+  readonly icon?: string | object | false;
+  readonly titleColor: string;
+  readonly textColor: string;
+}
+
+export const DEFAULT_ARC_ARROW_PROCESS_ITEMS_4: readonly [
+  IResolvedArcArrowProcessItem,
+  IResolvedArcArrowProcessItem,
+  IResolvedArcArrowProcessItem,
+  IResolvedArcArrowProcessItem,
+] = [
+  {
+    id: '01',
+    color: '#a0a5aa',
+    gradientEnd: '#8e959f',
+    title: 'Heading Here',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.',
+    titleColor: '#888d94',
+    textColor: '#8e959f',
+  },
+  {
+    id: '02',
+    color: '#2c485d',
+    gradientEnd: '#334e68',
+    title: 'Heading Here',
+    description:
+      'Sed do eiusmod tempor incididunt ut labore et lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    titleColor: '#2c485d',
+    textColor: '#8e959f',
+  },
+  {
+    id: '03',
+    color: '#6fa3b5',
+    gradientEnd: '#7fb0c0',
+    title: 'Heading Here',
+    description:
+      'Tempor incididunt ut laborelorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod et.',
+    titleColor: '#6fa3b5',
+    textColor: '#8e959f',
+  },
+  {
+    id: '04',
+    color: '#d6284d',
+    gradientEnd: '#e63964',
+    title: 'Heading Here',
+    description:
+      'Eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet, consectetur adipiscing elit, sed.',
+    titleColor: '#d6284d',
+    textColor: '#8e959f',
+  },
+];
+
+export const DEFAULT_ARC_ARROW_PROCESS_ITEMS_3: readonly [
+  IResolvedArcArrowProcessItem,
+  IResolvedArcArrowProcessItem,
+  IResolvedArcArrowProcessItem,
+] = [
+  {
+    id: '01',
+    color: '#a0a5aa',
+    gradientEnd: '#8e959f',
+    title: 'Heading Here',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.',
+    titleColor: '#888d94',
+    textColor: '#8e959f',
+  },
+  {
+    id: '02',
+    color: '#2c485d',
+    gradientEnd: '#334e68',
+    title: 'Heading Here',
+    description:
+      'Sed do eiusmod tempor incididunt ut labore et lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    titleColor: '#2c485d',
+    textColor: '#8e959f',
+  },
+  {
+    id: '03',
+    color: '#d6284d',
+    gradientEnd: '#e63964',
+    title: 'Heading Here',
+    description:
+      'Eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.',
+    titleColor: '#d6284d',
+    textColor: '#8e959f',
+  },
+];
+
+export const DEFAULT_ARC_ARROW_PROCESS_ITEMS_2: readonly [
+  IResolvedArcArrowProcessItem,
+  IResolvedArcArrowProcessItem,
+] = [
+  {
+    id: '01',
+    color: '#2c485d',
+    gradientEnd: '#334e68',
+    title: 'Heading Here',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.',
+    titleColor: '#2c485d',
+    textColor: '#8e959f',
+  },
+  {
+    id: '02',
+    color: '#6fa3b5',
+    gradientEnd: '#7fb0c0',
+    title: 'Heading Here',
+    description:
+      'Sed do eiusmod tempor incididunt ut labore et lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    titleColor: '#6fa3b5',
+    textColor: '#8e959f',
+  },
+];
+
+export function getDefaultArcArrowProcessItem(
+  index: number,
+  count: number = 4,
+): IResolvedArcArrowProcessItem {
+  const list =
+    count === 2
+      ? DEFAULT_ARC_ARROW_PROCESS_ITEMS_2
+      : count === 3
+        ? DEFAULT_ARC_ARROW_PROCESS_ITEMS_3
+        : DEFAULT_ARC_ARROW_PROCESS_ITEMS_4;
+  const safe = Math.abs(index) % list.length;
+  const item = list[safe];
+
+  if (item) {
+    return item;
+  }
+
+  return DEFAULT_ARC_ARROW_PROCESS_ITEMS_4[0];
+}
+
+export function resolveSingleArcArrowProcessItem(
+  item: IArcArrowProcessItem | undefined,
+  fallbackIndex = 0,
+  count: number = 4,
+): IResolvedArcArrowProcessItem {
+  const fallback = getDefaultArcArrowProcessItem(fallbackIndex, count);
+
+  if (!item) {
+    return fallback;
+  }
+
+  return {
+    id: item.id ?? fallback.id,
+    color: item.color ?? fallback.color,
+    gradientEnd: item.gradientEnd ?? fallback.gradientEnd,
+    title: item.title ?? fallback.title,
+    description: item.description ?? fallback.description,
+    icon: item.icon !== undefined ? item.icon : fallback.icon,
+    titleColor: item.titleColor ?? item.color ?? fallback.titleColor,
+    textColor: item.textColor ?? fallback.textColor,
+  };
+}
+
+export function resolveArcArrowProcessItems(
+  items: readonly IArcArrowProcessItem[] | undefined,
+  count: number = 4,
+): readonly IResolvedArcArrowProcessItem[] {
+  const targetCount = count >= 2 ? count : 4;
+  const result: IResolvedArcArrowProcessItem[] = [];
+
+  for (let i = 0; i < targetCount; i++) {
+    result.push(resolveSingleArcArrowProcessItem(items?.[i], i, targetCount));
+  }
+
+  return result;
+}

package/utils/arcCompare/context.ts

@@ -0,0 +1,36 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+
+import type { IArcCompareGeometry } from './createArcCompareGeometry';
+import type { IResolvedArcCompareItem } from './resolveArcCompareItems';
+
+export interface IArcCompareRootContext {
+  readonly animation: ComputedRef<boolean>;
+  readonly startDelay: ComputedRef<number>;
+  readonly pointsCount: ComputedRef<number>;
+  readonly geo: ComputedRef<IArcCompareGeometry>;
+}
+
+export interface IArcCompareSideContext {
+  readonly side: 'left' | 'right';
+  readonly color: ComputedRef<string>;
+  readonly title: ComputedRef<string>;
+  readonly setTitle: (title: string) => void;
+  readonly registerCallout: () => number;
+  readonly count: ComputedRef<number>;
+}
+
+export interface IArcCompareCalloutContext {
+  readonly side: 'left' | 'right';
+  readonly index: number;
+  readonly color: ComputedRef<string>;
+  readonly item: ComputedRef<IResolvedArcCompareItem>;
+}
+
+export const ARC_COMPARE_ROOT_KEY: InjectionKey<IArcCompareRootContext> =
+  Symbol('ARC_COMPARE_ROOT_KEY');
+
+export const ARC_COMPARE_SIDE_KEY: InjectionKey<IArcCompareSideContext> =
+  Symbol('ARC_COMPARE_SIDE_KEY');
+
+export const ARC_COMPARE_CALLOUT_KEY: InjectionKey<IArcCompareCalloutContext> =
+  Symbol('ARC_COMPARE_CALLOUT_KEY');

package/utils/arcCompare/createArcCompareGeometry.ts

@@ -0,0 +1,254 @@
+export interface IArcComparePoint {
+  readonly x: number;
+  readonly y: number;
+}
+
+export interface IArcCompareNodeGeo {
+  readonly index: number;
+  readonly center: IArcComparePoint;
+  readonly radius: number;
+}
+
+export interface IArcCompareCalloutBox {
+  readonly index: number;
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly badgeOffset: number;
+  readonly top: number;
+  readonly textGap?: number;
+  readonly textWidth?: number;
+}
+
+export interface IArcCompareSideGeometry {
+  readonly hubPath: string;
+  readonly hubCenter: IArcComparePoint;
+  readonly hubRadius: number;
+  readonly arcPath: string;
+  readonly topDot: IArcComparePoint;
+  readonly bottomDot: IArcComparePoint;
+  readonly dotRadius: number;
+  readonly nodes: readonly IArcCompareNodeGeo[];
+  readonly callouts: readonly IArcCompareCalloutBox[];
+}
+
+export interface IArcCompareGeometry {
+  readonly viewBoxWidth: number;
+  readonly viewBoxHeight: number;
+  readonly centerX: number;
+  readonly centerY: number;
+  readonly vsCenter: IArcComparePoint;
+  readonly vsRadius: number;
+  readonly pointsCount: number;
+  readonly dividerLine: {
+    readonly x: number;
+    readonly y1: number;
+    readonly y2: number;
+  };
+  readonly left: IArcCompareSideGeometry;
+  readonly right: IArcCompareSideGeometry;
+}
+
+export interface ICreateArcCompareGeometryOptions {
+  readonly viewBoxWidth?: number;
+  readonly viewBoxHeight?: number;
+  readonly hubRadius?: number;
+  readonly arcRadius?: number;
+  readonly arcOffset?: number;
+  readonly nodeRadius?: number;
+  readonly nodeAngleDeg?: number;
+  readonly arcExtentDeg?: number;
+  readonly vsRadius?: number;
+  readonly pointsCount?: number;
+}
+
+export function createArcCompareGeometry(
+  options: ICreateArcCompareGeometryOptions = {},
+): IArcCompareGeometry {
+  const viewBoxWidth = options.viewBoxWidth ?? 1000;
+  const viewBoxHeight = options.viewBoxHeight ?? 480;
+  const hubRadius = options.hubRadius ?? 135;
+  const arcRadius = options.arcRadius ?? 235;
+  const arcOffset = options.arcOffset ?? 25;
+  const nodeRadius = options.nodeRadius ?? 26;
+  const vsRadius = options.vsRadius ?? 26;
+  const dotRadius = 3.5;
+  const pointsCount = options.pointsCount === 4 ? 4 : 3;
+
+  const defaultArcExtent = pointsCount === 4 ? 66 : 58;
+  const arcExtentDeg = options.arcExtentDeg ?? defaultArcExtent;
+
+  const centerX = viewBoxWidth / 2;
+  const centerY = viewBoxHeight / 2;
+  const leftArcCenterX = -arcOffset;
+
+  // Angular math for left side:
+  const extentRad = (arcExtentDeg * Math.PI) / 180;
+
+  // Left arc start (top) and end (bottom)
+  const leftStartCos = Math.cos(extentRad);
+  const leftStartSin = Math.sin(extentRad);
+  const leftTopX = Number(
+    (leftArcCenterX + arcRadius * leftStartCos).toFixed(2),
+  );
+  const leftTopY = Number((centerY - arcRadius * leftStartSin).toFixed(2));
+  const leftBottomX = leftTopX;
+  const leftBottomY = Number((centerY + arcRadius * leftStartSin).toFixed(2));
+
+  // Left arc path
+  const leftArcPath = `M ${leftTopX} ${leftTopY} A ${arcRadius} ${arcRadius} 0 0 1 ${leftBottomX} ${leftBottomY}`;
+
+  // Left hub path (semicircle centered at 0, centerY)
+  const leftHubPath = `M 0 ${centerY - hubRadius} A ${hubRadius} ${hubRadius} 0 0 1 0 ${centerY + hubRadius} Z`;
+
+  // Determine node angles for 3 or 4 points
+  const nodeAnglesDeg: readonly number[] =
+    pointsCount === 4
+      ? [50, 16.5, -16.5, -50]
+      : [options.nodeAngleDeg ?? 38, 0, -(options.nodeAngleDeg ?? 38)];
+
+  // Left nodes and callouts
+  const leftCalloutGap = 26;
+  const leftNodes: IArcCompareNodeGeo[] = [];
+  const leftCallouts: IArcCompareCalloutBox[] = [];
+  const defaultTextGap = 28;
+  const textWidth = pointsCount === 4 ? 215 : 205;
+
+  for (let i = 0; i < pointsCount; i++) {
+    const angleDeg = nodeAnglesDeg[i] ?? 0;
+    const angleRad = (angleDeg * Math.PI) / 180;
+    const nodeX = Number(
+      (leftArcCenterX + arcRadius * Math.cos(angleRad)).toFixed(2),
+    );
+    const nodeY = Number((centerY - arcRadius * Math.sin(angleRad)).toFixed(2));
+
+    leftNodes.push({
+      index: i,
+      center: {
+        x: nodeX,
+        y: nodeY,
+      },
+      radius: nodeRadius,
+    });
+
+    const badgeOffset = Math.round(nodeX - nodeRadius);
+    const top = Math.round(nodeY - nodeRadius);
+    // Only adjust position for 01 (index 0) so its text does not overlay the arc curve.
+    // 02, 03, and 04 keep their standard natural gap.
+    const textGap = i === 0 ? (pointsCount === 4 ? 46 : 36) : defaultTextGap;
+    const width = Math.round(nodeRadius * 2 + textGap + textWidth);
+
+    leftCallouts.push({
+      index: i,
+      x: nodeX + leftCalloutGap,
+      y: nodeY - 32,
+      width,
+      badgeOffset,
+      top,
+      textGap,
+      textWidth,
+    });
+  }
+
+  // Right side (symmetrical reflection across centerX)
+  const rightTopX = Number((viewBoxWidth - leftTopX).toFixed(2));
+  const rightTopY = leftTopY;
+  const rightBottomX = rightTopX;
+  const rightBottomY = leftBottomY;
+
+  const rightArcPath = `M ${rightTopX} ${rightTopY} A ${arcRadius} ${arcRadius} 0 0 0 ${rightBottomX} ${rightBottomY}`;
+  const rightHubPath = `M ${viewBoxWidth} ${centerY - hubRadius} A ${hubRadius} ${hubRadius} 0 0 0 ${viewBoxWidth} ${centerY + hubRadius} Z`;
+
+  const rightNodes: IArcCompareNodeGeo[] = [];
+  const rightCallouts: IArcCompareCalloutBox[] = [];
+
+  for (let i = 0; i < pointsCount; i++) {
+    const leftNode = leftNodes[i];
+    const leftCallout = leftCallouts[i];
+
+    if (!leftNode || !leftCallout) {
+      continue;
+    }
+
+    const rightNodeX = Number((viewBoxWidth - leftNode.center.x).toFixed(2));
+    const rightNodeY = leftNode.center.y;
+
+    rightNodes.push({
+      index: i,
+      center: {
+        x: rightNodeX,
+        y: rightNodeY,
+      },
+      radius: nodeRadius,
+    });
+
+    rightCallouts.push({
+      index: i,
+      x: centerX + 20,
+      y: rightNodeY - 32,
+      width: leftCallout.width,
+      badgeOffset: leftCallout.badgeOffset,
+      top: leftCallout.top,
+      textGap: leftCallout.textGap,
+      textWidth: leftCallout.textWidth,
+    });
+  }
+
+  return {
+    viewBoxWidth,
+    viewBoxHeight,
+    centerX,
+    centerY,
+    vsCenter: {
+      x: centerX,
+      y: centerY,
+    },
+    vsRadius,
+    pointsCount,
+    dividerLine: {
+      x: centerX,
+      y1: 20,
+      y2: viewBoxHeight - 20,
+    },
+    left: {
+      hubPath: leftHubPath,
+      hubCenter: {
+        x: 55,
+        y: centerY,
+      },
+      hubRadius,
+      arcPath: leftArcPath,
+      topDot: {
+        x: leftTopX,
+        y: leftTopY,
+      },
+      bottomDot: {
+        x: leftBottomX,
+        y: leftBottomY,
+      },
+      dotRadius,
+      nodes: leftNodes,
+      callouts: leftCallouts,
+    },
+    right: {
+      hubPath: rightHubPath,
+      hubCenter: {
+        x: viewBoxWidth - 55,
+        y: centerY,
+      },
+      hubRadius,
+      arcPath: rightArcPath,
+      topDot: {
+        x: rightTopX,
+        y: rightTopY,
+      },
+      bottomDot: {
+        x: rightBottomX,
+        y: rightBottomY,
+      },
+      dotRadius,
+      nodes: rightNodes,
+      callouts: rightCallouts,
+    },
+  };
+}

package/utils/arcCompare/index.ts

@@ -0,0 +1,3 @@
+export * from './context';
+export * from './createArcCompareGeometry';
+export * from './resolveArcCompareItems';