diff --git a/src/components/LateralMenu/LateralMenu.tsx b/src/components/LateralMenu/LateralMenu.tsx index 23c9ff5..021ff69 100644 --- a/src/components/LateralMenu/LateralMenu.tsx +++ b/src/components/LateralMenu/LateralMenu.tsx @@ -71,6 +71,7 @@ const listImplementedNodes = [ 'ReadMaterialNode', 'WatchVideoNode', 'SummaryNode', + 'ScanningNode', 'codingQuestionNode', 'CollaborativeModelingNode', 'UMLModelingNode', diff --git a/src/components/Properties/Edges/EdgeProperties.tsx b/src/components/Properties/Edges/EdgeProperties.tsx index e0f0a1b..6de5e16 100644 --- a/src/components/Properties/Edges/EdgeProperties.tsx +++ b/src/components/Properties/Edges/EdgeProperties.tsx @@ -13,6 +13,7 @@ const config = [ 'ReadMaterialNode', 'MindMapNode', 'SummaryNode', + 'ScanningNode', 'ProblemSolvingNode', 'FindSolutionNode', 'CreateKeywordsListNode', diff --git a/src/components/Properties/Nodes/ScanningNodeProperties.tsx b/src/components/Properties/Nodes/ScanningNodeProperties.tsx new file mode 100644 index 0000000..938f4bc --- /dev/null +++ b/src/components/Properties/Nodes/ScanningNodeProperties.tsx @@ -0,0 +1,16 @@ +import MarkDownField from '../../Forms/Fields/MarkDownField'; +import NodeProperties from './NodeProperties'; + +const ScanningNodeProperties = () => { + return ( + <> + + + + ); +}; + +export default ScanningNodeProperties; diff --git a/src/components/ReactFlowNode/ReactFlowScanningNode/ReactFlowScanningNode.tsx b/src/components/ReactFlowNode/ReactFlowScanningNode/ReactFlowScanningNode.tsx new file mode 100644 index 0000000..4dd2590 --- /dev/null +++ b/src/components/ReactFlowNode/ReactFlowScanningNode/ReactFlowScanningNode.tsx @@ -0,0 +1,54 @@ +import { useTheme } from '@fluentui/react'; +import { Handle, Position } from 'reactflow'; +import icon from '../../../public/scanning_icon.png'; +import useStore from '../../../store'; +import { ScanningNode } from '../../../types/polyglotElements'; +import Card from '../../Card/Card'; +import { ReactFlowNodeProps } from '../ReactFlowNode'; + +type ReactFlowScanningNodeProps = ReactFlowNodeProps & ScanningNode; + +const ReactFlowScanningNode = ({ id }: ReactFlowScanningNodeProps) => { + const [onConnect, label] = useStore((state) => [ + state.onConnect, + state.nodeMap.get(id)?.title, + ]); + const theme = useTheme(); + + return ( + + + {label} + + + + ); +}; + +export default ReactFlowScanningNode; diff --git a/src/components/ReactFlowNode/index.ts b/src/components/ReactFlowNode/index.ts index 4952b22..78d73e5 100644 --- a/src/components/ReactFlowNode/index.ts +++ b/src/components/ReactFlowNode/index.ts @@ -20,6 +20,7 @@ export { default as ReactFlowOpenQuestionNode } from './ReactFlowOpenQuestionNod export { default as ReactFlowProblemSolvingNode } from './ReactFlowProblemSolvingNode/ReactFlowProblemSolvingNode'; export { default as ReactFlowPromptEngineeringNode } from './ReactFlowPromptEngineeringNode/ReactFlowPromptEngineeringNode'; export { default as ReactFlowReadMaterialNode } from './ReactFlowReadMaterialNode/ReactFlowReadMaterialNode'; +export { default as ReactFlowScanningNode } from './ReactFlowScanningNode/ReactFlowScanningNode'; export { default as ReactFlowSimulationNode } from './ReactFlowSimulationNode/ReactFlowSimulationNode'; export { default as ReactFlowSummaryNode } from './ReactFlowSummaryNode/ReactFlowSummaryNode'; export { default as ReactFlowTrueFalseNode } from './ReactFlowTrueFalseNode/ReactFlowTrueFalseNode'; diff --git a/src/public/scanning_icon.png b/src/public/scanning_icon.png new file mode 100644 index 0000000..668784e Binary files /dev/null and b/src/public/scanning_icon.png differ diff --git a/src/types/polyglotElements/nodes/ScanningNode.ts b/src/types/polyglotElements/nodes/ScanningNode.ts new file mode 100644 index 0000000..15295b6 --- /dev/null +++ b/src/types/polyglotElements/nodes/ScanningNode.ts @@ -0,0 +1,29 @@ +import ScanningNodeProperties from '../../../components/Properties/Nodes/ScanningNodeProperties'; +import { ReactFlowScanningNode } from '../../../components/ReactFlowNode'; +import icon from '../../../public/scanning_icon.png'; +import { polyglotNodeComponentMapping } from '../elementMapping'; +import { defaultPolyglotNodeData, NodeData, PolyglotNode } from './Node'; + +export type ScanningNodeData = NodeData & { + text: string; +}; + +export type ScanningNode = PolyglotNode & { + type: 'ScanningNode'; + data: ScanningNodeData; +}; + +polyglotNodeComponentMapping.registerMapping({ + elementType: 'ScanningNode', + name: 'AR Scan', + icon: icon.src, + group: 'understand_learning', + propertiesComponent: ScanningNodeProperties, + elementComponent: ReactFlowScanningNode, + defaultData: { + text: '', + link: '', + uploadLearner: false, + ...defaultPolyglotNodeData, + }, +}); diff --git a/src/types/polyglotElements/nodes/index.ts b/src/types/polyglotElements/nodes/index.ts index ce70961..e4595a9 100644 --- a/src/types/polyglotElements/nodes/index.ts +++ b/src/types/polyglotElements/nodes/index.ts @@ -22,6 +22,7 @@ export * from './OpenQuestionNode'; export * from './ProblemSolvingNode'; export * from './PromptEngineeringNode'; export * from './ReadMaterialNode'; +export * from './ScanningNode'; export * from './SimulationNode'; export * from './SummaryNode'; export * from './TrueFalseNode';