预览模式

地址: ${domain_name}/app/design-preview

更新日志

v2.0.62.15

新增：

• /canvas/scroll-zoominto 图层定位接口

修改：

• /canavs/set-visible 支持批量设置
• /canavs/set-locked 支持批量设置

v2.0.62.3

新增：

• /canvas/insert-frame-file-before 增加修复信息和版本信息

v2.0.62

新增：

• 如果路径有 sign 标识，pixso-out-msg 会带上 sign

v2.0.60

新增：

• /canvas/kiwi/get 获取修复升级后的文档数据

v2.0.59

新增：

• /canvas/missing/font/get 获取字体缺失列表

v2.0.56

新增：

• /canvas/caught/exception 异常捕获

v2.0.54

新增：

• /canvas/native-event 基础事件监听

v2.0.51

新增：

• /canvas/command-context 选中节点的层级菜单

v2.0.50

新增：

• /canvas/get-export-size-exceeded 导出画板尺寸是否超限

快速接入

// eg: 监听 pixso-out-msg
window.addEventListener("message", (e) => {
  if (e.data?.type !== "pixso-out-msg") return;

  console.log("[pixso-out-msg]:", e.data);
});

// eg: 发送数据
sendMessage = (data, isIframe = false) => {
  console.log("[pixso-input-msg:]", data);

  if (!isIframe) {
    // 在预览页面中发送数据
    window.postMessage(data, "*");
  } else {
    // 在嵌入预览页面中的页面中发送数据
    const iframe = document.getElementById("iframe-id");
    const win = iframe.contentWindow;
    win && win.postMessage(data, "*");
  }
};

// eg: 插入一个矩形
sendMessage({
  type: "pixso-input-msg",
  name: "/canvas/insert-frame-file",
  data: {
    hex: "706978736F2D6B7700020D636F6D70726573733A7A73746428B52FFD20B2850400340701020212030301000103010000022100000401060307E9A1B5E99DA2203100000100027E496E7465726E616C204F6E6C792043616E766173007D0100010901057F00060B07E79FA9E5BD0C85000090160101010286000088FE0304010502000004001076322E302E31390011130100020000000B0058284C151A30B9C7934284CA2D5C7380C222D80152ACDBF904",
    position: {
      x: 0,
      y: 0,
    },
  },
});

前置说明

消息类型说明

在预览模式中，前端与 Pixso 之间通过 window.postMessage 进行消息通信，主要有两类消息类型：

1. pixso-out-msg

• 说明：由 Pixso 预览页面主动发送给外部页面（如父窗口或嵌入页面）的消息，通常用于通知外部某些事件的发生或返回操作结果。
• 常见场景：
  • 状态变更通知（如初始化完成、渲染前后、操作完成等）
  • 数据回传（如获取到的配置信息、操作结果等）
• 监听方式：

  window.addEventListener("message", (e) => {
    if (e.data?.type === "pixso-out-msg") {
      // 处理 Pixso 发送的消息
      console.log("[pixso-out-msg]:", e.data);
    }
  });
  

2. pixso-input-msg

• 说明：由外部页面（如父窗口或嵌入页面）主动发送给 Pixso 预览页面的消息，通常用于请求 Pixso 执行某些操作或设置参数。
• 常见场景：
  • 操作指令（如插入画板、清空画板、设置配置等）
  • 数据请求（如获取文档信息、定位图层等）
• 发送方式：

  // 发送消息到 Pixso 预览页面
  window.postMessage(
    {
      type: "pixso-input-msg",
      name: "/canvas/insert-frame",
      data: {
        /* 具体参数 */
      },
    },
    "*"
  );
  

注意：所有消息通信均需通过 type 字段区分消息类型，建议在处理消息时先判断 type，再根据 name 进行具体业务处理。

接口列表

环境初始化

• 环境初始化前

  • type: pixso-out-msg
  • name: /canvas/init-before

• 环境初始化后

  • type: pixso-out-msg
  • name: /canvas/init-after

