@orbit-work/ui 0.1.2-preview.0 → 0.1.3

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

@@ -1,327 +0,0 @@
-import { type CSSProperties, memo, useMemo } from "react"
-import type { ShapeElement as ShapeElementType } from "../../types"
-import { buildSvgGradient, fillToCSS, ptToPx } from "../../utils"
-
-export interface ShapeElementProps {
-  element: ShapeElementType
-}
-
-export const ShapeElement = memo(function ShapeElement({ element }: ShapeElementProps) {
-  const widthPx = ptToPx(element.width)
-  const heightPx = ptToPx(element.height)
-  const gradientId = `shape-fill-${element.order}-${Math.random().toString(36).slice(2, 8)}`
-
-  const { defs, fillAttr } = useMemo(
-    () => buildSvgGradient(element.strokeOnly ? undefined : element.fill, gradientId),
-    [element.fill, element.strokeOnly, gradientId],
-  )
-
-  const strokeColor = element.borderColor || "none"
-  const strokeWidth = element.borderWidth ? ptToPx(element.borderWidth) : 0
-  const strokeDasharray = element.borderStrokeDasharray || undefined
-
-  // SVG shape rendering
-  const svgContent = useMemo(() => {
-    if (element.path && element.pathViewBox) {
-      // Custom path with viewBox
-      const vb = element.pathViewBox
-      return (
-        <svg
-          width={widthPx}
-          height={heightPx}
-          viewBox={`${vb.x} ${vb.y} ${vb.width} ${vb.height}`}
-          preserveAspectRatio="none"
-          className="absolute top-0 left-0 block"
-        >
-          {defs && <defs dangerouslySetInnerHTML={{ __html: defs }} />}
-          <path
-            d={element.path}
-            fill={fillAttr}
-            stroke={strokeColor}
-            strokeWidth={strokeWidth}
-            strokeDasharray={strokeDasharray}
-          />
-        </svg>
-      )
-    }
-
-    // Preset shape types
-    return (
-      <svg
-        width={widthPx}
-        height={heightPx}
-        viewBox={`0 0 ${widthPx} ${heightPx}`}
-        preserveAspectRatio="none"
-        className="absolute top-0 left-0 block"
-      >
-        {defs && <defs dangerouslySetInnerHTML={{ __html: defs }} />}
-        {renderPresetShape(element.shapType, widthPx, heightPx, fillAttr, strokeColor, strokeWidth, strokeDasharray)}
-      </svg>
-    )
-  }, [
-    element.path,
-    element.pathViewBox,
-    element.shapType,
-    widthPx,
-    heightPx,
-    fillAttr,
-    strokeColor,
-    strokeWidth,
-    strokeDasharray,
-    defs,
-  ])
-
-  const containerStyle: CSSProperties = {
-    position: "relative",
-    width: "100%",
-    height: "100%",
-  }
-
-  // Text content overlay
-  const hasContent = element.content && element.content.replace(/<[^>]*>/g, "").trim()
-
-  const textStyle: CSSProperties = {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    flexDirection: "column",
-    overflow: "hidden",
-    wordWrap: "break-word",
-  }
-
-  if (element.vAlign) {
-    switch (element.vAlign) {
-      case "mid":
-      case "middle":
-      case "ctr":
-        textStyle.justifyContent = "center"
-        break
-      case "bottom":
-      case "b":
-        textStyle.justifyContent = "flex-end"
-        break
-      default:
-        textStyle.justifyContent = "flex-start"
-    }
-  }
-
-  if (element.textInset) {
-    textStyle.paddingLeft = ptToPx(element.textInset.l) + "px"
-    textStyle.paddingTop = ptToPx(element.textInset.t) + "px"
-    textStyle.paddingRight = ptToPx(element.textInset.r) + "px"
-    textStyle.paddingBottom = ptToPx(element.textInset.b) + "px"
-  }
-
-  return (
-    <div className="pointer-events-none" style={containerStyle}>
-      {svgContent}
-      {hasContent && (
-        <div
-          /* 研发本轮把 .ow-pptx-shape-* 整族从 components.css 删掉，改内联工具类；
-             这里照搬那次迁移，但字号/字色回 DS2 语义档（fs-caption / text-2），
-             不用研发那份的 --ow-fg-2 与缺类型标注的 text-[var(--ow-fs-caption)]。 */
-          className="pointer-events-auto font-medium text-[length:var(--ow-fs-caption)] leading-none text-ow-text-2 select-none"
-          style={textStyle}
-          dangerouslySetInnerHTML={{ __html: element.content }}
-        />
-      )}
-    </div>
-  )
-})
-
-function renderPresetShape(
-  shapType: string,
-  width: number,
-  height: number,
-  fill: string,
-  stroke: string,
-  strokeWidth: number,
-  strokeDasharray?: string,
-) {
-  const commonProps = {
-    fill,
-    stroke,
-    strokeWidth,
-    strokeDasharray,
-  }
-
-  switch (shapType) {
-    case "ellipse":
-    case "oval":
-      return (
-        <ellipse
-          cx={width / 2}
-          cy={height / 2}
-          rx={width / 2 - strokeWidth / 2}
-          ry={height / 2 - strokeWidth / 2}
-          {...commonProps}
-        />
-      )
-
-    case "roundRect":
-    case "snipRoundRect": {
-      const r = Math.min(width, height) * 0.1
-      return (
-        <rect
-          x={strokeWidth / 2}
-          y={strokeWidth / 2}
-          width={width - strokeWidth}
-          height={height - strokeWidth}
-          rx={r}
-          ry={r}
-          {...commonProps}
-        />
-      )
-    }
-
-    case "triangle":
-    case "isoTriangle": {
-      const points = `${width / 2},${strokeWidth / 2} ${strokeWidth / 2},${height - strokeWidth / 2} ${width - strokeWidth / 2},${height - strokeWidth / 2}`
-      return <polygon points={points} {...commonProps} />
-    }
-
-    case "rtTriangle": {
-      const points = `${strokeWidth / 2},${strokeWidth / 2} ${strokeWidth / 2},${height - strokeWidth / 2} ${width - strokeWidth / 2},${height - strokeWidth / 2}`
-      return <polygon points={points} {...commonProps} />
-    }
-
-    case "diamond": {
-      const points = `${width / 2},${strokeWidth / 2} ${width - strokeWidth / 2},${height / 2} ${width / 2},${height - strokeWidth / 2} ${strokeWidth / 2},${height / 2}`
-      return <polygon points={points} {...commonProps} />
-    }
-
-    case "parallelogram": {
-      const offset = width * 0.2
-      const points = `${offset},${strokeWidth / 2} ${width - strokeWidth / 2},${strokeWidth / 2} ${width - offset},${height - strokeWidth / 2} ${strokeWidth / 2},${height - strokeWidth / 2}`
-      return <polygon points={points} {...commonProps} />
-    }
-
-    case "trapezoid": {
-      const offset = width * 0.15
-      const points = `${offset},${strokeWidth / 2} ${width - offset},${strokeWidth / 2} ${width - strokeWidth / 2},${height - strokeWidth / 2} ${strokeWidth / 2},${height - strokeWidth / 2}`
-      return <polygon points={points} {...commonProps} />
-    }
-
-    case "pentagon": {
-      const cx = width / 2,
-        cy = height / 2
-      const r = Math.min(width, height) / 2 - strokeWidth / 2
-      const pts = Array.from({ length: 5 }, (_, i) => {
-        const a = ((i * 72 - 90) * Math.PI) / 180
-        return `${cx + r * Math.cos(a)},${cy + r * Math.sin(a)}`
-      }).join(" ")
-      return <polygon points={pts} {...commonProps} />
-    }
-
-    case "hexagon": {
-      const cx = width / 2,
-        cy = height / 2
-      const r = Math.min(width, height) / 2 - strokeWidth / 2
-      const pts = Array.from({ length: 6 }, (_, i) => {
-        const a = ((i * 60 - 90) * Math.PI) / 180
-        return `${cx + r * Math.cos(a)},${cy + r * Math.sin(a)}`
-      }).join(" ")
-      return <polygon points={pts} {...commonProps} />
-    }
-
-    case "star4":
-    case "star5":
-    case "star6":
-    case "star8":
-    case "star10":
-    case "star12": {
-      const numPoints = Number.parseInt(shapType.replace("star", "")) || 5
-      return renderStar(width, height, numPoints, strokeWidth, commonProps)
-    }
-
-    case "rightArrow":
-    case "leftArrow":
-    case "upArrow":
-    case "downArrow": {
-      return renderArrow(shapType, width, height, strokeWidth, commonProps)
-    }
-
-    case "line":
-    case "straightConnector1":
-    case "bentConnector3":
-    case "curvedConnector3": {
-      return (
-        <line
-          x1={strokeWidth / 2}
-          y1={height / 2}
-          x2={width - strokeWidth / 2}
-          y2={height / 2}
-          stroke={stroke}
-          strokeWidth={strokeWidth || 1}
-          strokeDasharray={strokeDasharray}
-        />
-      )
-    }
-
-    case "rect":
-    default:
-      return (
-        <rect
-          x={strokeWidth / 2}
-          y={strokeWidth / 2}
-          width={width - strokeWidth}
-          height={height - strokeWidth}
-          {...commonProps}
-        />
-      )
-  }
-}
-
-function renderStar(width: number, height: number, points: number, strokeWidth: number, commonProps: object) {
-  const cx = width / 2
-  const cy = height / 2
-  const outerR = Math.min(width, height) / 2 - strokeWidth / 2
-  const innerR = outerR * 0.4
-  const pts: string[] = []
-  for (let i = 0; i < points * 2; i++) {
-    const r = i % 2 === 0 ? outerR : innerR
-    const a = (((i * 180) / points - 90) * Math.PI) / 180
-    pts.push(`${cx + r * Math.cos(a)},${cy + r * Math.sin(a)}`)
-  }
-  return <polygon points={pts.join(" ")} {...commonProps} />
-}
-
-function renderArrow(direction: string, width: number, height: number, strokeWidth: number, commonProps: object) {
-  const sw = strokeWidth / 2
-  const bodyRatio = 0.35 // body height as fraction of total
-  const headRatio = 0.4 // head width as fraction of total
-
-  let points: string
-  switch (direction) {
-    case "rightArrow": {
-      const by = height * bodyRatio
-      const headX = width * (1 - headRatio)
-      points = `${sw},${height / 2 - by} ${headX},${height / 2 - by} ${headX},${sw} ${width - sw},${height / 2} ${headX},${height - sw} ${headX},${height / 2 + by} ${sw},${height / 2 + by}`
-      break
-    }
-    case "leftArrow": {
-      const by = height * bodyRatio
-      const headX = width * headRatio
-      points = `${width - sw},${height / 2 - by} ${headX},${height / 2 - by} ${headX},${sw} ${sw},${height / 2} ${headX},${height - sw} ${headX},${height / 2 + by} ${width - sw},${height / 2 + by}`
-      break
-    }
-    case "upArrow": {
-      const bx = width * bodyRatio
-      const headY = height * headRatio
-      points = `${width / 2 - bx},${height - sw} ${width / 2 - bx},${headY} ${sw},${headY} ${width / 2},${sw} ${width - sw},${headY} ${width / 2 + bx},${headY} ${width / 2 + bx},${height - sw}`
-      break
-    }
-    case "downArrow": {
-      const bx = width * bodyRatio
-      const headY = height * (1 - headRatio)
-      points = `${width / 2 - bx},${sw} ${width / 2 - bx},${headY} ${sw},${headY} ${width / 2},${height - sw} ${width - sw},${headY} ${width / 2 + bx},${headY} ${width / 2 + bx},${sw}`
-      break
-    }
-    default:
-      points = `0,0 ${width},0 ${width},${height} 0,${height}`
-  }
-  return <polygon points={points} {...commonProps} />
-}

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

