@orbit-work/ui 0.1.1 → 0.1.2

package/src/components/composite/PptxRenderer/PptxSlide/index.tsx

@@ -1,48 +0,0 @@
-import { type CSSProperties, memo } from "react"
-import { ElementDispatcher } from "../ElementDispatcher"
-import { PT_TO_PX } from "../constants"
-import type { Slide } from "../types"
-import { fillToCSS, ptToPx } from "../utils"
-
-export interface PptxSlideProps {
-  slide: Slide
-  /** Slide width in pt (from parse result) */
-  slideWidth: number
-  /** Slide height in pt (from parse result) */
-  slideHeight: number
-}
-
-/**
- * 渲染单张幻灯片：背景 + 布局元素 + 前景元素。
- * 幻灯片在"原生像素坐标系"（pt × PT_TO_PX）中绘制，
- * 外层容器负责通过 transform: scale() 缩放到实际显示尺寸。
- */
-export const PptxSlide = memo(function PptxSlide({ slide, slideWidth, slideHeight }: PptxSlideProps) {
-  const widthPx = ptToPx(slideWidth)
-  const heightPx = ptToPx(slideHeight)
-
-  const containerStyle: CSSProperties = {
-    position: "relative",
-    width: widthPx,
-    height: heightPx,
-    overflow: "hidden",
-    ...fillToCSS(slide.fill),
-  }
-
-  // 如果没有背景填充，默认纸面白（DS paper token）
-  if (!slide.fill) {
-    containerStyle.background = "var(--ow-paper)"
-  }
-
-  // 合并 layoutElements（母版元素）和 elements（前景元素）
-  // layoutElements 在下层，elements 在上层
-  const allElements = [...(slide.layoutElements || []), ...(slide.elements || [])]
-
-  return (
-    <div className="text-ow-text" style={containerStyle}>
-      {allElements.map((element, i) => (
-        <ElementDispatcher key={`${element.type}-${i}`} element={element} />
-      ))}
-    </div>
-  )
-})

package/src/components/composite/PptxRenderer/constants.ts

@@ -1,2 +0,0 @@
-/** 1 pt = 96/72 px (at 96 DPI) */
-export const PT_TO_PX = 4 / 3

package/src/components/composite/PptxRenderer/elements/AudioElement/index.tsx

@@ -1,48 +0,0 @@
-import { type CSSProperties, memo } from "react"
-import type { AudioElement as AudioElementType } from "../../types"
-
-export interface AudioElementProps {
-  element: AudioElementType
-}
-
-export const AudioElement = memo(function AudioElement({ element }: AudioElementProps) {
-  const src = element.blob || ""
-
-  if (!src) {
-    return (
-      <div className="" style={placeholderStyle}>
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--ow-text-3)" strokeWidth="1.5">
-          <path d="M9 18V5l12-2v13" />
-          <circle cx="6" cy="18" r="3" />
-          <circle cx="18" cy="16" r="3" />
-        </svg>
-      </div>
-    )
-  }
-
-  const style: CSSProperties = {
-    width: "100%",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    height: "100%",
-  }
-
-  return (
-    <div className="" style={style}>
-      <audio controls preload="metadata" style={{ width: "100%" }}>
-        <source src={src} />
-      </audio>
-    </div>
-  )
-})
-
-const placeholderStyle: CSSProperties = {
-  width: "100%",
-  height: "100%",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  background: "var(--ow-surface-2)",
-  borderRadius: "var(--ow-radius-2xs)",
-}

package/src/components/composite/PptxRenderer/elements/ChartElement/index.tsx