配置管理

• 设置配置

  环境初始化后使用

  • type: pixso-input-msg
  • name: /canvas/set-config
  • data: SetConfigReq

• 设置配置前

  • type: pixso-out-msg
  • name: /canvas/set-config-before

• 设置配置后

  • type: pixso-out-msg
  • name: /canvas/set-config-after

SetConfigReq

interface SetConfigReq {
  // 是否开启 粘贴 功能 ，默认 false；
  enable_paste?: boolean;
  // 是否开启 toast ，默认 false；
  enable_toast?: boolean;
  // 是否开启右下角操作面板，默认 false
  enable_operate_panel?: boolean;
  // 是否开启标注，默认 true;
  enable_open_tip?: boolean;
  // 是否开始图层选中(不开启则是抓手工具，仅预览)
  enable_select_node?: boolean;
  // 设置缩放防抖时间, 默认 20
  zoom_canvas_debounce_time?: number;
  // 设置移动防抖时间, 默认 20
  move_canvas_debounce_time?: number;
}

画板操作

以粘贴的方式插入画板

• 插入画板

  • type: pixso-input-msg
  • name: /canvas/insert-frame
  • data: { hex: string; position?: Vector }

• 插入画板前

  • type: pixso-out-msg
  • name: /canvas/insert-frame-before

• 插入画板后

  • type: pixso-out-msg
  • name: /canvas/insert-frame-after
  • data: { frameID:string }

Vector

interface Vector {
  x: number;
  y: number;
}

以文件的方式插入画板

• 插入画板

  • type: pixso-input-msg
  • name: /canvas/insert-frame-file
  • data: { hex: string; position?: Vector }

• 插入画板前

  • type: pixso-out-msg
  • name: /canvas/insert-frame-file-before
  • data: FileVersionInfo

• 插入画板后

  • type: pixso-out-msg
  • name: /canvas/insert-frame-file-after
  • data: { frameID:string }

FileVersionInfo

interface FileVersionInfo {
  needRepair: boolean; // 是否需要修复
  createVersion: string; // 创建版本
  lastOpenVersion: string; // 上次打开版本
  curVersion: string; // 当前版本
}

清空画板

• 清空画板

  • type: pixso-input-msg
  • name: /canvas/clear-frame
  • data: { guids?: string[] }

• 清空画板前

  • type: pixso-out-msg
  • name: /canvas/clear-frame-before

• 清空画板后

  • type: pixso-out-msg
  • name: /canvas/clear-frame-after

更新画板位置

• 更新画板位置

  • type: pixso-input-msg
  • name: /canvas/update-frame
  • data: { guid:string, position: Vector }

• 更新画板位置前

  • type: pixso-out-msg
  • name: /canvas/update-frame-before

• 更新画板位置后

  • type: pixso-out-msg
  • name: /canvas/update-frame-after

视图控制

视口移动和缩放

• 视口缩放触发

  • type: pixso-out-msg
  • name: /canvas/zoom-canvas
  • data: Viewport

• 视口移动触发

  • type: pixso-out-msg
  • name: /canvas/move-canvas
  • data: Viewport

Viewport

interface Rect {
  x: number;
  y: number;
  width: number;
  height: number;
}
interface Viewport {
  center: Vector;
  bounds: Rect;
  zoom: number;
  dpr: number;
  position: Vector;
}

视口查询

• 查询视口

  • type: pixso-input-msg
  • name: /canvas/get-viewport-data

• 查询视口前

  • type: pixso-out-msg
  • name: /canvas/get-viewport-data-before

• 查询视口前

  • type: pixso-out-msg
  • name: /canvas/get-viewport-data-after
  • data: Viewport

视口设置

• 设置视口

  • type: pixso-input-msg
  • name: /canvas/set-viewport-data
  • data: {center?: Vector; zoom?: number} |

• 设置视口前

  • type: pixso-out-msg
  • name: /canvas/set-viewport-data-before

