@ cratis/ 事件模型

Cratis事件模型板作为反应组件. 这是相同的板 Cratis Studio所画, 无论是编辑还是只读的取景器.

该套装与Cratis Studio一同发布并搭载了Studio版本. 虽然如此 0.x 它的API在小版本之间仍然可以更改,所以给一个小版本打针,例如 ~0.105.0,并安装同样的版本 @cratis/scene。 。 。 .

安装

npm install @cratis/event-models @cratis/scene @cratis/components @cratis/fundamentals primeicons pixi.js react react-dom

除了董事会本身之外的一切都是对等依赖,所以您的应用程序决定了版本.

铺设一板

import { EventModelBoard, readEventModelDocument } from '@cratis/event-models';
import '@cratis/components/styles';
import '@cratis/event-models/theme';
import '@cratis/event-models/styles';
import '@cratis/scene/styles';
import 'primeicons/primeicons.css';

const model = readEventModelDocument(json);

export const Board = () => (
    <div style={{ height: '100vh' }}>
        <EventModelBoard document={model} readOnly />
    </div>
);

• readEventModelDocument 读取一个形状为 JSON Schema 的文档(@cratis/event-models/schema变成一个 EventModel。 。 。 .
• 董事会填充其父母,因此给父母一个高度.
• readOnly 在没有任何编辑手势的情况下绘制棋盘。 离开它,通过 editor 以回调方式接收董事会的编辑。 一揽子计划本身从来没有坚持过.

显示建议更改并聚焦元素

过 changes 标记模块、特性、切片或文物卡,包括在只读的板上:

const handle = useRef<EventModelBoardHandle>(null);
const changes: BoardChanges = new Map([[sliceId.toString(), 'changed']]);
<EventModelBoard document={model} readOnly handle={handle}
    changes={changes} initialFocus={{ id: sliceId }} />

await handle.current?.scrollTo(anotherElementId, { animate: false });

BoardChange 实值 'added' | 'changed' | 'removed'· ; BoardChanges 是只读的地图或 (id: string) => BoardChange | undefined。IDs是忽略大小写,解析器输入是小写Guide字符串。 当地图条目更改时替换它. BoardMarkers 携带可选 changes 频道通过 BoardProvider。徽章使用文字和SVG图标,而不是图标; EventModelMessages.changes 可选地将其语言本地化。 出口保留标记。 要显示一个被清除的幽灵, 在文档中保留这个元素并标记它 'removed'; 董事会不合并先前的文档.

initialFocus?: BoardFocus (单位:千美元){ id: Guid | string })在相机准备好时打开一次,没有动画. scrollTo(id, options?: BoardScrollOptions): Promise<boolean> 接受收藏、模块、特性、切片和卡片标识;动画默认为真实。 它首先挂起屏幕外的收藏,然后倒回最近的可见祖先去取倒塌的元素. 未知的IDs 返回虚假 。 打电话 scrollTo 如果当前文档和提议文档的编号相同,则在转换文档后. HostedEventModelBoard 提供同样的道具 BoardCollections.contains callback在主机形状的收藏中定位嵌入式ID. 见 董事会指南 详细情况.

在切片和事件上显示主机发现

添加可选 annotations 至文档中的每个切片 :

"annotations": [
  { "severity": "information", "message": "Registration is the entry point." },
  { "severity": "error", "code": "HOST001", "message": "Registration requires a caller.", "eventId": "48800000-0000-4000-8000-000000000006" }
]

每个发现都要求 severity (单位:千美元)information, (中文(简体) ), warning 或者说 error)和一个字符串 message· ; code 且以下目标可选. 读者拒绝未知的断裂 InvalidEventModelDocument 和罪恶的道路。 标题徽章使用最恶劣的重度并列出其工具提示和可访问标签中的每个发现. 将其单词通过本地化 EventModelMessages.annotations。 。 。 .

一个 eventId 包括参考卡的id 而不是它的 sourceEventId。匹配的卡片会得到一个破折的大纲和一个消息徽章;未匹配的ID会被事件行忽略. 其他可选的ID瞄准同一片的其他卡片: commandId 命令卡, readModelId 其读取的型号卡(第一张或多一张) specificationId 一个规格。 调查结论 specificationId 没有 specificationStep 标记该规格的页眉 specificationStep (单位:千美元)given, (中文(简体) ), givenReadModel, (中文(简体) ), when, (中文(简体) ), append 或者说 then)和a 数据 stepIndex (它的位置在那种步骤中,从0开始)它的目标是一步,宿主将其放置. 读者拒绝未知的 specificationStep带有发现的卡片获得与事件卡片相同的破折的轮廓和徽章. 没有匹配的药被忽略了.