@@ -1,172 +0,0 @@
-import { type CSSProperties, memo, useEffect, useRef, useState } from "react"
-import type { ChartElement as ChartElementType, CommonChartElement, ScatterChartElement } from "../../types"
-
-export interface ChartElementProps {
-  element: ChartElementType
-}
-
-/**
- * 图表元素：懒加载 echarts，加载失败时展示占位符。
- */
-export const ChartElement = memo(function ChartElement({ element }: ChartElementProps) {
-  const chartRef = useRef<HTMLDivElement>(null)
-  const instanceRef = useRef<any>(null)
-  const [loadError, setLoadError] = useState(false)
-
-  useEffect(() => {
-    let disposed = false
-
-    async function initChart() {
-      if (!chartRef.current) return
-
-      try {
-        // 动态导入 echarts（作为可选 peer dependency）
-        const echarts = await import("echarts")
-        if (disposed) return
-
-        const chart = echarts.init(chartRef.current)
-        instanceRef.current = chart
-
-        const option = buildChartOption(element)
-        chart.setOption(option)
-      } catch {
-        if (!disposed) setLoadError(true)
-      }
-    }
-
-    initChart()
-
-    return () => {
-      disposed = true
-      instanceRef.current?.dispose()
-      instanceRef.current = null
-    }
-  }, [element])
-
-  // Resize chart when container resizes
-  useEffect(() => {
-    if (!chartRef.current || !instanceRef.current) return
-    const observer = new ResizeObserver(() => {
-      instanceRef.current?.resize()
-    })
-    observer.observe(chartRef.current)
-    return () => observer.disconnect()
-  }, [loadError])
-
-  const style: CSSProperties = {
-    width: "100%",
-    height: "100%",
-  }
-
-  if (loadError) {
-    return (
-      <div
-        className=""
-        style={{
-          ...style,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          background: "var(--ow-surface)",
-          borderRadius: "var(--ow-radius-2xs)",
-        }}
-      >
-        <span style={{ color: "var(--ow-text-3)", fontSize: 12 }}>图表</span>
-      </div>
-    )
-  }
-
-  return <div ref={chartRef} className="" style={style} />
-})
-
-function buildChartOption(element: ChartElementType): any {
-  const { chartType, colors } = element
-
-  if (chartType === "scatterChart" || chartType === "bubbleChart") {
-    return buildScatterOption(element as ScatterChartElement)
-  }
-
-  const el = element as CommonChartElement
-  const { data, barDir } = el
-
-  if (!data?.length) return {}
-
-  // Extract categories from first series' xlabels or values
-  const categories = data[0]?.values?.map((v) => v.x) || []
-  const series = data.map((item) => ({
-    name: item.key,
-    data: item.values.map((v) => v.y),
-    type: getEchartsType(chartType),
-    ...(chartType.includes("area") ? { areaStyle: {} } : {}),
-  }))
-
-  const option: any = {
-    color: colors?.length ? colors : undefined,
-    legend: { show: data.length > 1, bottom: 0, textStyle: { fontSize: 10 } },
-    grid: { left: 40, right: 20, top: 20, bottom: data.length > 1 ? 30 : 10 },
-    tooltip: { trigger: "axis" },
-    series,
-  }
-
-  if (chartType.includes("pie") || chartType === "doughnutChart") {
-    // Pie/donut chart
-    option.series = [
-      {
-        type: "pie",
-        radius: chartType === "doughnutChart" ? ["40%", "70%"] : "70%",
-        data: data[0]?.values?.map((v) => ({ name: v.x, value: v.y })) || [],
-      },
-    ]
-    delete option.grid
-    delete option.tooltip
-  } else if (chartType.includes("radar")) {
-    option.radar = {
-      indicator: categories.map((name) => ({ name })),
-    }
-    option.series = [
-      {
-        type: "radar",
-        data: data.map((item) => ({
-          name: item.key,
-          value: item.values.map((v) => v.y),
-        })),
-      },
-    ]
-    delete option.grid
-  } else {
-    // Bar/Line/Area
-    if (barDir === "bar") {
-      option.yAxis = { type: "category", data: categories }
-      option.xAxis = { type: "value" }
-    } else {
-      option.xAxis = { type: "category", data: categories }
-      option.yAxis = { type: "value" }
-    }
-  }
-
-  return option
-}
-
-function buildScatterOption(element: ScatterChartElement): any {
-  return {
-    color: element.colors?.length ? element.colors : undefined,
-    xAxis: { type: "value" },
-    yAxis: { type: "value" },
-    series: [
-      {
-        type: "scatter",
-        data: element.data || [],
-      },
-    ],
-    grid: { left: 40, right: 20, top: 20, bottom: 20 },
-  }
-}
-
-function getEchartsType(chartType: string): string {
-  if (chartType.includes("bar") || chartType.includes("Bar")) return "bar"
-  if (chartType.includes("line") || chartType.includes("Line")) return "line"
-  if (chartType.includes("area") || chartType.includes("Area")) return "line"
-  if (chartType.includes("pie") || chartType.includes("Pie")) return "pie"
-  if (chartType.includes("radar") || chartType.includes("Radar")) return "radar"
-  return "bar"
-}

package/src/components/composite/PptxRenderer/elements/DiagramElement/index.tsx

@@ -1,46 +0,0 @@
-import { memo } from "react"
-import { ElementDispatcher } from "../../ElementDispatcher"
-import type { DiagramElement as DiagramElementType } from "../../types"
-
-export interface DiagramElementProps {
-  element: DiagramElementType
-}
-
-/**
- * SmartArt / Diagram 元素：递归渲染子元素（Shape | Text）
- */
-export const DiagramElement = memo(function DiagramElement({ element }: DiagramElementProps) {
-  if (!element.elements?.length) {
-    // Fallback: show text list if no parsed sub-elements
-    if (element.textList?.length) {
-      return (
-        <div
-          className=""
-          style={{
-            width: "100%",
-            height: "100%",
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
-            padding: 8,
-          }}
-        >
-          {element.textList.map((text, i) => (
-            <div key={i} style={{ fontSize: 12, marginBottom: 4 }}>
-              {text}
-            </div>
-          ))}
-        </div>
-      )
-    }
-    return null
-  }
-
-  return (
-    <div className="relative w-full h-full" style={{ position: "relative", width: "100%", height: "100%" }}>
-      {element.elements.map((child, i) => (
-        <ElementDispatcher key={`diagram-${i}`} element={child} />
-      ))}
-    </div>
-  )
-})