• 设置视口前

  • type: pixso-out-msg
  • name: /canvas/set-viewport-data-after
  • data: Viewport

图层定位

• 图层定位

  • type: pixso-input-msg
  • name: /canvas/scroll-zoominto
  • data: {guids:string[]}

• 图层定位前

  • type: pixso-out-msg
  • name: /canvas/scroll-zoominto-before

• 图层定位前

  • type: pixso-out-msg
  • name: /canvas/scroll-zoominto-after

节点操作

选中节点

• 设置选中节点

  • type: pixso-input-msg
  • name: /canvas/set-select-node
  • data: string[]

• 设置选中节点前

  • type: pixso-out-msg
  • name: /canvas/set-select-node-before

• 设置选中节点后

  • type: pixso-out-msg
  • name: /canvas/set-select-node-after

• 选中节点发生变化

  • type: pixso-out-msg
  • name: /canvas/set-select-node-after
  • data: string[]

悬浮节点

• 悬浮节点元素
  • type: pixso-out-msg
  • name: /canvas/hover-node
  • data: string

选中节点的层级菜单

• 右键点击节点
  • type: pixso-out-msg
  • name: /canvas/command-context
  • data: CommadContex

CommadContext

// 层级菜单
interface CommadContext {
  select_node_menu: {
    guid: string;
    icon: string; // 图标
    indent: number; // 层级
    isLock: number; // 是否锁定
    isMask: number; // 是否蒙版
    isSelect: number; // 是否选中
    name: "共享说明-共享文件夹";
  }[];
}

设置节点可见性

• 设置节点可见性

  • type: pixso-input-msg
  • name: /canvas/set-visible
  • data: { guid: string; value: boolean; map?: Record<string, boolean> }

• 设置显示状态前

  • type: pixso-out-msg
  • name: /canvas/set-visible-before

• 设置显示状态后

  • type: pixso-out-msg
  • name: /canvas/set-visible-after
  • data: {[key:string]:boolean}

设置节点锁定

• 设置节点锁定状态

  • type: pixso-input-msg
  • name: /canvas/set-locked
  • data: { guid: string; value: boolean; map?: Record<string, boolean> }

• 设置锁定状态前

  • type: pixso-out-msg
  • name: /canvas/set-locked-before

• 设置锁定状态后

  • type: pixso-out-msg
  • name: /canvas/set-locked-after
  • data: {[key:string]:boolean}

导出画板

• 请求导出数据

  • type: pixso-input-msg
  • name: /canvas/export-frame
  • data: ExportNodeSetting

• 导出画板前

  • type: pixso-out-msg
  • name: /canvas/export-frame-before
  • data: string

• 导出画板后

  • type: pixso-out-msg
  • name: /canvas/export-frame-after
  • data: ExportFrameRes

ExportNodeSetting

// 约束类型
enum ExportConstraintType {
  CONTENT_SCALE = 1, // 缩放
  CONTENT_WIDTH = 2, // 固定宽度
  CONTENT_HEIGHT = 3, // 固定高度
}

// 图片类型
enum ImageType {
  PNG = 1,
  JPEG = 2,
  SVG = 3,
  PDF = 4,
  SKETCH = 5, // 未使用
  EPS = 6,
  TIFF = 7,
  WEBP = 8,
}

interface ExportNodeSetting {
  guid: string;
  exportType: ImageType; // 默认为 png
  contentsOnly?: boolean; // 默认为true; 是否仅导出节点的内容，或者同一区域中的任何重叠层。
  useAbsoluteBounds?: boolean; // 默认为false; 是否使用节点的完整尺寸
  suffix?: string; // 返回名称后缀
  constraintsType?: ExportConstraintType; // png/jpg 生效 约束类型
  constraintsValue?: number; // png/jpg 生效 约束数值
}

• 检查导出画板尺寸是否超限

  • type: pixso-input-msg
  • name: /canvas/get-export-size-exceeded
  • data: ExportNodeSetting

• 检查前

  • type: pixso-out-msg
  • name: /canvas/get-export-size-exceeded-before

