Pixso 开放文档
插件 API
官方工具集
  • 中文
  • English
插件 API
官方工具集
  • 中文
  • English
  • 插件 API

    • 简介
    • 预备知识
    • manifest
    • 开发指南
    • 更新日志
    • Plugin API 文档

      • 概述
      • 全局对象

        • pixso
        • pixso.ui
        • pixso.host
        • pixso.mouse
        • pixso.editor
        • pixso.keyboard
        • pixso.fieldset
        • pixso.viewport
        • pixso.vectorEditor
        • pixso.stickyToolbar
        • pixso.clientStorage
        • pixso.serverStorage
      • 节点类型

        • BooleanOperationNode
        • ComponentNode
        • ComponentSetNode
        • DocumentNode
        • EllipseNode
        • FrameNode
        • GroupNode
        • InstanceNode
        • LineNode
        • PageNode
        • PolygonNode
        • RectangleNode
        • SectionNode
        • SliceNode
        • StarNode
        • TextNode
        • VectorNode
      • 样式类型

        • PaintStyle
        • TextStyle
        • EffectStyle
        • GridStyle
      • 数据类型

        • Action
        • ArcData
        • BlendMode
        • CommandItem
        • ComponentProperties-Related
        • Constraints
        • DialogType
        • DocumentationLink
        • Effect
        • EmbedData
        • ExportSettings
        • FontName
        • Guide
        • HandleMirroring
        • HyperlinkTarget
        • Image
        • LayoutGrid
        • LetterSpacing
        • Library
        • LineHeight
        • NodeChangeProperty
        • OverflowDirection
        • Overlay
        • Paint
        • PublishStatus
        • Reaction
        • Rect-related
        • RGB & RGBA
        • StickyToolbar
        • StrokeCap
        • StrokeJoin
        • StyleChangeProperty
        • TextCase
        • TextDecoration
        • TextListOptions
        • ThemeType
        • ToolType
        • Transition
        • Trigger
        • Vector
    • Host API 文档

      • 概述
      • Host API
  • 服务端 API

    • OpenAPI 文档
    • OpenAPI 文档
    • 事件订阅
    • 事件订阅
  • 客户端 API

    • 简介
    • 唤醒客户端
    • Web API
    • 更新日志

pixso

插件的 JavaScript 脚本会在一个受限的沙箱中运行,因此无法访问浏览器 API,但我们提供了一个全局变量pixso,通过pixso能够访问大多数的插件 API,实现对编辑器、节点、样式等的操作功能。

General

mixed

  • Readonly: true
  • Type: string

pixso.mixed 是一个常量值,获取节点的某个属性时,如果属性是一个混合值,则会返回此常量。


fileKey

  • Readonly: true
  • Type: string | undefined

运行此插件的当前文件的文件密钥。


pluginId

  • Readonly: true
  • Type: string

即定义在 manifest.json 中的 id 字段的值,这仅适用于插件。


command

  • Readonly: true
  • Type: string

manifest.json 文件中当前正在执行的命令。 它是 ManifestMenuItem 中的命令字符串。 如果插件没有任何菜单项,则此属性未定义。


startup

  • Readonly: true
  • Type: Startup
/**
 * SHORTCUT 快捷键启动
 * DEFAULT 默认启动
 * RESTART 重启
 */
type Startup = "NORMAL" | "SHORTCUT" | "DEFAULT" | "RESTART";

获取插件的启动方式。


HWDC

isLoadByShortcut

  • Readonly: true
  • Type: Boolean

表明当前插件是否由快捷键唤起。


showUI

showUI(html: string, options?: ShowUIOptions): void;
interface ShowUIOptions {
	visible?: boolean;
	title?: string;
	width?: number;
	height?: number;
	position?: { x: number; y: number };
	themeColors?: boolean;
	mode?: "NORMAL" | "SIMPLIFIED";
	enableMinimize?: boolean;
}

此方法会使用 iframe 创建一个模态框,根据指定的 html 展示 UI 交互界面,让用户更直观地操作插件,同时提供访问浏览器原生 API 的能力。

参数:

