lw-cdp-ui 1.2.47 → 1.2.49

package/dist/components/lwFlow/config/dagre.js

@@ -1,279 +0,0 @@
-// 导入 `dagre` 和 `graphlib` 模块用于图形布局处理
-import dagre from 'dagre'
-import { graphlib } from 'dagre'
-// 将 graphlib 挂载到 window 对象上，供全局使用
-window.graphlib = graphlib
-
-// 定义一个名为 Dagre 的类
-export default class Dagre {
-	// 定义插件名称为 'dagre'
-	static pluginName = 'dagre'
-	lf // 用于存储图形库对象（例如，图形的数据模型）
-	option // 用于存储布局选项
-
-	// 渲染方法，接收一个参数 lf（图形库实例），初始化 lf 属性
-	render(lf) {
-		this.lf = lf
-	}
-
-	// 计算字符串的字节长度，考虑了字符的不同字节数（例如：英文大写字母为1.5，其他字符为2字节）
-	getBytesLength(word) {
-		if (!word) {
-			return 0
-		}
-		let totalLength = 0
-		for (let i = 0; i < word.length; i++) {
-			const c = word.charCodeAt(i)
-			// 大写字母字节长度为1.5
-			if (word.match(/[A-Z]/)) {
-				totalLength += 1.5
-				// ASCII字符或特殊字符字节长度为1
-			} else if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) {
-				totalLength += 1
-				// 其他字符字节长度为2
-			} else {
-				totalLength += 2
-			}
-		}
-		return totalLength
-	}
-
-	// 布局函数，计算并设置图形的布局
-	layout(option = {}) {
-		const { nodes, edges, gridSize } = this.lf.graphModel
-
-		// 根据 gridSize 设置节点间距和排名间距
-		let nodesep = 40
-		let ranksep = 40
-		if (gridSize > 20) {
-			nodesep = gridSize * 2
-			ranksep = gridSize * 2
-		}
-
-		// 合并默认布局选项和外部传入的配置
-		this.option = {
-			type: 'dagre',
-			rankdir: 'LR', // 布局方向，LR表示从左到右
-			align: 'DR', // 对齐方式
-			nodesep,
-			ranksep,
-			begin: [120, 120], // 初始位置
-			...option
-		}
-
-		// 创建布局实例并执行布局算法
-		const layoutInstance = new DagreLayout(this.option)
-		const layoutData = layoutInstance.layout({
-			nodes: nodes.map((node) => ({
-				id: node.id,
-				size: {
-					width: node.width,
-					height: node.height
-				},
-				model: node
-			})),
-			edges: edges.map((edge) => ({
-				source: edge.sourceNodeId,
-				target: edge.targetNodeId,
-				model: edge
-			}))
-		})
-
-		const newGraphData = {
-			nodes: [],
-			edges: []
-		}
-
-		// 将计算出的布局数据应用到新的图形数据中
-		layoutData?.nodes.forEach((node) => {
-			const { model } = node
-			const data = model.getData()
-			data.x = node.x
-			data.y = node.y
-			newGraphData.nodes.push(data)
-		})
-
-		layoutData?.edges.forEach((edge) => {
-			const { model } = edge
-			const data = model.getData()
-			// 计算边的路径点
-			data.pointsList = this.calcPointsList(model, newGraphData.nodes)
-			if (data.pointsList) {
-				const first = data.pointsList[0]
-				const last = data.pointsList[data.pointsList.length - 1]
-				data.startPoint = { x: first.x, y: first.y }
-				data.endPoint = { x: last.x, y: last.y }
-				// 计算文本的位置
-				if (data.text && data.text.value) {
-					data.text = {
-						x: last.x - this.getBytesLength(data.text.value) * 6 - 10,
-						y: last.y,
-						value: data.text.value
-					}
-				}
-			} else {
-				data.startPoint = undefined
-				data.endPoint = undefined
-				// 如果没有路径点且有文本，则将文本作为字符串返回
-				if (data.text && data.text.value) {
-					data.text = data.text.value
-				}
-			}
-			newGraphData.edges.push(data)
-		})
-
-		// 使用计算后的新数据进行图形的渲染
-		this.lf.render(newGraphData)
-	}
-
-	// 用于优化路径点的函数，删除重复的点
-	pointFilter(points) {
-		const allPoints = points
-		let i = 1
-		// 遍历路径点，移除重复的点（x或y相同的连续点）
-		while (i < allPoints.length - 1) {
-			const pre = allPoints[i - 1]
-			const current = allPoints[i]
-			const next = allPoints[i + 1]
-			if ((pre.x === current.x && current.x === next.x) || (pre.y === current.y && current.y === next.y)) {
-				allPoints.splice(i, 1)
-			} else {
-				i++
-			}
-		}
-		return allPoints
-	}
-
-	// 计算边的路径点，主要用于多边形边的布局
-	calcPointsList(model, nodes) {
-		const pointsList = []
-		if (this.option.rankdir === 'LR' && model.modelType === 'polyline-edge') {
-			// 获取源节点和目标节点的模型数据
-			const sourceNodeModel = this.lf.getNodeModelById(model.sourceNodeId)
-			const targetNodeModel = this.lf.getNodeModelById(model.targetNodeId)
-			const newSourceNodeData = nodes.find((node) => node.id === model.sourceNodeId)
-			const newTargetNodeData = nodes.find((node) => node.id === model.targetNodeId)
-
-			// 根据源节点和目标节点的位置计算路径点
-			if (newSourceNodeData.x < newTargetNodeData.x) {
-				pointsList.push({
-          x: newSourceNodeData.x + sourceNodeModel.width / 2,
-          y: newSourceNodeData.y,
-        });
-				pointsList.push({
-					x: newSourceNodeData.x + sourceNodeModel.width / 2 + (model.offset || 50),
-          y: newSourceNodeData.y,
-        });
-				pointsList.push({
-					x: newSourceNodeData.x + sourceNodeModel.width / 2 + (model.offset || 50),
-          y: newTargetNodeData.y,
-        });
-				pointsList.push({
-          x: newTargetNodeData.x - targetNodeModel.width / 2,
-          y: newTargetNodeData.y,
-        });
-        return this.pointFilter(pointsList);
-			}
-			if (newSourceNodeData.x > newTargetNodeData.x) {
-				if (newSourceNodeData.y >= newTargetNodeData.y) {
-					pointsList.push({
-						x: newSourceNodeData.x,
-						y: newSourceNodeData.y + sourceNodeModel.height / 2
-					})
-					pointsList.push({
-						x: newSourceNodeData.x,
-						y: newSourceNodeData.y + sourceNodeModel.height / 2 + (model.offset || 50)
-					})
-					pointsList.push({
-						x: newTargetNodeData.x,
-						y: newSourceNodeData.y + sourceNodeModel.height / 2 + (model.offset || 50)
-					})
-					pointsList.push({
-						x: newTargetNodeData.x,
-						y: newTargetNodeData.y + targetNodeModel.height / 2
-					})
-				} else {
-					pointsList.push({
-						x: newSourceNodeData.x,
-						y: newSourceNodeData.y - sourceNodeModel.height / 2
-					})
-					pointsList.push({
-						x: newSourceNodeData.x,
-						y: newSourceNodeData.y - sourceNodeModel.height / 2 - (model.offset || 50)
-					})
-					pointsList.push({
-						x: newTargetNodeData.x,
-						y: newSourceNodeData.y - sourceNodeModel.height / 2 - (model.offset || 50)
-					})
-					pointsList.push({
-						x: newTargetNodeData.x,
-						y: newTargetNodeData.y - targetNodeModel.height / 2
-					})
-				}
-				return this.pointFilter(pointsList)
-			}
-		}
-		return undefined
-	}
-}
-
-// 定义一个 `DagreLayout` 类，用于实现具体的 DAG 图布局算法
-class DagreLayout {
-	constructor(options) {
-		this.options = {
-			rankdir: 'TB', // 默认垂直布局
-			align: null,
-			nodesep: 50,
-			ranksep: 50,
-			controlPoints: false,
-			...options // 合并外部传入的配置项
-		}
-	}
-
-	// 执行布局算法
-	layout(data) {
-		const { nodes, edges } = data
-		if (!nodes || nodes.length === 0) return
-
-		// 创建一个新的 dagre 图实例
-		const g = new dagre.graphlib.Graph({ multigraph: true })
-		g.setGraph({})
-		g.setDefaultEdgeLabel(() => ({}))
-
-		// 配置图形的布局参数
-		g.graph().rankdir = this.options.rankdir
-		g.graph().align = this.options.align
-		g.graph().nodesep = this.options.nodesep
-		g.graph().ranksep = this.options.ranksep
-
-		// 设置节点的大小
-		nodes.forEach((node) => {
-			g.setNode(node.id, { width: node.width || 50, height: node.height || 50 })
-		})
-
-		// 设置边
-		edges.forEach((edge) => {
-			g.setEdge(edge.source, edge.target)
-		})
-
-		// 执行 Dagre 布局算法
-		dagre.layout(g)
-
-		// 更新节点的坐标
-		nodes.forEach((node) => {
-			const coord = g.node(node.id)
-			node.x = coord.x
-			node.y = coord.y
-		})
-
-		// 如果需要计算边的控制点，则计算并添加到边数据中
-		if (this.options.controlPoints) {
-			edges.forEach((edge) => {
-				const edgeData = g.edge(edge.source, edge.target)
-				edge.controlPoints = edgeData.points
-			})
-		}
-
-		return { nodes, edges } // 返回布局后的节点和边数据
-	}
-}

