Added flip and mirror icon

3 files changed, 54 insertions, 1 deletions

diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js
index 73e3a1ac..5db83d44 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js
@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux'
 
 import mxGraphFactory from 'mxgraph'
 
-import { styleToObject } from '../../../utils/GalleryUtils'
+import { styleToObject, objectToStyle } from '../../../utils/GalleryUtils'
 
 import { getPortType, InputPort, OutputPort } from './ComponentDrag'
 import { portSize, getParameter } from './SvgParser'
@@ -111,6 +111,33 @@ export function Rotate () {
   }
 }
 
+// vertically
+export function Flip () {
+  const cell = graph.getSelectionCell()
+  if (cell && cell.CellType === 'Component') {
+    const model = graph.getModel()
+    const currentStyle = model.getStyle(cell) || ''
+    const styleMap = styleToObject(currentStyle)
+
+    styleMap.flip = styleMap.flip === 'true' ? 'false' : 'true'
+    model.setStyle(cell, objectToStyle(styleMap))
+  }
+}
+
+// horizontally
+export function Mirror () {
+  const cell = graph.getSelectionCell()
+  if (cell && cell.CellType === 'Component') {
+    const model = graph.getModel()
+    const currentStyle = model.getStyle(cell) || ''
+    const styleMap = styleToObject(currentStyle)
+
+    styleMap.mirror = styleMap.mirror === 'true' ? 'false' : 'true'
+
+    model.setStyle(cell, objectToStyle(styleMap))
+  }
+}
+
 // PRINT PREVIEW OF SCHEMATIC
 export function PrintPreview () {
   const title = useSelector(state => state.saveSchematic.title)
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js b/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
index b992db10..38b1f0f0 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
@@ -22,8 +22,10 @@ import {
 } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 import AddBoxOutlinedIcon from '@material-ui/icons/AddBoxOutlined'
+import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward'
 import ClearAllIcon from '@material-ui/icons/ClearAll'
 import CloseIcon from '@material-ui/icons/Close'
+import CompareArrowsIcon from '@material-ui/icons/CompareArrows'
 import CreateNewFolderOutlinedIcon from '@material-ui/icons/CreateNewFolderOutlined'
 import DeleteIcon from '@material-ui/icons/Delete'
 import DescriptionIcon from '@material-ui/icons/Description'
@@ -64,6 +66,8 @@ import {
   editorZoomIn,
   editorZoomOut,
   renderGalleryXML,
+  Flip,
+  Mirror,
   saveXml
 } from './Helper/ToolbarTools'
 import {
@@ -512,7 +516,10 @@ export default function SchematicToolbar ({ _mobileClose, gridRef }) {
     'pipe',
     { icon: <UndoIcon fontSize='small' />, label: 'Undo', action: editorUndo },
     { icon: <RedoIcon fontSize='small' />, label: 'Redo', action: editorRedo },
+    'pipe',
     { icon: <RotateRightIcon fontSize='small' />, label: 'Rotate', action: Rotate },
+    { icon: <ArrowDownwardIcon fontSize='small' />, label: 'Flip', action: Flip },
+    { icon: <CompareArrowsIcon fontSize='small' />, label: 'Mirror', action: Mirror },
     'pipe',
     { icon: <ZoomInIcon fontSize='small' />, label: 'Zoom In', action: editorZoomIn },
     { icon: <ZoomOutIcon fontSize='small' />, label: 'Zoom Out', action: editorZoomOut },
diff --git a/blocks/eda-frontend/src/utils/GalleryUtils.js b/blocks/eda-frontend/src/utils/GalleryUtils.js
index 7e6a6bf7..32aac61e 100644
--- a/blocks/eda-frontend/src/utils/GalleryUtils.js
+++ b/blocks/eda-frontend/src/utils/GalleryUtils.js
@@ -176,6 +176,25 @@ export const styleToObject = (style) => {
   return styleObject
 }
 
+export const objectToStyle = (styleObject) => {
+  let style = ''
+
+  for (const key in styleObject) {
+    if (Object.hasOwnProperty.call(styleObject, key)) {
+      const value = styleObject[key]
+      if (value !== undefined && value !== null && value !== '') {
+        if (key === 'default') {
+          style += `${value};`
+        } else {
+          style += `${key}=${value};`
+        }
+      }
+    }
+  }
+
+  return style
+}
+
 export const saveToFile = (filename, filetype, data) => {
   const blob = new Blob([data], { type: filetype + ';charset=utf-8' })
   saveAs(blob, filename)