html: 加载到 iframe 中的 HTML, 可以是传入 HTML 字符串,或是全局变量__html__,__html__的值为manifest.json中ui字段制定的文件内容。

options: 通过 options 对象可设置 UI 模态框的属性,options 对象具有如下属性:

  • visible: 可选,控制 UI 模态框是否可视,类型为boolean,默认为true,
  • title: 可选,UI 模态框的标题。
  • width: 可选,UI 模态框 iframe 的宽度,默认为 300。
  • height: 可选,UI 模态框 iframe 的高度,默认为 240。
  • position: 可选,UI 模态框的水平定位和垂直定位。
  • themeColors: 可选,UI 模态框的主题设置,类型为boolean,默认为false。当开启时,可以通过使用 CSS 变量来匹配 Pixso 应用的深色或浅色主题。
  • mode: 可选,设置 UI 模态框的显示模式,默认为 NORMAL,SIMPLIFIED 模式会隐藏插件图标和标题。可通过调用 pixso.ui.mode 进行读写。
  • enableMinimize: 可选,设置 UI 模态框是否显示最小化按钮,默认为 false。可通过调用 pixso.ui.enableMinimize 进行读写。

ui

  • Readonly: true
  • Type: UIAPI

此属性包含用于修改通过 pixso.showUI(...) 创建的 UI 并与之通信的方法。


host

  • Readonly: true
  • Type: HostAPI

此对象下提供了插件运行的 host 上下文的一些方法。


mouse

  • Readonly: true
  • Type: MouseAPI

此属性下包含鼠标相关的属性。


editor

  • Readonly: true
  • Type: EditorAPI

此属性下包含编辑器相关的属性。


HWDC

keyboard

  • Readonly: true
  • type: KeyboardAPI

此属性下提供了编辑器键盘相关的方法。


fieldset

  • Readonly: true
  • Type: FieldsetAPI

此属性包含用画框工具的使用方法。


viewport

  • Readonly: true
  • Type: ViewportAPI

此属性包含用于读取和设置视口(当前页面的用户可见区域)的方法。


vectorEditor

  • Readonly: true
  • Type: VectorEditorAPI

提供编辑矢量图层的 API。


currentTheme

  • Readonly: true
  • Type: ThemeType

此属性返回 pixso 应用当前偏好设置中的主题色。

currentTool

  • Type: ToolType

此属性可读取或设置当前画笔工具类型


closePlugin

  • Type: closePlugin(message?: string): void

插件运行完成之后,都需要调用pixso.closePlugin()用来关闭。调用此 API 之后,插件的 UI 模态框都会关闭,所有 setTimeout 或 setInterval 定时器都将被清除。

参数:

message: 可选,在插件关闭之后,通过 toast 提示消息。


notify

notify(message: string, options?: NotificationOptions): NotificationHandler;
interface NotificationOptions {
	timeout?: number;
	error?: boolean;
	icon?: "SUCCESS" | "ERROR" | "WARN" | "INFO";
	position?: "TOP" | "BOTTOM" | "RIGHT_BOTTOM";
}
interface NotificationHandler {
	cancel: () => void
}

在屏幕上展示一条通知消息,pixso.notify() 返回一个包含取消方法的对象,取消后,能移除消息提示。

参数:

message:必选,通知消息的内容。 options: 可选,可配置消息通知的时长、样式等,参数如下:

  • timeout:通知在关闭前保持多长时间(以毫秒为单位),未指定时默认为 4 秒。
  • error:如果为 true,则将通知显示为错误消息,并使用不同的颜色。
  • icon: 提示消息内容前面展示的图标,Pixso 提供了 SUCCESS、ERROR、WARN、INFO 四种状态的图标。若 error 为 true,则只展示 ERROR 图标。
  • position: 提示消息的位置,默认为 TOP。

loading

loading(message: string, options?: LoadingOptions): LoadingHandler;
interface LoadingOptions {
  position?: "TOP" | "BOTTOM" | "RIGHT_BOTTOM";
}
interface LoadingHandler {
  cancel: () => void
}

在屏幕上显示一条加载态提示,pixso.loading() 返回一个包含取消方法的对象。加载态提示不会定时关闭,需手动关闭,