package/dist/components/lwFlow/config/nodesList.js

@@ -1,243 +0,0 @@
-export default [
-	{
-		title: 'ET2L节点',
-		list: [
-			{
-				name: 'SOURCE',
-				icon: 'icon-table',
-				type: 'source',
-				themeColor: '#00B050'
-			},
-			{
-				name: 'MAPPER',
-				icon: 'icon-change-type',
-				type: 'mapper',
-				themeColor: '#56C4C3'
-			},
-			{
-				name: 'JOINER',
-				icon: 'icon-app-cdp',
-				type: 'joiner',
-				themeColor: '#7030A0'
-			},
-			{
-				name: 'TARGET',
-				icon: 'icon-table',
-				type: 'target',
-				themeColor: '#0070C0'
-			},
-			{
-				name: 'FILTER',
-				icon: 'icon-ma-filter',
-				type: 'filter',
-				themeColor: '#C7161E'
-			},
-			{
-				name: 'COLAP',
-				icon: 'icon-ma-branch',
-				type: 'collap',
-				themeColor: '#013E75'
-			},
-			{
-				name: 'EXPAND',
-				icon: 'icon-chaji',
-				type: 'expand',
-				themeColor: '#156858'
-			},
-			// {
-			// 	name: 'KEY_BY',
-			// 	icon: 'icon-flow-l',
-			// 	type: 'key_by',
-			// 	themeColor: '#FFC000'
-			// },
-			{
-				name: 'REDUCE',
-				icon: 'icon-reload',
-				type: 'reduce',
-				themeColor: '#EF5612'
-			}
-		]
-	},
-	{
-		title: '营销目标',
-		list: [
-			{
-				name: '事件',
-				icon: 'icon-event',
-				type: 'event_receive',
-				themeColor: '#39bcc5',
-				background: '#f2fcfa'
-			},
-			{
-				name: '人群包',
-				icon: 'icon-user-info',
-				type: 'audience_receive',
-				themeColor: '#39BCC5',
-				background: '#f2fcfa'
-			}
-		]
-	},
-	{
-		title: '营销触达',
-		list: [
-			{
-				name: '短信',
-				icon: 'icon-auto-reply',
-				type: 'sms',
-				themeColor: '#4594f3',
-				background: '#f5faff'
-			},
-			{
-				name: '微信',
-				icon: 'icon-scrm-l',
-				type: 'wechat',
-				themeColor: '#4594f3',
-				background: '#f5faff'
-			},
-			{
-				name: '邮件',
-				icon: 'icon-mail-l',
-				type: 'email',
-				themeColor: '#4594f3',
-				background: '#f5faff'
-			},
-			{
-				name: '权益',
-				icon: 'icon-license',
-				type: 'benefit',
-				themeColor: '#4594f3',
-				background: '#f5faff'
-			},
-			{
-				name: '积分',
-				icon: 'icon-coin',
-				type: 'benefit',
-				themeColor: '#4594f3',
-				background: '#f5faff'
-			},
-			{
-				name: '优惠券',
-				icon: 'icon--coupon-2',
-				type: 'coupon',
-				themeColor: '#4594f3',
-				background: '#f5faff'
-			}
-		]
-	},
-	{
-		title: '营销功能',
-		list: [
-			{
-				name: '客户标签',
-				icon: 'icon-tag',
-				type: 'tag',
-				themeColor: '#39BCC5'
-			},
-			{
-				name: 'Flow',
-				icon: 'icon-event',
-				type: 'flow',
-				themeColor: '#e8ffea'
-			},
-			{
-				name: '扩展数据',
-				icon: 'icon-event',
-				type: 'extend_data',
-				themeColor: '#ff6d69'
-			},
-			{
-				name: '定制功能',
-				icon: 'icon-flow-stop',
-				type: 'customization',
-				themeColor: '#ff6d69'
-			}
-		]
-	},
-	{
-		title: 'Flow',
-		list: [
-			{
-				name: 'flow测试',
-				icon: 'icon-event',
-				type: 'tag',
-				themeColor: '#39BCC5'
-			}
-		]
-	},
-	{
-		title: '逻辑操作',
-		list: [
-			{
-				name: '交集',
-				icon: 'icon-cross',
-				type: 'intersect',
-				themeColor: '#fba980'
-			},
-			{
-				name: '并集',
-				icon: 'icon-merge',
-				type: 'union',
-				themeColor: '#fba980'
-			},
-			{
-				name: '差集',
-				icon: 'icon-chaji',
-				type: 'exclusion',
-				themeColor: '#fba980'
-			},
-			{
-				name: '过滤',
-				icon: 'icon-ma-filter',
-				type: 'filter',
-				themeColor: '#fba980'
-			},
-			{
-				name: '去重',
-				icon: 'icon-quzhong',
-				type: 'unique',
-				themeColor: '#fba980'
-			},
-			{
-				name: 'A/B测试',
-				icon: 'icon-ABtestshezhi',
-				type: 'abtest',
-				themeColor: '#fba980'
-			},
-			{
-				name: '排序',
-				icon: 'icon-sort-fill',
-				type: 'sort',
-				themeColor: '#fba980'
-			}
-		]
-	},
-	{
-		title: '流程控制',
-		list: [
-			{
-				name: '开始',
-				icon: 'icon-start',
-				type: 'start',
-				themeColor: '#39BCC5'
-			},
-			{
-				name: '定时',
-				icon: 'icon-timing',
-				type: 'timer',
-				themeColor: '#105a63'
-			},
-			{
-				name: '限流',
-				icon: 'icon-timing',
-				type: 'restrict',
-				themeColor: '#105a63'
-			},
-			{
-				name: '结束',
-				icon: 'icon-flow-stop',
-				type: 'end',
-				themeColor: '#ff6d69'
-			}
-		]
-	}
-]