feat(flowchart): add terminal shape element (#80)

packages/drawnix/src/components/icons.tsx

@@ -67,6 +67,14 @@ export const RectangleIcon = createIcon(
   </svg>
 );
 
+export const TerminalIcon = createIcon(
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <g id="terminal" stroke="none" fill="currentColor">
+      <path d="M11,3 C13.7614237,3 16,5.23857625 16,8 C16,10.7614237 13.7614237,13 11,13 L5,13 C2.23857625,13 0,10.7614237 0,8 C0,5.23857625 2.23857625,3 5,3 L11,3 Z M11,4.2 L5,4.2 C2.90131795,4.2 1.2,5.90131795 1.2,8 C1.2,10.0330982 2.79664702,11.6932796 4.8044525,11.7950555 L5,11.8 L11,11.8 C13.098682,11.8 14.8,10.098682 14.8,8 C14.8,5.96690176 13.203353,4.30672042 11.1955475,4.20494454 L11,4.2 Z" />
+    </g>
+  </svg>
+);
+
 export const EllipseIcon = createIcon(
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" version="1.1">
     <g id="ellipse" stroke="none" fill="currentColor">

packages/drawnix/src/components/shape-picker.tsx

@@ -9,11 +9,12 @@ import {
   DiamondIcon,
   ParallelogramIcon,
   RoundRectangleIcon,
+  TerminalIcon,
 } from './icons';
 import { BoardTransforms } from '@plait/core';
 import React from 'react';
 import { BoardCreationMode, setCreationMode } from '@plait/common';
-import { BasicShapes, DrawPointerType } from '@plait/draw';
+import { BasicShapes, DrawPointerType, FlowchartSymbols } from '@plait/draw';
 import { useBoard } from '@plait/react-board';
 import { splitRows } from '../utils/common';
 
@@ -39,6 +40,11 @@ const SHAPES: ShapeProps[] = [
     title: 'Triangle',
     pointer: BasicShapes.triangle,
   },
+  {
+    icon: TerminalIcon,
+    title: 'Terminal',
+    pointer: FlowchartSymbols.terminal,
+  },
   {
     icon: DiamondIcon,
     title: 'Diamond',

packages/drawnix/src/components/toolbar/creation-toolbar.tsx

@@ -20,7 +20,12 @@ import {
 } from '@plait/core';
 import { MindPointerType } from '@plait/mind';
 import { BoardCreationMode, setCreationMode } from '@plait/common';
-import { ArrowLineShape, BasicShapes, DrawPointerType } from '@plait/draw';
+import {
+  ArrowLineShape,
+  BasicShapes,
+  DrawPointerType,
+  FlowchartSymbols,
+} from '@plait/draw';
 import { ShapePicker } from '../shape-picker';
 import { ArrowPicker } from '../arrow-picker';
 import { useState } from 'react';
@@ -97,7 +102,10 @@ export const isArrowLinePointer = (board: PlaitBoard) => {
 };
 
 export const isShapePointer = (board: PlaitBoard) => {
-  return Object.keys(BasicShapes).includes(board.pointer);
+  return (
+    Object.keys(BasicShapes).includes(board.pointer) ||
+    Object.keys(FlowchartSymbols).includes(board.pointer)
+  );
 };
 
 export const CreationToolbar = () => {