• 检查后

  • type: pixso-out-msg
  • name: /canvas/get-export-size-exceeded-after
  • data: boolean // 是否超限

ExportFrameRes

interface ExportRrameRes {
  guid: string;
  name: string;
  mimeType: string;
  contents: Uint8Array;
}

// 导出图片示例:
const blob = new Blob([contents], {
  type: mimeType,
});
const mimeTypeToFileExtension = {
  "image/jpeg": ".jpg",
  "image/png": ".png",
  "image/svg": ".svg",
};
const fileExtension = mimeTypeToFileExtension[mimeType] || "";
saveAs(blob, name + fileExtension);

数据查询

获取节点 PixsoNode

• 获取节点 PixsoNode

  • type: pixso-input-msg
  • name: /canvas/get-pixso-node
  • data: guid:string

• 获取数据前

  • type: pixso-out-msg
  • name: /canvas/get-pixso-node-before
  • data: guid:string

• 获取数据后

  • type: pixso-out-msg
  • name: /canvas/get-pixso-node-after
  • data: PixsoNode

PixsoNode

interface PixsoNode {
  guid: string;
  bounds: Rect;
  pixsoNode: any;
}

获取子节点 PixsoNode

获取子节点 PixsoNode

• 获取子节点 PixsoNode

  • type: pixso-input-msg
  • name: /canvas/get-pixso-node-children
  • data: GuidOrFilterHiddenLayer

• 获取数据前

  • type: pixso-out-msg
  • name: /canvas/get-pixso-node-children-before

• 获取数据后

  • type: pixso-out-msg
  • name: /canvas/get-pixso-node-children-after
  • data: PixsoNode

GuidOrFilterHiddenLayer

type GuidOrFilterHiddenLayer =
  | string
  | {
      guid: string;
      filterHiddenLayer?: boolean; // 是否过滤隐藏的图层，默认为 true
    };

获取脱离后的数据 PixsoDetachedData

• 获取脱离后的数据

  • type: pixso-input-msg
  • name: /canvas/get-detached-data
  • data: GuidOrFilterHiddenLayer

• 获取数据前

  • type: pixso-out-msg
  • name: /canvas/get-detached-data-before

• 获取数据后

  • type: pixso-out-msg
  • name: /canvas/get-detached-data-after
  • data: { hex: string; instanceMap: object }

获取缩略图 PixsoNodeThumbnail

• 获取缩略图

  • type: pixso-input-msg
  • name: /canvas/get-node-thumbnail
  • data: ThumbnailReq

• 获取缩略图前

  • type: pixso-out-msg
  • name: /canvas/get-node-thumbnail-before

• 获取缩略图后

  • type: pixso-out-msg
  • name: /canvas/get-node-thumbnail-after
  • data: { guid: string; url: string; buffer: Uint8Array }

ThumbnailReq

interface ThumbnailReq {
  guid: string;
  maxScale?: number; // 默认 2
  size?: {
    x: number; // 默认 768
    y: number; // 默认 768
  };
}

切图导出

• 获取切图导出数据

  • type: pixso-input-msg
  • name: /canvas/get-export-settings

• 获取切图导出数据前

  • type: pixso-out-msg
  • name: /canvas/get-export-settings-before

• 获取切图导出数据后

  • type: pixso-out-msg
  • name: /canvas/get-export-settings-after
  • data: ExportSliceItem

ExportSliceItem

interface ExportSliceItem {
  guid: string;
  name: string;
  type: ImageType;
  width: number;
  height: number;
  constraint: {
    exportConstraintType: ExportConstraintType;
    value: number;
  };
}

基础事件监听

• 监听原生事件

  • type: pixso-out-msg
  • name: /canvas/native-event
  • data: {eventName:string, eventValue: Object}

• 注册基础事件的监听

  • type: pixso-input-msg
  • name: /canvas/native-event/set
  • data: {eventName:string, eventProps: string[]}

