From 0a7734221d74e10ba70c5b0e722a94667ac5336d Mon Sep 17 00:00:00 2001
From: Sunil Shetye
Date: Thu, 3 Sep 2020 22:57:09 +0530
Subject: order blocks by name

---
 blocks/blocks/xcosblocks/views.py                  |  2 +-
 blocks/eda-frontend/src/App.js                     |  2 +-
 .../SchematicEditor/Helper/ComponentDrag.js        |  2 -
 .../SchematicEditor/Helper/SchematicEditor.css     | 11 +--
 .../components/SchematicEditor/Helper/SvgParser.js |  2 +-
 .../src/components/SchematicEditor/SideComp.js     |  4 +-
 blocks/eda-frontend/src/pages/SchematiEditor.js    | 85 ----------------------
 blocks/eda-frontend/src/pages/SchematicEditor.js   | 85 ++++++++++++++++++++++
 8 files changed, 96 insertions(+), 97 deletions(-)
 delete mode 100644 blocks/eda-frontend/src/pages/SchematiEditor.js
 create mode 100644 blocks/eda-frontend/src/pages/SchematicEditor.js

diff --git a/blocks/blocks/xcosblocks/views.py b/blocks/blocks/xcosblocks/views.py
index 4a8f87a4..69e636c8 100644
--- a/blocks/blocks/xcosblocks/views.py
+++ b/blocks/blocks/xcosblocks/views.py
@@ -41,7 +41,7 @@ class BlockViewSet(ReadOnlyModelViewSet):
     """
      Listing All Block Details
     """