调查结果涉及只读和倒塌头,绝不改变布局估计。 奥米 annotations 以保留现有的渲染。 内置状态视图命令警告共享标记,但其检查没有改变。 见 annotations 固定和切片区域 Annotations 故事的情节.

在添加前先预览一个建议切片

一个建议切片的主机可以在存储任何东西之前在板上显示一个: 放入特性的 slices 与 "preview": true,它看起来曾经增加.

<BoardProvider actions={{ slicePreview: {
    label: 'Suggestion',
    applyLabel: name => `Add ${name}`,
    cancelLabel: name => `Stop previewing ${name}`,
    onApply: async sliceId => { await addForReal(sliceId); },
    onCancel: sliceId => stopPreviewing(sliceId),
} }}>

板子自己画出一幅预览,被幽灵并只读取,即使主机提供编辑器的插槽:没有被问及的插槽,里面的任何东西都不能被编辑,拖取或重排,也没有规格行. 它的页眉显示标签,名称,一个调用的检查标记 onApply 和一个叫 onCancel。两个按钮等待时 onApply 运行,或运行时 isApplying(sliceId) 说宿主从别处应用它; errorFor(sliceId) 说明为什么申请没有通过。 无 slicePreview 预览仅显示。 A 类 FeatureHeaderSuggestion 与 onPreview 获得一个眼睛按钮( e)previewLabel, (中文(简体) ), isPreviewing为主机切换预览使用. 见 previews 固定和收藏网格 Previews 故事的情节.

选择范围、 下划线和绘制切片链接

一个显示切片如何互相依赖的主机会选择一个完整的切片,特征或模块,并告诉棋盘如何强调其余部分. 所有它的工作在一个只读的板, 和一个主机 设置它没有一个 完全像以前.

<EventModelBoard document={document} readOnly
    sliceLinks={[{ from: registerId, to: listId, emphasis: 'crossing', label: 'reads' }]}
    editor={{ selection: {
        selectedScopeId: selected,
        onScopeSelected: (id, kind) => setSelected(id),
        emphasis: id => emphasisOf(id),
    } }} />

• onScopeSelected(id, kind: 'slice' | 'feature' | 'module') 在切片、特性或模块头上单击,或者在头部有键盘焦点时点击 Enter 或 Space 。 一个标题只有在提供回调时才具有可聚焦性和可选择性. 点击头部自己的按钮、菜单和输入,并按下板板或拖动板,不选择; 选择牌 (onArtifactSelected) 不变.
• selectedScopeId 将这个头标为当前并勾出它.
• emphasis(id) 返回时 'selected', (中文(简体) ), 'dependency', (中文(简体) ), 'dependant', (中文(简体) ), 'dimmed' 或者说 undefined 用于切片、特性或模块代号。 每个都用自己的轮廓风格(固态,破碎,被点出,被淡出)来绘制并标出在头部的标记形状,被描述为用文字来辅助技术,所以它从不单靠颜色. 颜色来自 --board-emphasis-* 主题中的符号; 来自 EventModelMessages.scopes。 。 。 .
• sliceLinks 被画成两片的上方的圆弧, 在收藏品上方的一层上, 就像收藏品之间的连接。 它们跟随平板、放大、移动和倒塌:一个倒塌的特性或模块内的一个切片附着在该特性或模块上. crossing 链接被破碎、更粗和空头并有不同的颜色(--board-slice-link-*) (中文(简体) ). HostedEventModelBoard 使用同样的道具 BoardCollections.path (或 contains)以取出一藏切出先祖.
• handle.revealSlice(id, options?) 将一片片带入视线中 scrollTo 已经.

强调是单独的道具而不是切片 annotations:说明是存储在文档中的发现,而强调则显示随每次选择而变化.

特定上下文可重复使用

规格的可选性 givenContexts 列表按使用顺序保留引用。 每个条目都包含 givenContextId,并可能携带电流 name, (中文(简体) ), kind (单位:千美元)GivenContextKind.events 或者说 readModel和 missing 状态。 当元数据源待决时, 保留未解决的元数据; 设置 missing: true 在解决已删除的引用后。 董事会显示的是被打破的参考文献,而不是隐藏它们.

主机编译 GivenSection 能够通过它提供域名的可用背景 contexts 传播和本地化 contextLabels供应 onGivenContextUsed 财务报告和审定财务报表 onGivenContextRemoved 结束 BoardEditing;每个返回一个承诺,解决持久性是否成功的问题。 在等待结果时控制器锁定 。 事件背景提供给 State Change 切片; State View 切片接受一个读取模式上下文或内置读取模式状态,而不是两者兼有. 东道方仍然负责验证这些规则,并在执行或出口规格时扩大参考.