Event

on

on(type: ArgFreeEventType, callback: () => void): void;

on(type: "run", callback: (event: RunEvent) => void): void;

on(type: "drop", callback: (event: DropEvent) => boolean): void;

on(type: "documentchange", callback: (event: DocumentChangeEvent) => void): void;

on(type: "themechange", callback: (theme: ThemeChangeEvent) => void): void;

on(type: "edittypechange", callback: (event: EditTypeChangeEvent) => void): void;

on(type: "detachinstance", callback: (event: DetachInstanceEvent) => void): void;

on(type: "detachstyle", callback: (event: DetachStyleEvent) => void): void;

on(type: "toptoolselect", callback: (event: ToptoolselectEvent) => void): void;

on(type: "bottomtoolselect", callback: (event: BottomToolSelectEvent) => void): void;

on(type: "contextmenuselect", callback: (event: ContextMenuSelectEvent) => void): void;

on(type: "shortcuthit", callback: (event: ShortcutHitEvent) => void): void;

on(type: "subscribelibrary", callback: (event: LibraryEvent) => void): void;

on(type: "unsubscribelibrary", callback: (event: LibraryEvent) => void): void;

on 方法允许注册特定事件的处理函数,当事件发生时会执行该回调函数,事件类型如下:

  • selectionchange:当 currentPage.selection 变化时触发;
  • currentpagechange:当用户导航到不同的页面或插件更改 pixso.currentPage 时触发;
  • librarychange:当文档弹出更新弹窗时触发;
  • viewportchange: 画布视口变更时触发;
  • close:当插件即将关闭时触发,无论是从调用 pixso.closePlugin() 或用户关闭插件;
  • run:当插件开始运行时触发。
  • drop:当外部对象被放置在 Pixso 的画布上时触发,也可以通过用户界面主动触发 drop 事件。
  • themechange:当用户切换颜色主题时(即pixso.currentTheme发生变化时)触发;
  • edittypechange:文本聚焦失焦时触发;
  • detachinstance:当实例脱离组件时触发;
  • detachstyle:当样式脱离节点对象时触发;
  • bottomtoolselect: 当点击通过 pixso.setBottomTools 自定义的底部工具栏按钮时触发;
  • toptoolselect: 当点击通过 pixso.setTopTools 自定义的顶部工具栏按钮时触发;
  • contextmenuselect: 当点击 pixso.setContextMenus 自定义的右键菜单项时触发;
  • shortcuthit: 当点击 pixso.setShortcuts 自定义的二级插件功能菜单项时触发;
  • subscribelibrary: 当订阅资源库时触发;
  • unsubscribelibrary: 当取消订阅资源库时触发;

once

once(type: ArgFreeEventType, callback: () => void): void;

once(type: "run", callback: (event: RunEvent) => void): void;

once(type: "drop", callback: (event: DropEvent) => boolean): void;

once(type: "documentchange", callback: (event: DocumentChangeEvent) => void): void;

once(type: "themechange", callback: (theme: ThemeChangeEvent) => void): void;

once(type: "edittypechange", callback: (theme: EditTypeChangeEvent) => void): void;

once(type: "detachinstance", callback: (event: EditTypeChangeEvent) => void): void;

once(type: "detachstyle", callback: (event: DetachStyleEvent) => void): void;

once(type: "bottomtoolselect", callback: (event: BottomToolSelectEvent) => void): void;

once(type: "toptoolselect", callback: (event: toptoolselectEvent) => void): void;

once(type: "contextmenuselect", callback: (event: ContextMenuSelectEvent) => void): void;

once(type: "shortcuthit", callback: (event: ShortcutHitEvent) => void): void;

once 方法允许注册特定事件的处理函数,当事件发生时会执行该回调函数。与 on 方法的区别在于,通过 once 方法注册的事件处理函数只会执行一次。


off

off(type: ArgFreeEventType, callback: () => void): void;

off(type: "run", callback: (event: RunEvent) => void): void;

off(type: "drop", callback: (event: DropEvent) => boolean): void;

