|
@@ -1,18 +1,19 @@
|
|
|
import { PlusOutlined } from "@ant-design/icons";
|
|
|
+import { Graph, Node } from "@antv/x6";
|
|
|
import React from "react";
|
|
|
+import { Dropdown, Popover } from "antd";
|
|
|
+import NodeMenu from "../NodeMenu";
|
|
|
|
|
|
export default function Port(props: {
|
|
|
hovered: boolean;
|
|
|
out?: boolean;
|
|
|
style?: React.CSSProperties;
|
|
|
+ node?: Node,
|
|
|
+ graph?: Graph
|
|
|
}) {
|
|
|
- const { hovered, style = {}, out = true } = props;
|
|
|
+ const { hovered, style = {}, out = true, node, graph } = props;
|
|
|
const [canAdd, setCanAdd] = React.useState(false);
|
|
|
|
|
|
- const handleSetCanAdd = (value: boolean) => {
|
|
|
- out && setCanAdd(value);
|
|
|
- };
|
|
|
-
|
|
|
const extraStyle = React.useMemo(() => {
|
|
|
if (out && canAdd) {
|
|
|
return {
|
|
@@ -22,22 +23,40 @@ export default function Port(props: {
|
|
|
return {};
|
|
|
}, [canAdd]);
|
|
|
|
|
|
+ const handleSetCanAdd = (value: boolean) => {
|
|
|
+ out && setCanAdd(value);
|
|
|
+ node?.setData({ lock: !!value });
|
|
|
+ graph?.togglePanning(!value);
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleClickPort = (e: React.MouseEvent<HTMLDivElement>) => {
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
return (
|
|
|
- <div
|
|
|
- className="node-port flex items-center justify-center"
|
|
|
- style={{
|
|
|
- transform: hovered ? "scale(1.5) translateY(-50%)" : "scale(1) translateY(-50%)",
|
|
|
- opacity: hovered ? 1 : 0.5,
|
|
|
- ...style,
|
|
|
- ...extraStyle
|
|
|
- }}
|
|
|
- onMouseEnter={() => handleSetCanAdd(true)}
|
|
|
- onMouseLeave={() => handleSetCanAdd(false)}
|
|
|
+ <Popover
|
|
|
+ content={<NodeMenu graph={graph} />}
|
|
|
+ trigger="click"
|
|
|
+ placement="right"
|
|
|
+ arrow={false}
|
|
|
>
|
|
|
- { out && <PlusOutlined
|
|
|
- className="transform scale-0 transition duration-300 color-#fff text-8px"
|
|
|
- style={{ transform: canAdd ? "scale(1)" : "scale(0)" }}
|
|
|
- />}
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+ className="node-port flex items-center justify-center"
|
|
|
+ style={{
|
|
|
+ transform: hovered ? "scale(1.5) translateY(-50%)" : "scale(1) translateY(-50%)",
|
|
|
+ opacity: hovered ? 1 : 0.5,
|
|
|
+ ...style,
|
|
|
+ ...extraStyle
|
|
|
+ }}
|
|
|
+ onMouseEnter={() => handleSetCanAdd(true)}
|
|
|
+ onMouseLeave={() => handleSetCanAdd(false)}
|
|
|
+ onClick={handleClickPort}
|
|
|
+ >
|
|
|
+ { out && <PlusOutlined
|
|
|
+ className="transform scale-0 transition duration-300 color-#fff text-8px"
|
|
|
+ style={{ transform: canAdd ? "scale(1)" : "scale(0)" }}
|
|
|
+ />}
|
|
|
+ </div>
|
|
|
+ </Popover>
|
|
|
);
|
|
|
}
|