• 注册基础事件监听前

  • type: pixso-out-msg
  • name: /canvas/native-event/set-before

• 注册基础事件监听后

  • type: pixso-out-msg
  • name: /canvas/native-event/set-after
  • data: {[eventName]:eventProps}

• 获取已注册的事件

  • type: pixso-input-msg
  • name: /canvas/native-event/get

• 获取已注册事件前

  • type: pixso-out-msg
  • name: /canvas/native-event/get-before

• 获取已注册事件后

  • type: pixso-out-msg
  • name: /canvas/native-event/get-after
  • data: {[eventName]:eventProps}

// tip: 不能监听无法序列化的字段
// eg:
postMessage({
  type: "pixso-input-msg",
  name: "/canvas/native-event/set",
  data: [
    {
      eventName: "contextmenu",
      eventProps: ["x", "y"],
    },
    {
      eventName: "keydown",
      eventProps: ["key", "keyCode"],
    },
  ],
});

异常捕获

• 捕获异常

  • type: pixso-out-msg
  • name: /canvas/caught/exception
  • data: CaughtException

CaughtException

type CaughtException =
  | {
      type: "webglcontextlost" | "webglcontextrestored"; // webgl 上下文丢失
    }
  | {
      type: "pixso-input-caught"; // 捕获 pixso-input-msg 中的异常
      name: string; // pixso-input-msg 中的 name
      msg: string; // 异常信息的 message
    };

获取字体缺失列表

• 获取字体缺失列表

  • type: pixso-out-msg
  • name: /canvas/missing/font/get

• 获取字体缺失列表前

  • type: pixso-out-msg
  • name: /canvas/missing/font/get-before

• 获取字体缺失列表后

  • type: pixso-out-msg
  • name: /canvas/missing/font/get-after
  • data: MissFontItem[]

MissFontItem

interface MissFontItem {
  family: string; // 字体 family
  style: string; // 字体 style
  digests?: string[]; // 字体 hash
}

获取修复升级后的文档数据

• 获取修复升级后的文档数据

  • type: pixso-input-msg
  • name: /canvas/kiwi/get

• 获取修复升级后的文档数据前

  • type: pixso-out-msg
  • name: /canvas/kiwi/get-before

• 获取修复升级后的文档数据后

  • type: pixso-out-msg
  • name: /canvas/kiwi/get-after
  • data: string

代码生成

• 实时反射当前选中节点的代码数据

  • type: pixso-out-msg
  • name: /canvas/code-generate
  • data: ResGeneratedCode

• 设置代码生成的配置

  • type: pixso-input-msg
  • name: /canvas/set-code-generated
  • data: IGeneratedCode

• 设置代码生成的配置前

  • type: pixso-out-msg
  • name: /canvas/set-code-generated-before

• 设置代码生成的配置后

  • type: pixso-out-msg
  • name: /canvas/set-code-generated-after

IGeneratedCode

type CodeNumericUnit = "px" | "pt" | "dp" | "rem" | "sp";
type CodeLanguage = "CSS" | "swiftUI" | "UIKit" | "XML" | "Compose" | "ArkUI";

interface IGeneratedCode {
  unit?: CodeNumericUnit; // 默认 px
  language?: CodeLanguage; // 默认 CSS
  conversionRate?: number; // 倍率关系, 默认 1
}

ResGeneratedCode

enum CodeCategory {
  Layout = "Layout", // 布局
  Style = "Style", // 样式
  Font = "Font", // 字体排版
  Modifier = "Modifier", // Compose
  Image = "Image", // Compose 和 swiftUI
  ZStack = "ZStack", // swiftUI
  Rectangle = "Rectangle", // swiftUI
  HStack = "HStack", // swiftUI
  VStack = "VStack", // swiftUI
  Text = "Text", // swiftUI
}

interface CodeResultsType {
  title: string;
  category: CodeCategory;
  code: string;
}

interface ResGeneratedCode {
  codeResults: CodeResultsType;
  properties: Properties;
}

PIXSO CODE 文档