off(type: "documentchange", callback: (event: DocumentChangeEvent) => void): void;

off(type: "themechange", callback: (theme: ThemeChangeEvent) => void): void;

off(type: "edittypechange", callback: (theme: EditTypeChangeEvent) => void): void;

off(type: "detachinstance", callback: (event: EditTypeChangeEvent) => void): void;

off(type: "detachstyle", callback: (event: DetachStyleEvent) => void): void;

off(type: "bottomtoolselect", callback: (event: BottomToolSelectEvent) => void): void;

off(type: "toptoolselect", callback: (event: toptoolselectEvent) => void): void;

off(type: "contextmenuselect", callback: (event: ContextMenuSelectEvent) => void): void;

off(type: "shortcuthit", callback: (event: ShortcutHitEvent) => void): void;

移除通过 pixso.on 或 pixso.once 绑定的事件处理函数。

Node-related

root

  • Readonly: true
  • Type: DocumentNode

整个 pixso 文档的根目录。该节点用于访问其他页面。每个子元素都是一个 PageNode。


currentPage

  • Type: PageNode

获取当前查看的页面,给这个值设置页面节点可以用来切换页面。


getNodeById

  • Type: getNodeById(id: string): BaseNode | null

根据给定的 id 查找相应的节点。如果没有找到对应的节点,则返回 null。


createRectangle

  • Type: createRectangle(): RectangleNode

创建一个新的矩形。该行为等价于使用快捷键 R。


createLine

  • Type: createLine(): LineNode

创建一个新的线段图层。


createEllipse

  • Type: createEllipse(): EllipseNode

创建一个新的椭圆图层。其行为等价于使用快捷键 O,接着点击画布。但与使用快捷键创建的图层不同,使用接口创建的图层不会处于选中状态。


createPolygon

  • Type: createPolygon(): PolygonNode

创建一个新的多边形图层。


createStar

  • Type: createStar(): StarNode

创建一个新的星型图层。


createVector

  • Type: createVector(): VectorNode

创建一个没有顶点的新的空向量图层。


createText

  • Type: createText(): TextNode

创建一个新的文本图层。


createFrame

  • Type: createFrame(): FrameNode

创建一个新的容器图层。


createComponent

  • Type: createComponent(): ComponentNode

创建一个新的空组件图层。


createPage

  • Type: createPage(): PageNode

创建一个新的页面。


createSlice

  • Type: createSlice(): SliceNode

创建一个新的切图图层。


createSection

  • Type: createSection(): SectionNode

创建一个新的分区图层。


createNodeFromSvg

  • Type: createNodeFromSvg(svg: string ): FrameNode

通过 SVG 字符串创建图层。等价于编辑器中的 SVG 导入功能。

createNodeFromSvgAsync

  • Type: createNodeFromSvgAsync(svg: Uint8Array): Promise<FrameNode>

通过 SVG 的 Uint8Array 数据创建图层。


HWDC

createNodeFromJsonAsync

  • Type: createNodeFromJsonAsync(pixsoJSON: string): Promise<SceneNode[]>

通过 Pixso 图层的 JSON 数据创建新的节点,等价于编辑器中复制图层 JSON 后,粘贴到编辑器的功能。

createNodeFromHexAsync

  • Type: createNodeFromHexAsync(hex: string): Promise<SceneNode[]>

通过 Pixso 图层的 Hex 数据创建新的节点,等价于编辑器中复制图层 Hex 后,粘贴到编辑器的功能。


group

  • Type: group(nodes: ReadonlyArray<BaseNode>,parent: BaseNode & ChildrenMixin,index?: number): GroupNode

用来根据其参数中指定的节点创建一个组。


union

  • Type: union(nodes: ReadonlyArray<BaseNode>, parent: BaseNode & ChildrenMixin, index?: number): BooleanOperationNode

使用节点的内容使用 UNION 操作创建一个新的 BooleanOperationNode。 union 的参数与 pixso.group 中的相同。


subtract

  • Type: subtract(nodes: ReadonlyArray<BaseNode>,parent: BaseNode & ChildrenMixin,index?: number): BooleanOperationNode

