|
@@ -1,12 +1,15 @@
|
|
|
-import { useEffect, useRef } from "react";
|
|
|
+import { useEffect, useRef, useState } from "react";
|
|
|
import { Graph, Node } from "@antv/x6";
|
|
|
import img from "@/assets/wf_icon_autohandle.gif";
|
|
|
-import { Button, Dropdown, MenuProps } from "antd";
|
|
|
+import { MenuProps } from "antd";
|
|
|
+import Port from "./Port";
|
|
|
+import Content from "./Content";
|
|
|
|
|
|
-export default ({ node }: { node: Node }) => {
|
|
|
- const {} = node.getData();
|
|
|
+export default ({ node, graph }: { node: Node; graph: Graph }) => {
|
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
|
const { width, height } = node.getSize();
|
|
|
+ const [hovered, setHovered] = useState(false);
|
|
|
+ const [isSelected, setIsSelected] = useState(false);
|
|
|
|
|
|
const items: MenuProps["items"] = [
|
|
|
{ key: "copy", label: "复制" },
|
|
@@ -14,43 +17,36 @@ export default ({ node }: { node: Node }) => {
|
|
|
];
|
|
|
|
|
|
useEffect(() => {
|
|
|
- const { width: w, height: h } = node.getSize();
|
|
|
- if (w !== width || h !== height) {
|
|
|
- node.resize(width, height);
|
|
|
+ const { offsetWidth = 0, offsetHeight = 0 } = ref.current || {};
|
|
|
+ if (offsetHeight !== height || offsetWidth !== width) {
|
|
|
+ node.resize(offsetWidth, offsetHeight);
|
|
|
}
|
|
|
- }, [width, height]);
|
|
|
+ }, []);
|
|
|
|
|
|
- return (
|
|
|
- <div className="flow-node text-14px" ref={ref}>
|
|
|
- <div className="flex items-center justify-between">
|
|
|
- <img src={img} alt="logo" className="w-32px mr-4px" />
|
|
|
- <span className="text-16px color-#383743 flex-1">自动处理节点</span>
|
|
|
- <Dropdown menu={{ items }} overlayStyle={{ width: 120 }}>
|
|
|
- <Button
|
|
|
- type="text"
|
|
|
- icon={<i className="iconfont icon-gengduo" />}
|
|
|
- />
|
|
|
- </Dropdown>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div className="truncate text-12px color-#2029459e my-4px">
|
|
|
- 这是描述文本内容这是描述文本内容这是描述文本内容这是描述文本内容
|
|
|
- </div>
|
|
|
-
|
|
|
- <div className="text-12px color-#999">
|
|
|
- <span className="mr-4px">代码</span>
|
|
|
- <span className="color-#666">and</span>
|
|
|
- </div>
|
|
|
+ graph?.on("selection:changed", (args) => {
|
|
|
+ setIsSelected(graph.isSelected(node));
|
|
|
+ });
|
|
|
|
|
|
- <div className="text-12px color-#999">
|
|
|
- <span className="mr-4px">关联</span>
|
|
|
- <span className="color-#666">xxx页面+</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div className="text-12px color-#999">
|
|
|
- <span className="mr-4px">动作</span>
|
|
|
- <span className="color-#666">xxx页面+</span>
|
|
|
- </div>
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ className="flow-node text-14px relative"
|
|
|
+ style={{ borderColor: isSelected || hovered ? "#0e52e0" : "#d9d9d9" }}
|
|
|
+ ref={ref}
|
|
|
+ onMouseEnter={() => setHovered(true)}
|
|
|
+ onMouseLeave={() => setHovered(false)}
|
|
|
+ >
|
|
|
+ <Content
|
|
|
+ img={img}
|
|
|
+ node={node}
|
|
|
+ graph={graph}
|
|
|
+ items={items}
|
|
|
+ headerStyle={{
|
|
|
+ backgroundImage:
|
|
|
+ "linear-gradient(to bottom, rgba(32, 139, 226, 0.2), #ffffff)",
|
|
|
+ }}
|
|
|
+ />
|
|
|
+
|
|
|
+ <Port hovered={hovered} style={{ right: -7, cursor: "crosshair" }} />
|
|
|
</div>
|
|
|
);
|
|
|
};
|