导出一个完整的型号 PNG

递回对应文件为 handle 改为 EventModelBoard 打电话 handle.current.exportImage() 获取巴布亚新几内亚 Blob公众 exportBoardImage 函数还从集合渲染器中捕获一个没有可见板挂载的板.

抓取使每个收藏,包括那些在取景口外的收藏,在单独的只读的情况下进行. 它的定位外壳保持屏蔽,但只有原产地-相对内容被光圈化. 内容可视性分解、封装、动画和过渡仅在捕捉实例中被禁用;互动板保留它们。 如上导入已发布的样式表 。 不需要主机 CSS 覆盖、 动画延迟或 Studio 提供者 .

独立回归消费者 scripts/event-model-image 导入已建软件包及其提取的样式表,其中包含暗主机和长期运行的运动样式。 其浏览器探测器在取景口和取景口外区域都需要彩色卡和暗色文本像素,而不仅仅是PNG尺寸. 请参看它运行的 README.

编辑文物属性

提供其中任何可选 BoardEditing 回调通过 editor.editing数字 :

<EventModelBoard document={model} editor={{ editing: {
    onCommandPropertiesChanged: (sliceId, commandId, schema) => keepCommandSchema(sliceId, commandId, schema),
    onReadModelPropertiesChanged: (sliceId, readModelId, schema) => keepReadModelSchema(sliceId, readModelId, schema),
    onEventPropertiesChanged: (sliceId, eventId, schema) => keepEventSchema(sliceId, eventId, schema),
} }} />

每一个召回都收到 完整 JsonSchema从 @cratis/components/SchemaEditor在每次编辑之后。 虽有召回姓名,但这不是 Property[]。主机拥有持久性、错误和分批性。 在调用中更新您的本地版面文档并单独坚持, 因此延迟的服务器快照无法覆盖编辑 。 该套件不会缓存一个未识别的跨越卡挂载或遮盖权威主机更新的图案. Studio在其主机适配器中保留了现有的乐观状态并命令保存相近的政策.

点击一卡只有在其召回且其切片和棋盘可编辑时,才会打开其仅属性的编辑器. 现有 BoardActions 纸牌 onActivate 调用优先,允许一个主机打开它的高级编辑器。 默认情况下不包含规则,货币,投影或约束编辑器.

共享树支持添加,更名,重制和去除属性,嵌入对象和阵列,以及概念. id 保护。 指令计划提供了一个标识符。 Evention schemas offer required signals,一个事件需要添加的属性,直到用户成为可选性,因为Cratis事件没有可选性. 命令和阅读模型不提供所需的旗帜。 这个 PropertiesOnly 板上的故事展示了所有三个没有工作室的回调.

可重用编辑器组件

PropertySchemaCard 财务报告和审定财务报表 PropertySchemaDialog 从软件包根导出。 为棋盘导入软件包样式表 。 一个主机可以在其现有的编辑器内再用这些内容而无需复制属性UI.

这个 editor 槽可以附加规则行,映射连接器,重命名/删除清理和验证,而共享组件则保留其属性控制. 已控制 properties 模式及其所有回调仍然可供绘图编辑使用; schema编号 :onChange 提供计划管理模式。 东道主政策可能超越所需的/钥匙的可用性.

默认框架是一个可撤销组件 Dialog, 440px宽, 以内容为主的初始焦点, 并且没有确认页脚。 工作室通过它现有的飞行对话框提供 frame,并通过卡片的插槽附上高级内容. EventModelMessages.propertyEditor 可选择提供 target 财务报告和审定财务报表 labels 到内置的董事会编辑器. propertySchemaChangeHandler(editing, kind, sliceId?, artifactId?) 将匹配的回调绑入两个身份, 或返回 undefined 当编辑不可用时.

从板上打开屏幕编辑器

棋盘在有人选择切片屏幕预览时报告. @cratis/event-models/screen-editor 是打开它的编辑器,所以克拉蒂斯工作室以外的一个主机可以让人们设计一个屏幕而没有任何工作室代码. 它是一个单独的条目,一个只画出棋盘的宿主不安装它需要的.

安装编辑器绘制的内容 。 这些是可选的同龄人,仅按本条目要求:

npm install @cratis/scene.model @cratis/scene.engine @cratis/scene.react @cratis/scene.components @cratis/scene.primereact @cratis/scene.tailwind @cratis/scene.blueprint.default @cratis/scene.blueprint.components @primereact/core @primereact/headless @primereact/styles primereact lucide-react react-icons chart.js quill