package/src/components/composite/PptxRenderer/elements/GroupElement/index.tsx

@@ -1,28 +0,0 @@
-import { type CSSProperties, memo } from "react"
-import { ElementDispatcher } from "../../ElementDispatcher"
-import type { GroupElement as GroupElementType } from "../../types"
-import { buildTransform, ptToPx } from "../../utils"
-
-export interface GroupElementProps {
-  element: GroupElementType
-}
-
-/**
- * 分组元素：递归渲染子元素，子元素坐标相对于 group 原点。
- */
-export const GroupElement = memo(function GroupElement({ element }: GroupElementProps) {
-  const style: CSSProperties = {
-    position: "relative",
-    width: "100%",
-    height: "100%",
-    transform: buildTransform(element.rotate, element.isFlipH, element.isFlipV),
-  }
-
-  return (
-    <div className="" style={style}>
-      {element.elements?.map((child, i) => (
-        <ElementDispatcher key={`group-${i}`} element={child} />
-      ))}
-    </div>
-  )
-})

package/src/components/composite/PptxRenderer/elements/ImageElement/index.tsx

@@ -1,61 +0,0 @@
-import { type CSSProperties, memo } from "react"
-import type { ImageElement as ImageElementType } from "../../types"
-import { filtersToCSS, ptToPx } from "../../utils"
-
-export interface ImageElementProps {
-  element: ImageElementType
-}
-
-export const ImageElement = memo(function ImageElement({ element }: ImageElementProps) {
-  const src = element.base64
-    ? element.base64.startsWith("data:")
-      ? element.base64
-      : `data:image/png;base64,${element.base64}`
-    : element.blob || ""
-
-  if (!src) return null
-
-  const imgStyle: CSSProperties = {
-    width: "100%",
-    height: "100%",
-    objectFit: "fill",
-    display: "block",
-    ...filtersToCSS(element.filters),
-  }
-
-  // Image crop (rect) — use object-position + object-fit to simulate
-  const containerStyle: CSSProperties = {
-    width: "100%",
-    height: "100%",
-    overflow: "hidden",
-    borderRadius: element.borderWidth ? undefined : undefined,
-  }
-
-  if (element.borderColor && element.borderWidth) {
-    containerStyle.border = `${ptToPx(element.borderWidth)}px ${element.borderType || "solid"} ${element.borderColor}`
-  }
-
-  // Crop via object-view-box or clip-path
-  if (element.rect) {
-    const { t = 0, b = 0, l = 0, r = 0 } = element.rect
-    // rect values are fractional (0-1 range representing percentage)
-    if (t || b || l || r) {
-      imgStyle.clipPath = `inset(${t * 100}% ${r * 100}% ${b * 100}% ${l * 100}%)`
-      // Adjust size to compensate for clip
-      const scaleX = 1 / (1 - l - r)
-      const scaleY = 1 / (1 - t - b)
-      imgStyle.width = `${scaleX * 100}%`
-      imgStyle.height = `${scaleY * 100}%`
-      imgStyle.objectFit = "cover"
-      imgStyle.marginLeft = `${-l * scaleX * 100}%`
-      imgStyle.marginTop = `${-t * scaleY * 100}%`
-      imgStyle.clipPath = undefined
-    }
-  }
-
-  return (
-    <div className="" style={containerStyle}>
-      <img src={src} alt="" style={imgStyle} draggable={false} />
-    </div>
-  )
-})

package/src/components/composite/PptxRenderer/elements/MathElement/index.tsx

@@ -1,57 +0,0 @@
-import { type CSSProperties, memo } from "react"
-import type { MathElement as MathElementType } from "../../types"
-
-export interface MathElementProps {
-  element: MathElementType
-}
-
-/**
- * 数学公式元素：使用 picBase64 fallback 图片渲染，不引入 LaTeX 渲染库。
- */
-export const MathElement = memo(function MathElement({ element }: MathElementProps) {
-  const src = element.picBase64
-    ? element.picBase64.startsWith("data:")
-      ? element.picBase64
-      : `data:image/png;base64,${element.picBase64}`
-    : element.picBlob || ""
-
-  if (!src) {
-    // Fallback: show LaTeX source text
-    return (
-      <div className="" style={fallbackStyle}>
-        <span style={{ fontFamily: "var(--ow-font-mono)", fontSize: 12 }}>
-          {element.latex || element.text || "公式"}
-        </span>
-      </div>
-    )
-  }
-
-  const style: CSSProperties = {
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-  }
-
-  return (
-    <div className="" style={style}>
-      <img
-        src={src}
-        alt={element.latex || "公式"}
-        style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }}
-        draggable={false}
-      />
-    </div>
-  )
-})
-
-const fallbackStyle: CSSProperties = {
-  width: "100%",
-  height: "100%",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  background: "var(--ow-surface-2)",
-  borderRadius: "var(--ow-radius-2xs)",
-}