LogicFlow 学习笔记——9. LogicFlow 进阶 节点

LogicFlow 进阶 节点(Node)

连线规则

在某些时候,我们可能需要控制边的连接方式,比如开始节点不能被其他节点连接、结束节点不能连接其他节点、用户节点后面必须是判断节点等,想要达到这种效果,我们需要为节点设置以下两个属性。

  • sourceRules - 当节点作为边的起始节点(source)时的校验规则
  • targetRules - 当节点作为边的目标节点(target)时的校验规则

以正方形(square)为例,在边时我们希望它的下一节点只能是圆形节点(circle),那么我们应该给square添加作为source节点的校验规则。

import { RectNode, RectNodeModel } from '@logicflow/core';
class SquareModel extends RectNodeModel {initNodeData(data) {super.initNodeData(data);const circleOnlyAsTarget = {message: "正方形节点下一个节点只能是圆形节点",validate: (sourceNode, targetNode, sourceAnchor, targetAnchor) => {return targetNode.type === "circle";},};this.sourceRules.push(circleOnlyAsTarget);}
}

在上例中,我们为modelsourceRules属性添加了一条校验规则,校验规则是一个对象,我们需要为其提供messagevalidate属性。
message属性是当不满足校验规则时所抛出的错误信息,validate则是传入规则的校验的回调函数。validate方法有两个参数,分别为边的起始节点(source)和目标节点(target),我们可以根据参数信息来决定是否通过校验,其返回值是一个布尔值。

提示
当我们在面板上进行边操作的时候,LogicFlow会校验每一条规则,只有全部通过后才能连接。
在边时,当鼠标松开后如果没有通过自定义规则(validate方法返回值为false),LogicFlow会对外抛出事件connection:not-allowed

lf.on('connection:not-allowed', (msg) => {console.log(msg)
})

下面举个例子,通过设置不同状态下节点的样式来展示连接状态
在节点model中,有个state属性,当节点连接规则校验不通过时,state属性值为5。我们可以通过这个属性来实现连线是节点的提示效果。

新建src/views/Example/LogicFlowAdvance/NodeExample/Component/HexagonNode/index.ts代码如下:

import { ConnectRule, PointTuple, PolygonNode, PolygonNodeModel } from '@logicflow/core'class CustomHexagonModel extends PolygonNodeModel {setAttributes(): void {const width = 100const height = 100const x = 50const y = 50// 计算六边形,中心点为 [50, 50],宽高均为 100const pointsList: PointTuple[] = [[x - 0.25 * width, y - 0.5 * height],[x + 0.25 * width, y - 0.5 * height],[x + 0.5 * width, y],[x + 0.25 * width, y + 0.5 * height],[x - 0.25 * width, y + 0.5 * height],[x - 0.5 * width, y]]this.points = pointsList}getConnectedSourceRules(): ConnectRule[] {const rules = super.getConnectedSourceRules()const geteWayOnlyAsTarget = {message: '下一个节点只能是 circle',validate: (source: any, target: any, sourceAnchor: any, targetAnchor: any) => {console.log('sourceAnchor, targetAnchor, source, target',sourceAnchor,targetAnchor,source,target)return target.type === 'circle'}}rules.push(geteWayOnlyAsTarget)return rules}getNodeStyle(): {[x: string]: anyfill?: string | undefinedstroke?: string | undefinedstrokeWidth?: number | undefined} {const style = super.getNodeStyle()if (this.properties.isSelected) {style.fill = 'red'}if (this.isHovered) {style.stroke = 'red'}// 如果此节点不允许被连接,节点变红if (this.state === 5) {style.fill = 'red'}if (this.state === 4) {style.fill = 'green'}return style}
}export default {type: 'HexagonNode',view: PolygonNode,model: CustomHexagonModel
}

之后新建src/views/Example/LogicFlowAdvance/NodeExample/Example01.vue代码如下:

<script setup lang="ts">
import LogicFlow, { Definition } from '@logicflow/core'
import { onMounted } from 'vue'
import HexagonNode from './Component/HexagonNode'
import '@logicflow/core/dist/style/index.css'const data = {nodes: [{id: '1',type: 'rect',x: 300,y: 100},{id: '2',type: 'circle',x: 300,y: 250},{id: '3',type: 'HexagonNode',x: 100,y: 100,text: '只能连接到圆'}],edges: []
}const SilentConfig = {stopScrollGraph: true,stopMoveGraph: true,stopZoomGraph: true
}const styleConfig: Partial<Definition> = {style: {rect: {rx: 5,ry: 5,strokeWidth: 2},circle: {fill: '#f5f5f5',stroke: '#666'},ellipse: {fill: '#dae8fc',stroke: '#6c8ebf'},polygon: {fill: '#d5e8d4',stroke: '#82b366'},diamond: {fill: '#ffe6cc',stroke: '#d79b00'},text: {color: '#b85450',fontSize: 12}}
}onMounted(() => {const lf = new LogicFlow({container: document.getElementById('container')!,grid: true,...SilentConfig,...styleConfig})lf.register(HexagonNode)lf.setTheme({nodeText: {color: '#000000',overflowMode: 'ellipsis',lineHeight: 1.2,fontSize: 12}})lf.render(data)lf.translateCenter()lf.on('connection:not-allowed', (error) => {alert(error.msg)})
})
</script>
<template><h3>Example Node (Advance) - 01</h3><div id="container"></div>
</template>
<style>
#container {/* 定义容器的宽度和高度 */width: 100%;height: 500px;
}
</style>

