```
### customPlugin
自定义插件配置。允许在插件初始化之前修改插件的配置。
```typescript
customPlugin>(
pluginName: string,
customPluginHook: CustomPluginHook
): void
```
**参数：**
- `pluginName`: 插件名称
- `customPluginHook`: 自定义钩子函数，接收插件实例并返回修改后的插件实例
**示例：**
```tsx
const beforePluginRun = ({ pluginManager }: { pluginManager: PluginManager }) => {
// 自定义设计器插件配置
pluginManager.customPlugin('Designer', (pluginInstance) => {
// 自定义渲染器
pluginInstance.ctx.config.customRender = customRender;
// 自定义 beforeInitRender
pluginInstance.ctx.config.beforeInitRender = async ({ iframe }) => {
const subWin = iframe.getWindow();
if (!subWin) return;
// 注入全局变量
(subWin as any).React = window.React;
(subWin as any).ReactDOM = window.ReactDOM;
// 注入自定义全局对象
(subWin as any).myCustomGlobal = {
config: {},
utils: {},
};
};
return pluginInstance;
});
};
```
## 访问 Engine 实例
Engine 实例会被挂载到全局对象上，可以通过以下方式访问：
```typescript
// 方式1: 通过 window.__CHAMELEON_ENG__ (构造函数中挂载)
const engine = (window as any).__CHAMELEON_ENG__;
// 方式2: 通过 window.__C_ENGINE__ (componentDidMount 中挂载)
const engine = (window as any).__C_ENGINE__;
// 方式3: 通过 onReady 回调（推荐）
const onReady = (ctx: EnginContext) => {
const engine = ctx.engine;
};
// 方式4: 通过 ref（如果使用函数组件）
const engineRef = useRef(null);
我的编辑器
engine.preview()}>预览
engine.existPreview()}>退出预览
保存
);
// 2. 监听节点选中变化
engine.emitter.on('onSelectNodeChange', ({ node }) => {
if (node) {
console.log('选中节点:', node);
message.info(`选中了 ${node.componentName} 组件`);
}
});
// 3. 监听物料更新
engine.emitter.on('updateMaterials', () => {
message.success('物料已更新');
});
// 4. 获取插件实例
const designerPlugin = await pluginManager.get('Designer');
const historyPlugin = await pluginManager.get('History');
// 5. 添加自定义左侧面板
workbench?.addLeftPanel({
name: 'CustomPanel',
title: '自定义面板',
icon: | void;
```
### 执行时机
```
1. 创建 iframe
2. 加载 iframe URL/HTML
3. ⭐ 调用 beforeInitRender（在这里初始化环境）
4. 注入渲染器 JS
5. 加载组件库资源
6. 渲染页面
```
### 默认实现
Engine 默认的 `beforeInitRender` 实现会将 React 相关库注入到 iframe 窗口中：
```typescript
const beforeInitRender = async ({ iframe }) => {
const subWin = iframe.getWindow();
if (!subWin) return;
// 注入 React 18 相关库
(subWin as any).React = window.React;
(subWin as any).ReactDOM = window.ReactDOM;
(subWin as any).ReactDOMClient = window.ReactDOMClient;
};
```
### 使用场景
#### 1. 注入全局变量
向 iframe 中注入自定义的全局变量或对象：
```tsx
const beforePluginRun = ({ pluginManager }) => {
pluginManager.customPlugin('Designer', (pluginInstance) => {
pluginInstance.ctx.config.beforeInitRender = async ({ iframe }) => {
const subWin = iframe.getWindow();
if (!subWin) return;
// 注入配置对象
(subWin as any).APP_CONFIG = {
apiUrl: 'https://api.example.com',
theme: 'light',
};
// 注入工具函数
(subWin as any).utils = {
formatDate: (date) => {
/* ... */
},
request: (url) => {
/* ... */
},
};
};
return pluginInstance;
});
};
```
#### 2. 配置跨窗口通信
设置主窗口和 iframe 之间的通信机制：
```tsx
const beforePluginRun = ({ pluginManager }) => {
pluginManager.customPlugin('Designer', (pluginInstance) => {
pluginInstance.ctx.config.beforeInitRender = async ({ iframe }) => {
const subWin = iframe.getWindow();
if (!subWin) return;
// 设置消息监听
subWin.addEventListener('message', (event) => {
if (event.data.type === 'customEvent') {
console.log('收到来自组件的消息:', event.data);
}
});
// 注入发送消息的方法
(subWin as any).sendToParent = (data) => {
window.postMessage(data, '*');
};
};
return pluginInstance;
});
};
```
#### 3. 注入第三方库
在渲染前注入必要的第三方库：
```tsx
const beforePluginRun = ({ pluginManager }) => {
pluginManager.customPlugin('Designer', (pluginInstance) => {
pluginInstance.ctx.config.beforeInitRender = async ({ iframe }) => {
const subWin = iframe.getWindow();
if (!subWin) return;
// 注入 lodash
(subWin as any)._ = window._;
// 注入 moment
(subWin as any).moment = window.moment;
// 注入 axios
(subWin as any).axios = window.axios;
};
return pluginInstance;
});
};
```
#### 4. 初始化样式或主题
预先设置 iframe 的样式或主题：
```tsx
const beforePluginRun = ({ pluginManager }) => {
pluginManager.customPlugin('Designer', (pluginInstance) => {
pluginInstance.ctx.config.beforeInitRender = async ({ iframe }) => {
const subWin = iframe.getWindow();
const subDoc = iframe.getDocument();
if (!subWin || !subDoc) return;
// 注入主题变量
(subWin as any).THEME = {
primaryColor: '#1890ff',
fontSize: '14px',
};
// 添加全局样式
const style = subDoc.createElement('style');
style.textContent = `
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
}
`;
subDoc.head.appendChild(style);
};
return pluginInstance;
});
};
```
#### 5. 设置调试工具
在开发环境中注入调试工具：
```tsx
const beforePluginRun = ({ pluginManager }) => {
pluginManager.customPlugin('Designer', (pluginInstance) => {
pluginInstance.ctx.config.beforeInitRender = async ({ iframe }) => {
const subWin = iframe.getWindow();
if (!subWin) return;
if (process.env.NODE_ENV === 'development') {
// 注入调试工具
(subWin as any).__DEBUG__ = {
logProps: (componentName) => {
console.log(`组件 ${componentName} 的 props:` /* ... */);
},
inspect: (node) => {
console.log('节点信息:', node);
},
};
// 启用详细日志
(subWin as any).__ENABLE_VERBOSE_LOGGING__ = true;
}
};
return pluginInstance;
});
};
```
#### 6. 模拟数据或 API
为组件提供模拟数据或 API：
```tsx
const beforePluginRun = ({ pluginManager }) => {
pluginManager.customPlugin('Designer', (pluginInstance) => {
pluginInstance.ctx.config.beforeInitRender = async ({ iframe }) => {
const subWin = iframe.getWindow();
if (!subWin) return;
// 注入模拟 API
(subWin as any).mockAPI = {
getUserInfo: async () => ({
id: 1,
name: 'Test User',
email: 'test@example.com',
}),
getProducts: async () => [
{ id: 1, name: 'Product 1', price: 100 },
{ id: 2, name: 'Product 2', price: 200 },
],
};
};
return pluginInstance;
});
};
```
### 完整示例
结合多个场景的完整示例：
```tsx
import { Engine, plugins } from '@chamn/engine';
import '@chamn/engine/dist/style.css';
const { DEFAULT_PLUGIN_LIST } = plugins;
function App() {
const beforePluginRun = ({ pluginManager }) => {
pluginManager.customPlugin('Designer', (pluginInstance) => {
pluginInstance.ctx.config.beforeInitRender = async ({ iframe }) => {
const subWin = iframe.getWindow();
const subDoc = iframe.getDocument();
if (!subWin || !subDoc) return;
// 1. 注入 React（必需）
(subWin as any).React = window.React;
(subWin as any).ReactDOM = window.ReactDOM;
(subWin as any).ReactDOMClient = window.ReactDOMClient;
// 2. 注入应用配置
(subWin as any).APP_CONFIG = {
apiUrl: process.env.REACT_APP_API_URL,
environment: process.env.NODE_ENV,
version: '1.0.0',
};
// 3. 注入第三方库
(subWin as any).axios = window.axios;
(subWin as any).dayjs = window.dayjs;
// 4. 设置通信
(subWin as any).sendToEditor = (data) => {
window.postMessage(
{
source: 'iframe',
...data,
},
'*'
);
};
// 5. 添加全局样式
const style = subDoc.createElement('style');
style.textContent = `
:root {
--primary-color: #1890ff;
--text-color: #333;
}
`;
subDoc.head.appendChild(style);
// 6. 开发环境调试工具
if (process.env.NODE_ENV === 'development') {
(subWin as any).__DEBUG__ = {
log: (...args) => console.log('[iframe]', ...args),
error: (...args) => console.error('[iframe]', ...args),
};
}
};
return pluginInstance;
});
};
return (
```shell npm i @chamn/engine @chamn/model @chamn/render ```
```shell pnpm i @chamn/engine @chamn/model @chamn/render ```
```shell yarn i @chamn/engine @chamn/model @chamn/render ```
## 快速开始
最简单的使用方式：
```tsx
import { Engine, plugins } from '@chamn/engine';
import '@chamn/engine/dist/style.css';
const { DEFAULT_PLUGIN_LIST } = plugins;
function App() {
return (
{
console.log('Engine ready!', ctx);
}}
/>
);
}
```
## 引擎架构
Chameleon Engine 采用分层架构设计，各模块之间通过清晰的依赖关系组织。以下是引擎的核心架构图：
```mermaid
flowchart TB
subgraph Engine["Engine"]
direction TB
subgraph PluginManager["pluginManager"]
direction TB
OutlineTree["outlineTree"]
PropertyPanel["propertyPanel"]
StylePanel["stylePanel"]
OtherPlugins["..."]
end
Workbench["workbench"]
subgraph Designer["Designer(plugin)"]
direction TB
Layout["layout"]
Render["render"]
end
Model["model"]
Material["material"]
end
style Engine fill:#fff,stroke:#000,stroke-width:2px,color:#000
style PluginManager fill:#fff,stroke:#000,stroke-width:2px,color:#000
style Workbench fill:#fff,stroke:#000,stroke-width:2px,color:#000
style Designer fill:#fff,stroke:#000,stroke-width:2px,color:#000
style Model fill:#fff,stroke:#000,stroke-width:2px,color:#000
style Material fill:#fff,stroke:#000,stroke-width:2px,color:#000
style OutlineTree fill:#fff,stroke:#000,stroke-width:1px,color:#000
style PropertyPanel fill:#fff,stroke:#000,stroke-width:1px,color:#000
style StylePanel fill:#fff,stroke:#000,stroke-width:1px,color:#000
style OtherPlugins fill:#fff,stroke:#000,stroke-width:1px,color:#000
style Layout fill:#fff,stroke:#000,stroke-width:1px,color:#000
style Render fill:#fff,stroke:#000,stroke-width:1px,color:#000
```
### 模块说明
#### Engine（核心容器）
- **职责**: 整个编辑器的核心容器，管理所有子模块
- **功能**:
- 初始化和管理插件系统
- 管理页面模型和物料数据
- 提供统一的事件通信机制
- 协调各模块之间的交互
#### PluginManager（插件管理器）
- **职责**: 管理所有插件的生命周期
- **功能**:
- 插件的注册、初始化、销毁
- 插件之间的通信协调
- 插件配置管理
- 插件依赖关系处理
- **依赖**: Engine、Model、Layout、Material
#### Model（页面模型）
- **职责**: 管理页面数据结构
- **功能**:
- 页面节点的增删改查
- 节点状态管理
- 数据变更通知
- 页面数据序列化/反序列化
- **被依赖**: PluginManager、Render、各插件
#### Material（物料系统）
- **职责**: 管理组件物料信息
- **功能**:
- 组件元数据管理（组件配置、属性定义等）
- 资源包管理（组件运行时资源）
- 组件与资源的关联
- **被依赖**: Engine、PluginManager、Render
#### Layout（工作台布局）
- **职责**: 提供编辑器 UI 布局框架
- **功能**:
- 左侧面板管理（组件库等）
- 中间画布区域
- 右侧面板管理（属性面板等）
- 顶部工具栏
- 布局可定制化
- **被依赖**: PluginManager、各插件
#### Render（渲染器）
- **职责**: 将页面模型渲染为可视化界面
- **功能**:
- 设计时渲染（可编辑模式）
- 预览渲染（只读模式）
- 组件实例化
- 事件处理
- **被依赖**: Designer 插件、Canvas
- **依赖**: Model、Material
## 核心概念
### Engine 组件
`Engine` 是一个 React 类组件，是整个编辑器的核心容器。它管理着页面模型、插件系统、物料库等核心功能。
### 插件系统
Engine 采用插件化架构，所有功能都通过插件实现。内置了多个常用插件：
- `Designer`: 设计器画布
- `ComponentLibrary`: 组件库面板
- `OutlineTree`: 页面结构树
- `PropertyPanel`: 属性面板
- `History`: 历史记录管理
- 等等...
### 页面模型 (PageModel)
Engine 内部使用 `CPage` 来管理页面数据，提供了完整的页面节点操作能力。
### 物料系统
物料系统包括组件描述（Material）和组件库（AssetPackage），通过 `componentName` 进行关联。
## 与阿里 LowCode Engine 对比
Chameleon Engine 和阿里 LowCode Engine 都是优秀的低代码解决方案，但在设计理念和使用场景上有所不同：
### 架构设计
| 特性 | Chameleon Engine | 阿里 LowCode Engine |
| :----------- | :----------------------- | :--------------------------- |
| **架构模式** | 插件化架构，高度可扩展 | 一体化架构，功能完整 |
| **包体积** | 轻量级，按需加载 | 体积较大，功能齐全 |
| **定制性** | 高度可定制，可完全自定义 | 定制性有限，主要面向企业场景 |
| **学习曲线** | 简单直观，易于上手 | 功能丰富，学习成本较高 |
### 核心优势
#### Chameleon Engine 的优势
✅ **轻量灵活**
- 核心包体积小，按需加载插件
- 可以只使用需要的功能模块
- 适合中小型项目和快速原型开发
✅ **高度可定制**
- 插件化架构，所有功能都可通过插件扩展
- 工作台布局完全可定制
- 可以完全按照业务需求定制编辑器
✅ **简单易用**
- API 设计简洁直观
- 文档清晰，上手快速
- 适合快速集成到现有项目
✅ **开源免费**
- Apache License 2.0 协议，完全开源
- 社区活跃，持续更新
- 无商业限制
✅ **技术栈友好**
- 基于 React，与现有 React 生态无缝集成
- 支持 TypeScript
- 使用现代前端技术栈
#### 阿里 LowCode Engine 的优势
✅ **企业级功能**
- 功能完整，开箱即用
- 与阿里云生态深度集成
- 适合大型企业级应用
✅ **商业支持**
- 提供商业技术支持
- 有专业的团队维护
- 适合对稳定性要求极高的项目
✅ **功能丰富**
- 内置大量企业级组件和模板
- 提供完整的解决方案
- 适合快速构建企业应用
### 适用场景
#### Chameleon Engine 适合：
- 🎯 需要高度定制的编辑器场景
- 🎯 中小型项目和快速原型开发
- 🎯 希望完全控制编辑器行为的团队
- 🎯 需要轻量级解决方案的项目
- 🎯 开源项目或需要开源协议的项目
#### 阿里 LowCode Engine 适合：
- 🎯 大型企业级应用开发
- 🎯 需要快速上线，对定制要求不高的场景
- 🎯 需要商业技术支持的团队
- 🎯 与阿里云生态深度集成的项目
### 总结
Chameleon Engine 更适合追求**灵活性、可定制性和轻量级**的团队，而阿里 LowCode Engine 更适合需要**完整解决方案和商业支持**的企业级项目。选择哪个引擎主要取决于你的项目需求、团队规模和技术栈偏好。
如果你需要：
- **完全控制编辑器的行为** → 选择 Chameleon Engine
- **快速集成，开箱即用** → 可以考虑阿里 LowCode Engine
- **轻量级解决方案** → 选择 Chameleon Engine
- **企业级支持和保障** → 可以考虑阿里 LowCode Engine
## 下一步
- 查看 [API 文档](./api/) 了解详细的 API 使用
- 查看 [使用示例](./usage/) 学习更多用法
- 查看 [插件开发](../plugin/plugin-develop/) 了解如何开发自定义插件
================================================
FILE: packages/docs-app/src/content/docs/reference/Engine/usage.mdx
================================================
---
title: Engine 使用示例
sidebar:
order: 3
---
# Engine 使用示例
## 基础使用
最简单的使用方式，使用默认插件列表：
```tsx
import { Engine, plugins } from '@chamn/engine';
import '@chamn/engine/dist/style.css';
const { DEFAULT_PLUGIN_LIST } = plugins;
function App() {
return (
我的编辑器
ctx.engine.preview()}>预览
ctx.engine.existPreview()}>退出预览
);
};
return
{
// 导出页面数据
const pageData = ctx.engine.pageModel.export();
localStorage.setItem('pageSchema', JSON.stringify(pageData));
message.success('保存成功');
}}
>
保存
);
};
return {
// 从服务器获取新页面数据
fetch('/api/page')
.then((res) => res.json())
.then((newPageSchema) => {
// 更新页面
ctx.engine.updatePage(newPageSchema);
});
}}
>
刷新页面
);
};
return {
// 从服务器获取新物料
const [newMaterials, newAssetPackages] = await Promise.all([
fetch('/api/materials').then((res) => res.json()),
fetch('/api/asset-packages').then((res) => res.json()),
]);
// 更新物料
await ctx.engine.updateMaterials(newMaterials, newAssetPackages, {
formatComponents: (components) => {
// 自定义组件格式化逻辑
return components;
},
});
}}
>
更新物料
);
};
return (
自定义信息: {node.id}
{toolBarItemList}
);
},
}
```
### 场景 3：控制放置权限
```tsx
advanceCustom: {
canDropNode: async (node, params) => {
const { dropNode } = params;
// 只允许放置在特定类型的容器中
if (dropNode?.value.componentName === 'MyContainer') {
return true;
}
return false;
},
}
```
### 场景 4：包装组件注入逻辑
```tsx
advanceCustom: {
wrapComponent: (Comp, options) => {
return (props) => {
// 注入设计器相关的逻辑
const designerCtx = options.ctx;
return (
);
};
},
}
```
### 场景 5：自定义右侧面板
```tsx
advanceCustom: {
rightPanel: {
visual: false, // 隐藏可视化面板
advance: true,
advanceOptions: {
loop: false, // 隐藏循环选项
render: true, // 显示渲染选项
},
customTabs: [
{
key: 'custom',
name: '自定义配置',
view: ({ node }) => {
return 自定义配置面板
;
},
},
],
},
}
```
## 最佳实践
### 1. 合理使用 wrapComponent
`wrapComponent` 是一个强大的功能，但要注意：
- ✅ **适合场景**：需要访问设计器上下文、需要监听第三方库事件、需要注入特殊逻辑
- ❌ **避免场景**：简单的样式修改（应该用 CSS）、不需要设计器交互的组件
### 2. 性能优化
- 使用 `debounce` 或 `throttle` 处理频繁的事件（如 resize）
- 避免在 `toolbarViewRender` 中执行重计算
- 合理使用 `useMemo` 和 `useCallback` 优化渲染
### 3. 错误处理
- 所有异步钩子都应该有错误处理
- 返回 `false` 来阻止操作时，确保用户能理解原因
### 4. 类型安全
- 使用 TypeScript 确保类型安全
- 为自定义的 props 和 context 定义类型
## 总结
高级物料开发通过 `advanceCustom` 配置提供了强大的定制能力，让你可以：
- 🎯 **完全控制**组件的编辑行为
- 🎨 **自定义视图**和交互体验
- 🔌 **深度集成**第三方库（如 GridStack）
- 📱 **实现响应式**布局和断点管理
`ReactGridLayout` 是一个很好的参考示例，展示了如何将这些高级特性组合使用，创建一个功能完整的布局组件。
## 相关资源
- [物料开发基础文档](./developMaterial.mdx)
- [物料协议文档](../PageSchema/material.mdx)
- [插件开发指南](../Plugin/plugin-develop.mdx)
- [GridStack 官方文档](https://gridstackjs.com/)
================================================
FILE: packages/docs-app/src/content/docs/reference/Material/developMaterial.mdx
================================================
---
title: 物料开发
sidebar:
order: 2
---
物料开发使用该[【模版工程】](https://github.com/ByteCrazy/chameleon-material-template.git)即可
```bash
git clone https://github.com/ByteCrazy/chameleon-material-template.git
cd chameleon-material-template
pnpm i
// 开发
pnpm run start
// 构建
pnpm run build
```
访问 [http://localhost:3000](http://localhost:3000)
开发完成之后发布 npm 包即可
### 物料包命名规范
统一采用 `chamn-material-xxxx` 的方式命名
================================================
FILE: packages/docs-app/src/content/docs/reference/Material/introduction.mdx
================================================
---
title: 什么是组件物料？
sidebar:
order: 1
---
import { Code } from '@astrojs/starlight/components';
import MetarialImg from './assets/material.png';
import ButtonMeta from '../../../../codeSnippets/ButtonMeta.tsx?raw';
| 组件的 state | - |
| nodeName | string | 组件的 state 别名，便于其他组件索引使用 | - |
| schema | CPageDataType | if type is lowcode, schema is required | - |
| classNames | ClassNameType[] | 存储节点的 className | - |
| css | CSSType[] | 存储节点的 css 样式 | - |
| refId | string | 组件的唯一引用标示 | - |
| children | (string \| CNodeDataType)[] | 当前节点的 children 节点 | - |
更多描述请参考 [【模型定定义】](https://github.com/hlerenow/chameleon/blob/master/packages/model/src/types/node.ts)
## ComponentMetaType
更多描述请参考 [【模型定定义】](https://github.com/hlerenow/chameleon/blob/master/packages/model/src/types/page.ts)
## LibMetaType
更多描述请参考 [【模型定定义】](https://github.com/hlerenow/chameleon/blob/master/packages/model/src/types/base.ts)
## CSSType
更多描述请参考 [【模型定定义】](https://github.com/hlerenow/chameleon/blob/master/packages/model/src/types/base.ts)
## AssetPackage
更多描述请参考 [【模型定定义】](https://github.com/hlerenow/chameleon/blob/master/packages/model/src/types/base.ts)
================================================
FILE: packages/docs-app/src/content/docs/reference/Plugin/built-in-plugins-usage.mdx
================================================
---
title: 内置插件使用指南
sidebar:
order: 4
---
# 内置插件使用指南
Chameleon Engine 提供了一套完整的内置插件，覆盖了低代码编辑器的核心功能。本文档详细介绍每个插件的功能、配置和使用方法。
## DesignerPlugin - 设计器画布
设计器画布是编辑器的核心插件，负责渲染和编辑页面内容。
### 功能特性
- 📐 可视化画布渲染
- 🖱️ 拖拽添加组件
- ✏️ 组件选中和编辑
- 📱 响应式预览
- 🎨 实时更新
### 配置选项
```tsx
import { Engine, plugins } from '@chamn/engine';
import { DesignerPluginInstance } from '@chamn/engine';
const beforePluginRun = ({ pluginManager }) => {
pluginManager.customPlugin('Designer', (pluginInstance) => {
// 自定义渲染器
pluginInstance.ctx.config.customRender = async ({ iframe, assets, page, pageModel, ready, renderJSUrl }) => {
// 自定义渲染逻辑
};
// 初始化前钩子
pluginInstance.ctx.config.beforeInitRender = async ({ iframe }) => {
// 初始化 iframe 环境
};
// 自定义组件
pluginInstance.ctx.config.components = {
Button: MyButton,
Input: MyInput,
};
return pluginInstance;
});
};
```
### 导出方法
```tsx
const onReady = async (ctx: EnginContext) => {
const designerPlugin = await ctx.pluginManager.get('Designer');
const designer = designerPlugin?.export;
// 设置预览模式
designer?.setPreviewMode();
// 设置编辑模式
designer?.setEditMode();
// 设置画布宽度
designer?.setCanvasWidth(1200);
designer?.setCanvasWidth('100%');
// 获取 iframe DOM
const iframeDom = designer?.getIframeDom();
// 获取设计器窗口
const designerWindow = designer?.getDesignerWindow();
// 重新加载
designer?.reload();
};
```
### 使用示例
```tsx
import { Engine, plugins, EnginContext } from '@chamn/engine';
import '@chamn/engine/dist/style.css';
import { Button } from 'antd';
const { DEFAULT_PLUGIN_LIST } = plugins;
function App() {
const onReady = async (ctx: EnginContext) => {
const workbench = ctx.engine.getWorkbench();
const designerPlugin = await ctx.pluginManager.get('Designer');
// 自定义工具栏
workbench?.replaceTopBarView(
designerPlugin?.export.setPreviewMode()}>预览
designerPlugin?.export.setEditMode()}>编辑
designerPlugin?.export.setCanvasWidth(375)}>移动端
designerPlugin?.export.setCanvasWidth('100%')}>全屏
);
};
return
history?.reset()}>重置
);
};
return >('ComponentLib', (pluginInstance) => {
// 自定义搜索栏
pluginInstance.ctx.config.customSearchBar = ({ defaultInputView, updateState }) => {
return (
{defaultInputView}
{/* 添加自定义元素 */}
);
};
return pluginInstance;
});
};
```
### 使用示例
```tsx
import { Engine, plugins } from '@chamn/engine';
import '@chamn/engine/dist/style.css';
const { DEFAULT_PLUGIN_LIST } = plugins;
// 定义组件物料
const materials = [
{
componentName: 'Button',
title: '按钮',
icon: 自定义设置器
;
},
};
return pluginInstance;
});
};
```
### 使用示例
```tsx
import { Engine, plugins, EnginContext } from '@chamn/engine';
import '@chamn/engine/dist/style.css';
const { DEFAULT_PLUGIN_LIST } = plugins;
function App() {
const onReady = (ctx: EnginContext) => {
const workbench = ctx.engine.getWorkbench();
// 可以控制右侧面板的显示/隐藏
workbench?.toggleRightPanel();
};
return
查看源码
);
};
return = {
name: string; // 插件唯一名称（必需）
PLUGIN_NAME?: string; // 插件静态名称（可选，用于类型安全）
init: (ctx: CPluginCtx) => Promise; // 初始化方法（必需）
destroy: (ctx: CPluginCtx) => Promise; // 销毁方法（必需）
reload?: (ctx: CPluginCtx) => Promise; // 重载方法（可选）
export: (ctx: CPluginCtx) => E; // 导出 API（必需）
meta: {
// 元数据（必需）
engine: {
version: string;
};
};
};
// 插件函数定义
interface PluginFunction {
(ctx: CPluginCtx): PluginObj;
['PLUGIN_NAME']?: string;
}
// CPlugin 可以是对象或函数
export type CPlugin, E = any> =
| PluginObj // 直接是插件对象
| PluginFunction; // 或者是返回插件对象的函数
// 插件上下文定义
export type CPluginCtx = {
name?: string; // 插件名称
globalEmitter: Emitter; // 全局事件发射器
emitter: Emitter; // 插件私有事件发射器
config: C; // 插件配置对象
pluginManager: PluginManager; // 插件管理器
pluginReadyOk: () => void; // 通知插件已准备好
getWorkbench: () => Workbench; // 获取工作台实例
pageModel: CPage; // 页面模型
i18n: CustomI18n; // 国际化对象
assetsPackageListManager: AssetsPackageListManager; // 资源包管理器
engine: Engine; // 引擎实例
};
```
### 两种插件定义方式
**方式 1：函数式定义（推荐）**
```typescript
export const MyPlugin: CPlugin = (ctx) => {
// 可以访问 ctx 并创建闭包变量
let localState = {};
return {
name: 'MyPlugin',
async init(ctx) {
// 初始化逻辑
ctx.pluginReadyOk();
},
async destroy(ctx) {
// 清理逻辑
},
export: (ctx) => ({
// 导出的 API
}),
meta: {
engine: { version: '1.0.0' },
},
};
};
```
**方式 2：对象式定义**
```typescript
export const MyPlugin: CPlugin = {
name: 'MyPlugin',
async init(ctx) {
ctx.pluginReadyOk();
},
async destroy(ctx) {},
export: (ctx) => ({}),
meta: {
engine: { version: '1.0.0' },
},
};
```
## 开发自定义插件
### 场景 1：开发一个自定义工具栏插件
假设我们要开发一个自定义工具栏插件，提供快速操作功能。
#### 第一步：定义插件结构
```typescript
// plugins/CustomToolbar/index.tsx
import { CPlugin } from '@chamn/engine';
import React from 'react';
const PLUGIN_NAME = 'CustomToolbar' as const;
export const CustomToolbarPlugin: CPlugin = (ctx) => {
return {
name: PLUGIN_NAME,
async init(ctx) {
const workbench = ctx.getWorkbench();
// 添加顶部工具栏
workbench.addTopBarView({
name: PLUGIN_NAME,
view: = ({ ctx }) => {
const [selectedNode, setSelectedNode] = useState(null);
// 监听节点选中事件
React.useEffect(() => {
const handleSelect = (node: any) => {
setSelectedNode(node);
};
ctx.emitter.on('onSelectNode', handleSelect);
return () => {
ctx.emitter.off('onSelectNode', handleSelect);
};
}, [ctx]);
const handleCopy = () => {
if (selectedNode) {
const nodeData = ctx.pageModel.getNode(selectedNode.id);
console.log('复制节点', nodeData);
// 实现复制逻辑
}
};
const handleDelete = () => {
if (selectedNode) {
ctx.pageModel.deleteNode(selectedNode.id);
ctx.emitter.emit('onDeleteNode', selectedNode);
}
};
return (
复制节点
删除节点
ctx.pageModel.clear()}>清空画布
);
};
```
#### 第三步：使用插件
```tsx
import { Engine, plugins } from '@chamn/engine';
import { CustomToolbarPlugin } from './plugins/CustomToolbar';
const { DEFAULT_PLUGIN_LIST } = plugins;
function App() {
const onReady = async (ctx) => {
// 获取自定义工具栏插件
const toolbar = await ctx.pluginManager.get('CustomToolbar');
// 调用插件 API
toolbar?.export.addButton({
label: '自定义按钮',
onClick: () => console.log('点击了自定义按钮'),
});
};
return (
= (ctx) => {
// 从上下文获取配置
const config = ctx.config || {
framework: 'react',
typescript: true,
};
return {
name: PLUGIN_NAME,
async init(ctx) {
const workbench = ctx.getWorkbench();
// 添加右侧面板
workbench.addRightPanel({
name: PLUGIN_NAME,
title: '代码生成',
view: ) {
Object.assign(config, newConfig);
},
}),
meta: {
engine: {
version: '1.0.0',
},
},
};
};
function generateCode(schema: any, config: CodeGeneratorConfig) {
// 根据配置生成代码
if (config.framework === 'react') {
return generateReactCode(schema, config.typescript);
}
// ... 其他框架
}
CodeGeneratorPlugin.PLUGIN_NAME = PLUGIN_NAME;
```
#### 使用带配置的插件
```tsx
import { Engine, plugins } from '@chamn/engine';
import { CodeGeneratorPlugin } from './plugins/CodeGenerator';
const { DEFAULT_PLUGIN_LIST } = plugins;
function App() {
const beforePluginRun = ({ pluginManager }) => {
// 在插件初始化前配置插件
pluginManager.customPlugin('CodeGenerator', (pluginInstance) => {
pluginInstance.ctx.config = {
framework: 'react',
typescript: true,
outputPath: './src/generated',
};
return pluginInstance;
});
};
return (
= ({ ctx }) => {
const [selectedNode, setSelectedNode] = useState(null);
const [properties, setProperties] = useState>({});
useEffect(() => {
const handleSelect = (node: any) => {
setSelectedNode(node);
if (node) {
const nodeData = ctx.pageModel.getNode(node.id);
setProperties(nodeData?.props || {});
}
};
ctx.emitter.on('onSelectNode', handleSelect);
return () => {
ctx.emitter.off('onSelectNode', handleSelect);
};
}, [ctx]);
const handlePropertyChange = (key: string, value: any) => {
if (selectedNode) {
ctx.pageModel.updateNode(selectedNode.id, {
props: {
...properties,
[key]: value,
},
});
setProperties((prev) => ({ ...prev, [key]: value }));
}
};
if (!selectedNode) {
return 请选择一个节点
;
}
return (
自定义属性面板
{Object.entries(properties).map(([key, value]) => (
{key}:
))}
);
};
```
#### 第三步：替换内置插件
**核心思路：从 `DEFAULT_PLUGIN_LIST` 中移除要替换的插件，然后添加自定义插件。**
```tsx
import { Engine, plugins } from '@chamn/engine';
import { CustomRightPanelPlugin } from './plugins/CustomRightPanel';
const { DEFAULT_PLUGIN_LIST, RightPanelPlugin } = plugins;
function App() {
// 1. 复制默认插件列表
const customPlugins = [...DEFAULT_PLUGIN_LIST];
// 2. 找到要替换的插件的索引
const rightPanelIndex = customPlugins.findIndex((plugin) => plugin === RightPanelPlugin);
// 3. 如果找到了，移除内置插件
if (rightPanelIndex !== -1) {
customPlugins.splice(rightPanelIndex, 1);
}
// 4. 添加自定义插件
customPlugins.push(CustomRightPanelPlugin);
return = ({ schema, materials, onSave }) => {
const customPlugins = [
// 内置核心插件
DesignerPlugin,
HistoryPlugin,
HotkeysPlugin,
OutlineTreePlugin,
// 自定义表单插件
CustomFormToolbarPlugin,
FormFieldLibraryPlugin,
FormPropertyEditorPlugin,
];
const beforePluginRun = ({ pluginManager }) => {
// 定制历史记录插件
pluginManager.customPlugin('History', (pluginInstance) => {
pluginInstance.ctx.config = {
maxHistoryLength: 50,
};
return pluginInstance;
});
};
const onReady = async (ctx) => {
// 隐藏不需要的工作台组件
const workbench = ctx.getWorkbench();
workbench.hiddenWidget(['TopBar']);
// 获取自定义工具栏并配置保存功能
const toolbar = await ctx.pluginManager.get('CustomFormToolbar');
toolbar?.export.onSave(() => {
const currentSchema = ctx.pageModel.export();
onSave?.(currentSchema);
});
};
return (
= ({ schema, materials, deviceType = 'ios' }) => {
const customPlugins = [
DesignerPlugin,
HistoryPlugin,
HotkeysPlugin,
MobilePreviewPlugin,
MobileComponentLibPlugin,
ResponsiveToolbarPlugin,
];
const beforePluginRun = ({ pluginManager }) => {
// 配置移动端预览插件
pluginManager.customPlugin('MobilePreview', (pluginInstance) => {
pluginInstance.ctx.config = {
deviceType,
screenWidth: 375,
showDeviceFrame: true,
};
return pluginInstance;
});
};
const onReady = async (ctx) => {
const workbench = ctx.getWorkbench();
// 定制工作台布局
workbench.setLayout({
leftPanelWidth: 260,
rightPanelWidth: 320,
showTopBar: false,
});
// 配置移动端特定的快捷键
const hotkeys = await ctx.pluginManager.get('Hotkeys');
hotkeys?.export.register({
'cmd+p': () => {
// 切换预览模式
const preview = await ctx.pluginManager.get('MobilePreview');
preview?.export.togglePreview();
},
'cmd+d': () => {
// 切换设备类型
const preview = await ctx.pluginManager.get('MobilePreview');
preview?.export.switchDevice();
},
});
};
return (
= ({ user, projectId, schema, materials }) => {
const enterprisePlugins = [
...DEFAULT_PLUGIN_LIST,
AuthPlugin,
CollaborationPlugin,
VersionControlPlugin,
AuditLogPlugin,
TemplateMarketPlugin,
];
const beforePluginRun = ({ pluginManager }) => {
// 配置权限插件
pluginManager.customPlugin('Auth', (pluginInstance) => {
pluginInstance.ctx.config = { user };
return pluginInstance;
});
// 配置协作插件
pluginManager.customPlugin('Collaboration', (pluginInstance) => {
pluginInstance.ctx.config = {
projectId,
wsUrl: 'wss://collaboration.example.com',
};
return pluginInstance;
});
// 配置版本控制插件
pluginManager.customPlugin('VersionControl', (pluginInstance) => {
pluginInstance.ctx.config = {
autoSave: true,
saveInterval: 30000,
};
return pluginInstance;
});
};
const onReady = async (ctx) => {
// 初始化权限控制
const auth = await ctx.pluginManager.get('Auth');
const permissions = auth?.export.getPermissions();
// 根据权限控制功能
if (permissions?.role === 'viewer') {
// 只读模式
const designer = await ctx.pluginManager.get('Designer');
designer?.export.setReadonly(true);
const workbench = ctx.getWorkbench();
workbench.hiddenWidget(['LeftPanel', 'RightPanel']);
}
// 启动协作
const collab = await ctx.pluginManager.get('Collaboration');
collab?.export.connect();
// 监听协作事件
ctx.emitter.on('collaboration:userJoin', (user: any) => {
console.log(`${user.name} 加入了协作`);
});
ctx.emitter.on('collaboration:change', (change: any) => {
console.log('收到远程修改', change);
});
// 启动自动保存
const versionControl = await ctx.pluginManager.get('VersionControl');
versionControl?.export.startAutoSave();
// 记录审计日志
const auditLog = await ctx.pluginManager.get('AuditLog');
auditLog?.export.log('PROJECT_OPENED', {
projectId,
user: user.name,
});
};
return (
;
load(id: string): Promise;
}
// 使用类型
export const MyPlugin: CPlugin = (ctx) => {
const config = ctx.config || {
theme: 'light',
locale: 'zh-CN',
features: {
autoSave: true,
collaboration: false,
},
};
return {
name: 'MyPlugin',
async init(ctx) {
// ctx.config 现在有类型提示
console.log(config.theme);
ctx.pluginReadyOk();
},
async destroy(ctx) {},
export: (ctx): MyPluginExport => ({
setTheme(theme) {
config.theme = theme;
},
async save() {
// 实现保存逻辑
},
async load(id) {
// 实现加载逻辑
return {};
},
}),
meta: {
engine: { version: '1.0.0' },
},
};
};
```
### 4. 插件间通信
```typescript
// PluginA：发送事件
export const PluginA: CPlugin = (ctx) => {
return {
name: 'PluginA',
async init(ctx) {
// 使用全局事件总线通信
ctx.globalEmitter.emit('pluginA:dataReady', {
data: 'some data',
});
ctx.pluginReadyOk();
},
async destroy(ctx) {},
export: (ctx) => ({
notifyChange(data: any) {
ctx.globalEmitter.emit('pluginA:change', data);
},
}),
meta: {
engine: { version: '1.0.0' },
},
};
};
// PluginB：接收事件
export const PluginB: CPlugin = (ctx) => {
return {
name: 'PluginB',
async init(ctx) {
// 等待 PluginA 准备好
await ctx.pluginManager.onPluginReadyOk('PluginA');
// 监听 PluginA 的事件
ctx.globalEmitter.on('pluginA:change', (data) => {
console.log('收到 PluginA 的变化', data);
});
// 获取 PluginA 实例并调用其 API
const pluginA = await ctx.pluginManager.get('PluginA');
pluginA?.export.notifyChange({ from: 'PluginB' });
ctx.pluginReadyOk();
},
async destroy(ctx) {},
export: () => ({}),
meta: {
engine: { version: '1.0.0' },
},
};
};
```
### 5. 错误处理
```typescript
export const MyPlugin: CPlugin = (ctx) => {
return {
name: 'MyPlugin',
async init(ctx) {
try {
// 可能失败的初始化逻辑
await initializePlugin();
ctx.pluginReadyOk();
} catch (error) {
console.error('MyPlugin 初始化失败', error);
// 发送错误事件
ctx.globalEmitter.emit('plugin:error', {
plugin: 'MyPlugin',
error,
});
// 仍然标记为准备好，避免阻塞其他插件
ctx.pluginReadyOk();
}
},
async destroy(ctx) {
try {
await cleanupPlugin();
} catch (error) {
console.error('MyPlugin 清理失败', error);
}
},
export: (ctx) => ({
async doSomething() {
try {
// 业务逻辑
return { success: true };
} catch (error) {
console.error('操作失败', error);
return { success: false, error };
}
},
}),
meta: {
engine: { version: '1.0.0' },
},
};
};
```
## 总结
通过本指南，你已经学会了：
1. **开发自定义插件**
- 创建插件的基本结构
- 实现插件的生命周期
- 暴露插件 API
- 处理事件和状态
2. **替换内置插件**
- 完全替换内置插件
- 使用 `customPlugin` 定制内置插件
- 保持 API 兼容性
3. **实现高度定制引擎**
- 构建轻量级编辑器
- 针对特定场景定制
- 企业级功能集成
4. **最佳实践**
- 命名规范
- 生命周期管理
- 类型安全
- 插件间通信
- 错误处理
现在你可以根据自己的需求，构建完全定制化的 Chameleon Engine 了！
================================================
FILE: packages/docs-app/src/content/docs/reference/Plugin/custom-setter.mdx
================================================
---
sidebar:
order: 2
title: 自定义 setter
---
### Setter 定义
```tsx
import { ConfigProvider, Switch } from 'antd';
import { CSetter, CSetterProps } from '@chamn/engine';
type CustomSetterProps = {
a?: string;
};
export const CustomSetter: CSetter = ({
onValueChange,
setterContext,
...props
}: CSetterProps) => {
return (
{
// 将数据同步给 engine
onValueChange?.(open);
}}
/>
);
};
CustomSetter.setterName = '自定义设置器';
```
### 注册
```tsx
return (
{
pluginManager.customPlugin('RightPanel', (pluginInstance) => {
pluginInstance.ctx.config.customPropertySetterMap = {
CustomSetter: CustomSetter,
};
return pluginInstance;
});
}}
onReady={onReady}
/>
);
```
### 使用
在物料协议中即可使用该设置器:
```tsx
export const ButtonMeta: CMaterialType = {
componentName: 'Button',
title: '按钮',
props: [
{
name: 'text',
title: '文本',
valueType: 'string',
setters: ['StringSetter', 'CustomSetter'],
},
],
npm: {
package: __PACKAGE_NAME__ || '',
version: __PACKAGE_VERSION__,
destructuring: true,
exportName: 'Button',
},
snippets: [],
};
```
================================================
FILE: packages/docs-app/src/content/docs/reference/Plugin/innder-plugin-list.mdx
================================================
---
sidebar:
order: 3
title: 内置插件列表
---
# 内置插件列表
Chameleon Engine 提供了一套完整的内置插件系统。以下是所有可用的内置插件：
## 核心插件
### 默认插件列表 (DEFAULT_PLUGIN_LIST)
以下插件包含在 `DEFAULT_PLUGIN_LIST` 中，是编辑器的核心功能：
| 插件名 | 描述 | 是否必需 | 使用文档 | 源码链接 |
| :------------------- | :----------------------------- | :------- | :--------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- |
| **Designer** | 设计器画布，负责页面渲染和编辑 | ✅ 必需 | [查看详情](../built-in-plugins-usage/#designerplugin---设计器画布) | [Github](https://github.com/hlerenow/chameleon/tree/master/packages/engine/src/plugins/Designer) |
| **OutlineTree** | 展示页面层级结构的树形视图 | 建议 | [查看详情](../built-in-plugins-usage/#outlinetreeplugin---页面结构树) | [Github](https://github.com/hlerenow/chameleon/tree/master/packages/engine/src/plugins/OutlineTree) |
| **ComponentLibrary** | 组件库面板，显示可用组件 | 建议 | [查看详情](../built-in-plugins-usage/#componentlibplugin---组件库) | [Github](https://github.com/hlerenow/chameleon/tree/master/packages/engine/src/plugins/ComponentLibrary) |
| **GlobalStatePanel** | 全局数据管理面板 | 可选 | [查看详情](../built-in-plugins-usage/#globalstatepanelplugin---全局状态管理) | [Github](https://github.com/hlerenow/chameleon/tree/master/packages/engine/src/plugins/GlobalStatePanel) |
| **RightPanel** | 右侧面板容器 | 建议 | [查看详情](../built-in-plugins-usage/#rightpanelplugin---右侧面板) | [Github](https://github.com/hlerenow/chameleon/tree/master/packages/engine/src/plugins/RightPanel) |
| **History** | 操作历史记录管理（撤销/重做） | 建议 | [查看详情](../built-in-plugins-usage/#historyplugin---历史记录) | [Github](https://github.com/hlerenow/chameleon/tree/master/packages/engine/src/plugins/History) |
| **Hotkeys** | 快捷键支持 | 建议 | [查看详情](../built-in-plugins-usage/#hotkeysplugin---快捷键) | [Github](https://github.com/hlerenow/chameleon/tree/master/packages/engine/src/plugins/Hotkeys) |
## 右侧面板子插件
以下插件在 RightPanel 中使用，提供具体的编辑功能：
| 插件名 | 描述 | 使用文档 | 源码链接 |
| :---------------------- | :--------------- | :-------------------------------------------- | :---------------------------------------------------------------------------------------------------------- |
| **PropertyPanel** | 元素属性编辑面板 | [查看详情](../built-in-plugins-usage/#子面板) | [Github](https://github.com/hlerenow/chameleon/tree/master/packages/engine/src/plugins/PropertyPanel) |
| **VisualPanelPlus** | 元素样式编辑面板 | [查看详情](../built-in-plugins-usage/#子面板) | [Github](https://github.com/hlerenow/chameleon/tree/master/packages/engine/src/plugins/VisualPanelPlus) |
| **ComponentStatePanel** | 组件状态管理面板 | [查看详情](../built-in-plugins-usage/#子面板) | [Github](https://github.com/hlerenow/chameleon/tree/master/packages/engine/src/plugins/ComponentStatePanel) |
| **AdvancePanel** | 组件高级设置面板 | [查看详情](../built-in-plugins-usage/#子面板) | [Github](https://github.com/hlerenow/chameleon/tree/master/packages/engine/src/plugins/AdvancePanel) |
| **EventPanel** | 事件绑定面板 | [查看详情](../built-in-plugins-usage/#子面板) | [Github](https://github.com/hlerenow/chameleon/tree/master/packages/engine/src/plugins/EventPanel) |
## 独立插件
以下插件可以独立使用，不包含在默认列表中：
| 插件名 | 描述 | 使用文档 | 源码链接 |
| :---------------------- | :--------------------------------- | :-------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------- |
| **DisplaySourceSchema** | 源码展示插件，查看页面 JSON Schema | [查看详情](../built-in-plugins-usage/#displaysourceschema---源码展示) | [Github](https://github.com/hlerenow/chameleon/tree/master/packages/engine/src/plugins/DisplaySourceSchema) |
## 使用方式
### 使用默认插件列表
```tsx
import { Engine, plugins } from '@chamn/engine';
import '@chamn/engine/dist/style.css';
const { DEFAULT_PLUGIN_LIST } = plugins;
function App() {
return
查看源码
);
};
return 页面模型 "]
Workbench["Workbench工作台 "]
EventBus["Event Emitter事件总线 "]
Assets["Assets Manager资源管理 "]
I18n["I18n国际化 "]
end
subgraph PluginSystem["插件系统架构"]
direction TB
subgraph Manager["PluginManager - 插件管理器"]
direction TB
subgraph Lifecycle["生命周期管理"]
direction LR
Add["add()注册插件 "]
Init["init()初始化 "]
Ready["onPluginReadyOk()就绪通知 "]
Remove["remove()卸载插件 "]
end
subgraph Extension["扩展能力"]
direction LR
Get["get()获取插件 "]
Custom["customPlugin()定制插件 "]
Export["exportAPI 导出 "]
end
subgraph Context["插件上下文 (CPluginCtx)"]
direction LR
CtxEmitter["事件系统"]
CtxConfig["配置对象"]
CtxAPI["核心 API"]
end
end
subgraph PluginLayer["插件实例层 - 可扩展/可替换"]
direction TB
subgraph BuiltIn["内置插件"]
Designer["Designer"]
History["History"]
RightPanel["RightPanel"]
Others["..."]
end
subgraph Custom["自定义插件"]
CustomA["Custom Plugin A"]
CustomB["Custom Plugin B"]
CustomC["..."]
end
end
end
end
style Engine fill:#f8f9fa,stroke:#212529,stroke-width:3px
style CoreAPI fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
style PluginSystem fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
style Manager fill:#ede7f6,stroke:#5e35b1,stroke-width:2px
style Lifecycle fill:#fff3e0,stroke:#ef6c00,stroke-width:1.5px
style Extension fill:#e0f2f1,stroke:#00796b,stroke-width:1.5px
style Context fill:#fce4ec,stroke:#c2185b,stroke-width:1.5px
style PluginLayer fill:#e8eaf6,stroke:#3f51b5,stroke-width:1.5px
style BuiltIn fill:#e8f5e9,stroke:#2e7d32,stroke-width:1px
style Custom fill:#fff9c4,stroke:#f57f17,stroke-width:1px
style CPage fill:#bbdefb,stroke:#1976d2
style Workbench fill:#bbdefb,stroke:#1976d2
style EventBus fill:#bbdefb,stroke:#1976d2
style Assets fill:#bbdefb,stroke:#1976d2
style I18n fill:#bbdefb,stroke:#1976d2
```
### 架构说明
上图展示了 Chameleon Engine 的插件系统架构，核心理念是**完全插件化**和**高度可扩展**。
#### 1. 核心 API 层
引擎提供了一组稳定的核心 API，供插件访问和操作：
- **CPage**：页面模型，管理节点树结构，提供节点增删改查能力
- **Workbench**：工作台容器，管理面板、视图的布局和交互
- **Event Emitter**：事件总线，实现模块间的松耦合通信
- **Assets Manager**：资源包管理器，统一管理组件资源
- **I18n**：国际化支持，提供多语言能力
#### 2. PluginManager - 插件管理器
PluginManager 是插件系统的核心，负责插件的全生命周期管理和扩展能力：
**生命周期管理**：
- `add(plugin)`：注册插件到系统
- `init(ctx)`：初始化插件，注入上下文
- `onPluginReadyOk(name)`：等待插件就绪，支持异步依赖
- `remove(name)`：卸载插件，清理资源
**扩展能力**：
- `get(name)`：获取插件实例，访问插件暴露的 API
- `customPlugin(name, hook)`：定制插件配置，实现插件的可替换性
- `export`：插件通过 export 暴露 API，供其他插件或外部调用
**插件上下文 (CPluginCtx)**：
- 每个插件都拥有独立的上下文对象
- 包含全局事件系统和插件私有事件系统
- 可访问所有核心 API
- 支持自定义配置对象
#### 3. 插件实例层 - 可扩展/可替换
**内置插件**：
- 提供开箱即用的核心功能
- 可被自定义插件完全替换
- 包括：Designer（设计器）、History（历史记录）、RightPanel（属性面板）等
**自定义插件**：
- 完全自由的插件开发
- 可替换任何内置插件
- 可扩展新功能
- 与内置插件享有相同的 API 访问权限
### 插件系统的核心特性
#### 可扩展性
- **无限扩展**：通过 `pluginManager.add()` 可以添加任意数量的插件
- **平等访问**：自定义插件与内置插件拥有相同的核心 API 访问权限
- **独立上下文**：每个插件拥有独立的配置和事件系统
#### 可替换性
- **插件定制**：通过 `customPlugin()` 可以在插件初始化前修改其配置
- **完全替换**：移除内置插件，添加自定义插件即可实现功能替换
- **热插拔**：支持运行时动态添加和移除插件
#### 松耦合
- **事件驱动**：插件间通过事件系统通信，避免直接依赖
- **API 导出**：插件通过 `export` 暴露标准 API，降低耦合度
- **上下文隔离**：每个插件的状态和配置相互独立
### 插件生命周期
```mermaid
%%{init: {'theme':'base', 'themeVariables': { 'fontSize':'14px'}}}%%
flowchart LR
Start([pluginManager.add]) --> CreateCtx
subgraph Registration["注册阶段"]
direction LR
CreateCtx[创建上下文 = {
/** 插件名称（必需，必须唯一） */
name: string;
/** 插件静态名称（可选，用于类型安全访问） */
PLUGIN_NAME?: string;
/** 初始化方法（必需） */
init: (ctx: CPluginCtx) => Promise;
/** 销毁方法（必需） */
destroy: (ctx: CPluginCtx) => Promise;
/** 重载方法（可选） */
reload?: (ctx: CPluginCtx) => Promise;
/** 导出 API（必需） */
export: (ctx: CPluginCtx) => E;
/** 元数据（必需） */
meta: {
engine: {
version: string;
};
};
};
export type CPlugin = PluginObj | ((ctx: CPluginCtx) => PluginObj);
```
### 插件上下文 (CPluginCtx)
插件上下文提供了访问引擎核心功能的能力：
```typescript
type CPluginCtx = {
name?: string; // 插件名称
globalEmitter: Emitter; // 全局事件发射器
emitter: Emitter; // 插件私有事件发射器
config: C; // 插件配置对象
getWorkbench: () => Workbench; // 获取工作台实例
pluginManager: PluginManager; // 插件管理器
pageModel: CPage; // 页面模型
i18n: CustomI18n; // 国际化对象
assetsPackageListManager: AssetsPackageListManager; // 资源包管理器
engine: Engine; // 引擎实例
pluginReadyOk: () => void; // 通知插件已准备好
};
```
## 快速开始
### 创建一个简单的插件
```typescript
import { CPlugin } from '@chamn/engine';
const PLUGIN_NAME = 'HelloPlugin' as const;
export const HelloPlugin: CPlugin = (ctx) => {
return {
name: PLUGIN_NAME,
PLUGIN_NAME,
async init(ctx) {
console.log('Hello Plugin 初始化！');
// 添加左侧面板
const workbench = ctx.getWorkbench();
workbench.addLeftPanel({
name: PLUGIN_NAME,
title: 'Hello',
icon: 👋 ,
view: Hello World!
,
});
// 通知插件已准备好（重要！）
ctx.pluginReadyOk();
},
async destroy(ctx) {
console.log('Hello Plugin 销毁');
},
export: (ctx) => {
return {
sayHello() {
console.log('Hello from plugin!');
},
};
},
meta: {
engine: {
version: '1.0.0',
},
},
};
};
// 添加静态属性（推荐）
HelloPlugin.PLUGIN_NAME = PLUGIN_NAME;
```
### 使用插件
```tsx
import { Engine, plugins } from '@chamn/engine';
import { HelloPlugin } from './HelloPlugin';
const { DEFAULT_PLUGIN_LIST } = plugins;
function App() {
const onReady = async (ctx) => {
// 获取插件实例
const helloPlugin = await ctx.pluginManager.get('HelloPlugin');
// 调用插件方法
helloPlugin?.export.sayHello();
};
return (
;
preStep: () => void;
nextStep: () => void;
canGoPreStep: () => boolean;
canGoNextStep: () => boolean;
};
export const HistoryPlugin: CPlugin = (ctx) => {
const CTX: CPluginCtx | null = ctx;
const dataStore = {
historyRecords: [] as CPageDataType[],
currentStepIndex: 0,
};
let originalPageRecord: CPageDataType | null = null;
const pageSchema = ctx.pageModel.export();
originalPageRecord = pageSchema;
dataStore.historyRecords.push(pageSchema);
const loadPage = async (page: CPageDataType) => {
if (!CTX) {
return;
}
CTX.pageModel.reloadPage(page);
await waitReactUpdate();
};
const resObj = {
addStep: () => {
const { currentStepIndex, historyRecords } = dataStore;
const newPage = ctx.pageModel.export();
if (currentStepIndex !== historyRecords.length - 1) {
dataStore.historyRecords = historyRecords.slice(0, currentStepIndex + 1);
}
dataStore.historyRecords.push(newPage);
dataStore.currentStepIndex = historyRecords.length - 1;
},
reset: async () => {
const ctx = CTX;
if (!ctx) {
console.warn('plugin ctx is null, pls check it');
return;
}
if (!originalPageRecord) {
return;
}
dataStore.historyRecords = [];
loadPage(originalPageRecord);
},
preStep: () => {
const { currentStepIndex, historyRecords } = dataStore;
if (!resObj.canGoPreStep()) {
return;
}
const newIndex = currentStepIndex - 1;
dataStore.currentStepIndex = newIndex;
const page = cloneDeep(historyRecords[newIndex]);
loadPage(page);
},
nextStep: () => {
if (!resObj.canGoNextStep()) {
return;
}
const { currentStepIndex, historyRecords } = dataStore;
const newIndex = currentStepIndex + 1;
dataStore.currentStepIndex = newIndex;
const page = cloneDeep(historyRecords[newIndex]);
return loadPage(page);
},
canGoPreStep: () => {
const { currentStepIndex } = dataStore;
if (currentStepIndex <= 0) {
return false;
}
return true;
},
canGoNextStep: () => {
const { currentStepIndex, historyRecords } = dataStore;
if (currentStepIndex >= historyRecords.length - 1) {
return false;
}
return true;
},
};
// 防抖处理，避免频繁记录
const debounceAddStep = debounce(() => {
resObj.addStep();
}, 500);
return {
name: PLUGIN_NAME,
PLUGIN_NAME,
async init(ctx) {
// 监听节点变化
ctx.pageModel.emitter.on('onNodeChange', () => {
debounceAddStep();
});
// 监听页面变化
ctx.pageModel.emitter.on('onPageChange', () => {
resObj.addStep();
});
// !!! 必须调用，通知 engine，插件初始化完成，可以被消费
ctx.pluginReadyOk();
},
async destroy(ctx) {
console.log('destroy', ctx);
},
// 提供给其他插件或者外部使用的方法
export: () => {
return resObj;
},
// 插件元信息，引擎的最低版本要求
meta: {
engine: {
version: '1.0.0',
},
},
};
};
HistoryPlugin.PLUGIN_NAME = PLUGIN_NAME;
```
### 示例 2: 自定义面板插件
```typescript
import React, { useState } from 'react';
import { CPlugin } from '@chamn/engine';
import { Button, Input } from 'antd';
const PLUGIN_NAME = 'CustomPanel' as const;
// 面板视图组件
const CustomPanelView: React.FC<{ pluginCtx: any }> = ({ pluginCtx }) => {
const [text, setText] = useState('');
return (
自定义面板
{
console.log('输入的文本:', text);
}}
>
提交
);
};
export const CustomPanelPlugin: CPlugin = (ctx) => {
return {
name: PLUGIN_NAME,
PLUGIN_NAME,
async init(ctx) {
const workbench = ctx.getWorkbench();
// 添加左侧面板
workbench.addLeftPanel({
name: PLUGIN_NAME,
title: '自定义面板',
icon: 📝 ,
view:
我的编辑器
engine.preview()}>预览
engine.existPreview()}>编辑
engine.refresh()}>刷新
{
const pageData = engine.pageModel.export();
localStorage.setItem('page', JSON.stringify(pageData));
}}
>
保存
);
ctx.pluginReadyOk();
},
async destroy(ctx) {},
export: (ctx) => ({}),
meta: { engine: { version: '1.0.0' } },
};
};
CustomToolbarPlugin.PLUGIN_NAME = PLUGIN_NAME;
```
## 加载插件
```tsx
import { Engine, EnginContext, plugins } from '@chamn/engine';
import { HistoryPlugin } from './HistoryPlugin';
import { CustomPanelPlugin } from './CustomPanelPlugin';
const { DEFAULT_PLUGIN_LIST } = plugins;
export const App = () => {
const onReady = useCallback(async (ctx: EnginContext) => {
// 等待插件准备完成
const designer = await ctx.pluginManager.onPluginReadyOk('Designer');
const history = await ctx.pluginManager.onPluginReadyOk('History');
// 获取工作台
const workbench = ctx.engine.getWorkbench();
// 使用插件导出的方法
history?.export.preStep();
}, []);
return (
= (ctx) => {
return {
name: 'MyPlugin',
async init(ctx) {
// 类型安全的配置访问
const enabled = ctx.config.enabled;
ctx.pluginReadyOk();
},
async destroy(ctx) {},
export: (ctx) => {
return {
doSomething() {
console.log('Do something');
},
};
},
meta: { engine: { version: '1.0.0' } },
};
};
```
### 2. 命名规范
- 插件命名统一采用 `PascalCase`，如 `MyPlugin`
- 插件名称常量使用 `PLUGIN_NAME`
- 导出的插件对象添加静态属性 `PLUGIN_NAME`
### 3. 错误处理
```typescript
export const SafePlugin: CPlugin = (ctx) => {
return {
name: 'SafePlugin',
async init(ctx) {
try {
// 可能出错的操作
const data = await fetchData();
// 验证依赖
const workbench = ctx.getWorkbench();
if (!workbench) {
throw new Error('工作台未初始化');
}
ctx.pluginReadyOk();
} catch (error) {
console.error('插件初始化失败:', error);
ctx.pluginReadyOk(); // 即使失败也通知
}
},
async destroy(ctx) {},
export: (ctx) => ({}),
meta: { engine: { version: '1.0.0' } },
};
};
```
### 4. 内存管理
```typescript
export const MemoryAwarePlugin: CPlugin = (ctx) => {
const disposables: (() => void)[] = [];
return {
name: 'MemoryAwarePlugin',
async init(ctx) {
// 监听事件
const handler = () => {
/* ... */
};
ctx.globalEmitter.on('event', handler);
// 记录清理函数
disposables.push(() => {
ctx.globalEmitter.off('event', handler);
});
ctx.pluginReadyOk();
},
async destroy(ctx) {
// 执行所有清理函数
disposables.forEach((dispose) => dispose());
disposables.length = 0;
},
export: (ctx) => ({}),
meta: { engine: { version: '1.0.0' } },
};
};
```
## 常见问题
### Q: 插件何时初始化？
A: 插件在 Engine 组件 `componentDidMount` 时初始化，按照插件列表的顺序依次执行 `init` 方法。
### Q: 如何确保插件初始化完成？
A: 使用 `ctx.pluginReadyOk()` 通知插件管理器插件已准备好。其他插件可以通过 `ctx.pluginManager.onPluginReadyOk('PluginName')` 等待。
### Q: 插件可以访问其他插件吗？
A: 可以。使用 `ctx.pluginManager.get('PluginName')` 获取其他插件实例。
## 参考资源
- [内置插件列表](../innder-plugin-list/) - 查看所有内置插件
- [内置插件使用指南](../built-in-plugins-usage/) - 学习内置插件的用法
- [Engine API](../../engine/api/) - 了解 Engine 的 API
- [示例项目](https://github.com/ByteCrazy/chameleon-demo) - 查看完整示例
================================================
FILE: packages/docs-app/src/env.d.ts
================================================
/* eslint-disable @typescript-eslint/triple-slash-reference */
/// Chameleon Low-Code Engine
================================================
FILE: packages/engine/jest.config.js
================================================
/* eslint-disable no-undef */
/*
* For a detailed explanation regarding each configuration property, visit:
* https://jestjs.io/docs/configuration
*/
module.exports = {
// All imported modules in your tests should be mocked automatically
// automock: false,
// Stop running tests after `n` failures
// bail: 0,
// The directory where Jest should store its cached dependency information
// cacheDirectory: "/private/var/folders/l9/th_r5d_12wxdj16859_mctjw0000gn/T/jest_dx",
// Automatically clear mock calls, instances, contexts and results before every test
// clearMocks: false,
// Indicates whether the coverage information should be collected while executing the test
// collectCoverage: false,
// An array of glob patterns indicating a set of files for which coverage information should be collected
// collectCoverageFrom: undefined,
// The directory where Jest should output its coverage files
// coverageDirectory: undefined,
// An array of regexp pattern strings used to skip coverage collection
// coveragePathIgnorePatterns: [
// "/node_modules/"
// ],
// Indicates which provider should be used to instrument code for coverage
// coverageProvider: "babel",
// A list of reporter names that Jest uses when writing coverage reports
// coverageReporters: [
// "json",
// "text",
// "lcov",
// "clover"
// ],
// An object that configures minimum threshold enforcement for coverage results
// coverageThreshold: undefined,
// A path to a custom dependency extractor
// dependencyExtractor: undefined,
// Make calling deprecated APIs throw helpful error messages
// errorOnDeprecated: false,
// The default configuration for fake timers
// fakeTimers: {
// "enableGlobally": false
// },
// Force coverage collection from ignored files using an array of glob patterns
// forceCoverageMatch: [],
// A path to a module which exports an async function that is triggered once before all test suites
// globalSetup: undefined,
// A path to a module which exports an async function that is triggered once after all test suites
// globalTeardown: undefined,
// A set of global variables that need to be available in all test environments
// globals: {},
// The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
// maxWorkers: "50%",
// An array of directory names to be searched recursively up from the requiring module's location
// moduleDirectories: [
// "node_modules"
// ],
// An array of file extensions your modules use
// moduleFileExtensions: [
// "js",
// "mjs",
// "cjs",
// "jsx",
// "ts",
// "tsx",
// "json",
// "node"
// ],
// A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
// moduleNameMapper: {},
// An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
// modulePathIgnorePatterns: [],
// Activates notifications for test results
// notify: false,
// An enum that specifies notification mode. Requires { notify: true }
// notifyMode: "failure-change",
// A preset that is used as a base for Jest's configuration
preset: 'ts-jest',
// Run tests from one or more projects
// projects: undefined,
// Use this configuration option to add custom reporters to Jest
// reporters: undefined,
// Automatically reset mock state before every test
// resetMocks: false,
// Reset the module registry before running each individual test
// resetModules: false,
// A path to a custom resolver
// resolver: undefined,
// Automatically restore mock state and implementation before every test
// restoreMocks: false,
// The root directory that Jest should scan for tests and modules within
// rootDir: undefined,
// A list of paths to directories that Jest should use to search for files in
// roots: [
// ""
// ],
// Allows you to use a custom runner instead of Jest's default test runner
// runner: "jest-runner",
// The paths to modules that run some code to configure or set up the testing environment before each test
// setupFiles: [],
// A list of paths to modules that run some code to configure or set up the testing framework before each test
// setupFilesAfterEnv: [],
// The number of seconds after which a test is considered as slow and reported as such in the results.
// slowTestThreshold: 5,
// A list of paths to snapshot serializer modules Jest should use for snapshot testing
// snapshotSerializers: [],
// The test environment that will be used for testing
testEnvironment: 'jsdom',
// Options that will be passed to the testEnvironment
// testEnvironmentOptions: {},
// Adds a location field to test results
// testLocationInResults: false,
// The glob patterns Jest uses to detect test files
// testMatch: [
// "**/__tests__/**/*.[jt]s?(x)",
// "**/?(*.)+(spec|test).[tj]s?(x)"
// ],
// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
// testPathIgnorePatterns: [
// "/node_modules/"
// ],
// The regexp pattern or array of patterns that Jest uses to detect test files
// testRegex: [],
// This option allows the use of a custom results processor
// testResultsProcessor: undefined,
// This option allows use of a custom test runner
// testRunner: "jest-circus/runner",
// A map from regular expressions to paths to transformers
// transform: undefined,
// An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
// transformIgnorePatterns: [
// "/node_modules/",
// "\\.pnp\\.[^\\/]+$"
// ],
// An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
// unmockedModulePathPatterns: undefined,
// Indicates whether each individual test should be reported during the run
// verbose: undefined,
// An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
// watchPathIgnorePatterns: [],
// Whether to use watchman for file crawling
// watchman: true,
};
================================================
FILE: packages/engine/package.json
================================================
{
"name": "@chamn/engine",
"version": "0.10.4",
"type": "module",
"files": [
"dist"
],
"main": "dist/index.cjs.js",
"module": "dist/index.es.js",
"types": "dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"module-sync": "./dist/index.es.js",
"import": "./dist/index.es.js",
"require": "./dist/index.cjs.js"
},
"./dist/*": "./dist/*"
},
"publishConfig": {
"access": "public"
},
"homepage": "https://github.com/hlerenow/chameleon",
"keywords": [
"engine",
"lowcode",
"react",
"web-editor",
"visual-editor",
"vite"
],
"scripts": {
"start": "build-script",
"build": "cross-env BUILD_TYPE=PKG build-script --build",
"build:w": "cross-env BUILD_TYPE=PKG build-script --build --watch",
"build:analyze": "cross-env BUILD_TYPE=PKG build-script --build --analyze",
"lint": "eslint ./src",
"prettier": "prettier --write ./src",
"test": "jest",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
},
"peerDependencies": {
"react": ">=16.9.0",
"react-dom": ">=16.9.0"
},
"dependencies": {
"@ant-design/icons": "^5.4.0",
"@chamn/layout": "workspace:*",
"@chamn/model": "workspace:*",
"@chamn/render": "workspace:*",
"@dagrejs/dagre": "^1.1.4",
"@dnd-kit/core": "^6.0.7",
"@dnd-kit/modifiers": "^6.0.1",
"@dnd-kit/sortable": "^7.0.2",
"@dnd-kit/utilities": "^3.2.1",
"@monaco-editor/react": "^4.5.1",
"@xyflow/react": "^12.3.6",
"ahooks": "^3.7.4",
"antd": "^5.23.2",
"color": "^4.2.3",
"consola": "^3.2.3",
"css-tree": "^3.1.0",
"i18next": "^22.1.5",
"loadjs": "^4.3.0",
"lodash-es": "^4.17.21",
"lucide-react": "^0.487.0",
"mitt": "^3.0.0",
"monaco-editor": "^0.41.0",
"quicktype-core": "^23.0.171",
"react-color": "^2.19.3",
"react-contenteditable": "^3.3.7",
"react-i18next": "^12.1.1"
},
"devDependencies": {
"@babel/core": "^7.21.0",
"@chamn/build-script": "workspace:*",
"@chamn/demo-page": "workspace:*",
"@chromatic-com/storybook": "^3.2.3",
"@storybook/addon-essentials": "^8.4.7",
"@storybook/addon-interactions": "^8.4.7",
"@storybook/addon-onboarding": "^8.4.7",
"@storybook/blocks": "^8.4.7",
"@storybook/react": "^8.4.7",
"@storybook/react-vite": "^8.4.7",
"@storybook/test": "^8.4.7",
"@types/color": "^3.0.4",
"@types/css": "^0.0.34",
"@types/css-tree": "^2.3.10",
"@types/loadjs": "^4.0.4",
"@types/lodash-es": "^4.17.6",
"@types/react": "^18.2.0",
"@types/react-color": "^3.0.6",
"@types/react-dom": "^18.0.6",
"babel-loader": "^8.3.0",
"cross-env": "^7.0.3",
"prop-types": "^15.8.1",
"re-resizable": "^6.9.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.7.0",
"sass": "^1.54.0",
"storybook": "^8.4.7",
"vite-plugin-static-copy": "^0.17.0"
},
"config": {},
"gitHead": "dc3e55fdeb903a8012f6ebd3ebc018ed61ad89db"
}
================================================
FILE: packages/engine/src/Engine.module.scss
================================================
.engineContainer {
color: $fontColor;
font-size: $fontSize;
width: 100%;
height: 100%;
overflow: hidden;
* {
box-sizing: border-box;
}
}
================================================
FILE: packages/engine/src/_dev_/index.css
================================================
html,
body,
#root {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
}
.logo {
height: 100%;
font-size: 20px;
display: flex;
align-items: center;
margin-left: 20px;
font-weight: bolder;
margin-right: auto;
}
================================================
FILE: packages/engine/src/_dev_/index.tsx
================================================
import ReactDOMClient from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import { router } from './router';
ReactDOMClient.createRoot(document.getElementById('root') as HTMLElement).render(
CLayout 布局样例
{
setCanEdit(true);
(contentEditableRef.current as any)?.focus();
}}
>
{
console.log('mouse down');
}}
innerRef={contentEditableRef}
html={text.current}
onBlur={handleBlur}
onChange={handleChange}
/>
Sample with default size
);
};
================================================
FILE: packages/engine/src/_dev_/page/Editor/index.tsx
================================================
import { BasePage } from '@chamn/demo-page';
import { Button, message, Modal, Select } from 'antd';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import ReactDOM from 'react-dom';
import ReactDOMClient from 'react-dom/client';
import { Engine, PluginInstance } from '../../..';
import '../../index.css';
import { ComponentLibPluginConfig, DEFAULT_PLUGIN_LIST, DEFAULT_PLUGIN_NAME_MAP } from '../../../plugins';
import { DisplaySourceSchema } from '../../../plugins/DisplaySourceSchema';
import { InnerComponentMeta } from '../../../material/innerMaterial';
import { RollbackOutlined } from '@ant-design/icons';
import { LayoutPropsType } from '@chamn/layout';
import { collectVariable, flatObject, getThirdLibs } from '@chamn/render';
import { HistoryPluginInstance } from '@/plugins/History/type';
import { DesignerPluginInstance } from '@/plugins/Designer/type';
import { DesignerSizer } from '@/component/DesignerSizer';
import { EnginContext } from '@/type';
import renderAsURL from '@chamn/render/dist/index.umd.js?url';
const win = window as any;
win.React = React;
win.ReactDOM = ReactDOM;
win.ReactDOMClient = ReactDOMClient;
const customRender: LayoutPropsType['customRender'] = async ({
iframe: iframeContainer,
assets,
page,
pageModel,
beforeInitRender,
ready,
}) => {
await iframeContainer.loadUrl('/src/_dev_/render.html');
// must call
beforeInitRender?.();
const iframeWindow = iframeContainer.getWindow()!;
const iframeDoc = iframeContainer.getDocument()!;
const IframeReact = iframeWindow.React!;
const IframeReactDOM = iframeWindow.ReactDOMClient!;
const CRender = iframeWindow.CRender!;
await new CRender.AssetLoader(assets, {
window: iframeWindow,
}).load();
// 从子窗口获取物料对象
const componentCollection = collectVariable(assets, iframeWindow);
const components = flatObject(componentCollection);
const thirdLibs = getThirdLibs(componentCollection, page?.thirdLibs || []);
const App = IframeReact?.createElement(CRender.DesignRender, {
adapter: CRender?.ReactAdapter,
page: page,
pageModel: pageModel,
components: {
...components,
},
$$context: {
thirdLibs,
getProps: () => {
return {};
},
callEventMethod: (method: string, params: any) => {
console.log(method, params);
},
},
requestAPI: async (params) => {
return console.log(222, params);
},
onMount: (designRenderInstance) => {
ready(designRenderInstance);
},
});
IframeReactDOM.createRoot(iframeDoc.getElementById('app')!).render(App);
};
const buildVersion = `t_${__BUILD_VERSION__}`;
const assetPackagesList = [] as any[];
export const App = () => {
const [ready, setReady] = useState(false);
const [page, setPage] = useState(BasePage);
const [lang, setLang] = useState(() => {
const lang = localStorage.getItem('lang') || 'zh_CN';
return lang;
});
const engineRef = useRef();
useEffect(() => {
// check 本地版本号，如果不一致直接覆盖本地所有的
const localBuildVersion = localStorage.getItem('build_version');
if (localBuildVersion !== buildVersion && !import.meta.env.DEV) {
// 清理 schema, 因为可能 协议不兼容，demo 可以这样粗暴处理
localStorage.setItem('pageSchema', '');
localStorage.setItem('build_version', buildVersion);
}
const localPage = localStorage.getItem('pageSchema');
if (localPage) {
setPage(JSON.parse(localPage));
}
setReady(true);
}, []);
const onReady = useCallback(
async (ctx: EnginContext) => {
engineRef.current = ctx;
engineRef.current?.engine.getI18n()?.changeLanguage(lang);
const designer: DesignerPluginInstance = await ctx.pluginManager.onPluginReadyOk('Designer');
const reloadPage = async () => {
setTimeout(() => {
const designerExport = designer?.export;
console.log('to reload');
designerExport.reload();
}, 0);
};
const workbench = ctx.engine.getWorkbench();
// 添加自定义 view
// const disposeView = workbench?.addCustomView({
// key: 'testView',
// view: (
// console.log('click')}
// >
// 123123
//
// ),
// });
workbench?.replaceTopBarView(
Chameleon EG
{ctx &&
{
setLang(val);
engineRef.current?.engine.getI18n()?.changeLanguage(val);
}}
options={[
{
value: 'zh_CN',
label: 'Chinese',
},
{
value: 'en_US',
label: 'English',
},
]}
/>
Documents
Github
{
const res = await ctx.pluginManager.get('History');
res?.export.preStep();
}}
>
{
const res = await ctx.pluginManager.get('History');
res?.export.nextStep();
}}
>
Source Code
{
reloadPage();
}}
>
Refresh Page
{
let src = '/#/preview';
if (location.href.includes('hlerenow')) {
src = '/chameleon/#/preview';
}
Modal.info({
closable: true,
icon: null,
width: 'calc(100vw - 100px)',
centered: true,
title: (
Preview
{
window.open(src);
}}
>
Open in new window
),
content: (
),
footer: <>,
});
}}
>
Preview
{
const newPage = ctx.engine.pageModel.export();
localStorage.setItem('pageSchema', JSON.stringify(newPage));
message.success('Save successfully');
}}
>
Save
);
},
[lang]
);
if (!ready) {
return <>loading...;
}
return (
{
// setTimeout(async () => {
// const res = await ctx.engine.updateMaterials(
// [],
// [
// {
// package: 'lodash',
// globalName: 'lodash',
// resources: [
// {
// src: 'https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js',
// },
// ],
// },
// {
// package: 'dayjs',
// globalName: 'dayjs',
// resources: [
// {
// src: 'https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.9/dayjs.min.js',
// },
// ],
// },
// ]
// );
// console.log('add material successfully');
// }, 2 * 1000);
}}
// 传入组件物料
material={[...InnerComponentMeta]}
// 组件物料对应的 js 运行库，只能使用 umd 模式的 js
assetPackagesList={assetPackagesList}
beforePluginRun={({ pluginManager }) => {
pluginManager.customPlugin('RightPanel', (pluginInstance) => {
pluginInstance.ctx.config.customPropertySetterMap = {
TestSetter: (props: any) => {
useEffect(() => {
console.log(props);
const currentNode = props.setterContext.pluginCtx.engine.getActiveNode();
currentNode.value.configure.isContainer = false;
currentNode.value.children = [];
currentNode.updateValue();
}, [props]);
return 123
;
},
};
return pluginInstance;
});
pluginManager.customPlugin('Designer', (pluginInstance: DesignerPluginInstance) => {
if (__RUN_MODE__ !== 'APP') {
pluginInstance.ctx.config.customRender = customRender;
}
return pluginInstance;
});
/** 自定义组件库插件的搜索框 */
pluginManager.customPlugin(
DEFAULT_PLUGIN_NAME_MAP.ComponentLibPlugin,
(pluginInstance: PluginInstance) => {
pluginInstance.ctx.config.customSearchBar = ({ defaultInputView }) => {
return {defaultInputView}
;
};
return pluginInstance;
}
);
}}
monacoEditor={{
cndUrl: 'https://static.hai-fe.com/code-block/web/dist/monaco-editor/min/vs',
}}
renderJSUrl={renderAsURL}
onReady={onReady}
renderProps={{
requestAPI: async (params) => {
return console.log(7788, params);
},
}}
/>
);
};
================================================
FILE: packages/engine/src/_dev_/page/Preview/index.tsx
================================================
import { useEffect, useState } from 'react';
import {
ReactAdapter,
Render,
useRender,
AssetLoader,
collectVariable,
flatObject,
getComponentsLibs,
getThirdLibs,
} from '@chamn/render';
import { AssetPackage, CPageDataType } from '@chamn/model';
const loadAssets = async (assets: AssetPackage[]) => {
// 注入组件物料资源
const assetLoader = new AssetLoader(assets);
try {
await assetLoader.load();
// 从子窗口获取物料对象
const componentCollection = collectVariable(assets, window);
return componentCollection;
} catch {
return null;
}
};
export const Preview = () => {
const [page, setPage] = useState();
const renderHandle = useRender();
const [loading, setLoading] = useState(true);
const [pageComponents, setPageComponents] = useState({});
const [renderContext, setRenderContext] = useState({});
// 需要区分 那些 UI 组件那些第三方库的对象，分别注入
const loadPageAssets = async (pageInfo: CPageDataType) => {
const assets = pageInfo.assets || [];
const allLibs = (await loadAssets(assets)) || {};
const componentsLibs = getComponentsLibs(flatObject(allLibs), pageInfo.componentsMeta);
const thirdLibs = getThirdLibs(allLibs, pageInfo.thirdLibs || []);
if (componentsLibs) {
setPageComponents(componentsLibs);
setRenderContext({ thirdLibs });
setLoading(false);
}
};
useEffect(() => {
const localPage = localStorage.getItem('pageSchema');
if (localPage) {
const page: CPageDataType = JSON.parse(localPage);
setPage(page);
loadPageAssets(page);
}
}, []);
if (loading) {
return <>Not find page info on local, please ensure you save it on editor;
}
return (
);
};
================================================
FILE: packages/engine/src/_dev_/page/componentEditor/index.tsx
================================================
import { BasePage } from '@chamn/demo-page';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import ReactDOM from 'react-dom';
import ReactDOMClient from 'react-dom/client';
import { Engine } from '../../..';
import '../../index.css';
import { DEFAULT_PLUGIN_LIST } from '../../../plugins';
import { InnerComponentMeta } from '../../../material/innerMaterial';
import {} from '@ant-design/icons';
import { DesignerPluginInstance } from '@/plugins/Designer/type';
import { EnginContext } from '@/type';
import renderAsURL from '@chamn/render/dist/index.umd.js?url';
const win = window as any;
win.React = React;
win.ReactDOM = ReactDOM;
win.ReactDOMClient = ReactDOMClient;
const buildVersion = `t_${__BUILD_VERSION__}`;
const assetPackagesList = [] as any[];
export const ComponentEditor = () => {
const [ready, setReady] = useState(false);
const [page, setPage] = useState(BasePage);
const [lang] = useState(() => {
const lang = localStorage.getItem('lang') || 'zh_CN';
return lang;
});
const engineRef = useRef();
useEffect(() => {
// check 本地版本号，如果不一致直接覆盖本地所有的
const localBuildVersion = localStorage.getItem('build_version');
if (localBuildVersion !== buildVersion && !import.meta.env.DEV) {
// 清理 schema, 因为可能 协议不兼容，demo 可以这样粗暴处理
localStorage.setItem('pageSchema', '');
localStorage.setItem('build_version', buildVersion);
}
const localPage = localStorage.getItem('pageSchema');
if (localPage) {
setPage(JSON.parse(localPage));
}
setReady(true);
}, []);
const onReady = useCallback(
async (ctx: EnginContext) => {
engineRef.current = ctx;
engineRef.current?.engine.getI18n()?.changeLanguage(lang);
// const designer: DesignerPluginInstance = await ctx.pluginManager.onPluginReadyOk('Designer');
// designer.export?.setMode?.(LayoutMode.EDIT);
// setTimeout(() => {
// designer.export?.setMode?.(LayoutMode.PREVIEW);
// setTimeout(() => {
// designer.export?.setMode?.(LayoutMode.EDIT);
// }, 3 * 1000);
// }, 5 * 1000);
engineRef.current?.engine.preview();
setTimeout(() => {
engineRef.current?.engine.existPreview();
setTimeout(() => {
engineRef.current?.engine.preview();
}, 5000);
}, 3000);
const workbench = ctx.engine.getWorkbench();
workbench?.replaceTopBarView(<>);
},
[lang]
);
if (!ready) {
return <>loading...;
}
return (
{
pluginManager.customPlugin('Designer', (pluginInstance: DesignerPluginInstance) => {
pluginInstance.ctx.config.toolbarViewRender = () => {
return <>;
};
return pluginInstance;
});
}}
renderJSUrl={renderAsURL}
onReady={onReady}
renderProps={{
requestAPI: async (params) => {
return console.log(7788, params);
},
}}
/>
);
};
================================================
FILE: packages/engine/src/_dev_/render.html
================================================
Low-code engine
================================================
FILE: packages/engine/src/_dev_/render.tsx
================================================
import renderAsURL from '@chamn/render/dist/index.umd.js?url';
import loadjs from 'loadjs';
loadjs([renderAsURL], () => {
console.log('load render.umd.js success');
});
================================================
FILE: packages/engine/src/_dev_/router.tsx
================================================
import { createHashRouter } from 'react-router-dom';
import { App } from './page/Editor';
import { Preview } from './page/Preview';
import { ComponentEditor } from './page/componentEditor';
export const router: any = createHashRouter([
{
path: '/previewComp',
element: > {
const result: Record> = {};
const ast = csstree.parse(css, {
context: 'stylesheet',
});
csstree.walk(ast, {
visit: 'Rule',
enter(node) {
if (node.type === 'Rule' && node.prelude.type === 'SelectorList') {
const selector = csstree.generate(node.prelude);
const declarations: Record = {};
if (node.block.type === 'Block') {
for (const declaration of node.block.children.toArray()) {
if (declaration.type === 'Declaration') {
const prop = declaration.property;
const value = csstree.generate(declaration.value);
declarations[prop] = value;
}
}
}
result[selector] = declarations;
}
},
});
return result;
}
================================================
FILE: packages/engine/src/component/CSSCodeEditor/index.tsx
================================================
import { forwardRef, useImperativeHandle, useRef } from 'react';
import { MonacoEditor, MonacoEditorInstance } from '../MonacoEditor';
import styles from './style.module.scss';
import { parseCssToObject } from './helper';
import { InputCommonRef } from '../StylePanel/type';
import { isEqual } from 'lodash-es';
const getCssCodeFromStyleObj = (styleObj: Record = {}) => {
let res = `.node {\n`;
Object.keys(styleObj).forEach((key) => {
res += ` ${key}: ${styleObj[key]};\n`;
});
res += '}';
return res;
};
type CSSCodeEditorProps = {
onValueChange?: (newVal: Record) => void;
};
export type CSSCodeEditorRef = InputCommonRef;
export const CSSCodeEditor = forwardRef((props, ref) => {
const editorRef = useRef(null);
const valueRef = useRef({});
useImperativeHandle(
ref,
() => {
return {
setEmptyValue: () => {
valueRef.current = {};
editorRef.current?.setValue(getCssCodeFromStyleObj({}));
},
setValue: (val) => {
if (isEqual(val, valueRef.current)) {
return;
}
valueRef.current = val;
editorRef.current?.setValue(getCssCodeFromStyleObj(val));
},
};
},
[]
);
return (
{
editorRef.current = editor;
editorRef.current?.setValue(getCssCodeFromStyleObj(valueRef.current || {}));
}}
onChange={(newVal) => {
const styleObj = parseCssToObject(newVal || '');
const newValObj = styleObj['.node'] || {};
valueRef.current = newValObj;
props.onValueChange?.(newValObj);
}}
options={{
tabSize: 2,
minimap: { enabled: false },
folding: false,
lineNumbers: 'off',
hover: {
// enabled: false, // ✅ 禁用 hoverWidget
},
}}
/>
);
});
================================================
FILE: packages/engine/src/component/CSSCodeEditor/style.module.scss
================================================
.cssCodeEditor {
:global {
.monaco-editor .suggest-widget {
width: 300px !important;
left: 0 !important;
right: auto !important;
transform: none !important; // 防止默认偏移
}
}
}
================================================
FILE: packages/engine/src/component/CSSEditor/index.tsx
================================================
import { waitReactUpdate } from '@/utils';
import { formatCSSTextProperty, StyleArr, styleList2Text } from '@/utils/css';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Card, Collapse, Dropdown, Space } from 'antd';
import CheckableTag from 'antd/es/tag/CheckableTag';
import { MutableRefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { CSSPropertiesEditor, CSSPropertiesEditorRef } from '../CSSPropertiesEditor';
import styles from './style.module.scss';
import { isEmpty } from 'lodash-es';
// state: 'normal' | 'hover' | 'active' | 'focus' | 'first' | 'last' | 'even' | 'odd';
const DOM_CSS_STATUS = [
'normal' as const,
'hover' as const,
'focus' as const,
'focus-within' as const,
'focus-visible' as const,
'checked' as const,
'disable' as const,
'active' as const,
];
type DomCSSStatusType = typeof DOM_CSS_STATUS[number];
const DOM_CSS_STATUS_LIST = DOM_CSS_STATUS.map((el) => {
return {
key: el,
label: el,
};
});
type MediaQueryItem = {
key: string;
maxWidth: string;
label: string;
};
export type CSSVal = Partial<
Record<
DomCSSStatusType,
Record<
/** media query key */
string,
string
>
>
>;
export type CSSEditorRef = {
setValue: (val: CSSVal) => void;
};
export type CSSEditorProps = {
onValueChange?: (val: CSSVal) => void;
initialValue?: CSSVal;
handler?: MutableRefObject;
};
export const CSSEditor = (props: CSSEditorProps) => {
const [selectedStateTag, setSelectedStateTag] = useState('normal');
const [mediaQueryList] = useState([
{
key: '991',
maxWidth: '991',
label: 'Medial Query ( <= 991 px )',
},
{
key: '767',
maxWidth: '767',
label: 'Medial Query ( <= 767 px )',
},
{
key: '479',
maxWidth: '479',
label: 'Medial Query ( <= 479 px )',
},
]);
const cssPropertyRefMap = useRef>({});
const handleChange = (tag: DomCSSStatusType) => {
setSelectedStateTag(tag);
};
const [domStatusList, setDomStatusList] = useState([]);
const cssStatusList = useMemo(() => {
return DOM_CSS_STATUS_LIST.filter((el) => {
return !domStatusList.includes(el.key);
});
}, [domStatusList]);
const selectCssStatusList = useMemo(() => {
return DOM_CSS_STATUS_LIST.filter((el) => {
return domStatusList.includes(el.key);
});
}, [domStatusList]);
const [cssVal, setCssVal] = useState(props.initialValue ?? {});
useEffect(() => {
const list = Object.keys(cssVal);
setDomStatusList(list);
}, [cssVal]);
const currentCssStateVal = useMemo(() => {
const res = cssVal?.[selectedStateTag];
if (!res) {
return {};
}
const newVal: Record> = {};
Object.keys(res).forEach((key) => {
newVal[key] = formatCSSTextProperty(res[key] || '');
});
return newVal;
}, [selectedStateTag, cssVal]);
const initVal = useCallback(() => {
Object.keys(cssPropertyRefMap.current).forEach((key) => {
const ref = cssPropertyRefMap.current?.[key];
const cssVal = currentCssStateVal[key] || [];
if (ref) {
ref.setValue(cssVal);
}
});
}, [currentCssStateVal]);
const initRef = useRef<() => void>();
initRef.current = initVal;
if (props.handler) {
props.handler.current = {
setValue: async (newVal) => {
if (isEmpty(newVal)) {
setCssVal({
normal: {
normal: '',
},
});
} else {
setCssVal(newVal);
}
await waitReactUpdate();
initRef.current?.();
},
};
}
// 初始化赋值
useEffect(() => {
initRef.current?.();
}, [selectedStateTag]);
const updateCss = useCallback(
(mediaKey: string, val: StyleArr) => {
const newVal = {
...cssVal,
[selectedStateTag]: {
...(cssVal[selectedStateTag] || {}),
[mediaKey]: styleList2Text(val),
},
};
props.onValueChange?.(newVal);
},
[cssVal, props, selectedStateTag]
);
return (
<>
CSS}
extra={
{
setDomStatusList((oldVal) => {
return [...oldVal, el.key];
});
},
}}
>
}
>
{selectCssStatusList.map((tag) => {
const checked = selectedStateTag.includes(tag.key);
return (
handleChange(tag.key)}
className={styles.stateTag}
>
{tag.label}
{tag.key !== 'normal' && (
{
e.stopPropagation();
e.preventDefault();
setDomStatusList((oldVal) => {
return oldVal.filter((el) => {
return el !== tag.key;
});
});
setSelectedStateTag('normal');
}}
/>
)}
);
})}
{
await waitReactUpdate();
initRef.current?.();
}}
items={[
{
key: 'normal',
label: Default ,
children: (
{
cssPropertyRefMap.current['normal'] = ref;
}}
onValueChange={(val) => updateCss('normal', val)}
initialValue={currentCssStateVal['normal']}
/>
),
},
...mediaQueryList.map((el) => {
return {
key: el.key,
label: {el.label} ,
children: (
{
cssPropertyRefMap.current[el.key] = ref;
}}
onValueChange={(val) => updateCss(el.key, val)}
/>
),
};
}),
]}
>
);
};
================================================
FILE: packages/engine/src/component/CSSEditor/style.module.scss
================================================
.stateTag {
position: relative;
.stateTagClose {
position: absolute;
right: -10px;
top: -10px;
background-color: white;
color: #4d4d4d;
opacity: 0;
font-size: 20px;
transform: scale(0.6);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
border-radius: 10px;
}
&:hover {
.stateTagClose {
opacity: 1;
}
}
}
================================================
FILE: packages/engine/src/component/CSSPropertiesEditor/cssProperties.ts
================================================
const CSSSourceInfo = {
cssColors: {
aliceblue: '#f0f8ff',
antiquewhite: '#faebd7',
aqua: '#00ffff',
aquamarine: '#7fffd4',
azure: '#f0ffff',
beige: '#f5f5dc',
bisque: '#ffe4c4',
black: '#000000',
blanchedalmond: '#ffebcd',
blue: '#0000ff',
blueviolet: '#8a2be2',
brown: '#a52a2a',
burlywood: '#deb887',
cadetblue: '#5f9ea0',
chartreuse: '#7fff00',
chocolate: '#d2691e',
coral: '#ff7f50',
cornflowerblue: '#6495ed',
cornsilk: '#fff8dc',
crimson: '#dc143c',
cyan: '#00ffff',
darkblue: '#00008b',
darkcyan: '#008b8b',
darkgoldenrod: '#b8860b',
darkgray: '#a9a9a9',
darkgreen: '#006400',
darkgrey: '#a9a9a9',
darkkhaki: '#bdb76b',
darkmagenta: '#8b008b',
darkolivegreen: '#556b2f',
darkorange: '#ff8c00',
darkorchid: '#9932cc',
darkred: '#8b0000',
darksalmon: '#e9967a',
darkseagreen: '#8fbc8f',
darkslateblue: '#483d8b',
darkslategray: '#2f4f4f',
darkslategrey: '#2f4f4f',
darkturquoise: '#00ced1',
darkviolet: '#9400d3',
deeppink: '#ff1493',
deepskyblue: '#00bfff',
dimgray: '#696969',
dimgrey: '#696969',
dodgerblue: '#1e90ff',
firebrick: '#b22222',
floralwhite: '#fffaf0',
forestgreen: '#228b22',
fuchsia: '#ff00ff',
gainsboro: '#dcdcdc',
ghostwhite: '#f8f8ff',
goldenrod: '#daa520',
gold: '#ffd700',
gray: '#808080',
green: '#008000',
greenyellow: '#adff2f',
grey: '#808080',
honeydew: '#f0fff0',
hotpink: '#ff69b4',
indianred: '#cd5c5c',
indigo: '#4b0082',
ivory: '#fffff0',
khaki: '#f0e68c',
lavenderblush: '#fff0f5',
lavender: '#e6e6fa',
lawngreen: '#7cfc00',
lemonchiffon: '#fffacd',
lightblue: '#add8e6',
lightcoral: '#f08080',
lightcyan: '#e0ffff',
lightgoldenrodyellow: '#fafad2',
lightgray: '#d3d3d3',
lightgreen: '#90ee90',
lightgrey: '#d3d3d3',
lightpink: '#ffb6c1',
lightsalmon: '#ffa07a',
lightseagreen: '#20b2aa',
lightskyblue: '#87cefa',
lightslategray: '#778899',
lightslategrey: '#778899',
lightsteelblue: '#b0c4de',
lightyellow: '#ffffe0',
lime: '#00ff00',
limegreen: '#32cd32',
linen: '#faf0e6',
magenta: '#ff00ff',
maroon: '#800000',
mediumaquamarine: '#66cdaa',
mediumblue: '#0000cd',
mediumorchid: '#ba55d3',
mediumpurple: '#9370db',
mediumseagreen: '#3cb371',
mediumslateblue: '#7b68ee',
mediumspringgreen: '#00fa9a',
mediumturquoise: '#48d1cc',
mediumvioletred: '#c71585',
midnightblue: '#191970',
mintcream: '#f5fffa',
mistyrose: '#ffe4e1',
moccasin: '#ffe4b5',
navajowhite: '#ffdead',
navy: '#000080',
oldlace: '#fdf5e6',
olive: '#808000',
olivedrab: '#6b8e23',
orange: '#ffa500',
orangered: '#ff4500',
orchid: '#da70d6',
palegoldenrod: '#eee8aa',
palegreen: '#98fb98',
paleturquoise: '#afeeee',
palevioletred: '#db7093',
papayawhip: '#ffefd5',
peachpuff: '#ffdab9',
peru: '#cd853f',
pink: '#ffc0cb',
plum: '#dda0dd',
powderblue: '#b0e0e6',
purple: '#800080',
rebeccapurple: '#663399',
red: '#ff0000',
rosybrown: '#bc8f8f',
royalblue: '#4169e1',
saddlebrown: '#8b4513',
salmon: '#fa8072',
sandybrown: '#f4a460',
seagreen: '#2e8b57',
seashell: '#fff5ee',
sienna: '#a0522d',
silver: '#c0c0c0',
skyblue: '#87ceeb',
slateblue: '#6a5acd',
slategray: '#708090',
slategrey: '#708090',
snow: '#fffafa',
springgreen: '#00ff7f',
steelblue: '#4682b4',
tan: '#d2b48c',
teal: '#008080',
thistle: '#d8bfd8',
tomato: '#ff6347',
turquoise: '#40e0d0',
violet: '#ee82ee',
wheat: '#f5deb3',
white: '#ffffff',
whitesmoke: '#f5f5f5',
yellow: '#ffff00',
yellowgreen: '#9acd32',
},
cssKeyValue: {
'align-content': {
values: [
'center',
'flex-end',
'flex-start',
'space-around',
'space-between',
'stretch',
],
},
'align-items': {
values: ['baseline', 'center', 'flex-end', 'flex-start', 'stretch'],
},
'align-self': {
values: [
'auto',
'normal',
'self-start',
'self-end',
'baseline',
'center',
'start',
'end',
'flex-end',
'flex-start',
'safe',
'stretch',
'unsafe',
],
},
all: { values: [] },
animation: { values: [] },
'animation-delay': { values: [] },
'animation-direction': {
values: ['alternate', 'alternate-reverse', 'normal', 'reverse'],
},
'animation-duration': { values: [] },
'animation-fill-mode': {
values: ['backwards', 'both', 'forwards', 'none'],
},
'animation-iteration-count': { values: ['infinite'] },
'animation-name': { values: ['none'] },
'animation-play-state': { values: ['paused', 'running'] },
'animation-timing-function': {
values: [
'cubic-bezier()',
'ease',
'ease-in',
'ease-in-out',
'ease-out',
'linear',
'step-end',
'step-start',
'steps()',
],
},
'backface-visibility': { values: ['hidden', 'visible'] },
background: { values: [], type: 'color' },
'background-attachment': { values: ['fixed', 'local', 'scroll'] },
'background-blend-mode': {
values: [
'color',
'color-burn',
'color-dodge',
'darken',
'difference',
'exclusion',
'hard-light',
'hue',
'lighten',
'luminosity',
'multiply',
'normal',
'overlay',
'saturation',
'screen',
'soft-light',
],
},
'background-clip': { values: ['border-box', 'content-box', 'padding-box'] },
'background-color': { values: [], type: 'color' },
'background-image': {
values: [
'image()',
'linear-gradient()',
'radial-gradient()',
'repeating-linear-gradient()',
'repeating-radial-gradient()',
'url()',
],
},
'background-origin': {
values: ['border-box', 'content-box', 'padding-box'],
},
'background-position': {
values: ['left', 'center', 'right', 'bottom', 'top'],
},
'background-repeat': {
values: ['no-repeat', 'repeat', 'repeat-x', 'repeat-y', 'round', 'space'],
},
'background-size': { values: ['auto', 'contain', 'cover'] },
border: { values: [] },
'border-collapse': { values: ['collapse', 'separate'] },
'border-color': { values: [], type: 'color' },
'border-spacing': { values: [] },
'border-style': {
values: [
'dashed',
'dotted',
'double',
'groove',
'hidden',
'inset',
'none',
'outset',
'ridge',
'solid',
],
},
'border-bottom': { values: [] },
'border-bottom-color': { values: [], type: 'color' },
'border-bottom-left-radius': { values: [] },
'border-bottom-right-radius': { values: [] },
'border-bottom-style': {
values: [
'dashed',
'dotted',
'double',
'groove',
'hidden',
'inset',
'none',
'outset',
'ridge',
'solid',
],
},
'border-bottom-width': { values: ['medium', 'thin', 'thick'] },
'border-image': { values: ['url()'] },
'border-image-outset': { values: [] },
'border-image-slice': { values: [] },
'border-image-source': { values: [] },
'border-image-repeat': { values: ['repeat', 'round', 'space', 'stretch'] },
'border-image-width': { values: ['auto'] },
'border-left': { values: [] },
'border-left-color': { values: [], type: 'color' },
'border-left-style': {
values: [
'dashed',
'dotted',
'double',
'groove',
'hidden',
'inset',
'none',
'outset',
'ridge',
'solid',
],
},
'border-left-width': { values: ['medium', 'thin', 'thick'] },
'border-radius': { values: [] },
'border-right': { values: [] },
'border-right-color': { values: [], type: 'color' },
'border-right-style': {
values: [
'dashed',
'dotted',
'double',
'groove',
'hidden',
'inset',
'none',
'outset',
'ridge',
'solid',
],
},
'border-right-width': { values: ['medium', 'thin', 'thick'] },
'border-top': { values: [] },
'border-top-color': { values: [], type: 'color' },
'border-top-left-radius': { values: [] },
'border-top-right-radius': { values: [] },
'border-top-style': {
values: [
'dashed',
'dotted',
'double',
'groove',
'hidden',
'inset',
'none',
'outset',
'ridge',
'solid',
],
},
'border-top-width': { values: ['medium', 'thin', 'thick'] },
'border-width': { values: ['medium', 'thin', 'thick'] },
'box-decoration-break': { values: ['clone', 'slice'] },
'box-shadow': { values: ['none'] },
'box-sizing': { values: ['border-box', 'content-box'] },
bottom: { values: ['auto'] },
'break-after': {
values: [
'always',
'auto',
'avoid',
'avoid-column',
'avoid-page',
'avoid-region',
'column',
'left',
'page',
'region',
'right',
],
},
'break-before': {
values: [
'always',
'auto',
'avoid',
'avoid-column',
'avoid-page',
'avoid-region',
'column',
'left',
'page',
'region',
'right',
],
},
'break-inside': {
values: ['auto', 'avoid', 'avoid-column', 'avoid-page', 'avoid-region'],
},
'caption-side': { values: ['bottom', 'top'] },
'caret-color': { values: ['auto'], type: 'color' },
clear: { values: ['both', 'left', 'none', 'right'] },
clip: { values: ['auto'] },
color: { values: [], type: 'color' },
columns: { values: [] },
'column-count': { values: [] },
'column-fill': { values: ['auto', 'balance'] },
'column-gap': { values: ['normal'] },
'column-rule': { values: [] },
'column-rule-color': { values: [], type: 'color' },
'column-rule-style': {
values: [
'dashed',
'dotted',
'double',
'groove',
'hidden',
'inset',
'none',
'outset',
'ridge',
'solid',
],
},
'column-rule-width': { values: ['medium', 'thin', 'thick'] },
'column-span': { values: ['all', 'none'] },
'column-width': { values: ['auto'] },
content: {
values: [
'attr()',
'close-quote',
'no-close-quote',
'no-open-quote',
'normal',
'none',
'open-quote',
],
},
'counter-increment': { values: ['none'] },
'counter-reset': { values: ['none'] },
cursor: {
values: [
'alias',
'all-scroll',
'auto',
'cell',
'col-resize',
'context-menu',
'copy',
'crosshair',
'default',
'e-resize',
'ew-resize',
'grab',
'grabbing',
'help',
'move',
'n-resize',
'ne-resize',
'nesw-resize',
'no-drop',
'none',
'not-allowed',
'ns-resize',
'nw-resize',
'nwse-resize',
'pointer',
'progress',
'row-resize',
's-resize',
'se-resize',
'sw-resize',
'text',
'vertical-text',
'w-resize',
'wait',
'zoom-in',
'zoom-out',
],
},
direction: { values: ['ltr', 'rtl'] },
display: {
values: [
'block',
'contents',
'flex',
'flow-root',
'grid',
'inline',
'inline-block',
'inline-flex',
'inline-grid',
'inline-table',
'list-item',
'none',
'run-in',
'subgrid',
'table',
'table-caption',
'table-cell',
'table-column',
'table-column-group',
'table-footer-group',
'table-header-group',
'table-row',
'table-row-group',
],
},
'empty-cells': { values: ['hide', 'show'] },
fill: { values: [] },
filter: {
values: [
'blur()',
'brightness()',
'contrast()',
'custom()',
'drop-shadow()',
'grayscale()',
'hue-rotate()',
'invert()',
'none',
'opacity()',
'sepia()',
'saturate()',
'url()',
],
},
flex: { values: ['auto', 'none'] },
'flex-basis': { values: ['auto'] },
'flex-direction': {
values: ['column', 'column-reverse', 'row', 'row-reverse'],
},
'flex-flow': {
values: [
'column',
'column-reverse',
'nowrap',
'row',
'row-reverse',
'wrap',
'wrap-reverse',
],
},
'flex-grow': { values: [] },
'flex-shrink': { values: [] },
'flex-wrap': { values: ['nowrap', 'wrap', 'wrap-reverse'] },
float: { values: ['left', 'right', 'none', 'inline-start', 'inline-end'] },
'flow-into': { values: ['none'], type: 'named-flow' },
'flow-from': { values: ['none'], type: 'named-flow' },
font: { values: [] },
'font-display': {
values: ['auto', 'block', 'swap', 'fallback', 'optional'],
},
'font-family': {
values: [
'auto',
'cursive',
'fantasy',
'monospace',
'sans-serif',
'serif',
],
},
'font-feature-settings': { values: ['normal'] },
'font-kerning': { values: ['auto', 'none', 'normal'] },
'font-language-override': { values: ['normal'] },
'font-size': {
values: [
'xx-small',
'x-small',
'small',
'medium',
'large',
'x-large',
'xx-large',
'xxx-large',
'larger',
'smaller',
],
},
'font-size-adjust': { values: ['auto', 'none'] },
'font-stretch': {
values: [
'condensed',
'expanded',
'extra-condensed',
'extra-expanded',
'normal',
'semi-condensed',
'semi-expanded',
'ultra-condensed',
'ultra-expanded',
],
},
'font-style': { values: ['italic', 'normal', 'oblique'] },
'font-synthesis': { values: ['none', 'style', 'weight'] },
'font-variant': { values: ['normal', 'small-caps'] },
'font-variant-alternates': { values: ['normal'] },
'font-variant-caps': {
values: [
'normal',
'small-caps',
'all-small-caps',
'petite-caps',
'all-petite-caps',
'unicase',
'titling-caps',
],
},
'font-variant-east-asian': { values: ['normal'] },
'font-variant-ligatures': { values: ['normal', 'none'] },
'font-variant-numeric': { values: ['normal'] },
'font-variant-position': { values: ['normal', 'sub', 'super'] },
'font-weight': {
values: [
'bold',
'bolder',
'lighter',
'normal',
'100',
'200',
'300',
'400',
'500',
'600',
'700',
'800',
'900',
],
},
gap: { values: ['revert-layer'] },
grid: { values: [] },
'grid-area': { values: [] },
'grid-auto-columns': { values: [] },
'grid-auto-flow': { values: ['row', 'column', 'dense'] },
'grid-auto-rows': { values: [] },
'grid-column': { values: ['auto'] },
'grid-column-end': { values: [] },
'grid-column-gap': { values: [] },
'grid-column-start': { values: [] },
'grid-gap': { values: [] },
'grid-row': { values: ['auto'] },
'grid-row-end': { values: [] },
'grid-row-start': { values: [] },
'grid-row-gap': { values: [] },
'grid-template': { values: ['none'] },
'grid-template-areas': { values: [] },
'grid-template-columns': { values: ['auto'] },
'grid-template-rows': { values: ['auto'] },
'hanging-punctuation': {
values: ['allow-end', 'first', 'force-end', 'last', 'none'],
},
height: { values: ['auto', 'max-content', 'min-content', 'fit-content'] },
hyphens: { values: ['auto', 'manual', 'none'] },
'image-orientation': { values: [] },
'image-resolution': { values: ['from-image', 'snap'] },
isolation: { values: ['auto', 'isolate'] },
'justify-content': {
values: [
'center',
'flex-end',
'flex-start',
'space-around',
'space-between',
],
},
'justify-items': {
values: [
'auto',
'normal',
'stretch',
'center',
'start',
'end',
'flex-start',
'flex-end',
'self-start',
'self-end',
'left',
'right',
'baseline',
'first',
'last',
'safe',
'unsafe',
'legacy',
],
},
'justify-self': {
values: [
'auto',
'normal',
'stretch',
'center',
'start',
'end',
'flex-start',
'flex-end',
'self-start',
'self-end',
'left',
'right',
'baseline',
'first',
'last',
'safe',
'unsafe',
],
},
left: { values: ['auto'] },
'letter-spacing': { values: ['normal'] },
'line-height': { values: ['normal'] },
'list-style': {
values: [
'none',
'url()',
'armenian',
'circle',
'decimal',
'decimal-leading-zero',
'disc',
'georgian',
'inside',
'lower-alpha',
'lower-greek',
'lower-latin',
'lower-roman',
'outside',
'square',
'upper-alpha',
'upper-latin',
'upper-roman',
],
},
'list-style-image': { values: ['none', 'url()'] },
'list-style-position': { values: ['inside', 'outside'] },
'list-style-type': {
values: [
'armenian',
'circle',
'decimal',
'decimal-leading-zero',
'disc',
'georgian',
'lower-alpha',
'lower-greek',
'lower-latin',
'lower-roman',
'none',
'square',
'upper-alpha',
'upper-latin',
'upper-roman',
],
},
margin: { values: ['auto'] },
'margin-bottom': { values: ['auto'] },
'margin-left': { values: ['auto'] },
'margin-right': { values: ['auto'] },
'margin-top': { values: ['auto'] },
'max-height': { values: ['none'] },
'max-width': { values: ['none'] },
'min-height': { values: [] },
'min-width': { values: [] },
'mix-blend-mode': {
values: [
'color',
'color-burn',
'color-dodge',
'darken',
'difference',
'exclusion',
'hard-light',
'hue',
'lighten',
'luminosity',
'multiply',
'normal',
'overlay',
'saturation',
'screen',
'soft-light',
],
},
'object-fit': {
values: ['contain', 'cover', 'fill', 'none', 'scale-down'],
},
'object-position': { values: ['left', 'center', 'right', 'bottom', 'top'] },
opacity: { values: [] },
order: { values: [] },
orphans: { values: [] },
outline: { values: [] },
'outline-color': { values: ['invert'], type: 'color' },
'outline-offset': { values: [] },
'outline-style': {
values: [
'dashed',
'dotted',
'double',
'groove',
'hidden',
'inset',
'none',
'outset',
'ridge',
'solid',
],
},
'outline-width': { values: ['medium', 'thin', 'thick'] },
overflow: { values: ['auto', 'hidden', 'scroll', 'visible'] },
'overflow-x': { values: ['auto', 'hidden', 'scroll', 'visible'] },
'overflow-y': { values: ['auto', 'hidden', 'scroll', 'visible'] },
'overflow-wrap': { values: ['normal', 'anywhere', 'break-word'] },
padding: { values: [] },
'padding-bottom': { values: [] },
'padding-left': { values: [] },
'padding-right': { values: [] },
'padding-top': { values: [] },
'page-break-after': {
values: ['always', 'auto', 'avoid', 'left', 'right'],
},
'page-break-before': {
values: ['always', 'auto', 'avoid', 'left', 'right'],
},
'page-break-inside': { values: ['auto', 'avoid'] },
perspective: { values: ['none'] },
'perspective-origin': {
values: ['bottom', 'center', 'left', 'right', 'top'],
},
'pointer-events': {
values: [
'all',
'auto',
'fill',
'none',
'painted',
'stroke',
'visible',
'visibleFill',
'visiblePainted',
'visibleStroke',
],
},
position: { values: ['absolute', 'fixed', 'relative', 'static', 'sticky'] },
quotes: { values: ['none'] },
'region-break-after': {
values: [
'always',
'auto',
'avoid',
'avoid-column',
'avoid-page',
'avoid-region',
'column',
'left',
'page',
'region',
'right',
],
},
'region-break-before': {
values: [
'always',
'auto',
'avoid',
'avoid-column',
'avoid-page',
'avoid-region',
'column',
'left',
'page',
'region',
'right',
],
},
'region-break-inside': {
values: ['auto', 'avoid', 'avoid-column', 'avoid-page', 'avoid-region'],
},
'region-fragment': { values: ['auto', 'break'] },
resize: { values: ['both', 'horizontal', 'none', 'vertical'] },
right: { values: ['auto'] },
'scroll-behavior': { values: ['auto', 'smooth'] },
'scroll-snap-type': {
values: [
'none',
'x',
'y',
'block',
'inline',
'both',
'mandatory',
'proximity',
],
},
src: { values: ['url()'] },
'shape-image-threshold': { values: [] },
'shape-inside': {
values: [
'auto',
'circle()',
'ellipse()',
'outside-shape',
'polygon()',
'rectangle()',
],
},
'shape-margin': { values: [] },
'shape-outside': {
values: [
'none',
'circle()',
'ellipse()',
'polygon()',
'inset()',
'margin-box',
'border-box',
'padding-box',
'content-box',
'url()',
'image()',
'linear-gradient()',
'radial-gradient()',
'repeating-linear-gradient()',
'repeating-radial-gradient()',
],
},
'tab-size': { values: [] },
'table-layout': { values: ['auto', 'fixed'] },
'text-align': {
values: [
'start',
'end',
'center',
'left',
'justify',
'right',
'match-parent',
'justify-all',
],
},
'text-align-last': { values: ['center', 'left', 'justify', 'right'] },
'text-decoration': {
values: ['line-through', 'none', 'overline', 'underline'],
},
'text-decoration-color': { values: [], type: 'color' },
'text-decoration-line': {
values: ['line-through', 'none', 'overline', 'underline'],
},
'text-decoration-skip': {
values: ['edges', 'ink', 'none', 'objects', 'spaces'],
},
'text-decoration-style': {
values: ['dashed', 'dotted', 'double', 'solid', 'wavy'],
},
'text-emphasis': { values: [] },
'text-emphasis-color': { values: [], type: 'color' },
'text-emphasis-position': { values: ['above', 'below', 'left', 'right'] },
'text-emphasis-style': {
values: [
'circle',
'dot',
'double-circle',
'filled',
'none',
'open',
'sesame',
'triangle',
],
},
'text-indent': { values: [] },
'text-justify': {
values: ['auto', 'none', 'inter-word', 'inter-character'],
},
'text-overflow': { values: ['clip', 'ellipsis'] },
'text-shadow': { values: [] },
'text-rendering': {
values: [
'auto',
'geometricPrecision',
'optimizeLegibility',
'optimizeSpeed',
],
},
'text-transform': {
values: ['capitalize', 'full-width', 'lowercase', 'none', 'uppercase'],
},
'text-underline-position': {
values: ['alphabetic', 'auto', 'below', 'left', 'right'],
},
top: { values: ['auto'] },
transform: {
values: [
'matrix()',
'matrix3d()',
'none',
'perspective()',
'rotate()',
'rotate3d()',
'rotateX()',
'rotateY()',
'rotateZ()',
'scale()',
'scale3d()',
'scaleX()',
'scaleY()',
'scaleZ()',
'skewX()',
'skewY()',
'translate()',
'translate3d()',
'translateX()',
'translateY()',
'translateZ()',
],
},
'transform-origin': {
values: ['bottom', 'center', 'left', 'right', 'top'],
},
'transform-style': { values: ['flat', 'preserve-3d'] },
transition: { values: [] },
'transition-delay': { values: [] },
'transition-duration': { values: [] },
'transition-property': { values: ['all', 'none'] },
'transition-timing-function': {
values: [
'cubic-bezier()',
'ease',
'ease-in',
'ease-in-out',
'ease-out',
'linear',
'step-end',
'step-start',
'steps()',
],
},
'unicode-bidi': { values: ['bidi-override', 'embed', 'normal'] },
'unicode-range': { values: [] },
'user-select': { values: ['all', 'auto', 'contain', 'none', 'text'] },
'vertical-align': {
values: [
'baseline',
'bottom',
'middle',
'sub',
'super',
'text-bottom',
'text-top',
'top',
],
},
visibility: { values: ['collapse', 'hidden', 'visible'] },
'white-space': {
values: ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap'],
},
widows: { values: [] },
width: { values: ['auto', 'max-content', 'min-content', 'fit-content'] },
'will-change': {
values: ['auto', 'contents', 'opacity', 'scroll-position'],
},
'word-break': { values: ['normal', 'break-all', 'keep-all'] },
'word-spacing': { values: ['normal'] },
'z-index': { values: ['auto'] },
},
};
export const CSSProperties = CSSSourceInfo.cssKeyValue;
export const CSSColors = CSSSourceInfo.cssColors;
export type CSSPropertiesKey = keyof typeof CSSProperties;
export const CSSPropertyList = Object.keys(CSSSourceInfo.cssKeyValue);
================================================
FILE: packages/engine/src/component/CSSPropertiesEditor/index.tsx
================================================
import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
import { CSSPropertyList } from './cssProperties';
import styles from './style.module.scss';
import { ConfigProvider } from 'antd';
import { SinglePropertyEditorRef, SinglePropertyEditor } from './signleProperty';
// eslint-disable-next-line react-refresh/only-export-components
export const defaultPropertyOptions = CSSPropertyList.map((el) => {
return {
value: el,
};
});
export type CSSPropertiesEditorProps = {
initialValue?: { property: string; value: string }[];
onValueChange?: (val: { property: string; value: string }[]) => void;
};
export type CSSPropertiesEditorRef = {
setValue: (val: { property: string; value: string }[]) => void;
};
export const CSSPropertiesEditor = forwardRef(
function CSSPropertiesEditorCore(props, ref) {
const [propertyList, setPropertyList] = useState<{ id?: string; property: string; value: any }[]>([]);
const [newAddVal, setNewAddVal] = useState({
property: '',
value: '',
});
useImperativeHandle(
ref,
() => {
return {
setValue: (val) => {
setPropertyList(val);
},
};
},
[]
);
useEffect(() => {
if (props.initialValue) {
setPropertyList([...props.initialValue]);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const innerOnValueChange = (val: typeof propertyList) => {
props.onValueChange?.(val);
};
const createPropertyRef = useRef(null);
return (
{propertyList.map((el, index) => {
return (
{
propertyList[index] = newVal;
const newList = JSON.parse(JSON.stringify(propertyList));
setPropertyList(newList);
innerOnValueChange(newList);
}}
onDelete={() => {
propertyList.splice(index, 1);
const newList = JSON.parse(JSON.stringify(propertyList));
setPropertyList(newList);
innerOnValueChange(newList);
}}
/>
);
})}
{
setNewAddVal({
...newCssVal,
});
}}
onCreate={(newVal) => {
if (newVal.property && newVal.value) {
const newList = [...propertyList];
newList.push(newVal);
setPropertyList(newList);
setNewAddVal({
property: '',
value: '',
});
innerOnValueChange(newList);
createPropertyRef.current?.reset();
}
}}
/>
);
}
);
================================================
FILE: packages/engine/src/component/CSSPropertiesEditor/signleProperty.tsx
================================================
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
import { AutoComplete, Button } from 'antd';
import { InputStatus } from 'antd/es/_util/statusUtils';
import clsx from 'clsx';
import { BaseSelectRef } from 'rc-select';
import { forwardRef, useState, useMemo, useRef, useImperativeHandle } from 'react';
import { defaultPropertyOptions } from '.';
import { CSSProperties, CSSPropertiesKey } from './cssProperties';
import styles from './style.module.scss';
export type SinglePropertyEditorProps = {
mode: 'create' | 'edit';
value?: {
property: string;
value: string;
};
allValues: {
property: string;
value: string;
}[];
onValueChange?: (value: { property: string; value: string }) => void;
onCreate?: (value: { property: string; value: string }) => void;
onDelete?: () => void;
};
export type SinglePropertyEditorRef = {
reset: () => void;
};
export const SinglePropertyEditor = forwardRef(
function SinglePropertyEditorCore(props, ref) {
const [keyFormatStatus] = useState('');
const [valueFormatStatus] = useState('');
const { mode = 'edit' } = props;
const isCreate = useMemo(() => {
return mode === 'create';
}, [mode]);
const innerValue = props.value;
const [propertyOptions, setPropertyOptions] = useState(defaultPropertyOptions);
const [valueOptions, setValueOptions] = useState<{ value: string }[]>([]);
const [allValueOptions, setAllValueOptions] = useState<{ value: string }[]>([]);
const onSearch = (searchText: string) => {
const newOptions = defaultPropertyOptions.filter((el) => el.value.includes(searchText));
if (!searchText) {
setPropertyOptions(defaultPropertyOptions);
} else {
setPropertyOptions(newOptions);
}
};
const updateValueOptions = () => {
let res: any[] = [];
const tempProperty = CSSProperties[innerValue?.property as unknown as CSSPropertiesKey];
if (tempProperty) {
res =
tempProperty.values?.map((val) => {
return {
value: val,
};
}) || [];
}
setValueOptions(res);
setAllValueOptions(res);
};
const onValueSearch = (searchText: string) => {
const newOptions = allValueOptions.filter((el) => el.value.includes(searchText));
if (!searchText) {
setValueOptions(allValueOptions);
} else {
setValueOptions(newOptions);
}
};
const updateKeyValue = (keyVal: string) => {
props.onValueChange?.({
property: keyVal,
value: innerValue?.value || '',
});
return true;
};
const propertyValueRef = useRef(null);
const propertyKeyRef = useRef(null);
const [focusState, setFocusState] = useState({
key: false,
value: false,
});
useImperativeHandle(
ref,
() => {
return {
reset: () => {
propertyKeyRef.current?.focus();
},
};
},
[]
);
return (
{
updateKeyValue(val);
}}
style={{
width: '100%',
position: 'absolute',
left: 0,
top: 0,
}}
onFocus={() => {
setFocusState({
key: true,
value: false,
});
}}
onBlur={() => {
setFocusState({
key: false,
value: false,
});
}}
onKeyDown={(e) => {
if (e.code === 'Enter') {
if (!keyFormatStatus) {
propertyValueRef.current?.focus();
}
}
}}
placeholder="property"
options={propertyOptions}
/>
{innerValue?.property}
:
{
updateValueOptions();
props.onValueChange?.({
property: innerValue?.property || '',
value: val || '',
});
}}
style={{
flex: 1,
}}
onFocus={() => {
setFocusState({
key: false,
value: true,
});
}}
onBlur={() => {
setFocusState({
key: false,
value: false,
});
}}
className={clsx([styles.inputAuto, focusState.value && styles.active])}
placeholder="value"
onSearch={onValueSearch}
options={valueOptions}
onKeyDown={(e) => {
if (e.code === 'Enter') {
if (isCreate) {
props.onCreate?.({
property: innerValue?.property || '',
value: innerValue?.value || '',
});
}
}
}}
>
{props.onDelete && mode === 'edit' && (
{
props.onDelete?.();
}}
>
)}
{props.onCreate && mode === 'create' && (
}
onClick={() => {
props.onCreate?.({
property: innerValue?.property || '',
value: innerValue?.value || '',
});
}}
>
)}
);
}
);
================================================
FILE: packages/engine/src/component/CSSPropertiesEditor/style.module.scss
================================================
.cssFieldBox {
display: flex;
align-items: center;
color: $textColor !important;
:global {
.ant-select-selector {
padding: 0 !important;
}
.ant-select-single .ant-select-selector .ant-select-selection-search {
inset-inline-start: 0px;
inset-inline-end: 0px;
}
.ant-select-selector input {
color: $textColor !important;
}
}
.inputAuto {
border-bottom: 1px solid rgba(128, 128, 128, 0.23);
transition: all 0.1s;
height: 30px;
&.error {
border-bottom: 1px solid red !important;
}
}
.keyField {
position: relative;
font-size: 14px;
height: 30px;
&.notEdit {
border-bottom: 1px solid transparent !important;
}
}
.active {
border-bottom: 1px solid rgb(128, 177, 255);
}
}
.cssBox {
:global {
.ant-collapse-borderless > .ant-collapse-item {
border-bottom: 1px solid #e4e4e4;
}
.ant-collapse-borderless > .ant-collapse-item:last-child {
border-bottom: none;
}
.ant-collapse-content-box {
padding-bottom: 30px !important;
}
}
}
================================================
FILE: packages/engine/src/component/CSSPropertiesEditor/util.ts
================================================
export const getTextWidth = async (text: string, fontSize = 14) => {
return new Promise((resolve) => {
const span = document.createElement('span');
span.innerHTML = text;
span.style.fontSize = `${fontSize}px`;
span.style.position = 'fixed';
span.style.left = '-1000px';
span.style.bottom = '-1000px';
span.style.display = 'inline-block';
document.body.appendChild(span);
setTimeout(() => {
const style = window.getComputedStyle(span);
resolve(style.width);
setTimeout(() => {
document.body.removeChild(span);
});
});
});
};
================================================
FILE: packages/engine/src/component/CSSPropertiesVariableBindEditor/SingleProperty.tsx
================================================
import { AutoComplete, Button, ConfigProvider } from 'antd';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
import { BaseSelectRef } from 'rc-select';
import clsx from 'clsx';
import { CNodePropsTypeEnum, JSExpressionPropType } from '@chamn/model';
import { InputStatus } from 'antd/es/_util/statusUtils';
import { CSSPropertyList } from './cssProperties';
import { forwardRef, useState, useEffect, useRef, useImperativeHandle } from 'react';
import { ExpressionSetter } from '../CustomSchemaForm/components/Setters/ExpressionSetter';
import { UseCRightPanelContext } from '@/plugins/RightPanel/context';
import styles from './style.module.scss';
const defaultPropertyOptions = CSSPropertyList.map((el) => {
return {
value: el,
};
});
export type InnerSinglePropertyEditorProps = {
value?: {
property: string;
value: JSExpressionPropType | string;
};
onValueChange: (value: { property: string; value: JSExpressionPropType | string }) => void;
onDelete?: () => void;
onCreate?: (value: { property: string; value: JSExpressionPropType | string }) => {
errorKey?: string[];
} | void;
mod?: 'create' | 'edit';
};
export type InnerSinglePropertyEditorRef = {
reset: () => void;
};
export const SinglePropertyEditor = forwardRef(
function SinglePropertyEditorCore(props, ref) {
const [keyFormatStatus, setKeyFormatStatus] = useState('');
const rightPanelContext = UseCRightPanelContext();
const { mod = 'create' } = props;
const [innerValue, setInnerVal] = useState<{
property: string;
value: JSExpressionPropType | string;
}>({
property: props.value?.property || '',
value: props.value?.value || '',
});
useEffect(() => {
if (props.value) {
setInnerVal(props.value);
}
}, [props.value]);
const [propertyOptions, setPropertyOptions] = useState(defaultPropertyOptions);
const onSearch = (searchText: string) => {
const newOptions = defaultPropertyOptions.filter((el) => el.value.includes(searchText));
if (!searchText) {
setPropertyOptions(defaultPropertyOptions);
} else {
setPropertyOptions(newOptions);
}
};
const updateOuterValue = (newValue: typeof innerValue) => {
props.onValueChange({
...newValue,
});
};
const propertyKeyRef = useRef(null);
useImperativeHandle(
ref,
() => {
return {
reset: () => {
setInnerVal({
property: '',
value: {
type: CNodePropsTypeEnum.EXPRESSION,
value: '',
},
});
propertyKeyRef.current?.focus();
},
};
},
[]
);
/// 创建时
const innerOnCreate = () => {
if (innerValue.property === '') {
setKeyFormatStatus('error');
return;
}
setKeyFormatStatus('');
const res = props.onCreate?.(innerValue);
if (res?.errorKey?.includes('key')) {
setKeyFormatStatus('error');
}
};
return (
<>
Name
{
setKeyFormatStatus('');
const newVal = {
...innerValue,
property: val,
};
setInnerVal(newVal);
updateOuterValue(newVal);
}}
className={clsx([styles.inputBox])}
onBlur={() => {
updateOuterValue(innerValue);
}}
placeholder="property"
options={propertyOptions}
/>
{mod === 'create' && (
}
onClick={innerOnCreate}
>
)}
{mod !== 'create' && (
)}
{props.onDelete && mod === 'edit' && (
{
props.onDelete?.();
}}
>
)}
);
}
);
================================================
FILE: packages/engine/src/component/CSSPropertiesVariableBindEditor/cssProperties.ts
================================================
const CSSSourceInfo = {
cssColors: {
aliceblue: '#f0f8ff',
antiquewhite: '#faebd7',
aqua: '#00ffff',
aquamarine: '#7fffd4',
azure: '#f0ffff',
beige: '#f5f5dc',
bisque: '#ffe4c4',
black: '#000000',
blanchedalmond: '#ffebcd',
blue: '#0000ff',
blueviolet: '#8a2be2',
brown: '#a52a2a',
burlywood: '#deb887',
cadetblue: '#5f9ea0',
chartreuse: '#7fff00',
chocolate: '#d2691e',
coral: '#ff7f50',
cornflowerblue: '#6495ed',
cornsilk: '#fff8dc',
crimson: '#dc143c',
cyan: '#00ffff',
darkblue: '#00008b',
darkcyan: '#008b8b',
darkgoldenrod: '#b8860b',
darkgray: '#a9a9a9',
darkgreen: '#006400',
darkgrey: '#a9a9a9',
darkkhaki: '#bdb76b',
darkmagenta: '#8b008b',
darkolivegreen: '#556b2f',
darkorange: '#ff8c00',
darkorchid: '#9932cc',
darkred: '#8b0000',
darksalmon: '#e9967a',
darkseagreen: '#8fbc8f',
darkslateblue: '#483d8b',
darkslategray: '#2f4f4f',
darkslategrey: '#2f4f4f',
darkturquoise: '#00ced1',
darkviolet: '#9400d3',
deeppink: '#ff1493',
deepskyblue: '#00bfff',
dimgray: '#696969',
dimgrey: '#696969',
dodgerblue: '#1e90ff',
firebrick: '#b22222',
floralwhite: '#fffaf0',
forestgreen: '#228b22',
fuchsia: '#ff00ff',
gainsboro: '#dcdcdc',
ghostwhite: '#f8f8ff',
goldenrod: '#daa520',
gold: '#ffd700',
gray: '#808080',
green: '#008000',
greenyellow: '#adff2f',
grey: '#808080',
honeydew: '#f0fff0',
hotpink: '#ff69b4',
indianred: '#cd5c5c',
indigo: '#4b0082',
ivory: '#fffff0',
khaki: '#f0e68c',
lavenderblush: '#fff0f5',
lavender: '#e6e6fa',
lawngreen: '#7cfc00',
lemonchiffon: '#fffacd',
lightblue: '#add8e6',
lightcoral: '#f08080',
lightcyan: '#e0ffff',
lightgoldenrodyellow: '#fafad2',
lightgray: '#d3d3d3',
lightgreen: '#90ee90',
lightgrey: '#d3d3d3',
lightpink: '#ffb6c1',
lightsalmon: '#ffa07a',
lightseagreen: '#20b2aa',
lightskyblue: '#87cefa',
lightslategray: '#778899',
lightslategrey: '#778899',
lightsteelblue: '#b0c4de',
lightyellow: '#ffffe0',
lime: '#00ff00',
limegreen: '#32cd32',
linen: '#faf0e6',
magenta: '#ff00ff',
maroon: '#800000',
mediumaquamarine: '#66cdaa',
mediumblue: '#0000cd',
mediumorchid: '#ba55d3',
mediumpurple: '#9370db',
mediumseagreen: '#3cb371',
mediumslateblue: '#7b68ee',
mediumspringgreen: '#00fa9a',
mediumturquoise: '#48d1cc',
mediumvioletred: '#c71585',
midnightblue: '#191970',
mintcream: '#f5fffa',
mistyrose: '#ffe4e1',
moccasin: '#ffe4b5',
navajowhite: '#ffdead',
navy: '#000080',
oldlace: '#fdf5e6',
olive: '#808000',
olivedrab: '#6b8e23',
orange: '#ffa500',
orangered: '#ff4500',
orchid: '#da70d6',
palegoldenrod: '#eee8aa',
palegreen: '#98fb98',
paleturquoise: '#afeeee',
palevioletred: '#db7093',
papayawhip: '#ffefd5',
peachpuff: '#ffdab9',
peru: '#cd853f',
pink: '#ffc0cb',
plum: '#dda0dd',
powderblue: '#b0e0e6',
purple: '#800080',
rebeccapurple: '#663399',
red: '#ff0000',
rosybrown: '#bc8f8f',
royalblue: '#4169e1',
saddlebrown: '#8b4513',
salmon: '#fa8072',
sandybrown: '#f4a460',
seagreen: '#2e8b57',
seashell: '#fff5ee',
sienna: '#a0522d',
silver: '#c0c0c0',
skyblue: '#87ceeb',
slateblue: '#6a5acd',
slategray: '#708090',
slategrey: '#708090',
snow: '#fffafa',
springgreen: '#00ff7f',
steelblue: '#4682b4',
tan: '#d2b48c',
teal: '#008080',
thistle: '#d8bfd8',
tomato: '#ff6347',
turquoise: '#40e0d0',
violet: '#ee82ee',
wheat: '#f5deb3',
white: '#ffffff',
whitesmoke: '#f5f5f5',
yellow: '#ffff00',
yellowgreen: '#9acd32',
},
cssKeyValue: {
'align-content': {
values: ['center', 'flex-end', 'flex-start', 'space-around', 'space-between', 'stretch'],
},
'align-items': {
values: ['baseline', 'center', 'flex-end', 'flex-start', 'stretch'],
},
'align-self': {
values: [
'auto',
'normal',
'self-start',
'self-end',
'baseline',
'center',
'start',
'end',
'flex-end',
'flex-start',
'safe',
'stretch',
'unsafe',
],
},
all: { values: [] },
animation: { values: [] },
'animation-delay': { values: [] },
'animation-direction': {
values: ['alternate', 'alternate-reverse', 'normal', 'reverse'],
},
'animation-duration': { values: [] },
'animation-fill-mode': {
values: ['backwards', 'both', 'forwards', 'none'],
},
'animation-iteration-count': { values: ['infinite'] },
'animation-name': { values: ['none'] },
'animation-play-state': { values: ['paused', 'running'] },
'animation-timing-function': {
values: ['cubic-bezier()', 'ease', 'ease-in', 'ease-in-out', 'ease-out', 'linear', 'step-end', 'step-start', 'steps()'],
},
'backface-visibility': { values: ['hidden', 'visible'] },
background: { values: [], type: 'color' },
'background-attachment': { values: ['fixed', 'local', 'scroll'] },
'background-blend-mode': {
values: [
'color',
'color-burn',
'color-dodge',
'darken',
'difference',
'exclusion',
'hard-light',
'hue',
'lighten',
'luminosity',
'multiply',
'normal',
'overlay',
'saturation',
'screen',
'soft-light',
],
},
'background-clip': { values: ['border-box', 'content-box', 'padding-box'] },
'background-color': { values: [], type: 'color' },
'background-image': {
values: ['image()', 'linear-gradient()', 'radial-gradient()', 'repeating-linear-gradient()', 'repeating-radial-gradient()', 'url()'],
},
'background-origin': {
values: ['border-box', 'content-box', 'padding-box'],
},
'background-position': {
values: ['left', 'center', 'right', 'bottom', 'top'],
},
'background-repeat': {
values: ['no-repeat', 'repeat', 'repeat-x', 'repeat-y', 'round', 'space'],
},
'background-size': { values: ['auto', 'contain', 'cover'] },
border: { values: [] },
'border-collapse': { values: ['collapse', 'separate'] },
'border-color': { values: [], type: 'color' },
'border-spacing': { values: [] },
'border-style': {
values: ['dashed', 'dotted', 'double', 'groove', 'hidden', 'inset', 'none', 'outset', 'ridge', 'solid'],
},
'border-bottom': { values: [] },
'border-bottom-color': { values: [], type: 'color' },
'border-bottom-left-radius': { values: [] },
'border-bottom-right-radius': { values: [] },
'border-bottom-style': {
values: ['dashed', 'dotted', 'double', 'groove', 'hidden', 'inset', 'none', 'outset', 'ridge', 'solid'],
},
'border-bottom-width': { values: ['medium', 'thin', 'thick'] },
'border-image': { values: ['url()'] },
'border-image-outset': { values: [] },
'border-image-slice': { values: [] },
'border-image-source': { values: [] },
'border-image-repeat': { values: ['repeat', 'round', 'space', 'stretch'] },
'border-image-width': { values: ['auto'] },
'border-left': { values: [] },
'border-left-color': { values: [], type: 'color' },
'border-left-style': {
values: ['dashed', 'dotted', 'double', 'groove', 'hidden', 'inset', 'none', 'outset', 'ridge', 'solid'],
},
'border-left-width': { values: ['medium', 'thin', 'thick'] },
'border-radius': { values: [] },
'border-right': { values: [] },
'border-right-color': { values: [], type: 'color' },
'border-right-style': {
values: ['dashed', 'dotted', 'double', 'groove', 'hidden', 'inset', 'none', 'outset', 'ridge', 'solid'],
},
'border-right-width': { values: ['medium', 'thin', 'thick'] },
'border-top': { values: [] },
'border-top-color': { values: [], type: 'color' },
'border-top-left-radius': { values: [] },
'border-top-right-radius': { values: [] },
'border-top-style': {
values: ['dashed', 'dotted', 'double', 'groove', 'hidden', 'inset', 'none', 'outset', 'ridge', 'solid'],
},
'border-top-width': { values: ['medium', 'thin', 'thick'] },
'border-width': { values: ['medium', 'thin', 'thick'] },
'box-decoration-break': { values: ['clone', 'slice'] },
'box-shadow': { values: ['none'] },
'box-sizing': { values: ['border-box', 'content-box'] },
bottom: { values: ['auto'] },
'break-after': {
values: ['always', 'auto', 'avoid', 'avoid-column', 'avoid-page', 'avoid-region', 'column', 'left', 'page', 'region', 'right'],
},
'break-before': {
values: ['always', 'auto', 'avoid', 'avoid-column', 'avoid-page', 'avoid-region', 'column', 'left', 'page', 'region', 'right'],
},
'break-inside': {
values: ['auto', 'avoid', 'avoid-column', 'avoid-page', 'avoid-region'],
},
'caption-side': { values: ['bottom', 'top'] },
'caret-color': { values: ['auto'], type: 'color' },
clear: { values: ['both', 'left', 'none', 'right'] },
clip: { values: ['auto'] },
color: { values: [], type: 'color' },
columns: { values: [] },
'column-count': { values: [] },
'column-fill': { values: ['auto', 'balance'] },
'column-gap': { values: ['normal'] },
'column-rule': { values: [] },
'column-rule-color': { values: [], type: 'color' },
'column-rule-style': {
values: ['dashed', 'dotted', 'double', 'groove', 'hidden', 'inset', 'none', 'outset', 'ridge', 'solid'],
},
'column-rule-width': { values: ['medium', 'thin', 'thick'] },
'column-span': { values: ['all', 'none'] },
'column-width': { values: ['auto'] },
content: {
values: ['attr()', 'close-quote', 'no-close-quote', 'no-open-quote', 'normal', 'none', 'open-quote'],
},
'counter-increment': { values: ['none'] },
'counter-reset': { values: ['none'] },
cursor: {
values: [
'alias',
'all-scroll',
'auto',
'cell',
'col-resize',
'context-menu',
'copy',
'crosshair',
'default',
'e-resize',
'ew-resize',
'grab',
'grabbing',
'help',
'move',
'n-resize',
'ne-resize',
'nesw-resize',
'no-drop',
'none',
'not-allowed',
'ns-resize',
'nw-resize',
'nwse-resize',
'pointer',
'progress',
'row-resize',
's-resize',
'se-resize',
'sw-resize',
'text',
'vertical-text',
'w-resize',
'wait',
'zoom-in',
'zoom-out',
],
},
direction: { values: ['ltr', 'rtl'] },
display: {
values: [
'block',
'contents',
'flex',
'flow-root',
'grid',
'inline',
'inline-block',
'inline-flex',
'inline-grid',
'inline-table',
'list-item',
'none',
'run-in',
'subgrid',
'table',
'table-caption',
'table-cell',
'table-column',
'table-column-group',
'table-footer-group',
'table-header-group',
'table-row',
'table-row-group',
],
},
'empty-cells': { values: ['hide', 'show'] },
fill: { values: [] },
filter: {
values: [
'blur()',
'brightness()',
'contrast()',
'custom()',
'drop-shadow()',
'grayscale()',
'hue-rotate()',
'invert()',
'none',
'opacity()',
'sepia()',
'saturate()',
'url()',
],
},
flex: { values: ['auto', 'none'] },
'flex-basis': { values: ['auto'] },
'flex-direction': {
values: ['column', 'column-reverse', 'row', 'row-reverse'],
},
'flex-flow': {
values: ['column', 'column-reverse', 'nowrap', 'row', 'row-reverse', 'wrap', 'wrap-reverse'],
},
'flex-grow': { values: [] },
'flex-shrink': { values: [] },
'flex-wrap': { values: ['nowrap', 'wrap', 'wrap-reverse'] },
float: { values: ['left', 'right', 'none', 'inline-start', 'inline-end'] },
'flow-into': { values: ['none'], type: 'named-flow' },
'flow-from': { values: ['none'], type: 'named-flow' },
font: { values: [] },
'font-display': {
values: ['auto', 'block', 'swap', 'fallback', 'optional'],
},
'font-family': {
values: ['auto', 'cursive', 'fantasy', 'monospace', 'sans-serif', 'serif'],
},
'font-feature-settings': { values: ['normal'] },
'font-kerning': { values: ['auto', 'none', 'normal'] },
'font-language-override': { values: ['normal'] },
'font-size': {
values: ['xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large', 'xxx-large', 'larger', 'smaller'],
},
'font-size-adjust': { values: ['auto', 'none'] },
'font-stretch': {
values: [
'condensed',
'expanded',
'extra-condensed',
'extra-expanded',
'normal',
'semi-condensed',
'semi-expanded',
'ultra-condensed',
'ultra-expanded',
],
},
'font-style': { values: ['italic', 'normal', 'oblique'] },
'font-synthesis': { values: ['none', 'style', 'weight'] },
'font-variant': { values: ['normal', 'small-caps'] },
'font-variant-alternates': { values: ['normal'] },
'font-variant-caps': {
values: ['normal', 'small-caps', 'all-small-caps', 'petite-caps', 'all-petite-caps', 'unicase', 'titling-caps'],
},
'font-variant-east-asian': { values: ['normal'] },
'font-variant-ligatures': { values: ['normal', 'none'] },
'font-variant-numeric': { values: ['normal'] },
'font-variant-position': { values: ['normal', 'sub', 'super'] },
'font-weight': {
values: ['bold', 'bolder', 'lighter', 'normal', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
},
gap: { values: ['revert-layer'] },
grid: { values: [] },
'grid-area': { values: [] },
'grid-auto-columns': { values: [] },
'grid-auto-flow': { values: ['row', 'column', 'dense'] },
'grid-auto-rows': { values: [] },
'grid-column': { values: ['auto'] },
'grid-column-end': { values: [] },
'grid-column-gap': { values: [] },
'grid-column-start': { values: [] },
'grid-gap': { values: [] },
'grid-row': { values: ['auto'] },
'grid-row-end': { values: [] },
'grid-row-start': { values: [] },
'grid-row-gap': { values: [] },
'grid-template': { values: ['none'] },
'grid-template-areas': { values: [] },
'grid-template-columns': { values: ['auto'] },
'grid-template-rows': { values: ['auto'] },
'hanging-punctuation': {
values: ['allow-end', 'first', 'force-end', 'last', 'none'],
},
height: { values: ['auto', 'max-content', 'min-content', 'fit-content'] },
hyphens: { values: ['auto', 'manual', 'none'] },
'image-orientation': { values: [] },
'image-resolution': { values: ['from-image', 'snap'] },
isolation: { values: ['auto', 'isolate'] },
'justify-content': {
values: ['center', 'flex-end', 'flex-start', 'space-around', 'space-between'],
},
'justify-items': {
values: [
'auto',
'normal',
'stretch',
'center',
'start',
'end',
'flex-start',
'flex-end',
'self-start',
'self-end',
'left',
'right',
'baseline',
'first',
'last',
'safe',
'unsafe',
'legacy',
],
},
'justify-self': {
values: [
'auto',
'normal',
'stretch',
'center',
'start',
'end',
'flex-start',
'flex-end',
'self-start',
'self-end',
'left',
'right',
'baseline',
'first',
'last',
'safe',
'unsafe',
],
},
left: { values: ['auto'] },
'letter-spacing': { values: ['normal'] },
'line-height': { values: ['normal'] },
'list-style': {
values: [
'none',
'url()',
'armenian',
'circle',
'decimal',
'decimal-leading-zero',
'disc',
'georgian',
'inside',
'lower-alpha',
'lower-greek',
'lower-latin',
'lower-roman',
'outside',
'square',
'upper-alpha',
'upper-latin',
'upper-roman',
],
},
'list-style-image': { values: ['none', 'url()'] },
'list-style-position': { values: ['inside', 'outside'] },
'list-style-type': {
values: [
'armenian',
'circle',
'decimal',
'decimal-leading-zero',
'disc',
'georgian',
'lower-alpha',
'lower-greek',
'lower-latin',
'lower-roman',
'none',
'square',
'upper-alpha',
'upper-latin',
'upper-roman',
],
},
margin: { values: ['auto'] },
'margin-bottom': { values: ['auto'] },
'margin-left': { values: ['auto'] },
'margin-right': { values: ['auto'] },
'margin-top': { values: ['auto'] },
'max-height': { values: ['none'] },
'max-width': { values: ['none'] },
'min-height': { values: [] },
'min-width': { values: [] },
'mix-blend-mode': {
values: [
'color',
'color-burn',
'color-dodge',
'darken',
'difference',
'exclusion',
'hard-light',
'hue',
'lighten',
'luminosity',
'multiply',
'normal',
'overlay',
'saturation',
'screen',
'soft-light',
],
},
'object-fit': {
values: ['contain', 'cover', 'fill', 'none', 'scale-down'],
},
'object-position': { values: ['left', 'center', 'right', 'bottom', 'top'] },
opacity: { values: [] },
order: { values: [] },
orphans: { values: [] },
outline: { values: [] },
'outline-color': { values: ['invert'], type: 'color' },
'outline-offset': { values: [] },
'outline-style': {
values: ['dashed', 'dotted', 'double', 'groove', 'hidden', 'inset', 'none', 'outset', 'ridge', 'solid'],
},
'outline-width': { values: ['medium', 'thin', 'thick'] },
overflow: { values: ['auto', 'hidden', 'scroll', 'visible'] },
'overflow-x': { values: ['auto', 'hidden', 'scroll', 'visible'] },
'overflow-y': { values: ['auto', 'hidden', 'scroll', 'visible'] },
'overflow-wrap': { values: ['normal', 'anywhere', 'break-word'] },
padding: { values: [] },
'padding-bottom': { values: [] },
'padding-left': { values: [] },
'padding-right': { values: [] },
'padding-top': { values: [] },
'page-break-after': {
values: ['always', 'auto', 'avoid', 'left', 'right'],
},
'page-break-before': {
values: ['always', 'auto', 'avoid', 'left', 'right'],
},
'page-break-inside': { values: ['auto', 'avoid'] },
perspective: { values: ['none'] },
'perspective-origin': {
values: ['bottom', 'center', 'left', 'right', 'top'],
},
'pointer-events': {
values: ['all', 'auto', 'fill', 'none', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'],
},
position: { values: ['absolute', 'fixed', 'relative', 'static', 'sticky'] },
quotes: { values: ['none'] },
'region-break-after': {
values: ['always', 'auto', 'avoid', 'avoid-column', 'avoid-page', 'avoid-region', 'column', 'left', 'page', 'region', 'right'],
},
'region-break-before': {
values: ['always', 'auto', 'avoid', 'avoid-column', 'avoid-page', 'avoid-region', 'column', 'left', 'page', 'region', 'right'],
},
'region-break-inside': {
values: ['auto', 'avoid', 'avoid-column', 'avoid-page', 'avoid-region'],
},
'region-fragment': { values: ['auto', 'break'] },
resize: { values: ['both', 'horizontal', 'none', 'vertical'] },
right: { values: ['auto'] },
'scroll-behavior': { values: ['auto', 'smooth'] },
'scroll-snap-type': {
values: ['none', 'x', 'y', 'block', 'inline', 'both', 'mandatory', 'proximity'],
},
src: { values: ['url()'] },
'shape-image-threshold': { values: [] },
'shape-inside': {
values: ['auto', 'circle()', 'ellipse()', 'outside-shape', 'polygon()', 'rectangle()'],
},
'shape-margin': { values: [] },
'shape-outside': {
values: [
'none',
'circle()',
'ellipse()',
'polygon()',
'inset()',
'margin-box',
'border-box',
'padding-box',
'content-box',
'url()',
'image()',
'linear-gradient()',
'radial-gradient()',
'repeating-linear-gradient()',
'repeating-radial-gradient()',
],
},
'tab-size': { values: [] },
'table-layout': { values: ['auto', 'fixed'] },
'text-align': {
values: ['start', 'end', 'center', 'left', 'justify', 'right', 'match-parent', 'justify-all'],
},
'text-align-last': { values: ['center', 'left', 'justify', 'right'] },
'text-decoration': {
values: ['line-through', 'none', 'overline', 'underline'],
},
'text-decoration-color': { values: [], type: 'color' },
'text-decoration-line': {
values: ['line-through', 'none', 'overline', 'underline'],
},
'text-decoration-skip': {
values: ['edges', 'ink', 'none', 'objects', 'spaces'],
},
'text-decoration-style': {
values: ['dashed', 'dotted', 'double', 'solid', 'wavy'],
},
'text-emphasis': { values: [] },
'text-emphasis-color': { values: [], type: 'color' },
'text-emphasis-position': { values: ['above', 'below', 'left', 'right'] },
'text-emphasis-style': {
values: ['circle', 'dot', 'double-circle', 'filled', 'none', 'open', 'sesame', 'triangle'],
},
'text-indent': { values: [] },
'text-justify': {
values: ['auto', 'none', 'inter-word', 'inter-character'],
},
'text-overflow': { values: ['clip', 'ellipsis'] },
'text-shadow': { values: [] },
'text-rendering': {
values: ['auto', 'geometricPrecision', 'optimizeLegibility', 'optimizeSpeed'],
},
'text-transform': {
values: ['capitalize', 'full-width', 'lowercase', 'none', 'uppercase'],
},
'text-underline-position': {
values: ['alphabetic', 'auto', 'below', 'left', 'right'],
},
top: { values: ['auto'] },
transform: {
values: [
'matrix()',
'matrix3d()',
'none',
'perspective()',
'rotate()',
'rotate3d()',
'rotateX()',
'rotateY()',
'rotateZ()',
'scale()',
'scale3d()',
'scaleX()',
'scaleY()',
'scaleZ()',
'skewX()',
'skewY()',
'translate()',
'translate3d()',
'translateX()',
'translateY()',
'translateZ()',
],
},
'transform-origin': {
values: ['bottom', 'center', 'left', 'right', 'top'],
},
'transform-style': { values: ['flat', 'preserve-3d'] },
transition: { values: [] },
'transition-delay': { values: [] },
'transition-duration': { values: [] },
'transition-property': { values: ['all', 'none'] },
'transition-timing-function': {
values: ['cubic-bezier()', 'ease', 'ease-in', 'ease-in-out', 'ease-out', 'linear', 'step-end', 'step-start', 'steps()'],
},
'unicode-bidi': { values: ['bidi-override', 'embed', 'normal'] },
'unicode-range': { values: [] },
'user-select': { values: ['all', 'auto', 'contain', 'none', 'text'] },
'vertical-align': {
values: ['baseline', 'bottom', 'middle', 'sub', 'super', 'text-bottom', 'text-top', 'top'],
},
visibility: { values: ['collapse', 'hidden', 'visible'] },
'white-space': {
values: ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap'],
},
widows: { values: [] },
width: { values: ['auto', 'max-content', 'min-content', 'fit-content'] },
'will-change': {
values: ['auto', 'contents', 'opacity', 'scroll-position'],
},
'word-break': { values: ['normal', 'break-all', 'keep-all'] },
'word-spacing': { values: ['normal'] },
'z-index': { values: ['auto'] },
},
};
export const CSSProperties = CSSSourceInfo.cssKeyValue;
export const CSSColors = CSSSourceInfo.cssColors;
export type CSSPropertiesKey = keyof typeof CSSProperties;
export const CSSPropertyList = Object.keys(CSSSourceInfo.cssKeyValue);
================================================
FILE: packages/engine/src/component/CSSPropertiesVariableBindEditor/index.tsx
================================================
import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
import { ConfigProvider, message } from 'antd';
import { JSExpressionPropType } from '@chamn/model';
import styles from './style.module.scss';
import { InnerSinglePropertyEditorRef, SinglePropertyEditor } from './SingleProperty';
export type CSSPropertiesVariableBindEditorProps = {
initialValue?: { property: string; value: string | JSExpressionPropType }[];
onValueChange?: (val: { property: string; value: string }[]) => void;
};
export type CSSPropertiesVariableBindEditorRef = {
setValue: (val: { property: string; value: string | JSExpressionPropType }[]) => void;
};
export const CSSPropertiesVariableBindEditor = forwardRef<
CSSPropertiesVariableBindEditorRef,
CSSPropertiesVariableBindEditorProps
>(function CSSPropertiesVariableBindEditorCore(props, ref) {
const [propertyList, setPropertyList] = useState<{ property: string; value: any }[]>([]);
useImperativeHandle(
ref,
() => {
return {
setValue: (val) => {
setPropertyList(val);
},
};
},
[]
);
useEffect(() => {
if (props.initialValue) {
setPropertyList(props.initialValue);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const [newProperty, setNewProperty] = useState<{
property: string;
value: JSExpressionPropType | string;
}>({
property: '',
value: {
type: 'EXPRESSION',
value: '',
},
});
const innerOnValueChange = (val: typeof propertyList) => {
props.onValueChange?.(val);
};
const createPropertyRef = useRef(null);
return (
{propertyList.map((el, index) => {
return (
{
if (newVal.property === '') {
propertyList.splice(index, 1);
setPropertyList([...propertyList]);
return;
}
propertyList[index] = newVal;
setPropertyList([...propertyList]);
innerOnValueChange(propertyList);
}}
onDelete={() => {
propertyList.splice(index, 1);
setPropertyList([...propertyList]);
innerOnValueChange(propertyList);
}}
/>
);
})}
{
setNewProperty(newVal);
}}
onCreate={(val) => {
const hasExits = propertyList.find((el) => el.property === val.property);
if (hasExits) {
message.error('The attribute name already exists, please replace');
return {
errorKey: [val.property],
};
}
propertyList.push(val);
setPropertyList([...propertyList]);
innerOnValueChange(propertyList);
setNewProperty({
property: '',
value: {
type: 'EXPRESSION',
value: '',
},
});
}}
/>
);
});
================================================
FILE: packages/engine/src/component/CSSPropertiesVariableBindEditor/style.module.scss
================================================
.cssFieldBox {
display: flex;
color: $textColor !important;
:global {
.ant-select-selector input {
color: $textColor !important;
}
}
.row {
display: flex;
padding-bottom: 6px;
align-items: center;
}
.fieldLabel {
display: inline-block;
width: 45px;
flex-shrink: 0;
font-size: 12px;
}
.leftBox {
flex: 1;
}
.rightBox {
padding-left: 10px;
}
.inputBox {
flex: 1;
}
}
.cssBox {
:global {
.ant-collapse-borderless > .ant-collapse-item {
border-bottom: 1px solid #e4e4e4;
}
.ant-collapse-borderless > .ant-collapse-item:last-child {
border-bottom: none;
}
.ant-collapse-content-box {
padding-bottom: 30px !important;
}
}
}
.switchBtn {
margin-top: 10px;
color: $fontColor;
font-size: 12px;
padding: 0 5px 0 10px;
}
================================================
FILE: packages/engine/src/component/CSSPropertiesVariableBindEditor/util.ts
================================================
export const getTextWidth = async (text: string, fontSize = 14) => {
return new Promise((resolve) => {
const span = document.createElement('span');
span.innerHTML = text;
span.style.fontSize = `${fontSize}px`;
span.style.position = 'fixed';
span.style.left = '-1000px';
span.style.bottom = '-1000px';
span.style.display = 'inline-block';
document.body.appendChild(span);
setTimeout(() => {
const style = window.getComputedStyle(span);
resolve(style.width);
setTimeout(() => {
document.body.removeChild(span);
});
});
});
};
================================================
FILE: packages/engine/src/component/CSSSizeInput/index.tsx
================================================
/* eslint-disable react-refresh/only-export-components */
import { ConfigProvider, InputProps, Select } from 'antd';
import { MouseEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import styles from './style.module.scss';
import { addEventListenerReturnCancel } from '@chamn/layout';
import { InputNumberPlus } from '../InputNumberPlus';
import clsx from 'clsx';
type CumulativeInfoType = {
x: number;
y: number;
cumulativeX: number;
cumulativeY: number;
};
const UNIT_LIST = [
{ value: 'px', label: 'px' },
{ value: '%', label: '%' },
{ value: 'vw', label: 'vw' },
{ value: 'vh', label: 'vh' },
{ value: 'rem', label: 'rem' },
];
export const useDragSize = function (options?: {
onStart?: (data: CumulativeInfoType) => void;
onChange?: (data: CumulativeInfoType) => void;
onEnd?: (data: CumulativeInfoType) => void;
limitCumulative?: {
x?: [number | undefined, number | undefined];
y?: [number | undefined, number | undefined];
};
}) {
const cumulativeInfo = useRef<{
status: 'running' | '';
start: CumulativeInfoType;
processing: CumulativeInfoType;
mouseDown: boolean;
}>({
status: '',
start: {
x: 0,
y: 0,
cumulativeX: 0,
cumulativeY: 0,
},
processing: {
x: 0,
y: 0,
cumulativeX: 0,
cumulativeY: 0,
},
mouseDown: false,
});
const processEnd: MouseEventHandler = useCallback(() => {
cumulativeInfo.current.mouseDown = false;
const { processing } = cumulativeInfo.current;
options?.onEnd?.({ ...processing });
cumulativeInfo.current.status = '';
cumulativeInfo.current.processing.cumulativeX = 0;
cumulativeInfo.current.processing.cumulativeY = 0;
}, [options]);
const onMouseDown: MouseEventHandler = useCallback(() => {
cumulativeInfo.current.mouseDown = true;
}, []);
const processMove: MouseEventHandler = useCallback(
(e) => {
if (!cumulativeInfo.current.mouseDown) {
return;
}
const { start, processing } = cumulativeInfo.current;
// 判断是否是拖拽
const tempCumulativeX = e.clientX - start.x;
const tempCumulativeY = e.clientY - start.y;
const shakeDIstance = 10;
if (
cumulativeInfo.current.status !== 'running' &&
(Math.abs(tempCumulativeX) > shakeDIstance || Math.abs(tempCumulativeY) > shakeDIstance)
) {
cumulativeInfo.current.status = 'running';
const startInfo = cumulativeInfo.current.start;
startInfo.x = e.clientX;
startInfo.y = e.clientY;
options?.onStart?.({ ...startInfo });
}
if (cumulativeInfo.current.status !== 'running') {
return;
}
processing.x = e.clientX;
processing.y = e.clientY;
processing.cumulativeX = e.clientX - start.x;
processing.cumulativeY = e.clientY - start.y;
// 超出最大累积便宜，直接结束拖拽
const [minX, maxX] = options?.limitCumulative?.x || [];
if (minX !== undefined && processing.cumulativeX < minX) {
processEnd(e);
return;
}
if (maxX !== undefined && processing.cumulativeX > maxX) {
processEnd(e);
return;
}
options?.onChange?.({ ...processing });
},
[options, processEnd]
);
useEffect(() => {
const globalMoveDispose = addEventListenerReturnCancel(document.body, 'mousemove', (e) => {
processMove(e as any);
});
const globalUpDispose = addEventListenerReturnCancel(document.body, 'mouseup', (e) => {
processEnd(e as any);
});
const globalLeaveDispose = addEventListenerReturnCancel(document.body, 'mouseleave', (e) => {
processEnd(e as any);
});
return () => {
globalMoveDispose();
globalUpDispose();
globalLeaveDispose();
};
}, [processEnd, processMove]);
return {
onMouseDown,
};
};
type MinMaxType = {
px?: number;
vw?: number;
vh?: number;
rem?: number;
};
export type CSSSizeInputProps = {
value?: string;
onValueChange?: (newVal: string | undefined) => void;
min?: MinMaxType | number;
max?: MinMaxType | number;
size?: InputProps['size'];
style?: React.CSSProperties;
className?: string;
unit?: boolean;
/** 累计的偏移量，映射为具体的值，默认 1:1 */
cumulativeTransform?: (params: CumulativeInfoType) => CumulativeInfoType;
unitList?: (keyof MinMaxType)[];
};
export const CSSSizeInput = (props: CSSSizeInputProps) => {
const outValue = String(props.value);
const [dragSizing, setDragSizing] = useState({
value: 0,
status: '',
});
const originalValObj = useMemo(() => {
const res: {
value: number | undefined;
unit: keyof MinMaxType;
} = {
value: undefined,
unit: 'px' as any,
};
if (props.value === undefined) {
return res;
}
const tempVal = parseFloat(props.value || '');
if (!isNaN(tempVal)) {
res.value = tempVal;
}
let unit: keyof MinMaxType = 'px';
if (res.value !== undefined) {
unit = outValue.replace(String(res.value), '').trim() as keyof MinMaxType;
}
if (['px', '%', 'rem', 'vw', 'vx'].includes(unit)) {
res.unit = unit || 'px';
}
return res;
}, [outValue, props.value]);
const currentUnitList = useMemo(() => {
if (!props.unitList) {
return UNIT_LIST;
}
return props.unitList
.map((el) => {
return UNIT_LIST.find((it) => it.value === el);
})
.filter(Boolean) as typeof UNIT_LIST;
}, [props.unitList]);
const currentMinMix = useMemo(() => {
return {
min: typeof props.min === 'number' ? props.min : props.min?.[originalValObj.unit],
max: typeof props.max === 'number' ? props.max : props.max?.[originalValObj.unit],
};
}, [props, originalValObj]);
const valObj = useMemo(() => {
const res = { ...originalValObj };
if (dragSizing.status === 'dragging') {
res.value = dragSizing.value;
}
return res;
}, [originalValObj, dragSizing]);
const updateValue = useCallback(
(val: { value: number | undefined; unit: string }) => {
let valStr: string | undefined = `${val.value}${val.unit}`;
if (val.value === undefined) {
valStr = undefined;
}
props.onValueChange?.(valStr);
},
[props]
);
const processNewVal = useCallback(
(cumulativeData: CumulativeInfoType, value: number | undefined) => {
let data = { ...cumulativeData };
if (props.cumulativeTransform) {
data = props.cumulativeTransform(data);
}
let num = value ?? 0;
if (isNaN(num)) {
num = 0;
}
let newVal = num + data.cumulativeX;
if (currentMinMix.min !== undefined) {
newVal = Math.max(newVal, currentMinMix.min);
}
if (currentMinMix.max !== undefined) {
newVal = Math.min(newVal, currentMinMix.max);
}
return newVal;
},
[currentMinMix.max, currentMinMix.min, props]
);
const onDragStart = useCallback(
(data: CumulativeInfoType) => {
setDragSizing({
status: 'dragging',
value: processNewVal(data, originalValObj.value),
});
},
[originalValObj.value, processNewVal]
);
const onDragMoveChange = useCallback(
(data: CumulativeInfoType) => {
const nV = processNewVal(data, originalValObj.value);
setDragSizing({
status: 'dragging',
value: nV,
});
},
[originalValObj.value, processNewVal]
);
const onDragEnd = useCallback(
(data: CumulativeInfoType) => {
const newVal = processNewVal(data, originalValObj.value);
if (dragSizing.status !== 'dragging') {
return;
}
updateValue({
value: newVal,
unit: originalValObj.unit,
});
setDragSizing({
status: '',
value: 0,
});
},
[dragSizing.status, originalValObj, processNewVal, updateValue]
);
const handleRef = useRef({
onStart: onDragStart,
onChange: onDragMoveChange,
onEnd: onDragEnd,
});
handleRef.current = {
onStart: onDragStart,
onChange: onDragMoveChange,
onEnd: onDragEnd,
};
const dragSizeHandle = useDragSize({
onStart: (data) => handleRef.current.onStart(data),
onChange: (data) => handleRef.current.onChange(data),
onEnd: (data) => handleRef.current.onEnd(data),
limitCumulative: {
x: [-60, undefined],
},
});
const unitSelect = (
{
updateValue({
value: valObj.value,
unit: val,
});
}}
style={{
width: '40px',
}}
popupMatchSelectWidth={false}
options={currentUnitList}
/>
);
return (
{
updateValue({
value: val,
unit: valObj.unit,
});
}}
/>
);
};
================================================
FILE: packages/engine/src/component/CSSSizeInput/style.module.scss
================================================
.cssSizeInput {
display: inline-block;
.unitSelect {
:global {
.ant-select-focused .ant-select-selector {
color: rgba(0, 0, 0, 0.675);
}
.ant-select-selector {
color: #585858 !important;
padding: 0 0 0 3px !important;
font-size: 12px;
}
.ant-select-selection-item {
padding-inline-end: 10px !important;
}
.ant-select-arrow {
inset-inline-end: 3px !important;
}
}
}
}
================================================
FILE: packages/engine/src/component/ClassNameEditor/index.tsx
================================================
import { forwardRef, useImperativeHandle, useRef } from 'react';
import { ConfigProvider } from 'antd';
import { CustomSchemaForm, CustomSchemaFormInstance } from '../CustomSchemaForm';
import { ClassNameType, CMaterialPropsType, CNode } from '@chamn/model';
import { CPluginCtx } from '@/core/pluginManager';
export type ClassNameEditorProps = {
initialValue?: ClassNameType[];
onValueChange?: (val: ClassNameType[]) => void;
pluginContext: CPluginCtx;
nodeModel: CNode;
};
export type ClassNameEditorRef = {
setValue: (val: ClassNameType[]) => void;
};
const properties: CMaterialPropsType = [
{
title: 'Class Names',
name: 'className',
valueType: 'array',
setters: [
{
componentName: 'ArraySetter',
props: {
sortLabelKey: 'name',
collapse: {
open: true,
},
item: {
setters: [
{
componentName: 'ShapeSetter',
props: {
elements: [
{
name: 'name',
title: '类名',
valueType: 'string',
setters: ['StringSetter'],
},
{
name: 'status',
title: '启用',
valueType: 'boolean',
setters: ['BooleanSetter', 'ExpressionSetter'],
},
],
},
initialValue: {},
},
],
initialValue: {
name: '',
status: true,
},
},
},
initialValue: [],
},
],
},
];
export const ClassNameEditor = forwardRef(function CSSPropertiesEditorCore(
props,
ref
) {
const formRef = useRef(null);
useImperativeHandle(ref, () => {
return {
setValue(newValue) {
formRef?.current?.setFields({
className: newValue || [],
});
},
};
});
return (
{
props.onValueChange?.(newVal.className || []);
}}
defaultSetterConfig={{}}
>
);
});
================================================
FILE: packages/engine/src/component/ClassNameEditor/style.module.scss
================================================
================================================
FILE: packages/engine/src/component/CustomColorPicker/index.tsx
================================================
import { ColorPicker, ColorPickerProps, GetProp } from 'antd';
import { forwardRef, useImperativeHandle, useState } from 'react';
export type CustomColorPickerRef = {
updateColor: (color: string) => void;
};
type Color = GetProp;
type CustomColorPickerProps = Omit & {
onChange: (color: string) => void;
};
export const CustomColorPicker = forwardRef(function CustomColorPicker(
props,
ref
) {
const [color, setColor] = useState();
useImperativeHandle(ref, () => {
return {
updateColor: (color: string) => {
setColor(color);
},
};
});
return (
{
setColor(val);
}}
onChangeComplete={(val) => {
props.onChange?.(val.toRgbString());
}}
/>
);
});
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/CFiledWithSwitchSetter/index.tsx
================================================
import { useContext, useMemo, useState } from 'react';
import { SetterObjType, SetterType } from '@chamn/model';
import { Dropdown, MenuProps } from 'antd';
import { SwapOutlined } from '@ant-design/icons';
import { CCustomSchemaFormContext } from '@/component/CustomSchemaForm/context';
import { getSetterList } from '@/component/CustomSchemaForm/utils';
import styles from './style.module.scss';
import { CField, CFieldProps } from '../Form/Field';
import { SetterSwitcherCore } from '../SetterSwitcher/core';
export const CFiledWithSwitchSetter = (
props: Omit & {
setterList: SetterType[];
onSetterChange?: (setterName: string) => void;
defaultSetterName?: string;
}
) => {
const { setterList: setters, defaultSetterName, ...restProps } = props;
const setterList = useMemo(() => {
return getSetterList(setters);
}, [setters]);
const { onSetterChange, defaultSetterConfig, pluginCtx, nodeId, customSetterMap } =
useContext(CCustomSchemaFormContext);
const keyPaths = [props.name];
const [currentSetter, setCurrentSetter] = useState(() => {
const currentSetterName = defaultSetterConfig[keyPaths.join('.')]?.setter || defaultSetterName || '';
return [...setterList].find((el) => el.componentName === currentSetterName) || setterList[0];
});
const menuItems = setterList.map((setter) => {
const setterName = setter?.componentName || '';
const setterRuntime = ({} as any)[setterName];
return {
key: setter.componentName,
label: setterRuntime?.setterName || setter.componentName,
};
});
const onChooseSetter: MenuProps['onClick'] = ({ key }) => {
const targetSetter = setterList.find((setter) => setter.componentName === key);
if (targetSetter) {
setCurrentSetter(targetSetter);
onSetterChange?.(keyPaths, targetSetter.componentName);
props.onSetterChange?.(targetSetter.componentName);
}
};
let switcher: any = (
{
e.preventDefault();
e.stopPropagation();
}}
className={styles.switchBtn}
>
);
if (menuItems.length === 1) {
switcher = null;
}
const setterProps = useMemo(() => {
let newProps = {
...(currentSetter?.props || {}),
initialValue: currentSetter?.initialValue,
};
const target = setterList.find((el) => el.componentName === currentSetter?.componentName);
if (target) {
newProps = {
...newProps,
...target.props,
};
}
return newProps;
}, [setterList, currentSetter]);
return (
{switcher}
);
};
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/CFiledWithSwitchSetter/style.module.scss
================================================
.fieldBox {
display: flex;
align-items: center;
justify-content: center;
}
.switchBtn {
color: $fontColor;
font-size: 12px;
padding: 0 5px 0 10px;
}
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Form/Field/index.tsx
================================================
import React, { isValidElement, ReactNode, useEffect, useState } from 'react';
import styles from './style.module.scss';
import { Alert, Popover, Tooltip } from 'antd';
import { CFormContext } from '../context';
import clsx from 'clsx';
import { QuestionCircleOutlined } from '@ant-design/icons';
export type CFiledChildProps = {
onValueChange?: (val: any) => void;
initialValue?: any;
value?: any;
};
export type CFieldProps = {
children: React.ReactNode;
label?: string;
labelWidth?: string;
labelAlign?: 'start' | 'center' | 'end';
tips?: ReactNode | (() => ReactNode);
name: string;
condition?: (formState: Record) => boolean;
onConditionValueChange?: (val: boolean) => void;
/** 不做任何包裹, 不会渲染 switchSetter */
noStyle?: boolean;
/** 隐藏 label, 会渲染 switchSetter */
hiddenLabel?: boolean;
valueChangeEventName?: string;
formatEventValue?: (val: any) => any;
rules?: { validator?: (value: any) => Promise; required?: boolean; msg?: string }[];
};
export const CField = (props: CFieldProps) => {
const { children, label, tips, name, hiddenLabel } = props;
const [errorInfo, setErrorInfo] = useState({
isPass: true,
errorMsg: '',
});
let labelView: ReactNode = label;
const { formState, updateContext, updateConditionConfig } = React.useContext(CFormContext);
useEffect(() => {
if (props.condition) {
updateConditionConfig(name, props.condition);
}
}, [name, props.condition, updateConditionConfig]);
useEffect(() => {
const condition = props.condition ?? (() => true);
const canRender = condition(formState);
props.onConditionValueChange?.(canRender);
}, [formState, props]);
if (tips) {
let newTip: any = tips;
if (typeof tips === 'function') {
newTip = tips();
}
labelView = (
{newTip}}
color="rgba(50,50,50,0.8)"
>
{label}
);
}
let newChildren = children;
if (isValidElement(children)) {
const eventName = props.valueChangeEventName ?? 'onValueChange';
const extraProps: any = {
[eventName]: async (val: any) => {
let tempVal = val;
if (props.formatEventValue) {
tempVal = props.formatEventValue(val);
}
// 先检查数据是否合法
const rules = props.rules || [];
const checkResult = await checkValue(props.name, tempVal, rules);
if (!checkResult.isPass) {
setErrorInfo(checkResult);
} else {
setErrorInfo({
isPass: true,
errorMsg: '',
});
}
updateContext(
{
...formState,
[name]: tempVal,
},
[name]
);
},
};
extraProps.value = (formState as any)[name];
newChildren = React.cloneElement(children, extraProps);
}
const condition = props.condition ?? (() => true);
const canRender = condition(formState);
if (!canRender) {
return null;
}
if (props.noStyle) {
return <>{newChildren};
}
return (
{hiddenLabel !== true && (
{labelView}
)}
{newChildren}
{!errorInfo.isPass && (
}>
)}
;
export type CFormContextData = {
formName: string;
formState: ContextState;
conditionConfig: Record boolean>;
// 自定义 setter 的具体实现，可以覆盖默认 setter
customSetterMap?: Record;
updateContext: (newState: ContextState, changeKeys?: string[]) => void;
updateConditionConfig: (name: string, cb: (state: ContextState) => boolean) => void;
};
export const CFormContext = React.createContext({
formName: '',
formState: {},
conditionConfig: {},
updateContext: () => {},
updateConditionConfig: () => {},
// 自定义 setter 的具体实现，可以覆盖默认 setter
customSetterMap: {},
});
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Form/index.tsx
================================================
import React from 'react';
import { ReactNode } from 'react';
import { CFormContext, CFormContextData, ContextState } from './context';
export type CFormProps = {
name: string;
children?: ReactNode | ReactNode[];
initialValue?: Record;
customSetterMap: CFormContextData['customSetterMap'];
onValueChange?: (formData: Record, changeKeys?: string[]) => void;
} & Partial;
const CUSTOM_SETTER_MAP = {};
let updateState = () => {};
export const registerCustomSetter = (customSetterMap: CFormContextData['customSetterMap']) => {
Object.assign(CUSTOM_SETTER_MAP, customSetterMap);
updateState?.();
};
export class CForm extends React.Component {
updateContext: (newState: ContextState) => void;
isMount = false;
constructor(props: CFormProps) {
super(props);
this.updateContext = (newState: ContextState, changeKeys?: string[]) => {
this.setState({
formState: newState,
customSetterMap: CUSTOM_SETTER_MAP,
});
this.props.onValueChange?.(this.formatValue(newState), changeKeys);
};
updateState = () => {
if (!this.isMount) {
return;
}
this.setState({
customSetterMap: { ...CUSTOM_SETTER_MAP, ...this.props.customSetterMap },
});
};
registerCustomSetter(props.customSetterMap || {});
this.state = {
formName: props.name,
formState: props.initialValue ?? {},
conditionConfig: {},
customSetterMap: props.customSetterMap || {},
updateContext: this.updateContext,
updateConditionConfig: (name: string, cb: (state: Record) => boolean) => {
this.setState({
conditionConfig: {
...this.state.conditionConfig,
[name]: cb,
},
});
},
};
}
componentDidMount(): void {
this.isMount = true;
}
componentWillUnmount(): void {
this.isMount = false;
}
getFieldsValue = () => {
return this.formatValue(this.state.formState);
};
setFields = (state: Record) => {
this.setState({
formState: state,
});
};
formatValue = (data: Record) => {
const res: Record = {};
const conditionConfig = this.state.conditionConfig;
Object.keys(data).forEach((key) => {
const isValid = conditionConfig[key]?.(data) ?? true;
if (isValid) {
res[key] = data[key];
}
});
return res;
};
render(): ReactNode {
const { state } = this;
const { children } = this.props;
return {children} ;
}
}
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/SetterSwitcher/core.tsx
================================================
import React, { useContext, useEffect } from 'react';
import { SetterObjType } from '@chamn/model';
import InnerSetters from '../Setters/index';
import { CFieldProps } from '../Form/Field';
import { CCustomSchemaFormContext } from '../../context';
import { CFormContext } from '../Form/context';
import { CSetter, CSetterProps } from '../Setters/type';
import { getDefaultSetterByValue } from '../../utils';
export type SetterSwitcherProps = {
// 支持的 setter 列表
setters: SetterObjType[];
// 自定义 setter 的具体实现，可以覆盖默认 setter
customSetterMap?: Record;
keyPaths: string[];
prefix?: React.ReactNode;
suffix?: React.ReactNode;
style?: React.CSSProperties;
/** 是否实用 CFile 包裹 */
useField?: boolean;
} & Omit;
/** 用于渲染切换设置器 */
export const SetterSwitcherCore = ({
setters,
keyPaths,
currentSetter,
setCurrentSetter,
customSetterMap: customSetterMapProp,
...props
}: Pick & {
value?: any;
setterContext?: Partial;
currentSetter: SetterObjType;
customSetterMap?: any;
setCurrentSetter: (setter: SetterObjType) => void;
}) => {
const { customSetterMap } = useContext(CFormContext);
const { defaultSetterConfig } = useContext(CCustomSchemaFormContext);
const allSetterMap = {
...InnerSetters,
...(customSetterMapProp || {}),
...customSetterMap,
};
useEffect(() => {
const currentSetterName = defaultSetterConfig[keyPaths.join('.')]?.setter || '';
const devConfigSetter = setters.find((el) => el.componentName === currentSetterName);
const st = devConfigSetter || getDefaultSetterByValue(props.value, setters) || setters[0];
setCurrentSetter(st);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
let CurrentSetterComp = null;
if (currentSetter?.componentName) {
CurrentSetterComp = allSetterMap[currentSetter?.componentName] || currentSetter.component;
}
if (!CurrentSetterComp) {
CurrentSetterComp = function EmptySetter() {
return (
{`${currentSetter?.componentName} is not found.`}
);
};
}
return {`${props?.setterName} is not found.`}
);
}
export const getEmptySetter = (setterName: string) => {
return () =>
{label}
{headerExt}
{switcher}
);
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/SetterSwitcher/index.tsx
================================================
import React, { useContext, useMemo, useState } from 'react';
import { SetterObjType, SetterTypeEnum } from '@chamn/model';
import InnerSetters from '../Setters/index';
import { CField, CFieldProps } from '../Form/Field';
import { Collapse, Dropdown, MenuProps } from 'antd';
import { SwapOutlined } from '@ant-design/icons';
import styles from './style.module.scss';
import { CCustomSchemaFormContext } from '../../context';
import { CFormContext } from '../Form/context';
import { CSetter } from '../Setters/type';
import { SetterSwitcherCore } from './core';
export type SetterSwitcherProps = {
// 支持的 setter 列表
setters: SetterObjType[];
// 自定义 setter 的具体实现，可以覆盖默认 setter
customSetterMap?: Record;
keyPaths: string[];
prefix?: React.ReactNode;
suffix?: React.ReactNode;
style?: React.CSSProperties;
/** 是否实用 CFile 包裹 */
useField?: boolean;
} & Omit;
export const SetterSwitcher = ({
setters: outerSetter,
keyPaths,
condition,
useField = true,
...props
}: SetterSwitcherProps) => {
const [visible, setVisible] = useState(true);
const { customSetterMap } = useContext(CFormContext);
const { onSetterChange, defaultSetterConfig, formRef, pluginCtx, nodeId } = useContext(CCustomSchemaFormContext);
const allSetterMap = {
...InnerSetters,
...customSetterMap,
};
// 统一添加一些内置的 setter
const setters = useMemo(() => {
return [
...outerSetter,
{
componentName: SetterTypeEnum.EMPTY_VALUE_SETTER,
},
];
}, [outerSetter]);
const [currentSetter, setCurrentSetter] = useState(() => {
const currentSetterName = defaultSetterConfig[keyPaths.join('.')]?.setter || '';
const devConfigSetter = setters.find((el) => el.componentName === currentSetterName);
return devConfigSetter || setters[0];
});
const menuItems = setters.map((setter) => {
const setterName = setter?.componentName || '';
const setterRuntime = allSetterMap[setterName];
return {
key: setter.componentName,
label: setterRuntime?.setterName || setter.componentName,
};
});
const switcher = useMemo(() => {
const onChooseSetter: MenuProps['onClick'] = ({ key }) => {
const targetSetter = setters.find((setter) => setter.componentName === key);
if (targetSetter) {
setCurrentSetter(targetSetter);
onSetterChange?.(keyPaths, targetSetter.componentName);
}
};
if (menuItems.length === 1) {
return null;
}
return (
{
e.preventDefault();
e.stopPropagation();
}}
>
);
}, [menuItems, currentSetter?.componentName, setters, onSetterChange, keyPaths]);
const setterProps = useMemo(() => {
let newProps = {
...(currentSetter?.props || {}),
initialValue: currentSetter?.initialValue,
};
const target = setters.find((el) => el.componentName === currentSetter?.componentName);
if (target) {
newProps = {
...newProps,
...target.props,
};
}
return newProps;
}, [setters, currentSetter]);
const [collapseHeaderExt, setCollapseHeaderExt] = useState([]);
let bodyView: any = null;
const hiddenLabel = currentSetter?.hiddenLabel === true;
const labelWidth = currentSetter?.labelWidth;
const labelAlign = currentSetter?.labelAlign || 'center';
const collapse = (currentSetter?.props as any)?.collapse;
const specialSetter = ['ArraySetter', 'ShapeSetter'].includes(currentSetter?.componentName);
const setterContext = useMemo(
() => ({
formRef,
pluginCtx,
keyPaths: [...keyPaths],
label: props.label,
setCollapseHeaderExt: specialSetter ? setCollapseHeaderExt : undefined,
nodeModel: pluginCtx?.pageModel.getNode(nodeId) as any,
}),
[formRef, keyPaths, nodeId, pluginCtx, props.label, specialSetter]
);
const filedView = useMemo(() => {
const customSetterMap = {
...(props.customSetterMap || {}),
};
const cFiledProps = {
labelWidth,
labelAlign,
hiddenLabel,
condition,
noStyle: specialSetter ? true : false,
onConditionValueChange: (val: boolean) => {
setVisible(val);
},
};
if (useField === false) {
return (
);
}, [
condition,
currentSetter,
hiddenLabel,
keyPaths,
labelAlign,
labelWidth,
props,
setterContext,
setterProps,
setters,
specialSetter,
useField,
]);
const renderCollapse = useMemo(
function renderCollapse() {
const collapseObj = typeof collapse === 'object' ? collapse : {};
const CollapseComponent = (extraHeaderContent?: React.ReactNode) => (
{props.label}
{extraHeaderContent}
{switcher}
),
children: filedView,
},
]}
/>
);
return CollapseComponent;
},
[collapse, props.name, props.label, switcher, filedView]
);
if (['ArraySetter'].includes(currentSetter?.componentName || '')) {
bodyView = renderCollapse(collapseHeaderExt);
} else if (['ShapeSetter'].includes(currentSetter?.componentName || '')) {
bodyView = (
{props.prefix ?? null}
{(currentSetter?.props as any)?.collapse === false &&
{filedView}
}
{collapse !== false && renderCollapse()}
{props.suffix ?? null}
{props.prefix ?? null}
{filedView}
{switcher}
{props.suffix ?? null}
);
}
return {bodyView}
;
};
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/SetterSwitcher/style.module.scss
================================================
.switchBtn {
color: $fontColor;
font-size: 12px;
padding: 0 5px 0 10px;
}
.shapeFieldBox,
.collapseHeader {
color: $fontColor;
display: flex;
font-size: 12px;
}
.collapseHeader {
align-items: center;
}
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/component/CreateNewNodePopup/index.tsx
================================================
import { Popover } from 'antd';
import { useState } from 'react';
import { DEFAULT_NODE_LIST } from './initData';
import { TLogicItemHandlerFlow } from '@chamn/model';
export const CreateNewNodePopup = (props: {
title?: string;
children: React.ReactNode;
disabled?: boolean;
style?: React.CSSProperties;
onNewNodeAdd: (data: TLogicItemHandlerFlow[number]) => void;
}) => {
const { title = 'Next Step' } = props;
const [open, setOpen] = useState(false);
const handleOpenChange = (newOpen: boolean) => {
setOpen(newOpen);
};
const nodeList = DEFAULT_NODE_LIST.map((el) => {
return (
{
setOpen(false);
props.onNewNodeAdd?.(el.getInitData());
}}
key={el.key}
style={{
padding: '10px 20px',
border: '1px solid #c3c3c3b8',
borderRadius: '4px',
textAlign: 'center',
fontSize: '12px',
cursor: 'pointer',
}}
>
{el.name}
);
});
// 禁用弹窗
if (props.disabled) {
return props.children;
}
return (
{nodeList.map((el) => (
{el}
))}
}
title={title}
>
{props.children}
);
};
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/component/CreateNewNodePopup/initData.ts
================================================
import {
AssignValueType,
getRandomStr,
LogicType,
TLogicAssignValueItem,
TLogicCallNodeMethodItem,
TLogicJumpLinkItem,
TLogicRequestAPIItem,
TLogicRunCodeItem,
} from '@chamn/model';
export const DEFAULT_NODE_LIST = [
{
key: LogicType.ASSIGN_VALUE,
name: '赋值/创建变量',
getInitData: () => {
const id = getRandomStr();
const assignValueItem: TLogicAssignValueItem = {
id: id,
type: LogicType.ASSIGN_VALUE,
valueType: AssignValueType.STATE,
currentValue: '',
targetValueName: '',
};
return assignValueItem;
},
},
{
key: LogicType.JUMP_LINK,
name: '页面跳转',
getInitData: () => {
const id = getRandomStr();
const assignValueItem: TLogicJumpLinkItem = {
id: id,
type: LogicType.JUMP_LINK,
link: '',
};
return assignValueItem;
},
},
{
key: LogicType.REQUEST_API,
name: '请求数据',
getInitData: () => {
const id = getRandomStr();
const requestAPIItem: TLogicRequestAPIItem = {
id: id,
type: LogicType.REQUEST_API,
apiPath: '',
method: 'GET',
header: {},
query: {},
responseVarName: `responseData_${id}`,
afterSuccessResponse: [],
afterFailedResponse: [
{
id: getRandomStr(),
type: LogicType.RUN_CODE,
value: 'console.error("API request failed:", $$response)',
},
],
};
return requestAPIItem;
},
},
{
key: LogicType.CALL_NODE_METHOD,
name: '调用组件方法',
getInitData: () => {
const id = getRandomStr();
const callNodeMethodItem: TLogicCallNodeMethodItem = {
id: id,
type: LogicType.CALL_NODE_METHOD,
nodeId: '',
methodName: '',
args: [],
returnVarName: '',
};
return callNodeMethodItem;
},
},
{
key: LogicType.RUN_CODE,
name: '运行代码',
getInitData: () => {
const id = getRandomStr();
const runCodeItem: TLogicRunCodeItem = {
id: id,
type: LogicType.RUN_CODE,
name: `run_code_${id}`,
value: `console.log('hello world');`,
};
return runCodeItem;
},
},
];
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/component/InputHandle/index.tsx
================================================
import { Handle, HandleProps, Position } from '@xyflow/react';
import { INPUT_HANDLE_ID } from '../../config';
export const InputHandle = (props: Partial) => {
return {
/** 外部有自定义 handle 时，取消事件触发 */
if (customHandle) {
return;
}
if (outHandleNewNodeAdd) {
outHandleNewNodeAdd(data);
} else {
handleNewNodeAdd(data);
}
}}
disabled={outputNodeHasConnected}
>
)}
);
if (customHandle) {
customHandleView = customHandle;
}
if (useCardStyle === false) {
return (
{props.children}
{customHandleView}
);
}
return (
{props.extra}
}
>
{props.children}
{customHandleView}
);
};
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/component/NodeCard/style.module.scss
================================================
.l {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 20px;
cursor: grab;
}
.r {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 20px;
cursor: grab;
}
.b {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 20px;
cursor: grab;
}
.dragBox {
background-color: rgb(203 203 203 / 16%);
padding: 0 4px;
border-radius: 4px;
color: rgb(126 126 126 / 54%);
}
.selectStatus {
outline: 1px solid #f57dbd;
border-radius: 4px;
box-shadow: 0px 3.54px 4.55px 0px #00000005, 0px 3.54px 4.55px 0px #0000000d, 0px 0.51px 1.01px 0px #0000001a;
}
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/component/OutputHandle/index.tsx
================================================
import { Handle, HandleProps, Position } from '@xyflow/react';
import { OUTPUT_HANDLE_ID } from '../../config';
export const OutputHandle = (props: Partial) => {
return setModalOpen(true)}
>
{nodeTitle ?? '选择节点'}
setModalOpen(false)}
onOk={(data) => {
props.onChange?.(data);
setInnerValue(data);
setModalOpen(false);
}}
pageModel={props.pageModel}
value={innerValue?.nodeId || props.value}
/>
);
};
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/component/SelectNodeByTree/modal.tsx
================================================
import { Modal, TreeSelect } from 'antd';
import { CPage } from '@chamn/model';
import { useRef, useMemo } from 'react';
import { transformPageSchemaToTreeData, traverseTree } from '@/plugins/OutlineTree/util';
import { getNodeInfo } from '../SelectNodeByTree/util';
interface SelectNodeModalProps {
open: boolean;
onCancel: () => void;
onOk: (data: { nodeId: string; title: string }) => void;
pageModel: CPage;
value?: string;
}
export const SelectNodeModal = (props: SelectNodeModalProps) => {
const { open, onCancel, onOk, pageModel, value } = props;
const boxDomRef = useRef(null);
const treeData = useMemo(() => {
if (!pageModel) return;
const treeData = transformPageSchemaToTreeData(pageModel?.export(), pageModel);
traverseTree(treeData, (el: any) => {
el.sourceData = {
title: el.title,
value: el.value,
};
el.value = el.key;
el.title = {el.title}
;
return false;
});
return treeData;
}, [pageModel]);
return (
onOk({ nodeId: value || '', title: '' })}>
{
onOk({
nodeId: '',
title: '',
});
}}
filterTreeNode={(inputValue, treeNode: any) => {
return treeNode.sourceData?.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1;
}}
getPopupContainer={() => boxDomRef.current!}
treeDefaultExpandAll
onChange={(newVal) => {
const nodeInfo = getNodeInfo(newVal, (treeData as any) ?? []);
onOk({
nodeId: newVal,
title: (nodeInfo as any)?.sourceData?.title,
});
}}
treeData={treeData}
/>
);
};
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/component/SelectNodeByTree/util.ts
================================================
import { TreeDataNode } from 'antd';
export const getParentKey = (key: React.Key, tree: TreeDataNode[]): React.Key => {
let parentKey: React.Key;
for (let i = 0; i < tree.length; i++) {
const node = tree[i];
if (node.children) {
if (node.children.some((item) => item.key === key)) {
parentKey = node.key;
} else if (getParentKey(key, node.children)) {
parentKey = getParentKey(key, node.children);
}
}
}
return parentKey!;
};
export const getNodeInfo = (key: string, tree: TreeDataNode[]): TreeDataNode | null => {
const traverse = (nodes: TreeDataNode[]): TreeDataNode | null => {
for (const node of nodes) {
if (node.key === key) {
return node;
}
if (node.children?.length) {
const result = traverse(node.children);
if (result) {
return result;
}
}
}
return null;
};
return traverse(tree);
};
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/component/SelectNodeState/index.tsx
================================================
import { CPage } from '@chamn/model';
import { SelectNodeByTree } from '../SelectNodeByTree';
import { Input, Space } from 'antd';
export const SelectNodeState = (props: {
value?: {
nodeId: string;
keyPath: string;
};
pageModel: CPage;
onChange?: (data: { nodeId: string; keyPath: string }) => void;
}) => {
return (
{
props.onChange?.({
nodeId: data.nodeId,
keyPath: props.value?.keyPath || '',
});
}}
/>
);
};
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/component/SelectNodeState/util.ts
================================================
import { TreeDataNode } from 'antd';
import { Key } from 'react';
export const getParentKey = (key: React.Key, tree: TreeDataNode[]): React.Key => {
let parentKey: React.Key;
for (let i = 0; i < tree.length; i++) {
const node = tree[i];
if (node.children) {
if (node.children.some((item) => item.key === key)) {
parentKey = node.key;
} else if (getParentKey(key, node.children)) {
parentKey = getParentKey(key, node.children);
}
}
}
return parentKey!;
};
export const generateKeyList = (data: TreeDataNode[]) => {
let dataList: { title: string; key: Key }[] = [];
for (let i = 0; i < data.length; i++) {
const node = data[i];
const { key } = node;
dataList.push({ key, title: node.title as string });
if (node.children) {
const res = generateKeyList(node.children);
dataList = [...dataList, ...res];
}
}
return dataList;
};
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/config.ts
================================================
export const REACT_FLOW_DRAG_CLASS_NAME = 'chamn-action-drag-handler';
export const INPUT_HANDLE_ID = 'INPUT_HANDLE_ID';
export const OUTPUT_HANDLE_ID = 'OUTPUT_HANDLE_ID';
export const REQUEST_API_FAILED_HANDLE_ID = 'REQUEST_API_FAILED_HANDLE_ID';
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/context.ts
================================================
import { createContext, useContext } from 'react';
import { CNode, CPage } from '@chamn/model';
import { CPluginCtx } from '@/core/pluginManager';
interface ActionFlowContextType {
pluginCtx: CPluginCtx;
pageModel: CPage;
/** 数据有改变时，包含节点内部的数据 */
onDataChange: () => void;
/** 当前节点 */
nodeModel: CNode | null;
}
export const ActionFlowContext = createContext({
pluginCtx: null as any,
pageModel: null as any,
onDataChange: () => {},
nodeModel: null,
});
export const useActionFlow = () => {
const context = useContext(ActionFlowContext);
if (!context) {
throw new Error('useActionFlow must be used within ActionFlowProvider');
}
return context;
};
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/index.tsx
================================================
import {
addEdge,
Background,
Controls,
MiniMap,
OnConnect,
ReactFlow,
ReactFlowProvider,
useEdgesState,
useNodesState,
useReactFlow,
Node,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import { useCallback, useEffect, useRef, useState } from 'react';
import { TActionLogicItem } from '@chamn/model';
import { calculateElementLayout, parseActionLogicToNodeList, revertNodeToActionLogic } from './util';
import { NODE_MAP, NODE_TYPE } from './node';
import { CSetterProps } from '../type';
import { REACT_FLOW_DRAG_CLASS_NAME } from './config';
import { ActionFlowContext } from './context';
import { Button } from 'antd';
import { MoveableModal } from '@/component/MoveableModal';
import { HotKeysPluginInstance } from '@/plugins/Hotkeys/type';
export type TActionFlowSetterCore = CSetterProps<{
value?: TActionLogicItem;
children?: React.ReactNode;
}>;
export const ActionFlowSetterCore = (props: TActionFlowSetterCore) => {
const { fitView } = useReactFlow();
const [flowMount, setFlowMount] = useState(false);
const [nodes, setNodes, onNodesChange] = useNodesState([
{
id: NODE_TYPE.START_NODE,
data: { id: NODE_TYPE.START_NODE },
position: { x: 0, y: 0 },
type: NODE_TYPE.START_NODE,
dragHandle: `.${REACT_FLOW_DRAG_CLASS_NAME}`,
selectable: false,
},
]);
const [edges, setEdges, onEdgesChange] = useEdgesState([]);
const latesEdgesRef = useRef([]);
latesEdgesRef.current = edges;
const onConnect = useCallback((params) => setEdges((eds) => addEdge({ ...params }, eds)), [setEdges]);
const latestNodeRef = useRef([]);
latestNodeRef.current = nodes;
const [dataReady, setDataReady] = useState(false);
/** 重新布局 */
const layoutGraph = useCallback(
(options?: { fitView: boolean }) => {
const layoutInfo = calculateElementLayout(latestNodeRef.current, edges, { direction: 'TB' });
setNodes([...layoutInfo.nodes]);
setEdges([...layoutInfo.edges]);
setTimeout(() => {
setFlowMount(true);
if (options?.fitView !== false) {
fitView({});
}
});
},
[edges, fitView, setEdges, setNodes]
);
useEffect(() => {
// 将 value 转换为 nodes 以及 edges
const { nodes, edges } = parseActionLogicToNodeList(props.value);
setNodes(nodes);
setEdges(edges);
setTimeout(() => {
setDataReady(true);
}, 300);
}, [props.value, setEdges, setNodes]);
const saveData = useCallback(() => {
setTimeout(() => {
const newSchemaValue = revertNodeToActionLogic({ nodes: latestNodeRef.current, edges: latesEdgesRef.current });
props.onValueChange?.(newSchemaValue);
});
}, [props]);
return (
layoutGraph({ fitView: false })}
>
Reset Layout
{!flowMount && (
)}
{dataReady && (
{
onNodesChange(changes);
saveData();
}}
onEdgesChange={(changes) => {
onEdgesChange(changes);
saveData();
}}
onConnect={(connection) => {
onConnect(connection);
saveData();
}}
defaultEdgeOptions={{
type: 'smoothstep',
}}
minZoom={0.2}
maxZoom={1}
onInit={() => {
layoutGraph();
}}
fitView
nodeTypes={NODE_MAP}
>
)}
);
};
export const ActionFlowSetter = (props: TActionFlowSetterCore) => {
const [open, setOpen] = useState(false);
const newValueRef = useRef(props.value);
const disableLowcodeHotKey = async (status: boolean) => {
// 启用 lowcode 编辑器热键
const hotkey = await props.setterContext?.pluginCtx?.pluginManager?.get('Hotkeys');
hotkey?.export.disable(status);
};
const triggerView = props.children || (
Edit Flow
);
return (
<>
{
// 禁用 lowcode 编辑器热键
await disableLowcodeHotKey(true);
setOpen(true);
}}
>
{triggerView}
{
setOpen(false);
disableLowcodeHotKey(false);
}}
onOk={async () => {
props.onValueChange?.(newValueRef.current);
await disableLowcodeHotKey(false);
setOpen(false);
}}
>
{
newValueRef.current = newVal;
}}
>
);
};
ActionFlowSetter.setterName = '逻辑流设置器';
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/node/AssignValueNode/index.tsx
================================================
import { BUILD_IN_SETTER_MAP, CustomSchemaFormInstance } from '@/component/CustomSchemaForm';
import { AssignValueType, DEV_CONFIG_KEY, TLogicAssignValueItem } from '@chamn/model';
import { NodeProps, Node } from '@xyflow/react';
import { Radio } from 'antd';
import { useEffect, useRef, useState } from 'react';
import { CForm } from '../../../../Form';
import { CField } from '../../../../Form/Field';
import { SelectNodeState } from '../../component/SelectNodeState/index';
import styles from './style.module.scss';
import { TTextAreaSetterProps } from '../../../TextAreaSetter';
import { isValidJSVariableName } from './util';
import { CCustomSchemaFormContext } from '@/component/CustomSchemaForm/context';
import { ensureKeyExist } from '@/utils';
import { NodeCard } from '../../component/NodeCard';
import { CommonDynamicValueSetter } from '../../util';
import { useActionFlow } from '../../context';
import { CFiledWithSwitchSetter } from '@/component/CustomSchemaForm/components/CFiledWithSwitchSetter';
export type TAssignValueNode = Node;
export const AssignValueNode = (props: NodeProps) => {
const { data } = props;
const { onDataChange, pageModel, pluginCtx, nodeModel } = useActionFlow();
ensureKeyExist(data, DEV_CONFIG_KEY, {});
const devConfigObj = data[DEV_CONFIG_KEY]!;
const [isReady, setIsReady] = useState(false);
const formRef = useRef(null);
const [formValue, setFormValue] = useState();
useEffect(() => {
const newVal = {
id: data.id,
type: data.type,
valueType: data.valueType,
currentValue: data.currentValue,
targetValueName: data.targetValueName || '',
};
formRef.current?.setFields(newVal);
setFormValue(newVal);
setIsReady(true);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
{
if (!devConfigObj.defaultSetterMap) {
devConfigObj.defaultSetterMap = {};
}
devConfigObj.defaultSetterMap[keyPaths.join('.')] = {
name: keyPaths.join('.'),
setter: setterName,
};
},
pluginCtx: pluginCtx,
nodeId: nodeModel?.id,
customSetterMap: {},
}}
>
{
Object.assign(data, newVal);
setFormValue(newVal as any);
onDataChange();
}}
>
{isReady && (
<>
{
return value;
}}
>
{formValue?.valueType === 'STATE' && (
)}
{formValue?.valueType === 'MEMORY' && (
)}
);
};
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/node/AssignValueNode/style.module.scss
================================================
.line {
padding-bottom: 10px;
}
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/node/AssignValueNode/util.ts
================================================
export function isValidJSVariableName(name: string) {
// 1. 使用正则表达式验证变量名规则
const identifierRegex = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
if (!identifierRegex.test(name)) {
return false;
}
// 2. 检测是否为保留关键字
try {
new Function(`let ${name};`);
return true;
} catch {
return false;
}
}
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/node/CallNodeMethodNode/index.tsx
================================================
import { BUILD_IN_SETTER_MAP, CustomSchemaForm, CustomSchemaFormInstance } from '@/component/CustomSchemaForm';
import { DEV_CONFIG_KEY, TLogicCallNodeMethodItem } from '@chamn/model';
import { NodeProps, Node } from '@xyflow/react';
import { Input, Select } from 'antd';
import { useEffect, useMemo, useRef, useState } from 'react';
import { CForm } from '../../../../Form';
import styles from './style.module.scss';
import { CCustomSchemaFormContext } from '@/component/CustomSchemaForm/context';
import { SelectNodeByTree } from '../../component/SelectNodeByTree';
import { CField } from '@/component/CustomSchemaForm/components/Form/Field';
import { formatArgsObjToArray, formatArgsToObject, getArgsObjFormSchema, isValidJSVariableName } from './util';
import { ensureKeyExist } from '@/utils';
import { NodeCard } from '../../component/NodeCard';
import { useActionFlow } from '../../context';
export type TCallNodeMethodNode = Node;
export const CallNodeMethodNode = (props: NodeProps) => {
const { data } = props;
const { pageModel, onDataChange, pluginCtx, nodeModel } = useActionFlow();
ensureKeyExist(data, DEV_CONFIG_KEY, {});
const devConfigObj = data[DEV_CONFIG_KEY]!;
const formRef = useRef(null);
const [formValue, setFormValue] = useState();
useEffect(() => {
const newVal = {
id: data.id || '',
type: data.type,
nodeId: data.nodeId,
methodName: data.methodName,
args: data.args,
returnVarName: data.returnVarName,
};
formRef.current?.setFields(newVal);
setFormValue(newVal);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const methodList = useMemo(() => {
const targetNode = pageModel.getNode(data.nodeId);
const list = targetNode?.material?.value.methods || [];
return list;
}, [data.nodeId, pageModel]);
const methodListOptions = useMemo(() => {
return methodList?.map((el) => {
return {
value: el.name,
label: el.title,
};
});
}, [methodList]);
const argsFormSchema = useMemo(() => {
return getArgsObjFormSchema(pageModel.getNode(formValue?.nodeId)!, formValue?.methodName || '');
}, [pageModel, formValue?.nodeId, formValue?.methodName]);
const updateKeySetterConfig = (keyPaths: string[], setterName: string) => {
if (!devConfigObj.defaultSetterMap) {
devConfigObj.defaultSetterMap = {};
}
devConfigObj.defaultSetterMap[keyPaths.join('.')] = {
name: keyPaths.join('.'),
setter: setterName,
};
};
return (
{
if (changeKeys?.includes('nodeId')) {
newVal = {
...newVal,
methodName: '',
args: [],
};
setTimeout(() => {
formRef.current?.setFields({
...formValue,
...newVal,
});
});
}
Object.assign(data, newVal);
setFormValue(newVal as any);
onDataChange();
}}
>
{
return el.nodeId;
}}
>
Boolean(argsFormSchema.length)}
noStyle
formatEventValue={(val) => {
const newVal = formatArgsObjToArray(val);
return newVal;
}}
>
{
if (val === '') {
return true;
}
return isValidJSVariableName(val);
},
},
]}
valueChangeEventName="onChange"
formatEventValue={(e) => e.target.value}
>
);
};
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/node/CallNodeMethodNode/style.module.scss
================================================
.line {
padding-bottom: 10px;
}
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/node/CallNodeMethodNode/util.ts
================================================
import { CMaterialPropsType, CPageNode, isNodeModel } from '@chamn/model';
import { CommonDynamicValueSetter } from '../../util';
export function isValidJSVariableName(name: string) {
// 1. 使用正则表达式验证变量名规则
const identifierRegex = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
if (!identifierRegex.test(name)) {
return false;
}
// 2. 检测是否为保留关键字
try {
new Function(`let ${name};`);
return true;
} catch {
return false;
}
}
const ARGS_PREFIX = 'args.';
/**
*
* @param node 结合 method 描述，合并为一个 FormSchema, 加 key 前缀是为了避免 key 冲突
* @param args
* @returns
*/
export const getArgsObjFormSchema = (node: CPageNode, methodName: string) => {
if (isNodeModel(node)) {
const methodList = node?.material?.value.methods || [];
const formSchema = methodList
.find((el) => el.name === methodName)
?.params?.map((el, index) => {
return {
name: `${ARGS_PREFIX}${index}`,
title: {
label: el.name || `arg[${index}]`,
tip: el.description,
},
valueType: 'string',
setters: CommonDynamicValueSetter,
} as CMaterialPropsType[number];
});
return formSchema || [];
}
return [];
};
export const formatArgsObjToArray = (val: Record) => {
const res = Object.keys(val)
.map((key) => parseInt(key.replace(ARGS_PREFIX, '')))
.sort()
.map((index) => val[`${ARGS_PREFIX}${index}`]);
return res;
};
export const formatArgsToObject = (valArr: any[]) => {
const res: any = {};
valArr.forEach((item, index) => {
res[`${ARGS_PREFIX}${index}`] = item;
});
return res;
};
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/node/JumpLinkNode.tsx
================================================
import { BUILD_IN_SETTER_MAP, CustomSchemaFormInstance } from '@/component/CustomSchemaForm';
import { isExpression, isFunction, TLogicJumpLinkItem } from '@chamn/model';
import { NodeProps, Node } from '@xyflow/react';
import { useEffect, useMemo, useRef, useState } from 'react';
import { CForm } from '../../../Form';
import { NodeCard } from '../component/NodeCard';
import { CommonDynamicValueSetter } from '../util';
import { useActionFlow } from '../context';
import { CFiledWithSwitchSetter } from '../../../CFiledWithSwitchSetter';
export type TJumpLinkNode = Node;
export const JumpLinkNode = (props: NodeProps) => {
const { data } = props;
const { onDataChange } = useActionFlow();
const formRef = useRef(null);
const [isReady, setIsReady] = useState(false);
useEffect(() => {
formRef.current?.setFields({
link: data.link,
});
setIsReady(true);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const defaultLinkSetter = useMemo(() => {
if (isFunction(data.link)) {
return 'FunctionSetter';
} else if (isExpression(data.link)) {
return 'ExpressionSetter';
} else {
return 'TextAreaSetter';
}
}, [data.link]);
return (
{
Object.assign(data, newVal);
onDataChange();
}}
>
{isReady && (
<>
);
};
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/node/RequestAPINode/helper.ts
================================================
import { SetterType } from '@chamn/model';
export const requestParamsSchemaSetterList: SetterType[] = [
{
componentName: 'JSONSetter',
labelAlign: 'start',
props: {
mode: 'inline',
lineNumbers: 'off',
editorOptions: {
lineNumbers: 'off',
lineDecorationsWidth: 0,
lineNumbersMinChars: 0,
glyphMargin: false,
},
},
},
{
componentName: 'FunctionSetter',
labelAlign: 'start',
props: {
mode: 'inline',
minimap: false,
containerStyle: {
paddingTop: '10px',
width: '470px',
height: '150px',
},
lineNumber: false,
},
},
];
export const methodOptions = [
{ value: 'GET', label: 'GET' },
{ value: 'POST', label: 'POST' },
{ value: 'PUT', label: 'PUT' },
{ value: 'PATCH', label: 'PATCH' },
{ value: 'DELETE', label: 'DELETE' },
];
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/node/RequestAPINode/index.tsx
================================================
import { DEV_CONFIG_KEY, TLogicRequestAPIItem } from '@chamn/model';
import { useReactFlow, NodeProps, Node } from '@xyflow/react';
import { useEffect, useMemo, useRef, useState } from 'react';
import { Input, Select, Tabs, TabsProps } from 'antd';
import { BUILD_IN_SETTER_MAP, CustomSchemaFormInstance } from '@/component/CustomSchemaForm';
import { ensureKeyExist } from '@/utils';
import { NodeCard } from '../../component/NodeCard';
import { CForm } from '@/component/CustomSchemaForm/components/Form';
import { CCustomSchemaFormContext } from '@/component/CustomSchemaForm/context';
import { CField } from '@/component/CustomSchemaForm/components/Form/Field';
import { methodOptions, requestParamsSchemaSetterList } from './helper';
import { CreateNewNodePopup } from '../../component/CreateNewNodePopup';
import { InputHandle } from '../../component/InputHandle';
import { OutputHandle } from '../../component/OutputHandle';
import {
INPUT_HANDLE_ID,
OUTPUT_HANDLE_ID,
REACT_FLOW_DRAG_CLASS_NAME,
REQUEST_API_FAILED_HANDLE_ID,
} from '../../config';
import styles from './style.module.scss';
import { useActionFlow } from '../../context';
import { CFiledWithSwitchSetter } from '@/component/CustomSchemaForm/components/CFiledWithSwitchSetter';
import { RightPanelConfig } from '@/plugins/RightPanel/type';
export type TRequestAPINode = Node;
export const RequestAPINode = (props: NodeProps) => {
const { data, isConnectable } = props;
const { onDataChange, pluginCtx } = useActionFlow();
const pluginConfig: RightPanelConfig = pluginCtx.config || {};
const CustomAPISelectInput: any = useMemo(() => {
if (pluginConfig.requestAPINode?.customAPIInput) {
return pluginConfig.requestAPINode?.customAPIInput;
}
return Input;
}, [pluginConfig.requestAPINode?.customAPIInput]);
const reactFlowInstance = useReactFlow();
ensureKeyExist(data, DEV_CONFIG_KEY, {});
const devConfigObj = data[DEV_CONFIG_KEY]!;
const formRef = useRef(null);
const [formValue, setFormValue] = useState();
const checkHandleConnection = (handleId: string) => {
const edges = reactFlowInstance.getEdges();
return edges.some(
(edge) => edge.source === String(data.id) && (edge.sourceHandle || OUTPUT_HANDLE_ID) === handleId
);
};
const isOutputHandleConnected = checkHandleConnection(OUTPUT_HANDLE_ID);
const isAfterFailedResponseHandleConnected = checkHandleConnection(REQUEST_API_FAILED_HANDLE_ID);
useEffect(() => {
const newVal = {
id: data.id,
type: data.type,
apiPath: data.apiPath,
body: data.body,
query: data.query,
header: data.header,
method: data.method || 'GET',
responseVarName: data.responseVarName || '',
afterSuccessResponse: data.afterSuccessResponse || [],
afterFailedResponse: data.afterFailedResponse || [],
} as TLogicRequestAPIItem;
formRef.current?.setFields(newVal);
setFormValue(newVal);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const formHandler = useMemo(() => {
return {
updateFields: (newValue: any) => {
const newValueObj = {
...formValue,
...newValue,
};
formRef.current?.setFields({
...newValueObj,
});
setFormValue(newValueObj);
},
getFields: () => {
return formRef.current?.getFieldsValue();
},
};
}, [formValue]);
const updateKeySetterConfig = (keyPaths: string[], setterName: string) => {
if (!devConfigObj.defaultSetterMap) {
devConfigObj.defaultSetterMap = {};
}
devConfigObj.defaultSetterMap[keyPaths.join('.')] = {
name: keyPaths.join('.'),
setter: setterName,
};
};
const tabItems = useMemo(() => {
const tabTagList = [
{ key: 'header', label: 'Header' },
{ key: 'query', label: 'Query' },
{ key: 'body', label: 'Body' },
];
const items: TabsProps['items'] = tabTagList.map((el) => {
return {
...el,
disabled: el.key === 'body' && formValue?.method === 'GET',
children: (
),
};
});
return items;
}, [formValue]);
const handleNewNodeAdd = (newNodeData: any, handleType: string) => {
const currentNode = reactFlowInstance.getNode(String(data.id));
if (!currentNode) return;
let offsetX = 0;
if (handleType !== OUTPUT_HANDLE_ID) {
offsetX = (currentNode.measured?.width ?? 0) + 150;
}
// 计算新节点位置
const newNodePosition = {
x: currentNode.position.x + offsetX,
y: currentNode.position.y + (currentNode.measured?.height ?? 0) + 150,
};
// 创建新节点
const newNode = {
id: newNodeData.id,
type: newNodeData.type,
position: newNodePosition,
/** 必须 */
dragHandle: `.${REACT_FLOW_DRAG_CLASS_NAME}`,
data: {
...newNodeData,
},
};
// 创建连线
const newEdge = {
id: `${data.id}_${newNode.id}`,
source: String(data.id),
sourceHandle: handleType,
target: newNode.id,
targetHandle: INPUT_HANDLE_ID,
};
// 更新流程图
reactFlowInstance.addNodes(newNode);
reactFlowInstance.addEdges(newEdge);
if (handleType === OUTPUT_HANDLE_ID) {
// 更新当前节点的 afterSuccessResponse
if (!data.afterSuccessResponse) {
data.afterSuccessResponse = [];
}
data.afterSuccessResponse.push(newNodeData);
} else {
// 更新当前节点的 afterFailedResponse
if (!data.afterFailedResponse) {
data.afterFailedResponse = [];
}
data.afterFailedResponse.push(newNodeData);
}
};
return (
handleNewNodeAdd(data, OUTPUT_HANDLE_ID)}
disabled={isOutputHandleConnected}
>
handleNewNodeAdd(data, REQUEST_API_FAILED_HANDLE_ID)}
disabled={isAfterFailedResponseHandleConnected}
>
}
nodeProps={props}
handleNewNodeAdd={() => {}}
>
{
setFormValue(newFormData as any);
Object.assign(data, newFormData);
onDataChange();
}}
>
el.target.value}
>
el.target.value}
>
);
};
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/node/RequestAPINode/style.module.scss
================================================
.line {
padding-bottom: 10px;
}
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/node/RequestAPINode/util.ts
================================================
export function isValidJSVariableName(name: string) {
// 1. 使用正则表达式验证变量名规则
const identifierRegex = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
if (!identifierRegex.test(name)) {
return false;
}
// 2. 检测是否为保留关键字
try {
new Function(`let ${name};`);
return true;
} catch {
return false;
}
}
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/node/RunCodeNode/index.tsx
================================================
import { DEV_CONFIG_KEY, TLogicRunCodeItem } from '@chamn/model';
import { NodeProps, Node } from '@xyflow/react';
import { ensureKeyExist } from '@/utils';
import { FunctionSetter } from '../../../FunctionSetter';
import { NodeCard } from '../../component/NodeCard';
import { useActionFlow } from '../../context';
export type TRunCodeNode = Node;
export const RunCodeNode = (props: NodeProps) => {
const { data } = props;
ensureKeyExist(data, DEV_CONFIG_KEY, {});
const { onDataChange, pluginCtx, nodeModel } = useActionFlow();
return (
{
data.value = newVal.value;
onDataChange();
}}
setterContext={{
pluginCtx: pluginCtx,
setCollapseHeaderExt: undefined,
onSetterChange: function () {},
keyPaths: [],
label: '',
nodeModel: nodeModel as any,
}}
/>
);
};
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/node/RunCodeNode/style.module.scss
================================================
.line {
padding-bottom: 10px;
}
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/node/RunCodeNode/util.ts
================================================
export function isValidJSVariableName(name: string) {
// 1. 使用正则表达式验证变量名规则
const identifierRegex = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
if (!identifierRegex.test(name)) {
return false;
}
// 2. 检测是否为保留关键字
try {
new Function(`let ${name};`);
return true;
} catch {
return false;
}
}
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/node/StartNode.tsx
================================================
import { NodeProps, Node } from '@xyflow/react';
import { NodeCard } from '../component/NodeCard';
export type CounterNode = Node;
export const StartNode = (props: NodeProps) => {
return (
Start
);
};
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/node/index.ts
================================================
import { LogicType } from '@chamn/model';
import { AssignValueNode } from './AssignValueNode';
import { StartNode } from './StartNode';
import { CallNodeMethodNode } from './CallNodeMethodNode';
import { JumpLinkNode } from './JumpLinkNode';
import { RequestAPINode } from './RequestAPINode';
import { RunCodeNode } from './RunCodeNode';
export enum NODE_TYPE {
START_NODE = 'START_NODE',
JUMP_LINK = LogicType.JUMP_LINK,
ASSIGN_VALUE = LogicType.ASSIGN_VALUE,
CALL_NODE_METHOD = LogicType.CALL_NODE_METHOD,
RUN_CODE = LogicType.RUN_CODE,
REQUEST_API = LogicType.REQUEST_API,
}
export const NODE_MAP = {
[NODE_TYPE.START_NODE]: StartNode,
[NODE_TYPE.JUMP_LINK]: JumpLinkNode,
[NODE_TYPE.ASSIGN_VALUE]: AssignValueNode,
[NODE_TYPE.CALL_NODE_METHOD]: CallNodeMethodNode,
[NODE_TYPE.RUN_CODE]: RunCodeNode,
[NODE_TYPE.REQUEST_API]: RequestAPINode,
};
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ActionFlowSetter/util.ts
================================================
import { Edge, Node, useReactFlow } from '@xyflow/react';
import Dagre from '@dagrejs/dagre';
import { getRandomStr, SetterType, TActionLogicItem, TLogicItemHandlerFlow } from '@chamn/model';
import { INPUT_HANDLE_ID, OUTPUT_HANDLE_ID, REACT_FLOW_DRAG_CLASS_NAME, REQUEST_API_FAILED_HANDLE_ID } from './config';
import { NODE_TYPE } from './node';
import { message } from 'antd';
/** 自动布局 flow node */
export const calculateElementLayout = (
nodes: Node[],
edges: Edge[],
options: {
direction: 'TB' | 'LR';
}
): { nodes: Node[]; edges: Edge[] } => {
const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
g.setGraph({ rankdir: options.direction });
edges.forEach((edge) => g.setEdge(edge.source, edge.target));
nodes.forEach((node) =>
g.setNode(node.id, {
...node,
width: node.measured?.width ?? 0,
height: node.measured?.height ?? 0,
})
);
Dagre.layout(g);
return {
nodes: nodes.map((node) => {
const position = g.node(node.id);
// We are shifting the dagre node position (anchor=center center) to the top left
// so it matches the React Flow node anchor point (top left).
const x = position.x - (node.measured?.width ?? 0) / 2;
const y = position.y - (node.measured?.height ?? 0) / 2;
return { ...node, position: { x, y } };
}),
edges,
};
};
const createFlowNode = (nodeData: Partial): Node => {
const nodeId = nodeData.id || getRandomStr();
return {
id: nodeId,
type: nodeData.type,
position: { x: 0, y: 0 },
dragHandle: `.${REACT_FLOW_DRAG_CLASS_NAME}`,
selectable: nodeData.type === NODE_TYPE.START_NODE ? false : true,
data: {
...nodeData,
id: nodeId,
},
};
};
/** 创建边 */
const createFlowEdge = (source: string, target: string, sourceHandle = OUTPUT_HANDLE_ID) => {
return {
id: `${source}_${target}`,
source,
sourceHandle,
target,
targetHandle: INPUT_HANDLE_ID,
};
};
/** 将 json schema 转换为 react-flow 节点和边信息 */
export const parseActionLogicToNodeList = (value: TActionLogicItem) => {
const nodes: Node[] = [
createFlowNode({
id: NODE_TYPE.START_NODE,
type: NODE_TYPE.START_NODE,
}),
];
const edges: Edge[] = [];
if (!value?.handler?.length) {
return { nodes: nodes, edges: edges };
}
const processNodes = (
items: TLogicItemHandlerFlow,
options?: {
/**
* 用于标记是从那种类型的 output flag id 导出的 flow
*/
sourceHandler: string;
}
) => {
items.forEach((item) => {
const currentNode = createFlowNode(item);
nodes.push(currentNode);
if (item.next) {
edges.push(createFlowEdge(item.id, String(item.next), options?.sourceHandler));
}
if (item.type === 'REQUEST_API') {
// 处理成功分支节点
if (item.afterSuccessResponse?.length) {
edges.push(createFlowEdge(item.id, String(item.afterSuccessResponse[0].id)));
processNodes(item.afterSuccessResponse);
}
// 处理失败分支节点
if (item.afterFailedResponse?.length) {
edges.push(createFlowEdge(item.id, String(item.afterFailedResponse[0].id), REQUEST_API_FAILED_HANDLE_ID));
processNodes(item.afterFailedResponse, {
sourceHandler: REQUEST_API_FAILED_HANDLE_ID,
});
}
}
});
};
const nextItem = value.handler[0];
edges.push(createFlowEdge(NODE_TYPE.START_NODE, nextItem.id));
processNodes(value.handler);
return { nodes, edges };
};
/** 将节点格式化json schema */
export const revertNodeToActionLogic = (params: { nodes: Node[]; edges: Edge[] }): TActionLogicItem => {
const { nodes, edges } = params;
const result: TActionLogicItem = {
type: 'ACTION',
handler: [],
};
// 找到起始节点
const startNode = nodes.find((node) => node.type === NODE_TYPE.START_NODE);
if (!startNode) return result;
const nodeMap = new Map(nodes.map((node) => [node.id, node]));
const visited = new Set();
const traverseNodes = (currentNodeId: string) => {
if (visited.has(currentNodeId)) return [];
visited.add(currentNodeId);
const currentNode = nodeMap.get(currentNodeId);
if (!currentNode) return [];
const handlers = [];
const nodeData: any = { ...currentNode.data, id: currentNodeId };
if (currentNode.type === 'REQUEST_API') {
// 获取成功分支节点
const successTargets = edges
.filter((e) => e.source === currentNodeId && e.sourceHandle === OUTPUT_HANDLE_ID)
.map((e) => traverseNodes(e.target))
.flat();
// 获取失败分支节点
const failedTargets = edges
.filter((e) => e.source === currentNodeId && e.sourceHandle === REQUEST_API_FAILED_HANDLE_ID)
.map((e) => traverseNodes(e.target))
.flat();
nodeData.afterSuccessResponse = successTargets;
nodeData.afterFailedResponse = failedTargets;
handlers.push(nodeData);
return handlers;
}
handlers.push(nodeData);
// 获取下一个主流程节点, 理论上只有能一个， 分叉逻辑需要使用特殊节点处理
const nextEdges = edges.filter((e) => e.source === currentNodeId && e.sourceHandle === OUTPUT_HANDLE_ID);
if (nextEdges.length > 1) {
message.error('不允许存在一个节点连接多个节点');
throw new Error('不允许存在一个节点连接多个节点');
}
if (nextEdges.length !== 0) {
/** 理论上只会有一个元素 */
nextEdges.forEach((edge) => {
const nextHandlers = traverseNodes(edge.target);
handlers.push(...nextHandlers);
nodeData.next = nextHandlers[0]?.id ?? null;
});
}
return handlers;
};
const handler = traverseNodes(startNode.id);
// 移除 start node
handler.shift();
result.handler = handler;
return result;
};
/** 通用的 flow action 画布中的 setter 配置 */
export const CommonDynamicValueSetter: SetterType[] = [
'StringSetter',
'NumberSetter',
'ExpressionSetter',
'JSONSetter',
{
componentName: 'FunctionSetter',
props: {
mode: 'inline',
minimap: false,
lineNumber: false,
containerStyle: {
width: '500px',
height: '250px',
},
},
},
];
export const UseNodeHasConnected = function (data: any, handleId: string) {
const reactFlowInstance = useReactFlow();
const edges = reactFlowInstance.getEdges();
return edges.some((edge) => edge.source === String(data.id) && (edge.sourceHandle || OUTPUT_HANDLE_ID) === handleId);
};
export const getNewNodePosInfo = function (currentNode: Node, newNodeData: any, sourceHandle?: string) {
// 计算新节点位置
const newNodePosition = {
x: currentNode.position.x,
y: currentNode.position.y + (currentNode.measured?.height ?? 0) + 150,
};
// 创建新节点
const newNode = {
id: newNodeData.id,
type: newNodeData.type,
position: newNodePosition,
/** 必须 */
dragHandle: `.${REACT_FLOW_DRAG_CLASS_NAME}`,
data: {
...newNodeData,
},
};
// 创建连线
const newEdge = {
id: `${currentNode.data.id}_${newNode.id}`,
source: String(currentNode.data.id),
sourceHandle: sourceHandle ?? OUTPUT_HANDLE_ID,
target: newNode.id,
targetHandle: INPUT_HANDLE_ID,
};
return {
newEdge,
newNode,
};
};
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/AdvanceSetterList.ts
================================================
import { ActionFlowSetter } from './ActionFlowSetter';
import { CSetter } from './type';
/** 需要单独导出避免循环以来，因为 ActionFlowSetter 使用了大量内置 setter */
export const BUILD_IN_ADVANCE_SETTER_MAP = {
ActionFlowSetter,
} as Record;
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/AntDColorSetter/index.tsx
================================================
import { ColorPicker, ConfigProvider } from 'antd';
import { CSetter, CSetterProps } from '../type';
import { DEFAULT_PRESET_COLORS } from '@/config/colorPickerColorList';
type ColorSetterProps = {
initialValue: string;
};
export const AntDColorSetter: CSetter = ({
onValueChange,
initialValue,
value,
setterContext,
...restProps
}: CSetterProps) => {
return (
{
onValueChange?.(color.toRgbString());
}}
presets={DEFAULT_PRESET_COLORS}
{...restProps}
/>
);
};
AntDColorSetter.setterName = '颜色设置器';
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ArraySetter/ArrayItem.tsx
================================================
import React, { useEffect, useRef } from 'react';
import { CForm } from '../../Form';
import { SetterSwitcher } from '../../SetterSwitcher';
import { DeleteOutlined } from '@ant-design/icons';
import { SetterObjType } from '@chamn/model';
export function ArrayItem(props: {
index: number;
labelPrefix?: string;
keyPaths: string[];
value: Record;
setters: SetterObjType[];
style: React.CSSProperties;
onValueChange: (val: Record) => void;
onDelete: () => void;
}) {
const { index, keyPaths, setters } = props;
const style = {
...props.style,
};
const objectValue = {
[index]: props.value,
};
const formRef = useRef(null);
useEffect(() => {
formRef.current?.setFields({
[index]: props.value,
});
}, [index, props.value]);
return (
}
name={String(index)}
label={`${props.labelPrefix ?? `元素-${index}`}`}
keyPaths={[...keyPaths, String(index)]}
setters={setters}
>
);
}
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ArraySetter/SortItemOrderModal.tsx
================================================
import React, { useEffect, useRef, useState } from 'react';
import { CSS, Transform } from '@dnd-kit/utilities';
import { Modal, ModalProps } from 'antd';
import {
DndContext,
DragEndEvent,
KeyboardSensor,
PointerSensor,
useDraggable,
useSensor,
useSensors,
} from '@dnd-kit/core';
import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable } from '@dnd-kit/sortable';
import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
import { getRandomStr } from '@chamn/model';
import styles from './style.module.scss';
export type SortItemOrderProps = {
list: any[];
keyPaths: string[];
label: string;
sortLabelKey?: string;
onValueChange?: (newList: any[]) => void;
} & ModalProps;
export const SortItemOrderModal = ({
list,
onValueChange,
keyPaths,
label,
sortLabelKey,
...modalProps
}: SortItemOrderProps) => {
const [listValue, setListValue] = useState<{ val: any; id: string }[]>([]);
useEffect(() => {
const innerList = list.map((el, index) => ({
val: el,
oldIndex: index,
id: getRandomStr(),
}));
setListValue(innerList);
}, [list, modalProps.open]);
const sensors = useSensors(
useSensor(PointerSensor, {
activationConstraint: {
distance: 15,
},
}),
useSensor(KeyboardSensor, {
coordinateGetter: sortableKeyboardCoordinates,
})
);
function handleDragEnd(event: DragEndEvent) {
const { active, over } = event;
if (active.id !== over?.id) {
const oldIndex = listValue.findIndex((el) => el.id === active?.id);
const newIndex = listValue.findIndex((el) => el.id === over?.id);
const newInnerListVal = arrayMove(listValue, oldIndex, newIndex);
const newVal = newInnerListVal.map((el) => {
return el.val;
});
setListValue(newInnerListVal);
onValueChange?.(newVal);
}
}
const [modalTransform, setModalTransform] = useState({
x: 0,
y: 0,
scaleX: 1,
scaleY: 1,
});
return (
{
return (
{
const res = {
...modalTransform,
...delta,
x: modalTransform.x + (delta?.x || 0),
y: modalTransform.y + (delta?.y || 0),
};
setModalTransform(res);
}}
>
);
}}
>
{listValue.map(({ id, val }, index) => {
return
);
};
const ModalDragView = ({ modal, transform }: { modal: React.ReactNode; transform: Transform }) => {
const id = useRef(getRandomStr());
const {
setNodeRef,
attributes,
listeners,
transform: tempTransform,
} = useDraggable({
id: id.current,
});
const finalTransform = {
...transform,
...tempTransform,
x: transform.x + (tempTransform?.x || 0),
y: transform.y + (tempTransform?.y || 0),
};
return (
{modal}
);
};
const SortableItem = (props: { id: string; index: string | number; label?: string }) => {
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: props.id });
const style = {
transform: CSS.Transform.toString(transform),
transition,
};
const labelText = props.label || `Ele ${props.index}`;
return (
{labelText}
);
};
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ArraySetter/index.tsx
================================================
import { useEffect, useMemo, useState } from 'react';
import { Button, ConfigProvider } from 'antd';
import { CSetterProps } from '../type';
import { getSetterList } from '../../../utils';
import { SetterType } from '@chamn/model';
import { ArrayItem } from './ArrayItem';
import { SortItemOrderModal } from './SortItemOrderModal';
import styles from './style.module.scss';
export type CArraySetterProps = {
item: {
setters: SetterType[];
initialValue?: any;
};
itemLabelPrefix?: string;
sortLabelKey?: string;
itemLabelPrefixKey?: string;
};
function formatValue(value: unknown) {
if (Array.isArray(value)) {
return value;
} else {
return [];
}
}
export const ArraySetter = ({
onValueChange,
setterContext,
item: { setters, initialValue: itemInitialValue },
sortLabelKey,
initialValue,
itemLabelPrefix,
itemLabelPrefixKey,
...props
}: CSetterProps) => {
const { keyPaths, label } = setterContext;
const listValue: any[] = useMemo(() => {
return formatValue(props.value ?? initialValue);
}, [initialValue, props.value]);
const [sortVisible, setSortVisible] = useState(false);
const innerSetters = getSetterList(
setters || [
{
component: 'StringSetter',
},
]
);
useEffect(() => {
if (setterContext.setCollapseHeaderExt) {
setterContext.setCollapseHeaderExt?.(
{
e.preventDefault();
e.stopPropagation();
setSortVisible(true);
}}
>
sort
);
}
}, [setterContext]);
return (
{listValue.map((val, index) => {
return (
{
listValue[index] = val[index];
onValueChange?.([...listValue]);
}}
setters={innerSetters}
onDelete={() => {
const newVal = [...listValue];
newVal.splice(index, 1);
onValueChange?.(newVal);
}}
/>
);
})}
{
const newVal = [...listValue];
onValueChange?.([...newVal, itemInitialValue ?? '']);
}}
>
Add One
{
onValueChange?.([...newVal]);
}}
open={sortVisible}
list={listValue}
keyPaths={keyPaths}
onCancel={() => {
setSortVisible(false);
}}
onOk={() => {
setSortVisible(false);
}}
/>
);
};
ArraySetter.setterName = '数组设置器';
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ArraySetter/style.module.scss
================================================
.dragItem {
cursor: grab;
border: 1px solid $borderColor;
background-color: white;
padding: 10px;
text-align: center;
margin-bottom: 10px;
font-size: $fontSizeSmall;
border-radius: $borderRadius;
}
.sortModalBox {
padding: 20px 10px 10px;
overflow: auto;
max-height: 500px;
}
.addOneBtn {
width: 100%;
font-size: $fontSizeSmall !important;
color: $fontColor;
}
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/BooleanSetter/index.tsx
================================================
import React from 'react';
import { ConfigProvider, Switch, SwitchProps } from 'antd';
import { CSetter, CSetterProps } from '../type';
type BooleanSetterProps = SwitchProps;
export const BooleanSetter: CSetter = ({
onValueChange,
initialValue,
setterContext,
...props
}: CSetterProps) => {
return (
{
props.onChange?.(open, e);
onValueChange?.(open);
}}
/>
);
};
BooleanSetter.setterName = 'Bool 设置器';
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/CSSSizeSetter/index.tsx
================================================
import { ConfigProvider } from 'antd';
import { CSetter, CSetterProps } from '../type';
import { CSSSizeInput, CSSSizeInputProps } from '@/component/CSSSizeInput';
export const CSSSizeSetter: CSetter = ({
onValueChange,
setterContext,
initialValue,
...props
}: CSetterProps) => {
return (
{
onValueChange?.(newVal);
}}
/>
);
};
CSSSizeSetter.setterName = 'CSS size 设置器';
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/CSSValueSetter/index.tsx
================================================
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { AutoComplete, ConfigProvider } from 'antd';
import { CSetter, CSetterProps } from '../type';
import { BaseSelectRef } from 'rc-select';
import clsx from 'clsx';
import styles from './style.module.scss';
import { CSSProperties, CSSPropertiesKey } from '../../../../CSSPropertiesEditor/cssProperties';
type CSSValueSetterProps = {
propertyKey: string;
};
export const CSSValueSetter: CSetter = ({
onValueChange,
propertyKey = '',
value,
initialValue,
}: CSetterProps) => {
// const { keyPaths, onSetterChange } = setterContext;
const propertyValueRef = useRef(null);
const [innerValue, setInnerVal] = useState(value ?? (initialValue || ''));
const [focusState, setFocusState] = useState(false);
const updateOuterValue = () => {
onValueChange?.(innerValue);
};
useEffect(() => {
setInnerVal(value);
}, [value]);
const optionsValue = useMemo(() => {
const list = CSSProperties[propertyKey as unknown as CSSPropertiesKey]?.values || [];
return list.map((el) => {
return {
value: el,
};
});
}, [propertyKey]);
return (
{
setInnerVal(val);
updateOuterValue();
}}
style={{
flex: 1,
}}
onFocus={() => {
setFocusState(true);
}}
onBlur={() => {
setFocusState(false);
}}
className={clsx([styles.inputAuto, focusState && styles.active])}
placeholder="value"
options={optionsValue}
>
);
};
CSSValueSetter.setterName = 'CSS值设置器';
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/CSSValueSetter/style.module.scss
================================================
.inputAuto {
border-bottom: 1px solid rgba(128, 128, 128, 0.23);
}
.active {
border-bottom: 1px solid rgb(128, 177, 255);
}
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ColorSetter/index.tsx
================================================
import { ConfigProvider, Input, Popover } from 'antd';
import { CSetter, CSetterProps } from '../type';
import { SketchPicker } from 'react-color';
type ColorSetterProps = {
initialValue: string;
};
export const ColorSetter: CSetter = ({ onValueChange, initialValue, value }: CSetterProps) => {
return (
{
const newColorStr = `rgba(${newColor.rgb.r},${newColor.rgb.g},${newColor.rgb.b}, ${newColor.rgb.a || 1})`;
onValueChange?.(newColorStr);
}}
/>
}
placement={'bottomLeft'}
styles={{
body: {
padding: 0,
},
}}
arrow={{
pointAtCenter: false,
}}
>
}
/>
);
};
ColorSetter.setterName = '颜色设置器';
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/EmptyValueSetter/index.tsx
================================================
import { ConfigProvider, Radio } from 'antd';
import { CSetter, CSetterProps } from '../type';
import { CheckboxGroupProps } from 'antd/es/checkbox';
import { useEffect, useMemo } from 'react';
const emptyValMap = {
_null_: null,
_undefined_: undefined,
};
export const EmptyValueSetter: CSetter<{ emptyValue?: any }> = ({
onValueChange,
setterContext,
initialValue,
emptyValue,
hiddenDefaultOption,
...props
}: CSetterProps<{ emptyValue?: string; hiddenDefaultOption?: boolean }>) => {
const options = useMemo['options']>(() => {
const tempValue = [
{ label: 'Undefined', value: '_undefined_' },
{ label: 'Null', value: '_null_' },
];
if (emptyValue) {
if (hiddenDefaultOption) {
return [{ label: emptyValue, value: emptyValue }];
} else {
tempValue.push({ label: emptyValue, value: emptyValue });
}
}
return tempValue;
}, [emptyValue, hiddenDefaultOption]);
const innerValue = useMemo(() => {
const tempValue = initialValue || props.value;
if (tempValue === undefined) {
return '_undefined_';
}
if (tempValue === null) {
return '_null_';
}
return tempValue || '_undefined_';
}, [initialValue, props.value]);
// 切换初始化时，直接强制重置为 undefined
useEffect(() => {
onValueChange?.(emptyValue ?? undefined);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
{
let newVal = e.target.value;
if (['_null_', '_undefined_'].includes(newVal)) {
newVal = emptyValMap[newVal as keyof typeof emptyValMap];
}
onValueChange?.(newVal);
}}
/>
);
};
EmptyValueSetter.setterName = '空值设置器';
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ExpressionSetter/index.tsx
================================================
import React, { useRef, useState } from 'react';
import { Button, ConfigProvider, Modal } from 'antd';
import { CSetter, CSetterProps } from '../type';
import { EditorType, MonacoEditor, MonacoEditorInstance } from '../../../../MonacoEditor';
import DefaultTslibSource from '../FunctionSetter//defaultDts?raw';
import { CNodePropsTypeEnum } from '@chamn/model';
import styles from './style.module.scss';
import { getPageTypeDefined } from '../FunctionSetter/helper';
export type ExpressionSetterProps = CSetterProps<{
value: {
type: string;
value: string;
};
mode: 'modal' | 'inline';
containerStyle?: React.CSSProperties;
minimap?: boolean;
lineNumber?: boolean;
editorOptions?: EditorType['options'];
}>;
export const ExpressionSetter: CSetter = ({
onValueChange,
initialValue,
setterContext,
editorOptions,
mode = 'modal',
...props
}) => {
const editorRef = useRef(null);
const [open, setOpen] = useState(false);
const onInnerValueChange = () => {
const newValStr = editorRef.current?.getValue() || '';
onValueChange?.({
type: CNodePropsTypeEnum.EXPRESSION,
value: newValStr,
});
};
let lineNumberOptions = {};
if (props.lineNumber === false || mode === 'inline') {
lineNumberOptions = {
lineNumbers: 'off',
lineDecorationsWidth: 0,
lineNumbersMinChars: 0,
glyphMargin: false,
};
}
const editorView = (
{
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
noSemanticValidation: true,
noSyntaxValidation: false,
});
// compiler options
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
target: monaco.languages.typescript.ScriptTarget.ES5,
allowNonTsExtensions: true,
});
const realtimeDts = await getPageTypeDefined(setterContext.pluginCtx.pageModel, setterContext.nodeModel);
const libUri = 'ts:filename/chameleon.default.variable.d.ts';
monaco.languages.typescript.javascriptDefaults.addExtraLib(realtimeDts, libUri);
// When resolving definitions and references, the editor will try to use created models.
// Creating a model for the library allows "peek definition/references" commands to work with the library.
const model = monaco.editor.getModel(monaco.Uri.parse(libUri));
if (!model) {
monaco.editor.createModel(DefaultTslibSource, 'typescript', monaco.Uri.parse(libUri));
}
}}
onDidMount={(editor) => {
editorRef.current = editor;
}}
initialValue={props.value?.value ?? initialValue}
language={'javascript'}
options={{
automaticLayout: true,
tabSize: 2,
minimap: { enabled: false },
folding: false,
hover: {
// enabled: false, // ✅ 禁用 hoverWidget
},
...lineNumberOptions,
...(editorOptions || {}),
}}
onChange={() => {
if (mode === 'inline') {
// TODO: 需要节流每 1 秒触发一次
onInnerValueChange();
}
}}
/>
);
if (mode === 'inline') {
return (
{editorView}
);
}
return (
{
setOpen(true);
}}
>
{props.value?.value || 'Edit Expression'}
setOpen(false)}
width="calc(100vw - 100px)"
onOk={() => {
onInnerValueChange();
setOpen(false);
}}
style={{
maxWidth: '800px',
}}
styles={{
body: {
height: '300px',
},
}}
>
{open && editorView}
);
};
ExpressionSetter.setterName = '表达式';
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/ExpressionSetter/style.module.scss
================================================
.expressionCodeEditor {
:global {
.monaco-editor .suggest-widget {
width: 300px !important;
left: 0 !important;
right: auto !important;
transform: none !important; // 防止默认偏移
}
}
}
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/FastLayoutSetter/index.tsx
================================================
import { CSSSizeInputProps } from '@/component/CSSSizeInput';
import { CSetter, CSetterProps } from '../type';
import { StyleUIPanel, StyleUIPanelRef } from '@/component/StylePanel';
import { useCallback, useEffect, useMemo, useRef } from 'react';
import { formatStyleProperty, styleArr2Obj, styleObjToArr } from '@/utils';
import { CNode, CRootNode } from '@chamn/model';
import { isEqual } from 'lodash-es';
export const FastLayoutSetter: CSetter = ({
value,
setterContext,
initialValue,
...resetProps
}: CSetterProps) => {
const cssUIRef = useRef(null);
const node = setterContext.nodeModel;
const lastNode = useRef();
const initialValueInner = useMemo(() => {
const newStyle = node.value.style || [];
const { normalProperty } = formatStyleProperty(newStyle);
return styleArr2Obj(normalProperty);
}, [node.value.style]);
const updatePanelValue = useCallback(() => {
lastNode.current = node;
const newStyle = node.value.style || [];
const { normalProperty } = formatStyleProperty(newStyle);
cssUIRef.current?.setValue(styleArr2Obj(normalProperty) || {});
}, [node]);
useEffect(() => {
updatePanelValue();
node.emitter.on('onNodeChange', updatePanelValue);
node.emitter.on('onReloadPage', updatePanelValue);
return () => {
node.emitter.off('onNodeChange', updatePanelValue);
node.emitter.off('onReloadPage', updatePanelValue);
};
}, [node.emitter, node.id, updatePanelValue]);
return (
{
const newStyle = styleObjToArr(newNormaCss);
const { expressionProperty } = formatStyleProperty(node.value.style || []);
const newStyleList = [...newStyle, ...expressionProperty];
if (isEqual(node.value.style, newStyleList)) {
return;
}
node.value.style = newStyleList;
node.updateValue();
}}
/>
);
};
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/FunctionSetter/defaultDts.ts
================================================
type SetStateInternal = {
_(
partial:
| T
| Partial
| {
_(state: T): T | Partial;
}['_'],
replace?: boolean | undefined
): void;
}['_'];
export interface StoreApi {
setState: SetStateInternal;
getState: () => T;
subscribe: (listener: (state: T, prevState: T) => void) => () => void;
/**
* @deprecated Use `unsubscribe` returned by `subscribe`
*/
destroy: () => void;
}
type PageState = any;
type NodeId = keyof PageState;
type MethodsManager = any;
type GlobalState = any;
type CurrentNodeState = any;
type PageStateManager = {
state: PageState[K];
updateState: (newState: Partial) => void;
};
type PageStateManagerMap = {
[K in keyof PageState]: PageStateManager;
};
type ContextType = {
/** 渲染函数的入口参数 */
params?: Record;
/** 全局状态 */
globalState?: GlobalState;
/** 更新全局状态 */
updateGlobalState?: (newState: Partial) => void;
/** 存储当前节点的数据，不具有响应性, 可能不是最新的值, 可以直接赋值 **/
staticVar?: Record;
methods?: Record any>;
/** 当前节点状态 **/
state?: CurrentNodeState;
/** 更新当前节点状态 */
updateState?: (newState: Partial) => void;
/** 获取当前节点状态最新 */
/** 用于访访问和管理页面被注册为全局的局部 state 快照，在闭包中使用会存在值不是最新的情况 */
stateManager: PageStateManagerMap;
/** 循环数据 */
loopData?: {
item: any;
index: number;
};
/** 组件节点的 Ref, 可以通过 current 直接调用节点提供的方法，需要判断是否在存在 */
nodeRefs?: { get: (/** 节点 id */ nodeId: NodeId) => { current?: any } };
/** 运行时全局的 store 管理 */
storeManager?: StoreManager;
/** 第三方辅助库 */
thirdLibs?: Record;
};
declare class StoreManager {
storeMap: Map>;
getStore(storeName: T): StoreApi | undefined;
getState(nodeId: T): any;
getStateObj(nodeId: T): {
state: PageState[T];
updateState: (newState: Partial) => void;
};
setState(nodeId: NodeId, newState: Partial): void | undefined;
connect(name: string, cb: (newState: PageState[T]) => void): () => void;
getStateSnapshot(): PageState;
destroy(): void;
}
type UpdaterMap = {
[K in NodeId /** 更新对应 nodeId 的数据 **/]: (newState: Partial) => void;
};
declare global {
/** 运行时上下文 */
const $CTX: ContextType;
/** 当前节点的 state */
const $STATE: CurrentNodeState;
/** global state */
const $G_STATE: GlobalState;
/** 当前页面所有节点的 state */
const $ALL_STATE: PageState;
/** 状态更新函数 */
const $U_STATE: UpdaterMap;
/** 节点方法调用 */
const $M: MethodsManager;
/** 当前节点 ID */
const $N_ID: string;
/** 存储所有节点的 id */
const $IDS: Record;
/** 上一个 API 返回的数据，可能不存在 */
const $RESPONSE: any;
/** 循环数据，如果存在 */
const $LOOP_DATA: ContextType['loopData'];
/** 函数在配置面板传入的参数 */
const $PARAMS: ContextType['params'];
/** 事件传入的第一个参数，如果需要获取第二个参数，请使用 $ARGS 数组获取*/
const $EVENT_PARAMS: any;
/** 事件对象 */
const $EVENT: MouseEvent;
/** 函数执行时传入的入参 */
const $ARGS: any[];
/** action flow 中的局部变量 */
const $ACTION_VAR_SPACE: any;
}
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/FunctionSetter/helper.ts
================================================
import { CNode, CPage, InnerComponentNameEnum, traversePageNode } from '@chamn/model';
import DefaultTslibSource from './defaultDts?raw';
import { quicktype, InputData, jsonInputForTargetLanguage } from 'quicktype-core';
export async function quicktypeJSON(typeName: string, jsonString: string) {
const jsonInput = jsonInputForTargetLanguage('typescript');
// We could add multiple samples for the same desired
// type, or many sources for other types. Here we're
// just making one type from one piece of sample JSON.
await jsonInput.addSource({
name: typeName,
samples: [jsonString],
});
const inputData = new InputData();
inputData.addInput(jsonInput);
return await quicktype({
inputData,
lang: 'typescript',
rendererOptions: {
'just-types': 'true',
'nice-property-names': 'false',
'acronym-style': 'original',
},
});
}
export const getPageTypeDefined = async (pageModel: CPage, currentNode: CNode) => {
const stateTypeMap: Record<
string,
{
stateTypeDefined: string;
methodsTypeDefined: string;
}
> = {} as any;
const pList: any[] = [];
traversePageNode(pageModel, (node) => {
stateTypeMap[node.id] = {
stateTypeDefined: '',
methodsTypeDefined: '',
};
if (node.value.state) {
const cb = async () => {
let typeName = `CNode${node.id.toUpperCase()}`;
let id = node.id;
if (node.value.componentName === InnerComponentNameEnum.ROOT_CONTAINER) {
typeName = 'GlobalState';
id = 'GlobalState';
}
const tempRes = await quicktypeJSON(typeName, JSON.stringify(node.value.state));
stateTypeMap[id] = {
stateTypeDefined: tempRes.lines.join('\n'),
methodsTypeDefined: '',
};
};
pList.push(cb());
}
});
await Promise.all(pList);
const globalStateDts = stateTypeMap['GlobalState'];
delete stateTypeMap.GlobalState;
// 拼接 整体的 page state 类型定义
let pageStateDts = '';
pageStateDts += `type PageState = {\n`;
const nodeIdList: string[] = [];
Object.keys(stateTypeMap).forEach((k) => {
if (stateTypeMap[k].stateTypeDefined) {
const body = getBodyDefined(`CNode${k.toUpperCase()}`, stateTypeMap[k].stateTypeDefined);
pageStateDts += ` '${k}': ${body},\n`;
nodeIdList.push(`'${k}'`);
}
});
pageStateDts += `};\n\n`;
let dtsContent = DefaultTslibSource.replace('type PageState = any;', pageStateDts);
dtsContent = dtsContent.replace('type NodeId = any;', `type NodeId = ${nodeIdList.join(' | ')};`);
if (globalStateDts?.stateTypeDefined) {
dtsContent = dtsContent.replace('type GlobalState = any;', globalStateDts.stateTypeDefined);
dtsContent = dtsContent.replace(
'Partial',
getBodyDefined('GlobalState', globalStateDts.stateTypeDefined)
);
}
// 处理当前 node 的 types
const currentNodeDts = await quicktypeJSON('CurrentNodeState', JSON.stringify(currentNode.value.state || {}));
const currentNodeDtsText = currentNodeDts.lines.join('\n');
dtsContent = dtsContent.replace('type CurrentNodeState = any;', currentNodeDtsText);
dtsContent = dtsContent.replace('Partial', getBodyDefined('CurrentNodeState', currentNodeDtsText));
// 处理 methods 调用
return dtsContent;
};
const getBodyDefined = (
typeName: string,
dtsStr: string,
options?: {
isPartial: true;
}
) => {
const body = dtsStr.replace(`export interface ${typeName}`, '').trim();
if (!options?.isPartial) {
return body;
}
return `Partial<${body}>`;
};
================================================
FILE: packages/engine/src/component/CustomSchemaForm/components/Setters/FunctionSetter/index.tsx
================================================
import React, { useRef, useState } from 'react';
import { Button, ConfigProvider, Modal } from 'antd';
import { CSetter } from '../type';
import { EditorType, MonacoEditor, MonacoEditorInstance } from '../../../../MonacoEditor';
import DefaultTslibSource from './defaultDts?raw';
import { CNodePropsTypeEnum } from '@chamn/model';
import { getPageTypeDefined } from './helper';
export const FunctionSetter: CSetter<{
mode: 'modal' | 'inline';
containerStyle?: React.CSSProperties;
minimap?: boolean;
lineNumber?: boolean;
editorOptions?: EditorType['options'];
}> = ({ onValueChange, initialValue, setterContext, editorOptions, ...props }) => {
getPageTypeDefined(setterContext.pluginCtx.pageModel, setterContext.nodeModel);
const editorRef = useRef(null);
const [open, setOpen] = useState(false);
const onInnerValueChange = () => {
const newValStr = editorRef.current?.getValue() || '';
onValueChange?.({
type: CNodePropsTypeEnum.FUNCTION,
value: newValStr,
});
};
let lineNumberOptions = {};
if (props.lineNumber === false) {
lineNumberOptions = {
lineNumbers: 'off',
lineDecorationsWidth: 0,
lineNumbersMinChars: 0,
glyphMargin: false,
};
}
const editorView = (
{
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
noSemanticValidation: true,
noSyntaxValidation: false,
});
// compiler options
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
target: monaco.languages.typescript.ScriptTarget.ES5,
allowNonTsExtensions: true,
});
const realtimeDts = await getPageTypeDefined(setterContext.pluginCtx.pageModel, setterContext.nodeModel);
const libUri = 'ts:filename/chameleon.default.variable.d.ts';
monaco.languages.typescript.javascriptDefaults.addExtraLib(realtimeDts, libUri);
// When resolving definitions and references, the editor will try to use created models.
// Creating a model for the library allows "peek definition/references" commands to work with the library.
const model = monaco.editor.getModel(monaco.Uri.parse(libUri));
if (!model) {
monaco.editor.createModel(DefaultTslibSource, 'typescript', monaco.Uri.parse(libUri));
}
}}
onDidMount={(editor) => {
editorRef.current = editor;
}}
initialValue={props.value?.value ?? (initialValue || 'function run() {\n}')}
language={'javascript'}
options={{
automaticLayout: true,
tabSize: 2,
minimap: {
enabled: props.minimap ?? true,
},
...lineNumberOptions,
...(editorOptions || {}),
}}
onChange={() => {
if (props.mode === 'inline') {
// TODO: 需要节流每 1 秒触发一次
onInnerValueChange();
}
}}
/>
);
if (props.mode === 'inline') {
return (
{editorView}
);
}
return (
{
setOpen(true);
}}
>
Edit Function
setOpen(false)}
width="calc(100vw - 100px)"
onOk={() => {
onInnerValueChange();
setOpen(false);
}}
style={{
maxWidth: '1300px',
}}
styles={{
body: {
minHeight: '500px',
height: 'calc(100vh - 280px)',
},
}}
>