用来根据其参数指定的节点创建一个新的布尔组(减去顶层)图层。


intersect

  • Type: intersect(nodes: ReadonlyArray<BaseNode>,parent: BaseNode & ChildrenMixin,index?: number): BooleanOperationNode;

用来根据其参数指定的节点创建一个新的布尔组(交集)图层。


exclude

  • Type: exclude(nodes: ReadonlyArray<BaseNode>,parent: BaseNode & ChildrenMixin,index?: number): BooleanOperationNode;

用来根据其参数指定的节点创建一个新的布尔组(差集)图层。


flatten

  • Type: flatten(nodes: ReadonlyArray<BaseNode>,parent?: BaseNode & ChildrenMixin,index?: number): VectorNode

将节点中的每个节点展平成一个新的向量网络。


ungroup

  • Type: ungroup(node: SceneNode & ChildrenMixin): Array<SceneNode>

解组给定组合节点,将节点的所有子节点移动到节点的父节点并删除节点。 返回作为节点子节点的节点数组。

Style-related

getStyleById

  • Type: getStyleById(id: string): BaseStyle | null

根据给定的 id 查找相应的样式。如果没有找到对应的节点,则返回 null。


createPaintStyle

  • Type: createPaintStyle(): PaintStyle

创建新的颜色样式,可用于填充或描边。


createTextStyle

  • Type: createTextStyle(): TextStyle

创建新的文本样式。


createEffectStyle

  • Type: createEffectStyle(): EffectStyle

创建新的效果样式。


createGridStyle

  • Type: createGridStyle(): GridStyle

创建新的网格样式。


getLocalPaintStyles

  • Type: getLocalPaintStyles(): PaintStyle[]

获取本地的颜色样式。


getLocalTextStyles

  • Type: getLocalTextStyles(): TextStyle[]

获取本地的文本样式。


getLocalEffectStyles

  • Type: getLocalEffectStyles(): EffectStyle[]

获取本地的效果样式。


getLocalGridStyles

  • Type: getLocalGridStyles(): GridStyle[]

获取本地的网格样式。

Library

getLibraryListAsync

  • Type: getLibraryListAsync(): Promise<LibraryItem>
  • Type Declaration: LibraryItem

获取资源库列表。

getLibraryByKeyAsync

  • Type: getLibraryByKeyAsync(key: string): Promise<Library>
  • Type Declaration: LibraryAssets

根据 key 值获取资源库信息。

subscribeLibraryAsync

  • Type: subscribeLibraryAsync(key: string): Promise<void>

订阅资源库,想引入某个库文件的资源前,建议先订阅该资源库,可提升引入资源的请求速度。

unsubscribeLibraryAsync

  • Type: unsubscribeLibraryAsync(key: string): Promise<void>

取消订阅资源库。

importStyleByKeyAsync

  • Type: importStyleByKeyAsync(key: string): Promise<BaseStyle>

从资源库中加载样式。

importComponentByKeyAsync

  • Type: importComponentByKeyAsync(key: string): Promise<ComponentNode>

从资源库中加载组件。

importComponentSetByKeyAsync

  • Type: importComponentSetByKeyAsync(key: string): Promise<ComponentSetNode>

从资源库中加载组件集。

publishLocalComponentAsync

  • Type: publishLocalComponentAsync(libraryType?: 'ENT'|'TEAM'): Promise<void>

发布资源库。同资源库弹窗的发布功能,但只发布组件。libraryType 默认为 TEAM

publishLocalStyleAsync

  • Type: publishLocalStyleAsync(libraryType?: 'ENT'|'TEAM'): Promise<void>

发布资源库。同资源库弹窗的发布功能,但只发布样式。libraryType 默认为 TEAM

getLibraryChange

  • Type: getLibraryChange(): Library[]
  • Type Declaration: LibraryAssets

获取当前文档需要更新的资源信息。

updateLibraryComponentAsync

  • Type: updateLibraryComponentAsync(): Promise<void>

更新当前文档需要更新的组件资源。

updateLibraryStyleAsync

  • Type: updateLibraryStyleAsync(): Promise<void>

