plugin-cps-scheme

CPS 平台 预案插件

样例

安装

npm install @soonspacejs/plugin-cps-scheme
# or
yarn add @soonspacejs/plugin-cps-scheme

使用方法

前置条件

预案插件强依赖 CPS 场景加载插件，所以必须先注册 plugin-cps-soonmanager 插件及加载场景步骤。

import SoonSpace from 'soonspacejs';
import CpsSoonmanagerPlugin from '@soonspacejs/plugin-cps-soonmanager';
import CpsSchemePlugin from '@soonspacejs/plugin-cps-scheme';

const ssp = new SoonSpace({
  el: '#view',
  options: {},
  events: {},
});

const cpsSoonmanagerPlugin = ssp.registerPlugin(CpsSoonmanagerPlugin, 'cpsSoonmanagerPlugin');
cpsSoonmanagerPlugin.setPath('xxxx');
await cpsSoonmanagerPlugin.loadScene({
  // ...

  // 加载场景时必须开启流程数据加载，或通过手动方法执行
  loadFlowData: true
});

// 加载场景时 loadFlowData 未开启时，必须在预案执行前手动加载流程数据
await cpsSoonmanagerPlugin.loadFlowData()

const cpsSchemePlugin = ssp.registerPlugin(CpsSchemePlugin, 'cpsSchemePlugin');
await cpsSchemePlugin.init({
  el: '#platter',
  schemeId: '8SPBFEXLC850',
  dependentPlugins: {
    cpsSoonmanagerPlugin: cpsSoonmanagerPlugin,
  },
  placeholder: '占位符',
  // 执行回调（只有配置过数据才会触发）
  execCallback: (content, origin) => {
    console.log(content, origin);
  },
});

属性

cpsSoonmanagerPlugin

上游 CPS 插件

• 默认值: undefined
• 类型: CpsSoonmanagerPlugin

schemeData

预案数据

• 默认值: null
• 类型: ISchemeData[] | null

定义

interface ISchemeNode {
  id: string;
  btnId: string;
  enable: boolean;
  name?: string;
  content?: string;
  contentPath?: string;
  flow?: { flowId: string };
}

interface ISchemeData {
  id: string;
  name: string;
  nodes: Record<string, ISchemeNode>;
}

platterDomElement

预案八卦盘 dom 元素

• 默认值: null
• 类型: SVGElement | null

autoRunFlow

v2.10.x

点击八卦盘按钮时自动执行流程

用法

cpsSchemePlugin.autoRunFlow = false;

• 默认值: true
• 类型: boolean

提示

设置为 false 后，你可以手动调用执行流程的方法 runFlowById

方法

init

初始化预案八卦盘

定义

import CpsSoonmanagerPlugin from '@soonspacejs/plugin-cps-soonmanager';

type TInitOptions = {
  el: string;
  schemeId: string;
  // 上游依赖插件
  dependentPlugins: {
    cpsSoonmanagerPlugin: CpsSoonmanagerPlugin;
  };
  placeholder?: string;
  /**
   * 执行回调（节点点击）
   */
  execCallback?: (content: string, originData: ISchemeNode) => void;
};

function init(options: TInitOptions): Promise<void>;

用法

await cpsSchemePlugin.init({
  el: '#platter',
  schemeId: '8SPBFEXLC850',
  dependentPlugins: {
    cpsSoonmanagerPlugin: cpsSoonmanagerPlugin,
  },
  placeholder: '占位符',
  // 执行回调（只有配置过数据才会触发）
  execCallback: (content, origin) => {
    console.log(content, origin);
  },
});

参数

options

• 描述: 场景加载选项
• 必填:
• 类型: TInitOptions

TInitOptions

属性	描述	类型	必填	默认值
el	装载八卦盘的元素选择器	string
schemeId	预案 id	string
dependentPlugins	上游依赖插件	object
dependentPlugins.cpsSoonmanagerPlugin	CPS 平台导出场景加载插件实例	CpsSoonmanagerPlugin
placeholder	未配置的预案按钮占位符	string		你好，世界
execCallback	按钮点击回调	TInitOptions[execCallback]

setBtnReady

设置八卦盘按钮就绪状态

定义

function setBtnReady(btnId: string, ready?: boolean): void;

用法

cpsSchemePlugin.setBtnReady('bn_p4_s1_9', true);

setBtnHover

设置八卦盘按钮 Hover 状态

定义

function setBtnHover(btnId: string, hover?: boolean): void;

用法

cpsSchemePlugin.setBtnHover('bn_p4_s1_9', true);

dispose

清除预案八卦盘以及数据

用法

cpsSchemePlugin.dispose();

提示

必须调用 dispose() 才能再次调用 init()

fetchSchemeData

根据当前 cpsSoonmanagerPlugin.path 获取预案数据

init 方法会调用此方法

定义

function fetchSchemeData(): Promise<ISchemeData[]>;

用法

cpsSoonmanagerPlugin.fetchSchemeData().then((ISchemeData) => {
  console.log(ISchemeData);
});