1. 概述

PROPERTIES 用于定义 Pixso Code 相关的数据结构，包括图层信息、布局、组件、文本等。

2. 类型

interface Properties
  extends baseProperties,
    textProperties,
    fill,
    stroke,
    effect,
    AutoLaout,
    Constraint,
    CompoentNode {
  thumb: string;
  booleanOperation?: BooleanOperation; //布尔操作类型
  paddingTop: number;
  paddingRight: number;
  paddingBottom: number;
  paddingLeft: number;
}

2. 基础属性

interface baseProperties {
  name: string; // 图层名称
  guid: string; // 图层 id
  backgroundColor: any; // 背景色
  width: number; // 宽度
  height: number; // 高度
  left: number; // 左侧距离
  top: number; // 顶部距离
  type: NodeType; // 节点类型
  bottom: number; // 底部距离
  right: number; // 右侧距离
  itemToParentMargin: Margin; // 边距图相对父级位置（跟left,top四个属性的区别在于旋转时不同）
  opacity: number; // 透明度
  angle: number; // 旋转角度
  visible: boolean; // 可见性
  rectangleBottomLeftCornerRadius: number; // 左下圆角
  rectangleBottomRightCornerRadius: number; // 右下圆角
  rectangleTopLeftCornerRadius: number; // 左上圆角
  rectangleTopRightCornerRadius: number; // 右上圆角
}

3. 文本属性

interface textProperties {
  nodeText: string; // 文本数据
  fontFamily: string; // 字体 family
  fontStyle: string; // 字体 style
  fontSize: number; // 字号
  fontWeight: number; // 字重
  lineHeight: string; // 行高
  letterSpacing: string; // 字间距
  letterSpacingNumber: number; // 字间距值
  letterSpacingUnit?: TextNumberUnits; // 字间距单位
  paragraphSpacing: number; // 段落间距
  textAlign: TextAlignHorizontal; // 文本对齐方式
  textAlignVertical: TextAlignVertical; // 文本垂直对齐方式
  textDecoration: TextDecoration; // 文本装饰器
  textTransform: TextTransform; // 文字大小写
  inheritTextStyleID: string; // 文本样式 id
  inheritTextStyleName: string; // 文本样式名称
  lineHeightNumber: number; // 行高数值
  textIsLineBreak?: TextTruncation; // 文本截断
}

4. 填充属性

interface fill {
  fillPaints: Paint[]; // 样式填充属性
  inheritFillStyleKey: string; // 样式 key
  inheritFillStyleName: string; // 样式名称
}

5. 边框属性

interface stroke {
  strokeWeight: number; // 描边粗细
  strokeAlign: StrokeAlign; // 描边对齐方式
  strokePaints: Paint[]; // 描边填充属性
  dashPattern: number[]; // 虚线参数
  strokeJoin: StrokeJoin; // 顶点样式
  strokeCap: StrokeCap; // 描边样式
  inheritStrokeStyleKey: string; // 描边样式 key
  borderTopWeight: number; // 上描边粗细
  borderBottomWeight: number; // 下描边粗细
  borderLeftWeight: number; // 左描边粗细
  cornerRadius: number; // 圆角半径
  borderRightWeight: number; // 右描边粗细
}

6. 效果属性

interface effect {
  effects: Effect[];
  inheritEffectStyleKey: string;
}

7. 自动布局

interface AutoLaout {
  autoLayoutDirection: AutoLayoutDirection; // 布局方向
  absolutePosition: boolean; // 绝对定位
  autoLayoutItemSpacing: string; //水平间距
  autoLayoutItemHoriAlign: AutoLayoutAlign; //水平方向
  autoLayoutItemVertAlign: AutoLayoutAlign; //垂直方向
  autoLayoutWidthResize: ResizeType; //水平尺寸响应
  autoLayoutHeightResize: ResizeType; //垂直尺寸响应
  autoLayoutAlignType?: AlignType;
  autoLayoutPrimaryAlign?: AlignType; // 主轴布局方式
  autoLayoutCounterAlign?: AlignType; // 次轴布局方式
  autoLayoutMarginLeft: number; // margin-left
  autoLayoutMarginRight: number; // margin-right
  autoLayoutMarginTop: number; // margin-top
  autoLayoutMarginBottom: number; // margin-bottom
}