运行后效果如下:
在这里插入图片描述

移动

有些时候,我们需要更加细粒度的控制节点什么时候可以移动,什么时候不可以移动,比如在实现分组插件时,需要控制分组节点子节点不允许移动出分组。和连线规则类似,我们可以给节点的moveRules添加规则函数。

class MovableNodeModel extends RectNodeModel {initNodeData(data) {super.initNodeData(data);this.moveRules.push((model, deltaX, deltaY) => {// 需要处理的内容});}
}

graphModel中支持添加全局移动规则,例如在移动A节点的时候,期望把B节点也一起移动了。

lf.graphModel.addNodeMoveRules((model, deltaX, deltaY) => {// 如果移动的是分组,那么分组的子节点也跟着移动。if (model.isGroup && model.children) {lf.graphModel.moveNodes(model.children, deltaX, deltaY, true);}return true;
});

新建src/views/Example/LogicFlowAdvance/NodeExample/Component/CustomNode/index.ts代码如下:

import { RectNode, RectNodeModel } from '@logicflow/core'
class CustomNode extends RectNode {// 禁止节点点击后被显示到所有元素前面toFront() {return false}
}class CustomNodeModel extends RectNodeModel {initNodeData(data: any) {if (!data.text || typeof data.text === 'string') {data.text = {value: data.text || '',x: data.x - 230,y: data.y}}super.initNodeData(data)this.width = 500this.height = 200this.isGroup = truethis.zIndex = -1this.children = data.children}getTextStyle() {const style = super.getTextStyle()style.overflowMode = 'autoWrap'style.width = 15return style}
}export default {type: 'custom-node',view: CustomNode,model: CustomNodeModel
}

新建src/views/Example/LogicFlowAdvance/NodeExample/Component/MovableNode/index.ts,代码如下:

import { RectNode, RectNodeModel } from '@logicflow/core'
class MovableNode extends RectNode {}class MovableNodeModel extends RectNodeModel {initNodeData(data: any) {super.initNodeData(data)this.moveRules.push((model, deltaX, deltaY) => {// 不允许移动到坐标为负值的地方if (model.x + deltaX - this.width / 2 < 0 || model.y + deltaY - this.height / 2 < 0) {return false}return true})console.log(data)this.children = data.childrenif (this.children) {this.isGroup = true}}
}export default {type: 'movable-node',view: MovableNode,model: MovableNodeModel
}

新建src/views/Example/LogicFlowAdvance/NodeExample/Example02.vue代码如下:

<script setup lang="ts">
import LogicFlow from '@logicflow/core'
import { onMounted } from 'vue'
import '@logicflow/core/dist/style/index.css'
import CustomNode from './Component/CustomNode'
import MovableNode from './Component/MovableNode'const data = {nodes: [{id: 'node-1',type: 'custom-node',x: 300,y: 250,text: '你好',children: ['circle-1']},{type: 'movable-node',x: 100,y: 70,text: '你好',children: ['node-1']},{id: 'circle-1',type: 'circle',x: 300,y: 250,text: 'hello world'}],edges: []
}const SilentConfig = {stopScrollGraph: true,stopMoveGraph: true,stopZoomGraph: true
}onMounted(() => {const lf = new LogicFlow({container: document.getElementById('container')!,grid: true,...SilentConfig})lf.register(CustomNode)lf.register(MovableNode)lf.graphModel.addNodeMoveRules((model, deltaX, deltaY) => {console.log(model)if (model.isGroup && model.children) {// 如果移动的是分组,那么分组的子节点也跟着移动。lf.graphModel.moveNodes(model.children, deltaX, deltaY, true)}return true})lf.render(data)lf.translateCenter()
})
</script>
<template><h3>Example Node (Advance) - 02</h3><div id="container"></div>
</template>
<style>
#container {/* 定义容器的宽度和高度 */width: 100%;height: 500px;
}
</style>

运行后效果如下:
在这里插入图片描述

锚点

对于各种基础类型节点,LogicFlow都内置了默认锚点。LogicFlow支持通过重写获取锚点的方法来实现自定义节点的锚点。
新建src/views/Example/LogicFlowAdvance/NodeExample/Component/SqlEdge/index.ts代码如下:

import { PolylineEdge, PolylineEdgeModel } from '@logicflow/core'// 自定义边模型类,继承自 BezierEdgeModel
class CustomEdgeModel2 extends PolylineEdgeModel {/*** 重写 getEdgeStyle 方法,定义边的样式*/getEdgeStyle() {const style = super.getEdgeStyle() // 调用父类方法获取默认的边样式style.strokeWidth = 1 // 设置边的线条宽度为1style.stroke = '#ababac' // 设置边的颜色为淡灰色return style // 返回自定义的边样式}/*** 重写 getData 方法,增加锚点数据的保存*/getData() {const data: any = super.getData() // 调用父类方法获取默认的边数据// 添加锚点ID到数据中,以便保存和后续使用data.sourceAnchorId = this.sourceAnchorId // 保存源锚点IDdata.targetAnchorId = this.targetAnchorId // 保存目标锚点IDreturn data // 返回包含锚点信息的边数据}/*** 自定义方法,基于锚点的位置更新边的路径*/updatePathByAnchor() {// 获取源节点模型const sourceNodeModel = this.graphModel.getNodeModelById(this.sourceNodeId)// 从源节点的默认锚点中查找指定的锚点const sourceAnchor = sourceNodeModel.getDefaultAnchor().find((anchor) => anchor.id === this.sourceAnchorId)// 获取目标节点模型const targetNodeModel = this.graphModel.getNodeModelById(this.targetNodeId)// 从目标节点的默认锚点中查找指定的锚点const targetAnchor = targetNodeModel.getDefaultAnchor().find((anchor) => anchor.id === this.targetAnchorId)// 如果找到源锚点,则更新边的起始点if (sourceAnchor) {const startPoint = {x: sourceAnchor.x,y: sourceAnchor.y}this.updateStartPoint(startPoint)}// 如果找到目标锚点,则更新边的终点if (targetAnchor) {const endPoint = {x: targetAnchor.x,y: targetAnchor.y}this.updateEndPoint(endPoint)}// 清空当前边的控制点列表,以便贝塞尔曲线重新计算控制点this.pointsList = []this.initPoints()}
}// 导出自定义边配置
export default {type: 'sql-edge', // 自定义边的类型标识view: PolylineEdge, // 使用贝塞尔曲线边的视图model: CustomEdgeModel2 // 使用自定义的边模型
}

新建src/views/Example/LogicFlowAdvance/NodeExample/Component/SqlNode/index.ts代码如下:

import { h, HtmlNode, HtmlNodeModel } from '@logicflow/core'class SqlNode extends HtmlNode {/*** 1.1.7 版本后支持在 view 中重写锚点形状*/getAnchorShape(anchorData: any) {const { x, y, type } = anchorDatareturn h('rect', {x: x - 5,y: y - 5,width: 10,height: 10,className: `custom-anchor ${type === 'left' ? 'incomming-anchor' : 'outgoing-anchor'}`})}setHtml(rootEl: HTMLElement): void {rootEl.innerHTML = ''const {properties: { fields, tableName }} = this.props.modelrootEl.setAttribute('class', 'table-container')const container = document.createElement('div')container.className = `table-node table-color-${Math.ceil(Math.random() * 4)}`const tableNameElement = document.createElement('div')tableNameElement.innerHTML = tableNametableNameElement.className = 'table-name'container.appendChild(tableNameElement)const fragment = document.createDocumentFragment()for (let i = 0; i < fields.length; i++) {const item = fields[i]const fieldElement = document.createElement('div')fieldElement.className = 'table-feild'const itemKey = document.createElement('span')itemKey.innerText = item.keyconst itemType = document.createElement('span')itemType.innerText = item.typeitemType.className = 'feild-type'fieldElement.appendChild(itemKey)fieldElement.appendChild(itemType)fragment.appendChild(fieldElement)}container.appendChild(fragment)rootEl.appendChild(container)}
}class SqlNodeModel extends HtmlNodeModel {/*** 给 model 自定义添加字段方法*/addField(item: any) {this.properties.fields.unshift(item)this.setAttributes()// 为了保持节点顶部位置不变,在节点变化后,对节点进行一个位移,位移距离为添加高度的一半this.move(0, 24 / 2)// 更新节点连接边的 paththis.incoming.edges.forEach((egde) => {// 调用自定义的更新方案egde.updatePathByAnchor()})this.outgoing.edges.forEach((edge) => {// 调用自定义的更新方案edge.updatePathByAnchor()})}getOutlineStyle() {const style = super.getOutlineStyle()style.stroke = 'none'if (style.hover) {style.hover.stroke = 'none'}return style}// 如果不用修改锚的形状,可以重写颜色相关样式getAnchorStyle(anchorInfo: any) {const style = super.getAnchorStyle(anchorInfo)if (anchorInfo.type === 'left') {style.fill = 'red'style.hover.fill = 'transparent'style.hover.stroke = 'transpanrent'style.className = 'lf-hide-default'} else {style.fill = 'green'}return style}setAttributes() {this.width = 200const {properties: { fields }} = thisthis.height = 60 + fields.length * 24const circleOnlyAsTarget = {message: '只允许从右边的锚点连出',validate: (_sourceNode: any, _targetNode: any, sourceAnchor: any) => {return sourceAnchor.type === 'right'}}this.sourceRules.push(circleOnlyAsTarget)this.targetRules.push({message: '只允许连接左边的锚点',validate: (_sourceNode, _targetNode, _sourceAnchor, targetAnchor: any) => {return targetAnchor.type === 'left'}})}getDefaultAnchor() {const {id,x,y,width,height,isHovered,isSelected,properties: { fields, isConnection }} = thisconst anchors: any[] = []fields.forEach((feild: any, index: any) => {// 如果是连出,就不显示左边的锚点if (isConnection || !(isHovered || isSelected)) {anchors.push({x: x - width / 2 + 10,y: y - height / 2 + 60 + index * 24,id: `${id}_${feild.key}_left`,edgeAddable: false,type: 'left'})}if (!isConnection) {anchors.push({x: x + width / 2 - 10,y: y - height / 2 + 60 + index * 24,id: `${id}_${feild.key}_right`,type: 'right'})}})return anchors}
}export default {type: 'sql-node',model: SqlNodeModel,view: SqlNode
}

新建 src/views/Example/LogicFlowAdvance/NodeExample/Example03.vue 代码如下:

<script setup lang="ts">
import LogicFlow from '@logicflow/core'
import { onMounted, ref } from 'vue'
import '@logicflow/core/dist/style/index.css'
import SqlEdge from './Component/SqlEdge'
import SqlNode from './Component/SqlNode'
import { ElButton } from 'element-plus'const data = {nodes: [{id: 'node_id_1',type: 'sql-node',x: 100,y: 100,properties: {tableName: 'Users',fields: [{key: 'id',type: 'string'},{key: 'name',type: 'string'},{key: 'age',type: 'integer'}]}},{id: 'node_id_2',type: 'sql-node',x: 400,y: 200,properties: {tableName: 'Settings',fields: [{key: 'id',type: 'string'},{key: 'key',type: 'integer'},{key: 'value',type: 'string'}]}}],edges: []
}const SilentConfig = {stopScrollGraph: true,stopMoveGraph: true,stopZoomGraph: true
}const lfRef = ref<LogicFlow>()onMounted(() => {const lf = new LogicFlow({container: document.getElementById('container')!,grid: true,...SilentConfig})lf.register(SqlEdge)lf.register(SqlNode)lf.setDefaultEdgeType('sql-edge')lf.setTheme({bezier: {stroke: '#afafaf',strokeWidth: 1}})lf.render(data)lf.translateCenter()// 1.1.28新增,可以自定义锚点显示时机了lf.on('anchor:dragstart', ({ data, nodeModel }) => {console.log('dragstart', data)if (nodeModel.type === 'sql-node') {lf.graphModel.nodes.forEach((node) => {if (node.type === 'sql-node' && nodeModel.id !== node.id) {node.isShowAnchor = truenode.setProperties({isConnection: true})}})}})lf.on('anchor:dragend', ({ data, nodeModel }) => {console.log('dragend', data)if (nodeModel.type === 'sql-node') {lf.graphModel.nodes.forEach((node) => {if (node.type === 'sql-node' && nodeModel.id !== node.id) {node.isShowAnchor = falself.deleteProperty(node.id, 'isConnection')}})}})lfRef.value = lf
})const addField = () => {lfRef.value?.getNodeModelById('node_id_1').addField({key: Math.random().toString(36).substring(2, 7),type: ['integer', 'long', 'string', 'boolean'][Math.floor(Math.random() * 4)]})
}
</script>
<template><h3>Example Node (Advance) - 02</h3><ElButton @click="addField()" style="margin-bottom: 10px">Add Field</ElButton><div id="container" class="sql"></div>
</template>
<style>
#container {/* 定义容器的宽度和高度 */width: 100%;height: 500px;
}
.sql {.table-container {box-sizing: border-box;padding: 10px;}.table-node {width: 100%;height: 100%;overflow: hidden;background: #fff;border-radius: 4px;box-shadow: 0 1px 3px rgb(0 0 0 / 30%);}.table-node::before {display: block;width: 100%;height: 8px;background: #d79b00;content: '';}.table-node.table-color-1::before {background: #9673a6;}.table-node.table-color-2::before {background: #dae8fc;}.table-node.table-color-3::before {background: #82b366;}.table-node.table-color-4::before {background: #f8cecc;}.table-name {height: 28px;font-size: 14px;line-height: 28px;text-align: center;background: #f5f5f5;}.table-feild {display: flex;justify-content: space-between;height: 24px;padding: 0 10px;font-size: 12px;line-height: 24px;}.feild-type {color: #9f9c9f;}/* 自定义锚点样式 */.custom-anchor {cursor: crosshair;fill: #d9d9d9;stroke: #999;stroke-width: 1;/* rx: 3; *//* ry: 3; */}.custom-anchor:hover {fill: #ff7f0e;stroke: #ff7f0e;}.lf-node-not-allow .custom-anchor:hover {cursor: not-allowed;fill: #d9d9d9;stroke: #999;}.incomming-anchor {stroke: #d79b00;}.outgoing-anchor {stroke: #82b366;}
}
</style>

启动后效果如下:
在这里插入图片描述
上面的示例中,我们自定义锚点的时候,不仅可以定义锚点的数量和位置,还可以给锚点加上任意属性。有了这些属性,我们可以再做很多额外的事情。例如,我们增加一个校验规则,只允许节点从右边连出,从左边连入;或者加个id,在获取数据的时候保存当前连线从哪个锚点连接到哪个锚点。

注意
一定要确保锚点id唯一,否则可能会出现在连线规则校验不准确的问题。在实际开发中,存在隐藏锚点的需求,可以参考 github issue 如何隐藏锚点?

更新

HTML 节点目前通过修改 properties 触发节点更新

 /*** @overridable 支持重写* 和react的shouldComponentUpdate类似,都是为了避免出发不必要的render.* 但是这里不一样的地方在于,setHtml方法,我们只在properties发生变化了后再触发。* 而x,y等这些坐标相关的方法发生了变化,不会再重新触发setHtml.*/shouldUpdate() {if (this.preProperties && this.preProperties === this.currentProperties) return;this.preProperties = this.currentProperties;return true;}componentDidMount() {if (this.shouldUpdate()) {this.setHtml(this.rootEl);}}componentDidUpdate() {if (this.shouldUpdate()) {this.setHtml(this.rootEl);}}

如果期望其他内容的修改可以触发节点更新,可以重写shouldUpdate(相关issue: #1208)

shouldUpdate() {if (this.preProperties &&this.preProperties === this.currentProperties &&this.preText === this.props.model.text.value) return;this.preProperties = this.currentProperties;this.preText = this.props.model.text.valuereturn true;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/356669.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【经验分享】RT600 serial boot mode测试

【经验分享】RT600 serial boot mode测试 一&#xff0c; 文档描述二&#xff0c; Serial boot mode测试2.1 evkmimxrt685_gpio_led_output 工程测试2.2 evkmimxrt685_dsp_hello_world_usart_cm33工程测试 一&#xff0c; 文档描述 RT600的启动模式共支持4种&#xff1a; 1&am…

C++设计模式——Composite组合模式

一&#xff0c;组合模式简介 真实世界中&#xff0c;像企业组织、文档、图形软件界面等案例&#xff0c;它们在结构上都是分层次的。将系统分层次的方式使得统一管理和添加不同子模块变得容易&#xff0c;在软件开发中&#xff0c;组合模式的设计思想和它们类似。 组合模式是…

数据库设计概述-数据库设计内容、数据库设计方法(基于E-R模型的规范设计方法)

一、引言 如何利用关系数据库理论设计一个满足应用系统需求的数据库 二、数据库设计内容 1、数据库设计是基于应用系统需求分析中对数据的需求&#xff0c;解决数据的抽象、数据的表达和数据的存储结构等问题 2、其目标是设计出一个满足应用要求、简洁、高效、规范合理的数…

Redis 集群 - 数据分片算法

前言 广义的集群&#xff1a;只要是多个机器构成了一个分布式系统&#xff0c;都可以被称为集群。 狭义的集群&#xff1a;redis 的集群模式&#xff0c;这个集群模式下&#xff0c;主要是解决存储空间不足的问题。 Redis 集群 redis 采用主从结构&#xff0c;可以提高系统的可…

「动态规划」如何求最长湍流子数组的长度?

78. 最长湍流子数组https://leetcode.cn/problems/longest-turbulent-subarray/description/ 给定一个整数数组arr&#xff0c;返回arr的最长湍流子数组的长度。如果比较符号在子数组中的每个相邻元素对之间翻转&#xff0c;则该子数组是湍流子数组。更正式地来说&#xff0c;…

从开源EPR产品Odoo学习

前言 一个先进、敏捷、经济高效、可快速扩展的Odoo免费开源企业信息化解决方案&#xff0c;让企业获得适应未来发展的长期创新和增长能力。 Odoo 的免费开源模式 让我们可利用无数开发人员和业务专家&#xff0c;在短短数年内&#xff0c;打造数百款应用。凭借强大的技术基础&…

苹果智能和人工智能最大化

苹果智能和人工智能最大化 除了苹果公司&#xff0c;还没有人真正使用过苹果的智能功能。它要到秋天才会分阶段发布&#xff0c;即使到那时&#xff0c;它也无法在80%或90%的iPhone安装基础上运行&#xff0c;因为它需要只有iPhone 15 Pro才能使用的设备上处理功能。没有什么能…

现在这个行情,又又又要开始准备面试了~~

亲爱的程序员朋友们: 这些资料曾经帮助过许多有志之士顺利拿下抖音、快手、阿里等大厂的Offer&#xff0c;现在也希望它们能为你的面试旅程助力&#xff01; 关注【程序员世杰】回复【1024】惊喜等你来拿&#xff01; 截图 关注【程序员世杰】回复【1024】惊喜等你来拿&#xf…

车辆轨迹预测系列 (三):nuScenes数据集详细介绍-1

车辆轨迹预测系列 (三)&#xff1a;nuScenes数据集详细介绍-1 文章目录 车辆轨迹预测系列 (三)&#xff1a;nuScenes数据集详细介绍-1一、数据集准备1、解压2、安装nuscenes-devkit3、介绍 二、架构内容解释1、category 类别2、attribute 属性3、visibility 可见性4、instance …

包含网关的概念及案例演示

包容网关 知识点讲解 包容网关可以看作排他网关和并行网关的结合体。与排他网一样&#xff0c;可以在外出顺序流上定义条件&#xff0c;但与排他网关不同的是&#xff0c; 进行决策判读时&#xff0c;包容网关所有条件为true的后继分支都会被依次执行。如果所有分支条件都为fa…

IMU用于飞行坐姿校正

为了提升长途飞行的舒适度并预防乘客因不良坐姿导致的身体不适&#xff0c;来自荷兰上海两所大学的研究团队携手开发出一种创新的“舒适穿戴”设备&#xff0c;专为识别飞行中的坐姿设计。 研究团队制作了两种原型设备&#xff1a;一种追求极致舒适&#xff0c;另一种为紧身设…

干货!!SSAS模型刷新步骤

白茶在上一篇文章PowerBI迁移到SSAS向小伙伴们介绍了如何将已经开发好的PowerBI模型迁移到SSAS整个操作过程&#xff0c;与此同时也带来了新的问题&#xff0c;那就是SSAS的模型该如何刷新呢&#xff1f; 配套工具 SSMS Visual Studio SSIS SSIS[1]的全称是SQL Server Inte…

桂电人工智能学院大数据实验,使用 Docker 搭建 hadoop 集群

桂电人工智能学院大数据实验&#xff0c;使用 Docker 搭建 hadoop 集群 第一步 安装 Docker, Windows 上可以使用 Docker Desktop 下载地址&#xff1a;https://www.docker.com/products/docker-desktop/ 安装过程自行谷歌 安装好的标志&#xff1a;打开终端 运行docker p…

JetBrains PyCharm 2024 mac/win版编程艺术,智慧新篇

JetBrains PyCharm 2024是一款功能强大的Python集成开发环境(IDE)&#xff0c;专为提升开发者的编程效率和体验而设计。这款IDE不仅继承了前代版本的优秀特性&#xff0c;还在多个方面进行了创新和改进&#xff0c;为Python开发者带来了全新的工作体验。 JetBrains PyCharm 20…

Nuxt快速学习开发 - Nuxt3静态资源Assets

Nuxt 使用两个目录来处理样式表、字体或图像等资产。 public/目录内容按原样在服务器根目录中提供。 assets/目录包含您希望构建工具&#xff08;Vite 或 webpack&#xff09;处理的所有资产。 public/目录 public目录用作静态资产的公共服务器&#xff0c;可在您的应用程序定…

PDF标准详解(三)—— PDF坐标系统和坐标变换

之前我们了解了PDF文档的基本结构&#xff0c;并且展示了一个简单的hello world。这个hello world 虽然只在页面中显示一个hello world 文字&#xff0c;但是包含的内容却是不少。这次我们仍然以它为切入点&#xff0c;来了解PDF的坐标系统以及坐标变换的相关知识 图形学中二维…

colima配置docker镜像源

只在 colima ssh 环境下修改 docker 配置文件是无效的&#xff0c;我们需要修改 colima 配置文件才能使 docker 镜像源生效。 此时你需要进入到~/.colima/default目录下编辑colima.yaml文件。该文件是 colima 的配置文件。内容如下图所示&#xff0c;我这里配置了许多家的镜像源…

换电脑后导入git本地仓库记录

导入本地仓库tig记录 换了新电脑&#xff0c;将旧电脑的数据盘查到新的笔记本之后发现&#xff0c;使用pycharm 读取不到本地的git提交记录了&#xff0c;我没有将本地git上传到远程仓库的习惯&#xff0c;这可抓马了&#xff0c;硬盘插回去的话也太麻烦了。试了 vscode 提示设…

如何恢复电脑硬盘删除数据?提供一套实用恢复方案

在数字化时代&#xff0c;电脑硬盘中存储的数据对于个人和企业来说都至关重要。然而&#xff0c;有时我们可能会不小心删除了一些重要文件&#xff0c;或者因为某种原因导致数据丢失。这时候&#xff0c;恢复硬盘上被删除的数据就显得尤为重要。本文将为您提供一套实用的电脑硬…

国企:2024年6月中国移动相关招聘信息

中国移动研究院: AI中心-大模型数据工程师 工作地点:北京市、西安市2 发布时间 :2024-06-18 学历要求:硕士研究生及以上 招聘人数:招聘若干人 专业要求 计算机、人工智能、软件工程、数学等相关专业 工作职责 1、负责处理和清洗大规模、多来源的数据集,保证数…