scanning activity implementation

src/components/LateralMenu/LateralMenu.tsx

@@ -71,6 +71,7 @@ const listImplementedNodes = [
   'ReadMaterialNode',
   'WatchVideoNode',
   'SummaryNode',
+  'ScanningNode',
   'codingQuestionNode',
   'CollaborativeModelingNode',
   'UMLModelingNode',

src/components/Properties/Edges/EdgeProperties.tsx

@@ -13,6 +13,7 @@ const config = [
       'ReadMaterialNode',
       'MindMapNode',
       'SummaryNode',
+      'ScanningNode',
       'ProblemSolvingNode',
       'FindSolutionNode',
       'CreateKeywordsListNode',

src/components/Properties/Nodes/ScanningNodeProperties.tsx

@@ -0,0 +1,16 @@
+import MarkDownField from '../../Forms/Fields/MarkDownField';
+import NodeProperties from './NodeProperties';
+
+const ScanningNodeProperties = () => {
+  return (
+    <>
+      <NodeProperties
+        platform={['MuNDAR']}
+        activityDescription="In this activity learners will have to scan their material according to the assignment"
+      />
+      <MarkDownField label="Text" name="data.text" />
+    </>
+  );
+};
+
+export default ScanningNodeProperties;

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 (
+    <Card className="Card-react-flow">
+      <img
+        src={icon.src}
+        width="20"
+        height="20"
+        style={{ float: 'left', marginTop: '2px', marginRight: '5px' }}
+      />
+      {label}
+      <Handle
+        type="source"
+        position={Position.Right}
+        onConnect={onConnect}
+        style={{
+          background: '#FFCC49',
+          height: '25px',
+          width: '5px',
+          borderRadius: '0px',
+          border: '0px',
+        }}
+      />
+      <Handle
+        type="target"
+        position={Position.Left}
+        style={{
+          background: '#FFCC49',
+          height: '25px',
+          width: '5px',
+          borderRadius: '0px',
+          border: '0px',
+        }}
+      />
+    </Card>
+  );
+};
+
+export default ReactFlowScanningNode;

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';

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<ScanningNode>({
+  elementType: 'ScanningNode',
+  name: 'AR Scan',
+  icon: icon.src,
+  group: 'understand_learning',
+  propertiesComponent: ScanningNodeProperties,
+  elementComponent: ReactFlowScanningNode,
+  defaultData: {
+    text: '',
+    link: '',
+    uploadLearner: false,
+    ...defaultPolyglotNodeData,
+  },
+});

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';