8. 约束

interface Constraint {
  horizontalConstraint: ConstraintType; // 水平约束
  verticalConstraint: ConstraintType; // 垂直约束
  itemToChildMargin: Margin; //父级相对于子级边距
  itemToParentMargin: Margin; //子级相对于父级边距
  itemToBrotherMargin: Margin; //相对于兄弟节点边距
  allItemsToParentMargin: Margin; //所有子级相对于父级边距
}

9.组件

interface CompoentNode {
  isStateGroup: boolean; // 是否组件集
  symbolDescription: string; // 组件描述
  masterSymbolGUID: string; // 主组件 guid
  masterSymbolName: string; // 主组件 名称
  masterSymbolDescription?: string; // 主组件 描述
  masterSymbolPublishID: string; //云端组件id
  isVariant: boolean; // 是否变体
  isShowMasterSymbolName: boolean;
}

10. 多样式文本属性

interface textProperties {
  contentStr: string; //文本
  paints: Paint[]; //文本填充
  fontFamily: string; //文本字体
  fontSize: number; //文本大小
  lineHeight: string; //文本行高
  letterSpacing: string; //文本字间距
  fontWeight: number; //文本字重
  textAlign: number; //文本对齐方式
}
[];

其他接口

enum BooleanOperation {
  UNION = 0, // 联集
  INTERSECT = 1, // 交集
  SUBTRACT = 2, // 减去顶层
  XOR = 3, // 差集
}
interface Margin {
  top: number;
  right: number;
  bottom: number;
  left: number;
}
enum TextNumberUnits {
  auto, // 自动
  pixel, // 像素
  percent, // 百分比
}
enum TextDecoration {
  none, ///< 无
  underline, ///< 下划线
  strikethrough, ///< 删除线
}
interface Paint {
  blendMode: BlendMode; // 图层模式
  color: ColorRGBA;
  opacity: number;
  type: PaintType;
  visible: boolean;
  stops: stop[]; // 渐变时的颜色
  startPt: Pt;
  endPt: Pt;
  leftPt: Pt;
}
interface ColorRGBA {
  a: number;
  b: number;
  g: number;
  r: number;
}
interface Pt {
  x: number;
  y: number;
}
enum PaintType {
  SOLID = 0,
  GRADIENT_LINEAR = 1, // 线性渐变
  GRADIENT_RADIAL = 2, // 径向渐变
  GRADIENT_ANGULAR = 3, // 角度渐变
  GRADIENT_DIAMOND = 4, // 菱形渐变
  IMAGE = 5,
  EMOJI = 6,
  GIF = 7,
  VIDEO = 8,
}
enum BlendMode {
  PASS_THROUGH = 0, // 穿透
  NORMAL = 1, // 正常
  DARKEN = 2, // 变暗
  MULTIPLY = 3, // 正片叠底
  LINEAR_BURN = 4, // 加暗
  COLOR_BURN = 5, // 颜色加深
  LIGHTEN = 6, // 变亮
  SCREEN = 7, // 滤色
  LINEAR_DODGE = 8, // 加亮
  COLOR_DODGE = 9, // 颜色减淡
  OVERLAY = 10, // 叠加
  SOFT_LIGHT = 11, // 柔光
  HARD_LIGHT = 12, // 强光
  DIFFERENCE = 13, // 差值
  EXCLUSION = 14, // 排除
  HUE = 15, // 色相
  SATURATION = 16, // 饱和度
  COLOR = 17, // 颜色
  LUMINOSITY = 18, // 明度
}

interface stop {
  color: ColorRGBA;
  position: number;
}

