ContainmentCanvas fixed to use child component.

src/components/ContainmentCanvas/ContainmentCanvas.jsx

@@ -4,7 +4,7 @@ import {DropTarget} from 'react-dnd';
 
 import SingleConnectedNode from '../SingleConnectedNode/SingleConnectedNode';
 import DRAG_TYPES from '../../utils/dragTypes';
-import SVGRegistryBasedCanvasItem from '../SVGRegistryBasedCanvasItem/SVGRegistryBasedCanvasItem';
+import {SVGRegistryBasedCanvasItem} from '../SVGRegistryBasedCanvasItem';
 import ConnectionManager from '../ConnectionManager/ConnectionManager';
 import BasicConnectingComponent from '../ConnectionManager/BasicConnectingComponent';
 import BasicEventManager from '../BasicEventManager/BasicEventManager';
@@ -239,14 +239,4 @@ class ContainmentCanvas extends SingleConnectedNode {
     }
 }
 
-export default DropTarget(DRAG_TYPES
-
-        .GME_NODE
-    ,
-    canvasTarget
-    ,
-    collect
-)(
-    ContainmentCanvas
-)
-;
+export default DropTarget(DRAG_TYPES.GME_NODE, canvasTarget, collect)(ContainmentCanvas);

src/components/ContainmentCanvas/index.jsx

-import {default} from './ContainmentCanvas';
\ No newline at end of file
+export {default} from './ContainmentCanvas';
\ No newline at end of file

src/components/SVGRegistryBasedCanvasItem/SVGRegistryBasedCanvasItem.jsx

@@ -26,7 +26,7 @@ const canvasItemSource = {
     },
 };
 
-const defaultSVG  = "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>\n<root baseProfile=\"full\" height=\"210.0\" version=\"1.1\" viewBox=\"0 0 210.0 210.0\" width=\"210.0\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:ev=\"http://www.w3.org/2001/xml-events\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n  <defs/>\n  <defs>\n    <linearGradient id=\"926845b4-f7c1-4e3c-a437-8265e5af9bdb\" x1=\"0%\" x2=\"0%\" y1=\"0%\" y2=\"100%\">\n      <stop offset=\"0\" stop-color=\"rgb(200, 200, 200)\" stop-opacity=\"1\"/>\n      <stop offset=\"0.3\" stop-color=\"rgb(248, 248, 248)\" stop-opacity=\"1\"/>\n      <stop offset=\"0.7\" stop-color=\"rgb(248, 248, 248)\" stop-opacity=\"1\"/>\n      <stop offset=\"1\" stop-color=\"rgb(200, 200, 200)\" stop-opacity=\"1\"/>\n    </linearGradient>\n  </defs>\n  <defs/>\n  <defs/>\n  <defs/>\n  <defs/>\n  <defs/>\n  <desc>Modelica.Fluid.Icons.VariantLibrary</desc>\n  <rect fill=\"url(#926845b4-f7c1-4e3c-a437-8265e5af9bdb)\" height=\"200.0\" rx=\"25.0\" ry=\"25.0\" stroke=\"rgb(200,200,200)\" stroke-width=\"0.25mm\" width=\"200.0\" x=\"5.0\" y=\"5.0\"/>\n  <rect fill=\"none\" fill-opacity=\"0\" height=\"200.0\" rx=\"25.0\" ry=\"25.0\" stroke=\"rgb(128,128,128)\" stroke-width=\"0.25mm\" width=\"200.0\" x=\"5.0\" y=\"5.0\"/>\n  <ellipse cx=\"65.0\" cy=\"145.0\" fill=\"rgb(76,76,76)\" rx=\"30.0\" ry=\"30.0\"/>\n  <ellipse cx=\"145.0\" cy=\"145.0\" fill=\"rgb(0,0,0)\" rx=\"30.0\" ry=\"30.0\"/>\n  <ellipse cx=\"145.0\" cy=\"65.0\" fill=\"rgb(128,128,128)\" rx=\"30.0\" ry=\"30.0\"/>\n  <ellipse cx=\"65.0\" cy=\"65.0\" fill=\"rgb(255,255,255)\" rx=\"30.0\" ry=\"30.0\" stroke=\"rgb(128,128,128)\" stroke-width=\"0.25mm\"/>\n</root>";
+const defaultSVG = "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>\n<root baseProfile=\"full\" height=\"210.0\" version=\"1.1\" viewBox=\"0 0 210.0 210.0\" width=\"210.0\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:ev=\"http://www.w3.org/2001/xml-events\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n  <defs/>\n  <defs>\n    <linearGradient id=\"926845b4-f7c1-4e3c-a437-8265e5af9bdb\" x1=\"0%\" x2=\"0%\" y1=\"0%\" y2=\"100%\">\n      <stop offset=\"0\" stop-color=\"rgb(200, 200, 200)\" stop-opacity=\"1\"/>\n      <stop offset=\"0.3\" stop-color=\"rgb(248, 248, 248)\" stop-opacity=\"1\"/>\n      <stop offset=\"0.7\" stop-color=\"rgb(248, 248, 248)\" stop-opacity=\"1\"/>\n      <stop offset=\"1\" stop-color=\"rgb(200, 200, 200)\" stop-opacity=\"1\"/>\n    </linearGradient>\n  </defs>\n  <defs/>\n  <defs/>\n  <defs/>\n  <defs/>\n  <defs/>\n  <desc>Modelica.Fluid.Icons.VariantLibrary</desc>\n  <rect fill=\"url(#926845b4-f7c1-4e3c-a437-8265e5af9bdb)\" height=\"200.0\" rx=\"25.0\" ry=\"25.0\" stroke=\"rgb(200,200,200)\" stroke-width=\"0.25mm\" width=\"200.0\" x=\"5.0\" y=\"5.0\"/>\n  <rect fill=\"none\" fill-opacity=\"0\" height=\"200.0\" rx=\"25.0\" ry=\"25.0\" stroke=\"rgb(128,128,128)\" stroke-width=\"0.25mm\" width=\"200.0\" x=\"5.0\" y=\"5.0\"/>\n  <ellipse cx=\"65.0\" cy=\"145.0\" fill=\"rgb(76,76,76)\" rx=\"30.0\" ry=\"30.0\"/>\n  <ellipse cx=\"145.0\" cy=\"145.0\" fill=\"rgb(0,0,0)\" rx=\"30.0\" ry=\"30.0\"/>\n  <ellipse cx=\"145.0\" cy=\"65.0\" fill=\"rgb(128,128,128)\" rx=\"30.0\" ry=\"30.0\"/>\n  <ellipse cx=\"65.0\" cy=\"65.0\" fill=\"rgb(255,255,255)\" rx=\"30.0\" ry=\"30.0\" stroke=\"rgb(128,128,128)\" stroke-width=\"0.25mm\"/>\n</root>";
 
 function collect(connector, monitor) {
     return {
@@ -57,8 +57,10 @@ class SVGRegistryBasedCanvasItem extends Component {
     };
 
     static defaultProps = {
-        selectNode: function(){},
-        activateAttributeDrawer: function(){},
+        selectNode: function () {
+        },
+        activateAttributeDrawer: function () {
+        },
         selection: [],
     };
 

src/components/SVGRegistryBasedCanvasItem/index.jsx

+import SVGRegistryBasedCanvasItem from './SVGRegistryBasedCanvasItem';
+import SVGRegistryBasedCanvasItemPort from './SVGRegistryBasedCanvasItemPort';
+
+export {SVGRegistryBasedCanvasItem, SVGRegistryBasedCanvasItemPort};
\ No newline at end of file