更新当前文档需要更新的样式资源。

getLibraryComponentsInUse

  • Type: getLibraryComponentsInUse(): (LibraryComponent | LibraryComponentSet)[]
  • Type Declaration: LibraryComponent, LibraryComponentSet

获取当前文档正在使用的云端组件资源。

getLibraryStylesInUse

  • Type: getLibraryStylesInUse(): LibraryStyle[]
  • Type Declaration: LibraryStyle

获取当前文档正在使用的云端样式资源。

getLocalComponents

  • Type: getLocalComponents(): (LocalComponent | LocalComponentSet)[]
  • Type Declaration: LocalComponent, LocalComponentSet

获取本地的组件资源。

Storage

clientStorage

  • Readonly: true
  • Type: ClientStorageAPI
interface ClientStorageAPI {
  getAsync(key: string): Promise<any | undefined>;
  setAsync(key: string, value: any): Promise<void>;
  deleteAsync(key: string): Promise<void>;
  keysAsync(): Promise<string[]>;
}

允许您在用户的本地机器上存储数据。


serverStorage

  • Readonly: true
  • Type: ServerStorageAPI
interface ServerStorageAPI {
  getAsync(key?: string): Promise<any | undefined>;
  setAsync(key: string, value: any): Promise<void>;
  deleteAsync(key?: string): Promise<void>;
}

允许您在服务器端存储数据。

Font

listAvailableFontsAsync

  • Type: listAvailableFontsAsync(): Promise<Font[]>

返回当前可用字体的列表。


loadFontAsync

  • Type: loadFontAsync (fontName: FontName ): Promise<void>

加载某个字体,确保该字体在文本图层上使用时是有效的。

Tool

setTopTools

  • Type:setTopTools(tools: ToolItem[]): void
  • Type Declaration: ToolItem

支持在顶部 AI 魔法框按钮旁边定义更多顶部工具栏。可通过 pixso.on 监听 toptoolselect 事件,实现插件与顶部工具栏的交互。


setBottomTools

  • Type:setBottomTools(tools: ToolItem[]): void
  • Type Declaration: ToolItem

setContextMenus

  • Type:setContextMenus(menus: ContextMenuItem[]): void
  • Type Declaration: ContextMenuItem

自定义右键菜单。在编辑模式下,选中画板、图层后右键即可展示。可通过 pixso.on 监听 contextmenuselect 事件,实现插件与右键菜单的交互。


stickyToolbar

  • Readonly: true
  • Type: StickyToolbarAPI

此属性提供了控制图层悬浮工具栏的能力。


setShortcuts

  • Readonly: true
  • Type: setShortcuts(shortcuts: ShortcutItem[]): void
  • Type Declaration: ShortcutItem

此属性提供了在插件坞上给插件设置二级功能的能力。可通过 pixso.on 监听 shortcuthit 事件,实现插件与快捷方式插件的交互。

Undo

commitUndo

  • Type: () => void

默认情况下,插件的操作不会提交到撤销(undo)历史记录中。可以通过 pixso.commitUndo() 函数手动地将当前的插件操作提交到撤销(undo)历史记录中。

举个例子,假设我们的插件执行了两个操作,即创建了两个矩形:

pixso.createRectangle(); // 创建第一个矩形
pixso.createRectangle(); // 创建第二个矩形
pixso.triggerUndo();

这时,当我们执行撤销动作时,会撤销全部两个矩形。如果我们在两个矩形创建动作之间调用 pixso.commitUndo() 函数:

pixso.createRectangle(); // 创建第一个矩形
pixso.commitUndo(); // 添加撤销历史
pixso.createRectangle(); // 创建第二个矩形
pixso.triggerUndo();

这时,如果我们执行撤销动作,将只会撤销掉第二个矩形的创建。

triggerUndo

  • Type: () => void

触发撤销动作,将会恢复到最后一次 commitUndo() 的状态。

Image

createImage

  • Type: createImage(data: Uint8Array): Image

通过参数 data 创建一个图片对象,创建的图片对象不是一个图层节点,而是一个存储在 Pixso 中的一个图片句柄。