enum StrokeAlign {
  CENTER = 0, // 居中
  INSIDE = 1, // 内部
  OUTSIDE = 2, // 外部
}
enum StrokeJoin {
  MITER = 0, // 直角
  BEVEL = 1, // 斜角
  ROUND = 2, // 圆角
}
enum StrokeCap {
  unable = -1, // 禁用，混合
  NONE = 0,
  ROUND = 1, // 圆形
  SQUARE = 2, // 方形
  ARROW_LINES = 3, // 箭头
  ARROW_EQUILATERAL = 4, // 三角形箭头
  TRIANGLE_FILLED = 5, // 反三角形箭头
  DIAMOND_FILLED = 6, // 菱形箭头
  HOLLOW_ROUND = 7, // 空心圆
  SOLID_ROUND = 8, // 实心圆
  VERTICAL_LINE = 9, // 竖线
}

interface Effect {
  blendMode: BlendMode;
  color: ColorRGBA;
  offset: Pt; // 偏移度
  radius: number; // 模糊
  showShadowBehindNode: boolean;
  spread: number; // 扩展
  type: EffectType; // 阴影类型
  visible: boolean;
  saturation: number; // 饱和度
}
enum EffectType {
  INNER_SHADOW = 1, // 内阴影
  DROP_SHADOW = 2, // 外阴影
  FOREGROUND_BLUR = 3, // 高斯模糊
  BACKGROUND_BLUR = 4, // 背景模糊
  MOTION_BLUR = 5, // 运动模糊
}

enum AutoLayoutDirection {
  NONE = 0,
  HORIZONTAL = 1, // 横向
  VERTICAL = 2, // 纵向
  WRAP = 3, // 换行
}
enum AutoLayoutAlign {
  MIN = 0,
  CENTER = 1,
  MAX = 2,
  SPACE_EVENLY = 3,
}
enum ResizeType {
  FIXED = 0, // 固定
  HUG = 1, // 适应/环抱内容
  FILL = 2, // 填充
  // 前端补充
  MIXED = 3, // 混合
  NONE = -1, // 无
}
enum AlignType {
  SPACE_BETWEEN = "space-between",
  CENTER = "center",
  FLEX_START = "flex-start",
  FLEX_END = "flex-end",
}
enum ConstraintType {
  MIN = 0, // 靠左固定 | 顶部固定
  CENTER = 1, // 水平居中 | 垂直居中
  MAX = 2, // 靠右固定 | 底部固定
  STRETCH = 3, // 左右固定 | 上下固定
  SCALE = 4, // 水平缩放 | 上下缩放
}

enum NodeType {
  NONE = 1,
  DOCUMENT = 2,
  CANVAS = 3, // 页面、文档
  GROUP = 4, // 组合
  FRAME = 5, // 画板
  BOOLEAN_OPERATION = 6, // 布尔运算
  VECTOR = 7, // 矢量
  STAR = 8, // 星形
  LINE = 9, // 线
  ELLIPSE = 10, // 椭圆
  RECTANGLE = 11, // 矩形
  REGULAR_POLYGON = 12, // 多边形
  ROUNDED_RECTANGLE = 13, // 圆角矩形
  TEXT = 14, // 文本
  SLICE = 15, // 切片
  SYMBOL = 16, // 组件
  INSTANCE = 17, // 实例
  CONNECTLINE = 18, // 连接线
  DIRECTORY = 19, // 目录、文件夹
}

enum TextAlignHorizontal {
  eLeft = 0, ///< 左对齐
  eCenter, ///< 居中对齐
  eRight, ///< 右对齐
  eJustify, ///< 两端对齐
}

enum TextAlignVertical {
  eTop = 0, ///< 顶部对齐
  eCenter, ///< 居中对齐
  eBottom, ///< 底部对齐
}

enum TextTransform {
  none = 0,
  uppercase = 1, // 大写
  lowercase = 2, // 小写
  capitalize = 3, // 首字母大写
}

enum TextTruncation {
  disable, ///< 禁用
  ending, ///< 结尾
}