feat: The Big One UI #47
@@ -60,11 +60,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.warning-item--warning {
|
.warning-item--warning {
|
||||||
border-left: 3px solid orange;
|
border: 3px solid orange;
|
||||||
}
|
}
|
||||||
|
|
||||||
.warning-item--info {
|
.warning-item--info {
|
||||||
border-left: 3px solid steelblue;
|
border: 3px solid steelblue;
|
||||||
}
|
}
|
||||||
|
|
||||||
.warning-item .meta {
|
.warning-item .meta {
|
||||||
|
|||||||
@@ -1,12 +1,15 @@
|
|||||||
import {
|
import {
|
||||||
type NodeProps,
|
type NodeProps,
|
||||||
Position,
|
Position,
|
||||||
type Node,
|
type Node, useNodeConnections
|
||||||
} from '@xyflow/react';
|
} from '@xyflow/react';
|
||||||
|
import {useEffect} from "react";
|
||||||
|
import type {EditorWarning} from "../components/EditorWarnings.tsx";
|
||||||
import { Toolbar } from '../components/NodeComponents';
|
import { Toolbar } from '../components/NodeComponents';
|
||||||
import styles from '../../VisProg.module.css';
|
import styles from '../../VisProg.module.css';
|
||||||
import {SingleConnectionHandle} from "../components/RuleBasedHandle.tsx";
|
import {SingleConnectionHandle} from "../components/RuleBasedHandle.tsx";
|
||||||
import {allowOnlyConnectionsFromType} from "../HandleRules.ts";
|
import {allowOnlyConnectionsFromType} from "../HandleRules.ts";
|
||||||
|
import useFlowStore from "../VisProgStores.tsx";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -27,6 +30,27 @@ export type EndNode = Node<EndNodeData>
|
|||||||
* @returns React.JSX.Element
|
* @returns React.JSX.Element
|
||||||
*/
|
*/
|
||||||
export default function EndNode(props: NodeProps<EndNode>) {
|
export default function EndNode(props: NodeProps<EndNode>) {
|
||||||
|
const {registerWarning, unregisterWarning} = useFlowStore.getState();
|
||||||
|
const connections = useNodeConnections({
|
||||||
|
id: props.id,
|
||||||
|
handleId: 'target'
|
||||||
|
})
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const noConnectionWarning : EditorWarning = {
|
||||||
|
scope: {
|
||||||
|
id: props.id,
|
||||||
|
handleId: 'target'
|
||||||
|
},
|
||||||
|
type: 'MISSING_INPUT',
|
||||||
|
severity: "ERROR",
|
||||||
|
description: "the endNode does not have an incoming connection from a phaseNode"
|
||||||
|
}
|
||||||
|
|
||||||
|
if (connections.length === 0) { registerWarning(noConnectionWarning); }
|
||||||
|
else { unregisterWarning(props.id, `${noConnectionWarning.type}:target`); }
|
||||||
|
}, [connections.length, props.id, registerWarning, unregisterWarning]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Toolbar nodeId={props.id} allowDelete={false}/>
|
<Toolbar nodeId={props.id} allowDelete={false}/>
|
||||||
|
|||||||
@@ -1,8 +1,10 @@
|
|||||||
import {
|
import {
|
||||||
type NodeProps,
|
type NodeProps,
|
||||||
Position,
|
Position,
|
||||||
type Node
|
type Node, useNodeConnections
|
||||||
} from '@xyflow/react';
|
} from '@xyflow/react';
|
||||||
|
import {useEffect} from "react";
|
||||||
|
import type {EditorWarning} from "../components/EditorWarnings.tsx";
|
||||||
import { Toolbar } from '../components/NodeComponents';
|
import { Toolbar } from '../components/NodeComponents';
|
||||||
import styles from '../../VisProg.module.css';
|
import styles from '../../VisProg.module.css';
|
||||||
import {SingleConnectionHandle, MultiConnectionHandle} from "../components/RuleBasedHandle.tsx";
|
import {SingleConnectionHandle, MultiConnectionHandle} from "../components/RuleBasedHandle.tsx";
|
||||||
@@ -41,6 +43,27 @@ export default function PhaseNode(props: NodeProps<PhaseNode>) {
|
|||||||
const updateLabel = (value: string) => updateNodeData(props.id, {...data, label: value});
|
const updateLabel = (value: string) => updateNodeData(props.id, {...data, label: value});
|
||||||
const label_input_id = `phase_${props.id}_label_input`;
|
const label_input_id = `phase_${props.id}_label_input`;
|
||||||
|
|
||||||
|
const {registerWarning, unregisterWarning} = useFlowStore.getState();
|
||||||
|
const connections = useNodeConnections({
|
||||||
|
id: props.id,
|
||||||
|
handleId: 'data'
|
||||||
|
})
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const noConnectionWarning : EditorWarning = {
|
||||||
|
scope: {
|
||||||
|
id: props.id,
|
||||||
|
handleId: 'data'
|
||||||
|
},
|
||||||
|
type: 'MISSING_INPUT',
|
||||||
|
severity: "WARNING",
|
||||||
|
description: "the phaseNode has no incoming goals, norms, and/or triggers"
|
||||||
|
}
|
||||||
|
|
||||||
|
if (connections.length === 0) { registerWarning(noConnectionWarning); }
|
||||||
|
else { unregisterWarning(props.id, `${noConnectionWarning.type}:source`); }
|
||||||
|
}, [connections.length, props.id, registerWarning, unregisterWarning]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Toolbar nodeId={props.id} allowDelete={true}/>
|
<Toolbar nodeId={props.id} allowDelete={true}/>
|
||||||
|
|||||||
Reference in New Issue
Block a user