@aglyn/ 签名人
Besigner的逻辑,Aglyn的视觉编辑器,里面没有UI:编辑应用程序和
界面状态、选择和徘徊、拖放规则、元素和
样式剪贴板和节点移动。 安装它,如果你正在建造自己的
在Aglyn的节点模型上编辑 UI. 如果你想让编辑像船一样飞,就拿
@aglyn/besigner-ui,它基于此软件包.
从Aglyn monorepo出版到npm. 随后的版本 语义版本。 。 。 .
安装
npm install @aglyn/besigner
同伴依赖性 :
react(仅用于参考类型;软件包不产生)
这是"只有逻辑"的消费者故事: @aglyn/besigner 合并
@aglyn/aglyn 安装为 react 作为唯一的同伴。 它需要没有 next,没有
SDK基地,没有MUI和没有 @aglyn/besigner-ui. 框架同行
@aglyn/aglyn 这些都是可选的.
里面有什么东西
编辑器应用程序和接口状态 :
initializeBesignerApp, (中文(简体) ),getBesignerApp, (中文(简体) ),doesBesignerAppExist财务报告和审定财务报表deleteBesignerApp管理命名的编辑器应用实例 (单位:千美元)BesignerAppController) (中文(简体) ). 没有名称,则使用默认的应用程序.BesignerInterfaceController持有编辑器的旗帜和面板状态.setBesignerFlag, (中文(简体) ),setBesignerFlags, (中文(简体) ),setBesignerPanel财务报告和审定财务报表setBesignerPanels更新给给定的应用程序 .- 该状态的常数和类型:
InteractionModeFlag, (中文(简体) ),BesignerDeviceFlag, (中文(简体) ),BesignerPanelViewFlag, (中文(简体) ),BesignerPanelTabFlag, (中文(简体) ),BesignerContext和旗和面板键类型.
管理者,在 @aglyn/aglyn数字 :
focus是选择、徘徊和扩展树的状态:setSelectedNode, (中文(简体) ),getSelected, (中文(简体) ),rangeSelectNode, (中文(简体) ),clearSelection, (中文(简体) ),setHoveredNode, (中文(简体) ),expandNode, (中文(简体) ),collapseNode还有其他.dnd是一个DndManager实例跟踪当前拖放目标 空降区。 再说一遍confirmValidLinealRelationship检查 (b) 某一项目是否属于某一父项目(线性规则), 和空投区域几何帮助,例如determineDropRegion。 。 。 .clipboard副本和粘贴元素(copyNodes, (中文(简体) ),pasteInto, (中文(简体) ),hasContent, (中文(简体) ),clear),以及styleClipboard样式也一样。 这个 剪贴板镜像本身进入localStorage。 。 。 .moveNodeIn, (中文(简体) ),moveNodeOut, (中文(简体) ),canMoveNodeIn, (中文(简体) ),canMoveNodeOut, (中文(简体) ),resolveMoveIn财务报告和审定财务报表resolveMoveOut将节点一个关卡移动入或出 它的邻居.pick是“ 在画布上选择一个元素” 模式 :startPick, (中文(简体) ),cancelPick, (中文(简体) ),isPicking, (中文(简体) ),handlePickClick。 。 。 .refs将节点ID图到他们完成的DOM refs上,一个UI填充.isTextEntryElement财务报告和审定财务报表isTextEntryFocused告诉快捷键处理器 用户正在输入.devicePreviewWidth财务报告和审定财务报表isRootElementId他们是小帮手.
每个文件下 src/lib 也可以通过子路径达到,例如
@aglyn/besigner/focus-manager/focus-manager。 。 。 .
使用量
import { canvas } from '@aglyn/aglyn'
import {
canMoveNodeOut,
clipboard,
focus,
initializeBesignerApp,
moveNodeOut,
} from '@aglyn/besigner'
const app = initializeBesignerApp()
// `nodes` is a NodesMap loaded from a stored screen version
canvas.setNodes(nodes)
const [first] = canvas.rootNode.children
focus.setSelectedNode(first)
clipboard.copyNodes(focus.getSelected())
const pasted = clipboard.pasteInto(canvas.rootNode)
if (pasted.error) console.warn(pasted.error)
if (canMoveNodeOut(first)) moveNodeOut(first)
一个完整的应用程序是这样构建的, 有自己的大纲、工具栏和预览,
实值 examples/consumers/logic-only
在单体。 它安装这个软件包 @aglyn/aglyn 从 npm 改为
react aglyn的CI在浏览器里建立并运行它
在每一个释放.
怎样才合适
这是 besigner 包映射的范围:设计者的逻辑,
无需UI即可发布. 进口核心@aglyn/aglyn)和
常规 @aglyn/shared-* 只有软件包。 它从不进口设计师UI
渲染器或插件 . @aglyn/besigner-ui 上面是反应表面,还有
插件也可能导入它 .
许可证
阿帕奇2.0 (英语). 资料来源: https://github.com/aglyn/aglyn/tree/main/libs/besigner/core 页面存档备份,存于互联网档案馆