PrimeReact必须是11.2.0或更新(@primereact/core, (中文(简体) ), @primereact/headless, (中文(简体) ), @primereact/styles 财务报告和审定财务报表 primereact: 编辑器导入11.2.0引入的组件样式(@primereact/styles/inputpassword)),因此之前的11个无法解决这个条目. yarn guard:peer-floor 检查每个样式的规格 相对于宣布的地板.

场景包必须是4.7.0或更新的:该发布会添加图表,多态复选框,文件上传,数据滚动器,树表和丰富的文本编辑器控制,编辑器绘制一个字段的JSON属性类型. chart.js (4.5.1或较新的)绘制图表控制并 quill (2.0.3或更新)是丰富的文本控制引擎. 两者都是本条目的可选同位素,一个在调色板中提供这些控件的主机会安装它们. Quill的样式表是 @cratis/event-models/screen-editor/styles,所以没有更多的进口.

导入棋盘旁的编辑器样式表, 以及 Scene :

import '@cratis/components/tokens';
import '@cratis/components/styles';
import '@cratis/components/theme';
import '@cratis/event-models/styles';
import '@cratis/event-models/screen-editor/styles';
import '@cratis/scene/styles';
import 'primeicons/primeicons.css';

在两个提供者中将屏幕需要的组件包入页面:

import { CratisComponentsProvider } from '@cratis/components';
import { ScreenEditorPrimeReactProvider } from '@cratis/event-models/screen-editor';

<CratisComponentsProvider value={{ locale: 'en-US' }}>
    <ScreenEditorPrimeReactProvider license={yourPrimeUiLicenseKey} theme={yourPrimeReactTheme}>
        {/* the board and the editor */}
    </ScreenEditorPrimeReactProvider>
</CratisComponentsProvider>

ScreenEditorPrimeReactProvider 属于 PrimeReact 的自己 PrimeReactProvider ,它需要同样的道具(许可证,主题,地语,通过,默认). 加法为组件样式:PrimeReact 11 ships 其组件作为结构而无外观,外观出自 @primereact/styles,必须作为 defaults。没有他们在编辑器中绘制的屏幕就是它没有在 Play 中显示的正确标记——一个是纯文本的按钮,一个没有表面的卡片,一个没有框的字段。 这家提供商交给他们screenEditorPrimeReactDefaults)和任意 defaults 您的通过按组件合并成这些组件, 并按部分合并 - 您给出的条目 Button 增加其风格,而永不取而代之;如果设置相同的道具,则取而取之. 这不是第二个上下文:公布的捆绑进口 @primereact/core/config 从您安装时, 提供者和页面中的每个 PrimeReact 组件共享一个上下文 。 如果您使用 PrimeReactProvider 从 @primereact/core/config 你自己,通过 defaults={screenEditorPrimeReactDefaults} 将其合并为 mergeComponentDefaults,因为平面对象分布取代了整个组件条目,所以样式包含。 不管怎样,安装一个单 @primereact/core。 。 。 .

• 编辑器不需要工作室 Core,Arc,路由器或工作室供应商. 它确实需要一个 PrimeReact 提供者 (ScreenEditorPrimeReactProvider),因为默认调色板提供了PrimeReact组件,而那些没有一个的抛出. 如果一个组件确实失败,编辑器会关闭一个消息,然后打开的页面会继续.
• PrimeReact 11 在运行时检查许可证密钥并显示 无效的 PrimeUI 许可证 没有徽章。 密钥属于您的应用程序: 传递给提供者 。 包裹从来没有看到它.
• ScreenEditorOverlay 需要一个环境与 createScreenEditorEnvironment。这就是主机借出一个屏幕可能绑定的查询、它可能提交的状态变化以及它能够导致的屏幕,以导出类型上描述的形状。 编辑器将编辑后的文件从 onClose;由主办方决定保存地点.
• 两个控制器需要从主机中获取一些东西,默认情况下也不需要任何东西. 丰富的文本控制负载Quill通过 richText,默认为装入器 @cratis/scene.primereact/quill;通过自己的装载机自行提供发动机,或 false 保留丰富的文本,然后控制器说它不可用。 文件上传控制站点到其作者所配置的地址, 到您自己的来源, 并且只有在有人按上传时才会通过; pass fileUpload: { handler, allowedOrigins } 来拥有上传或允许其他来源。 作者的地址从不被重写,在屏幕被编辑时不要求任何内容,在发送任何信息之前拒绝提供您不允许的来源地址.
• 同样的服务可以到达编辑器所在的控件: ScreenEditorOverlay 浮出一页 ScreenEditorWorkspace 将其设置为一,因为屏幕模板是作者,两者都用相同的提供者来包装它们绘制的东西. 丰富的文本控件可在其中任一处编辑,上传则通过您 fileUpload.handler 在两个.
• 持有任何 JSON 值( 图表的数据, 其选项) 的属性会被编辑为文本与其其他属性相邻 。 作者的文字被解析 null, (中文(简体) ), 0, (中文(简体) ), false,数组和对象是它们本身的值;不解析的文本在被打出且没有应用的情况下被拒绝。 清空字段,或选择一个选择的"不设置",使地产恢复到默认状态,一个倒置带回. 存储的文档所持有的没有选择选项的值(一个更古老的文档)列在自己的值下,因此可以读取并保存.
• 调色板中没有图表的主机以及 richText: false 没有安装 chart.js 也没有 quill: 条目类型检查,不跳过图库声明并构建其中之一.