getImageByHash

  • Type: getImageByHash(hash: string): Image | null

通过给定的图片哈希值 hash,获取相应的图片对象,否则返回 null。

Export & Import

exportFileAsync

  • Type:exportFileAsync(): Promise<Uint8Array>

导出当前 Pixso 文件,API 返回 Promise<Uint8Array> 值,可以将其下载为 Pixso 文件至本地。

其结果与 Pixso 编辑界面主菜单的导出-Pixso 设计文件操作相比,导出内容少了图片资源,因此,重新导入文件时,需要与导出文件时在同一个环境,否则设计稿中的图片资源会丢失。

以下是通过 exportFileAsync 接口下载 Pixso 文件至本地的示例:

/** 主线程 */
const fileUint8Array = await pixso.exportFileAsync();

/** 用户界面 */
const blob = new Blob([fileUint8Array], { type: "application/zip" });
const href = window.URL.createObjectURL(blob);
const downloadEle = document.createElement("a");
downloadEle.href = href;
// Pixso 文件实际上是一个 zip 类型文件,但需要将后缀名改为 pix。
downloadEle.download = "设计文件.pix";
document.body.appendChild(downloadEle);
downloadEle.click();
document.body.removeChild(downloadEle);
window.URL.revokeObjectURL(href);

exportSceneNodeListStream

  • Type:exportSceneNodeListStream(nodes: SceneNode[]): string

导出多个图层节点(页面、文档节点除外)的数据流,返回结果已封装为 text/html 格式。可手动写入剪切板,然后在编辑器进行粘贴,实现复制图层的操作。

以下是通过 exportSceneNodeListStream API 复制 Pixso 图层节点数据流至剪切板的示例:

/** 主线程 */
const stream = pixso.exportSceneNodeListStream(nodeList);

/** 用户界面 */
document.body.addEventListener("copy", (e: ClipboardEvent) => {
  e.preventDefault();
  e.clipboardData.setData("text/html", stream);
});

document.execCommand("copy");

importSceneNodeListStream

  • Type:importSceneNodeListStream(stream: string): void

importSceneNodeListStream 可导入通过 exportSceneNodeListStream 接口导出的数据流,模拟粘贴图层的操作。


convertSketchJsonAndPaste

  • Type:convertSketchJsonAndPaste(sketchJSON: string): BaseNode | null

通过 sketch 图层的 JSON 数据创建新的节点,等价于在 sketch 中复制图层 JSON 后,粘贴到编辑器的功能。

File-Thumbnail

getFileThumbnailNode

  • Type: getFileThumbnailNode(): FrameNode | ComponentNode | ComponentSetNode | null

获取用于当前文件缩略图的图层节点,如果文件使用了默认缩略图,则为 null。


setFileThumbnailNodeAsync

  • Type: setFileThumbnailNodeAsync(node: FrameNode | ComponentNode | ComponentSetNode | null): Promise<void>

设置图层节点为文件的缩略图,如果图层节点为 null,则使用默认缩略图。

Base64

base64Encode

  • Type: base64Encode(data: Uint8Array): string

将入参 data 编码为 base64 格式的字符串并返回。、


base64Decode

  • Type: base64Decode(data: string): Uint8Array

将入参 base64 编码格式的字符串解码为 Uint8Array 的数据并返回。

User

currentUser

  • Readonly: true
  • Type: CurrentUser

此属性包含有关当前用户的信息。

interface CurrentUser {
  readonly id: string | null;
  readonly name: string;
  readonly photoUrl: string | null;
  readonly color: string;
  readonly sessionId: number;
  readonly uniqueId: string;
}

activeUsers

  • Readonly: true
  • Type: ActiveUser[]

此属性包含有关文件中活动用户的信息。

interface ActiveUser {
  readonly id: string | null;
  readonly name: string;
  readonly photoUrl: string | null;
  readonly color: string;
  readonly sessionId: number;
}

Others

saveVersionHistoryAsync

  • Type: saveVersionHistoryAsync(title: string, description?: string): Promise<VersionHistoryResult>

添加历史版本。参数 description 为对版本的描述。

Next
pixso.ui