@aglyn/ 签名人- ii
Aglyn的影视编辑 Aglyn在Aglyn号上航行
控制台:工作空间、帆布取景口、元素树、检查表、,
工具栏、拖放和工作草稿。 如果您想要挂载, 请安装
aglyn编辑器在您的应用程序。 如果你想建立一个不同的UI over the
相同的编辑逻辑, 接受 @aglyn/besigner 换句话说.
从Aglyn monorepo出版到npm. 随后的版本 语义版本。 。 。 .
安装
npm install @aglyn/besigner-ui
同伴依赖关系,今天所有需要:
react@mui/material, (中文(简体) ),@mui/system, (中文(简体) ),@mui/labnextfirebase
next 财务报告和审定财务报表 firebase 作为同行的可嵌入编辑器不需要,他们
今天仍然需要. next 是一个对等点,因为视图画布和
工作空间编辑器加载自身部件 next/dynamic。 。 。 . firebase 是一个
对等点, 因为共享工作草稿存储( e)drafts/besigner-server-draft(中文(简体) )
阅读和写Firestore本身。 该软件包已被证明安装和
从登记册中与在场的同行捆绑在一起,以及 react-dom
和MUI的情感包,没有 firebase-admin,任意 @aglyn/tenant-*
软件包或任何 @aglyn/plugins-* 软件包.
里面有什么东西
下面命名的棋子是从包根导出, 除非是子路径
给定; 每个文件下 src/lib 也可以通过子路径达到.
- 根和提供者 :
BesignerRootProviderComponent编辑withBesignerContext收尾设置编辑器应用程序上下文, 即 拖放上下文、 成品元素注册、 组件抽屉 和剪贴板快捷键. - 工作空间和取景口 :
WorkspaceEditorComponent, (中文(简体) ),WorkspacePanelComponent, (中文(简体) ),AsidePanelComponent, (中文(简体) ),ViewportRootComponent, (中文(简体) ),ViewportCanvasComponent财务报告和审定财务报表ViewportFrameComponent。这个框架使 画布与@aglyn/aglyn-node-renderer在编辑器中互换 叶子(NodeLeaf)用于选择和拖动行为. - 工具栏和控件 :
AppBarPrimaryComponent,二级应用程序栏和 面包屑,HistoryControlsComponent, (中文(简体) ),DevicePreviewControlsComponent, (中文(简体) ),PanelControlsComponent,以及方案预览、缩放、互动和添加 控制系统. - 元素树和帆布铬:
NodeTreeView, (中文(简体) ),NodeOverlay, (中文(简体) ),NodeOutline, (中文(简体) ),NodeContextMenu,节点快速动作和节点卡. - 探长:
ElementPropsForm对于一个组件的属性,该元素 样式窗体、属性对话框、属性值窗体和符号字段 (单位:千美元)token-text-field, (中文(简体) ),token-pill) (中文(简体) ). 框样式器( E)BoxStyler) 位于 子路径@aglyn/besigner-ui/box-styler/index。 。 。 . - 文件和草案:
useBesignerDocument装入并保存文档 通过一个来源对呼叫者提供的材料进行编辑;useBesignerDraft, (中文(简体) ), 浏览器草稿存储( e)readBesignerDraft, (中文(简体) ),writeBesignerDraft, (中文(简体) ),clearBesignerDraft)和Firestore 草稿商店(readServerDraft, (中文(简体) ),writeServerDraft, (中文(简体) ),clearServerDraft保持工作进展.BesignerDraftAlertComponent财务报告和审定财务报表BesignerConflictAlertComponent表面 他们. - 钩子:
useAglynBesignerFlag, (中文(简体) ),useAglynBesignerPanel, (中文(简体) ),useBesignerAppContext, (中文(简体) ),useLeafDrag, (中文(简体) ),useLeafDrop, (中文(简体) ),useDeleteElementCallback还有其他. - 主机接合器, 由于 React 上下文, 嵌入程序会填充 :
MediaPickerContext, (中文(简体) ),BindingPickerContext, (中文(简体) ),BesignerInspectorExtrasContext, (中文(简体) ),BesignerToolbarExtrasContext,则 组成部分促进、互动和编程的铬环境.
使用量
编辑器由这些部件组成,而不是作为一个组件挂起. 从根导入 :
import {
NodeTreeView,
ViewportCanvasComponent,
ViewportRootComponent,
WorkspaceEditorComponent,
useBesignerDocument,
withBesignerContext,
} from '@aglyn/besigner-ui'
编辑挂起前必须先有两样东西 否则就扔了 其第一项判决:
- 编辑器应用程序: 调用
initializeBesignerApp()从@aglyn/besigner一次; - 控制台主题作为 CSS 变量: 将编辑器内置
ThemeCssVarProvider从@aglyn/shared-ui-theme输入{ light: consoleThemeLight, dark: consoleThemeDark }. 一个简单的MUIThemeProvider还不够,因为编辑的风格读取了主题 CSS变量.
最小的工作组成是单相机中的例子应用,
examples/consumers/besigner-ui数字 :
a 从 npm 安装这些软件包的 Vite app, 注册四个元素
类型,并挂载工作空间、视图和画布。 阿格林的线人
在每版的浏览器中构建并打开.
全部组成是控制台的屏幕编辑页,下方
apps/console/app/(editor)/[orgSlug]/hosts/[host]/screens/[screenId]/versions/[versionId]/besigner/page.tsx。 。 。 .
它用 withBesignerContext,将文档装入
useBesignerDocument,并列出工作空间、视图和面板。 这个
画布可以渲染的组件来自在核心中注册的插件,
例如 @aglyn/plugins-mui。 。 。 .
怎样才合适
这是 besigner-ui 包映射的范围, 设计者的顶端
堆栈: 它导入 @aglyn/besigner (逻辑), @aglyn/aglyn-node-renderer, (中文(简体) ),
@aglyn/aglyn-markdown-editor,该核心 @aglyn/aglyn,和通用软件
@aglyn/shared-* 软件包。 它不导入插件, 插件从不导入
设计师UI.
许可证
阿帕奇2.0 (英语). 资料来源: https://github.com/aglyn/aglyn/tree/main/libs/besigner/feature/designer 互联网档案馆的存檔,存档日期2014-12-02