<EventModelBoard document={model} editor={{ editing: { onPrototypeOpened: (sliceId, actorId, rect) => open(sliceId, actorId, rect) } }} />

{opening && (
    <ScreenEditorOverlay
        subject={{ documentText: saved[opening.key] }}
        environment={environment}
        strings={defaultScreenEditorStrings}
        layoutLabels={defaultLayoutLabels}
        icons={defaultPaletteIcons}
        paletteSources={defaultPaletteSources}
        sourceRect={opening.rect}
        onClose={result => keep(opening.key, result)} />
)}

@cratis/components 本条目需要4.25或更后,现在是包件的最低要求. 只画画板的消费者也需要向它移动.

日志、 视图选项和您自己的工具

棋盘可以画出克拉提斯的标志和一个工具栏来取自自己. 除非你们要求,否则他们都不用上班了

const [presentation, setPresentation] = useState(defaultEventModelPresentation);

<EventModelPresentationProvider presentation={presentation} onChange={setPresentation}>
    <EventModelBoard
        document={model}
        readOnly
        showLogo
        showViewOptions
        toolbar={<ToolbarButton icon='pi pi-refresh' title='Refresh' onClick={refresh} />} />
</EventModelPresentationProvider>

• showLogo 在左上方绘制 Cratis 标志 .
• showViewOptions 添加a 视图 菜单到右上方的工具栏,用于详细级别、属性和如何绘制连接.
• toolbar 在视图选项之前,将自己的工具放入工具栏.

视图选项将选定的演示文稿交给提供者 onChange,所以你决定它保存在哪里。 无 onChange董事会自己选择.

样式

@cratis/event-models/styles 持有董事会自己的CSS. 棋盘自取自设计符号:出牌尺寸和颜色,并有PrimeReact风格的表面和文字调色板. 如果您的应用程序尚未定义, 请导入 @cratis/event-models/theme 用于克拉蒂斯工作室使用的值。 它的每个值都有零的特异性, 所以任何您的应用程序设置 :root 赢了.

颜色跟随页面 color-scheme (单位:千美元)light-dark()),文本使用页面的字体,因此将两者设置在页面上.

董事会自己的铬(头标签、药片、行标签、菜单、占位符)来自 --board-ink, (中文(简体) ), --board-menu-bg, (中文(简体) ), --board-accent, (中文(简体) ), --board-feature 编辑 --board-placeholder-* 在同一样式表中的符号,所以一个光页可以得到可读的相板. 不导入主题的主机会得到暗值,这是棋盘一直绘制的.

笔译员:投影和疾控中心

翻译切片在命令、投影(Slice.projection,输出翻译)或CDC抓取(Slice.capture,输入翻译). 投影卡为粉红色( P)projectionCardColors, (中文(简体) ), --card-projection-bg)和抓取卡(取取取卡)captureCardColors, (中文(简体) ), --card-capture-bg); ; 每一个都显示它工作的事件的名称.

• 一个输出翻译 翻译切片较早的私人事件,所以 SliceInteraction 选择从 priorEventOptions (公共活动,自身活动及重复活动被排除在外). 一个输入翻译一直从 externalEventOptions,其他模块的事件.
• 当右单元格为空时, 添加控件为菜单: 适用 actions.interactionRow 条目(添加命令)和 editing.onProjectionAdded (产出)或 editing.onCaptureAdded (输入),投影或疾控中心.
• actions.projectionCard 财务报告和审定财务报表 actions.captureCard 是卡片表面(激活和边缘动作,例如打开映射编辑器或取出卡片); editing.onProjectionRenamed 财务报告和审定财务报表 editing.onCaptureRenamed 重新命名到位.