@@ -1,90 +0,0 @@
-import { type CSSProperties, memo } from "react"
-import type { TableElement as TableElementType } from "../../types"
-import { ptToPx } from "../../utils"
-
-export interface TableElementProps {
-  element: TableElementType
-}
-
-export const TableElement = memo(function TableElement({ element }: TableElementProps) {
-  const tableStyle: CSSProperties = {
-    width: "100%",
-    height: "100%",
-    borderCollapse: "collapse",
-    tableLayout: "fixed",
-    fontSize: "12px",
-  }
-
-  return (
-    <div className="w-full h-full overflow-hidden pointer-events-auto">
-      <table style={tableStyle}>
-        <colgroup>
-          {element.colWidths.map((w, i) => (
-            <col key={i} style={{ width: ptToPx(w) + "px" }} />
-          ))}
-        </colgroup>
-        <tbody>
-          {element.data.map((row, ri) => (
-            <tr key={ri} style={{ height: ptToPx(element.rowHeights[ri] ?? 0) + "px" }}>
-              {row.map((cell, ci) => {
-                // Skip merged cells
-                if (cell.vMerge || cell.hMerge) return null
-
-                const cellStyle: CSSProperties = {
-                  padding: "var(--ow-space-1, 4px) var(--ow-space-15, 6px)",
-                  overflow: "hidden",
-                  wordWrap: "break-word",
-                  verticalAlign: mapVAlign(cell.vAlign),
-                }
-
-                // 文档内容色（§2 豁免，核对说明见 PptxRenderer/index.ts）：
-                // 底/字/边框色来自 .pptx 文件本身，禁 tokenize、禁随主题反色。
-                if (cell.fillColor) cellStyle.backgroundColor = cell.fillColor
-                if (cell.fontColor) cellStyle.color = cell.fontColor
-                if (cell.fontBold) cellStyle.fontWeight = "bold"
-
-                // Cell borders
-                if (cell.borders?.top) {
-                  cellStyle.borderTop = `${ptToPx(cell.borders.top.borderWidth)}px ${cell.borders.top.borderType} ${cell.borders.top.borderColor}`
-                }
-                if (cell.borders?.bottom) {
-                  cellStyle.borderBottom = `${ptToPx(cell.borders.bottom.borderWidth)}px ${cell.borders.bottom.borderType} ${cell.borders.bottom.borderColor}`
-                }
-                if (cell.borders?.left) {
-                  cellStyle.borderLeft = `${ptToPx(cell.borders.left.borderWidth)}px ${cell.borders.left.borderType} ${cell.borders.left.borderColor}`
-                }
-                if (cell.borders?.right) {
-                  cellStyle.borderRight = `${ptToPx(cell.borders.right.borderWidth)}px ${cell.borders.right.borderType} ${cell.borders.right.borderColor}`
-                }
-
-                return (
-                  <td
-                    key={ci}
-                    style={cellStyle}
-                    colSpan={cell.colSpan || undefined}
-                    rowSpan={cell.rowSpan || undefined}
-                    dangerouslySetInnerHTML={{ __html: cell.text || "" }}
-                  />
-                )
-              })}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  )
-})
-
-function mapVAlign(vAlign?: string): CSSProperties["verticalAlign"] {
-  switch (vAlign) {
-    case "mid":
-    case "middle":
-    case "ctr":
-      return "middle"
-    case "bottom":
-    case "b":
-      return "bottom"
-    default:
-      return "top"
-  }
-}

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

@@ -1,57 +0,0 @@
-import { type CSSProperties, memo } from "react"
-import type { TextElement as TextElementType } from "../../types"
-import { fillToCSS, ptToPx } from "../../utils"
-
-export interface TextElementProps {
-  element: TextElementType
-}
-
-export const TextElement = memo(function TextElement({ element }: TextElementProps) {
-  const style: CSSProperties = {
-    width: "100%",
-    height: "100%",
-    wordWrap: "break-word",
-    ...fillToCSS(element.fill),
-  }
-
-  // Vertical alignment
-  if (element.vAlign) {
-    style.display = "flex"
-    style.flexDirection = "column"
-    switch (element.vAlign) {
-      case "mid":
-      case "middle":
-      case "ctr":
-        style.justifyContent = "center"
-        break
-      case "bottom":
-      case "b":
-        style.justifyContent = "flex-end"
-        break
-      default:
-        style.justifyContent = "flex-start"
-    }
-  }
-
-  // Text direction
-  if (element.isVertical) {
-    style.writingMode = "vertical-rl"
-  }
-
-  // Text inset (padding)
-  if (element.textInset) {
-    style.paddingLeft = ptToPx(element.textInset.l) + "px"
-    style.paddingTop = ptToPx(element.textInset.t) + "px"
-    style.paddingRight = ptToPx(element.textInset.r) + "px"
-    style.paddingBottom = ptToPx(element.textInset.b) + "px"
-  }
-
-  // Auto fit: scale font down
-  if (element.autoFit?.type === "text" && element.autoFit.fontScale) {
-    style.fontSize = `${element.autoFit.fontScale * 100}%`
-  }
-
-  return (
-    <div className="pointer-events-auto" style={style} dangerouslySetInnerHTML={{ __html: element.content || "" }} />
-  )
-})

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

@@ -1,43 +0,0 @@
-import { type CSSProperties, memo } from "react"
-import type { VideoElement as VideoElementType } from "../../types"
-
-export interface VideoElementProps {
-  element: VideoElementType
-}
-
-export const VideoElement = memo(function VideoElement({ element }: VideoElementProps) {
-  const src = element.blob || ""
-
-  if (!src) {
-    return (
-      <div className="" style={placeholderStyle}>
-        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--ow-text-3)" strokeWidth="1.5">
-          <polygon points="5 3 19 12 5 21 5 3" />
-        </svg>
-      </div>
-    )
-  }
-
-  const style: CSSProperties = {
-    width: "100%",
-    height: "100%",
-    objectFit: "contain",
-    background: "var(--ow-graphite)",
-  }
-
-  return (
-    <video className="" style={style} controls preload="metadata">
-      <source src={src} />
-    </video>
-  )
-})
-
-const placeholderStyle: CSSProperties = {
-  width: "100%",
-  height: "100%",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  background: "var(--ow-graphite)",
-  borderRadius: "var(--ow-radius-2xs)",
-}

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

@@ -1,24 +0,0 @@
-/**
- * PptxRenderer —— .pptx 幻灯片渲染器（预览域 Office 适配器的内胆）。
- *
- * ── §2「零裸 hex」豁免核对（DS 2.0 P5 复核，结论：保留）────────────────
- * 本目录**没有任何写死的色值**：所有出现在 style 上的颜色都来自 .pptx 文件本身，
- * 由 pptxtojson 解析后按元素透传（形状/文本框填充 `fill.value.*`、表格
- * `cell.fillColor` / `cell.fontColor` / `borders[].borderColor`、图表 `element.colors`、
- * TextElement 的 `dangerouslySetInnerHTML` 里库自带的内联 color）。
- *
- * 这是**文档内容色**，不是 UI 色：它等同于 ui-third-party 卡里「第三方品牌色不入
- * token」的同一条豁免——把演示文稿里作者定的红底白字改成 --ow-* 会让文件渲染错。
- * 因此这里既不 tokenize、也不随主题反色；组件自己的 chrome（占位符、缩略图边框、
- * 衬底）才走 token，见 ChartElement 的 --ow-text-3 占位与 PptxSlide 的 --ow-paper。
- *
- * 唯二由本包决定的颜色：
- *  1. 幻灯片无背景填充时的兜底纸面 = --ow-paper（恒定纸面，见 PptxSlide）；
- *  2. 图表未渲染时的占位文案 = --ow-text-3（见 ChartElement）。
- * allowlist 里 `src/components/composite/PptxRenderer/**` 的 paper 豁免只服务第 1 条。
- */
-export { PptxSlide } from "./PptxSlide"
-export { ElementDispatcher } from "./ElementDispatcher"
-export type { PptxParseResult, Slide, PptxElement } from "./types"
-export { PT_TO_PX } from "./constants"
-export { ptToPx } from "./utils"