-    queryset = Block.objects.all()
+    queryset = Block.objects.all().order_by('name')
     serializer_class = BlockSerializer
     filter_backends = [
         DjangoFilterBackend
diff --git a/blocks/eda-frontend/src/App.js b/blocks/eda-frontend/src/App.js
index 7f612234..52989137 100644
--- a/blocks/eda-frontend/src/App.js
+++ b/blocks/eda-frontend/src/App.js
@@ -7,7 +7,7 @@ import Navbar from './components/Shared/Navbar'
 import Home from './pages/Home'
 import Login from './pages/Login'
 import NotFound from './pages/NotFound'
-import SchematicEditor from './pages/SchematiEditor'
+import SchematicEditor from './pages/SchematicEditor'
 
 import Simulator from './pages/Simulator'
 import Gallery from './pages/Gallery'
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js
index 4155c2ee..7990c1ce 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js
@@ -7,8 +7,6 @@ import * as actions from '../../../redux/actions/actions'
 import store from '../../../redux/store'
 import dot from '../../../static/dot.gif'
 
-// import ClipBoardFunct from './ClipBoard.js'
-// import NetlistInfoFunct from './NetlistInfo.js'
 import ToolbarTools from './ToolbarTools.js'
 import KeyboardShorcuts from './KeyboardShorcuts.js'
 import { SideBar } from './SideBar.js'
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/SchematicEditor.css b/blocks/eda-frontend/src/components/SchematicEditor/Helper/SchematicEditor.css
index b3924826..7cd992c0 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/SchematicEditor.css
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/SchematicEditor.css
@@ -1,15 +1,16 @@
 /* Sidebar Components */
 .compImage {
-  width: 72px;
-  height: 72px;
+  width: auto;
+  height: auto;
+  max-height: 48px;
   margin-left: auto;
-  padding: 2px;
+  padding: 3px;
 }
 
 .compImage:hover {
   background-color: #f4f6f8;
   border-radius: 5px;
-  transform: scale(1.5);
+  transform: scale(1.2);
   padding: 3px;
   box-shadow: 0px 0px 41px 17px rgba(207,218,225,0.68);
 }
@@ -96,4 +97,4 @@ html {
 /* Optional: show position indicator in red */
 ::-webkit-scrollbar-thumb {
   background: grey;
-}
\ No newline at end of file
+}
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js
index 9f36f1cf..89b74acd 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js
@@ -61,7 +61,7 @@ export function getSvgMetadata (graph, parent, evt, target, x, y, component) {
   // initialize information from the svg meta
   // plots pinnumbers and component labels.
 
-  var path = '../' + component.svg_path
+  var path = 'http://localhost:8000/static/' + component.block_image_path
 
   fetch(path)
     .then(function (response) {
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js b/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js
index 5e5c2b77..1a0f0b18 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js
@@ -41,7 +41,7 @@ export default function SideComp ({ component }) {
 
       <Tooltip title={component.name} arrow>
         {/* Display Image thumbnail in left side pane */}
-        <img ref={imageRef} className='compImage' src={'../' + component.svg_path} alt="Logo" aria-describedby={id} onClick={handleClick} />
+        <img ref={imageRef} className='compImage' src={'http://localhost:8000/static/' + component.block_image_path} alt="Logo" aria-describedby={id} onClick={handleClick} />
       </Tooltip>
 
       {/* Popover to display component information on single click */}
@@ -68,7 +68,7 @@ export default function SideComp ({ component }) {
           {
             component.categories !== '' &&
           <ListItemText>
-            <b>Categories:</b> {component.categories}
+            <b>Categories:</b> {component.categories.map((c) => <li>{c}</li>)}
           </ListItemText>
 
           }
diff --git a/blocks/eda-frontend/src/pages/SchematiEditor.js b/blocks/eda-frontend/src/pages/SchematiEditor.js
deleted file mode 100644
index 8c4dbe02..00000000
--- a/blocks/eda-frontend/src/pages/SchematiEditor.js
+++ /dev/null
@@ -1,85 +0,0 @@
-// Main Layout for Schemaic Editor page.
-/* eslint-disable react/prop-types */
-import React, { useEffect } from 'react'
-import { CssBaseline } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
-
-import Layout from '../components/Shared/Layout'
-import Header from '../components/SchematicEditor/Header'
-import ComponentSidebar from '../components/SchematicEditor/ComponentSidebar'
-import LayoutMain from '../components/Shared/LayoutMain'
-import SchematicToolbar from '../components/SchematicEditor/SchematicToolbar'
-import RightSidebar from '../components/SchematicEditor/RightSidebar'
-import PropertiesSidebar from '../components/SchematicEditor/PropertiesSidebar'
-import LoadGrid from '../components/SchematicEditor/Helper/ComponentDrag.js'
-import '../components/SchematicEditor/Helper/SchematicEditor.css'
-import { fetchSchematic, loadGallery } from '../redux/actions/index'
-import { useDispatch } from 'react-redux'
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    minHeight: '100vh'
-  },
-  toolbar: {
-    minHeight: '80px'
-  }
-}))
-
-export default function SchematiEditor (props) {
-  const classes = useStyles()
-  const compRef = React.createRef()
-  const gridRef = React.createRef()
-  const outlineRef = React.createRef()
-  const dispatch = useDispatch()
-  const [mobileOpen, setMobileOpen] = React.useState(false)
-
-  const handleDrawerToggle = () => {
-    setMobileOpen(!mobileOpen)
-  }
-
-  useEffect(() => {
-    document.title = 'Diagram Editor - Xcos'
-    var container = gridRef.current
-    var sidebar = compRef.current
-    var outline = outlineRef.current
-    LoadGrid(container, sidebar, outline)
-
-    if (props.location.search !== '') {
-      const query = new URLSearchParams(props.location.search)
-      var cktid = query.get('id')
-
-      if (cktid.substr(0, 7) === 'gallery') {
-        // Loading Gallery schemaic.
-        dispatch(loadGallery(cktid.substr(7, cktid.length)))
-      } else {
-        // Loading User on-cloud saved schemaic.
-        dispatch(fetchSchematic(cktid))
-      }
-    }
-  }, [compRef, gridRef, outlineRef, props.location, dispatch])
-
-  return (
-
-    <div className={classes.root}>
-
-      <CssBaseline />
-
-      {/* Schematic editor header, toolbar and left side pane */}
-      <Layout header={<Header />} resToolbar={<SchematicToolbar gridRef={gridRef} mobileClose={handleDrawerToggle} />} sidebar={<ComponentSidebar compRef={compRef} />} />
-
-      {/* Grid for drawing and designing circuits */}
-      <LayoutMain>
-        <div className={classes.toolbar} />
-        <center>
-          <div className="grid-container A4-L" ref={gridRef} id="divGrid" />
-        </center>
-      </LayoutMain>
-
-      {/* Schematic editor Right side pane */}
-      <RightSidebar mobileOpen={mobileOpen} mobileClose={handleDrawerToggle} >
-        <PropertiesSidebar gridRef={gridRef} outlineRef={outlineRef} />
-      </RightSidebar>
-    </div>
-  )
-}
diff --git a/blocks/eda-frontend/src/pages/SchematicEditor.js b/blocks/eda-frontend/src/pages/SchematicEditor.js
new file mode 100644
index 00000000..cf86452f
--- /dev/null
+++ b/blocks/eda-frontend/src/pages/SchematicEditor.js
@@ -0,0 +1,85 @@
+// Main Layout for Schemaic Editor page.
+/* eslint-disable react/prop-types */
+import React, { useEffect } from 'react'
+import { CssBaseline } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+
+import Layout from '../components/Shared/Layout'
+import Header from '../components/SchematicEditor/Header'
+import ComponentSidebar from '../components/SchematicEditor/ComponentSidebar'
+import LayoutMain from '../components/Shared/LayoutMain'
+import SchematicToolbar from '../components/SchematicEditor/SchematicToolbar'
+import RightSidebar from '../components/SchematicEditor/RightSidebar'
+import PropertiesSidebar from '../components/SchematicEditor/PropertiesSidebar'
+import LoadGrid from '../components/SchematicEditor/Helper/ComponentDrag.js'
+import '../components/SchematicEditor/Helper/SchematicEditor.css'
+import { fetchSchematic, loadGallery } from '../redux/actions/index'
+import { useDispatch } from 'react-redux'
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+    minHeight: '100vh'
+  },
+  toolbar: {
+    minHeight: '80px'
+  }
+}))
+
+export default function SchematicEditor (props) {
+  const classes = useStyles()
+  const compRef = React.createRef()
+  const gridRef = React.createRef()
+  const outlineRef = React.createRef()
+  const dispatch = useDispatch()
+  const [mobileOpen, setMobileOpen] = React.useState(false)
+
+  const handleDrawerToggle = () => {
+    setMobileOpen(!mobileOpen)
+  }
+
+  useEffect(() => {
+    document.title = 'Diagram Editor - Xcos'
+    var container = gridRef.current
+    var sidebar = compRef.current
+    var outline = outlineRef.current
+    LoadGrid(container, sidebar, outline)
+
+    if (props.location.search !== '') {
+      const query = new URLSearchParams(props.location.search)
+      var cktid = query.get('id')
+
+      if (cktid.substr(0, 7) === 'gallery') {
+        // Loading Gallery schemaic.
+        dispatch(loadGallery(cktid.substr(7, cktid.length)))
+      } else {
+        // Loading User on-cloud saved schemaic.
+        dispatch(fetchSchematic(cktid))
+      }
+    }
+  }, [compRef, gridRef, outlineRef, props.location, dispatch])
+
+  return (
+
+    <div className={classes.root}>
+
+      <CssBaseline />
+
+      {/* Schematic editor header, toolbar and left side pane */}
+      <Layout header={<Header />} resToolbar={<SchematicToolbar gridRef={gridRef} mobileClose={handleDrawerToggle} />} sidebar={<ComponentSidebar compRef={compRef} />} />
+
+      {/* Grid for drawing and designing circuits */}
+      <LayoutMain>
+        <div className={classes.toolbar} />
+        <center>
+          <div className="grid-container A4-L" ref={gridRef} id="divGrid" />
+        </center>
+      </LayoutMain>
+
+      {/* Schematic editor Right side pane */}
+      <RightSidebar mobileOpen={mobileOpen} mobileClose={handleDrawerToggle} >
+        <PropertiesSidebar gridRef={gridRef} outlineRef={outlineRef} />
+      </RightSidebar>
+    </div>
+  )
+}
-- 
cgit