Commit bcd5d87e authored by Patrik Meijer's avatar Patrik Meijer
Browse files

PartBrowser shows up in demo

parent 20b6c648

demo/demoApp.jsx

+5 −0
Original line number Diff line number Diff line
@@ -16,6 +16,7 @@ import DemoModalSpinner from '../src/components/ModalSpinner/demo'; 
import DemoContainmentCanvas from '../src/components/ContainmentCanvas/demo';

import DemoSingleConnectedNode from '../src/components/SingleConnectedNode/demo';

import DemoInfoCard from '../src/components/InfoCard/demo';

import DemoPartBrowser from '../src/components/PartBrowser/demo';





class demoApp extends Component {
@@ -61,6 +62,10 @@ class demoApp extends Component { 
                title: 'InfoCard',

                height: 200,

            },

            {

                component: <DemoPartBrowser/>,

                title: 'PartBrowser',

            },

        ];



        return (

package-lock.json

+95 −110
Original line number Diff line number Diff line
@@ -1028,104 +1028,6 @@ 
        }

      }

    },

    "@emotion/cache": {

      "version": "0.8.8",

      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-0.8.8.tgz",

      "integrity": "sha512-yaQQjNAVkKclMX6D8jTU3rhQKjCnXU1KS+Ok0lgZcarGHI2yydU/kKHyF3PZnQhbTpIFBK5W4+HmLCtCie7ESw==",

      "requires": {

        "@emotion/sheet": "^0.8.1",

        "@emotion/stylis": "^0.7.1",

        "@emotion/utils": "^0.8.2"

      }

    },

    "@emotion/core": {

      "version": "0.13.1",

      "resolved": "https://registry.npmjs.org/@emotion/core/-/core-0.13.1.tgz",

      "integrity": "sha512-5qzKP6bTe2Ah7Wvh1sgtzgy6ycdpxwgMAjQ/K/VxvqBxveG9PCpq+Z0GdVg7Houb1AwYjTfNtXstjSk4sqi/7g==",

      "requires": {

        "@emotion/cache": "^0.8.8",

        "@emotion/css": "^0.9.8",

        "@emotion/serialize": "^0.9.1",

        "@emotion/sheet": "^0.8.1",

        "@emotion/utils": "^0.8.2"

      }

    },

    "@emotion/css": {

      "version": "0.9.8",

      "resolved": "https://registry.npmjs.org/@emotion/css/-/css-0.9.8.tgz",

      "integrity": "sha512-Stov3+9+KWZAte/ED9Hts3r4DVBADd5erDrhrywokM31ctQsRPD3qk8W4d1ca48ry57g/nc0qUHNis/xd1SoFg==",

      "requires": {

        "@emotion/serialize": "^0.9.1",

        "@emotion/utils": "^0.8.2"

      }

    },

    "@emotion/hash": {

      "version": "0.6.6",

      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.6.6.tgz",

      "integrity": "sha512-ojhgxzUHZ7am3D2jHkMzPpsBAiB005GF5YU4ea+8DNPybMk01JJUM9V9YRlF/GE95tcOm8DxQvWA2jq19bGalQ=="

    },

    "@emotion/is-prop-valid": {

      "version": "0.6.8",

      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.6.8.tgz",

      "integrity": "sha512-IMSL7ekYhmFlILXcouA6ket3vV7u9BqStlXzbKOF9HBtpUPMMlHU+bBxrLOa2NvleVwNIxeq/zL8LafLbeUXcA==",

      "requires": {

        "@emotion/memoize": "^0.6.6"

      }

    },

    "@emotion/memoize": {

      "version": "0.6.6",

      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.6.6.tgz",

      "integrity": "sha512-h4t4jFjtm1YV7UirAFuSuFGyLa+NNxjdkq6DpFLANNQY5rHueFZHVY+8Cu1HYVP6DrheB0kv4m5xPjo7eKT7yQ=="

    },

    "@emotion/serialize": {

      "version": "0.9.1",

      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.9.1.tgz",

      "integrity": "sha512-zTuAFtyPvCctHBEL8KZ5lJuwBanGSutFEncqLn/m9T1a6a93smBStK+bZzcNPgj4QS8Rkw9VTwJGhRIUVO8zsQ==",

      "requires": {

        "@emotion/hash": "^0.6.6",

        "@emotion/memoize": "^0.6.6",

        "@emotion/unitless": "^0.6.7",

        "@emotion/utils": "^0.8.2"

      }

    },

    "@emotion/sheet": {

      "version": "0.8.1",

      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.8.1.tgz",

      "integrity": "sha512-p82hFBHbNkPLZ410HOeaRJZMrN1uh9rI7JAaRXIp62PP5evspPXyi3xYtxZc1+sCSlwjnQPuOIa6N88iJNtPXw=="

    },

    "@emotion/styled": {

      "version": "0.10.6",

      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-0.10.6.tgz",

      "integrity": "sha512-DFNW8jlMjy1aYCj/PKsvBoJVZAQXzjmSCwtKXLs31qZzNPaUEPbTYSIKnMUtIiAOYsu0pUTGXM+l0a+MYNm4lA==",

      "requires": {

        "@emotion/styled-base": "^0.10.6"

      }

    },

    "@emotion/styled-base": {

      "version": "0.10.6",

      "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-0.10.6.tgz",

      "integrity": "sha512-7RfdJm2oEXiy3isFRY63mHRmWWjScFXFoZTFkCJPaL8NhX+H724WwIoQOt3WA1Jd+bb97xkJg31JbYYsSqnEaQ==",

      "requires": {

        "@emotion/is-prop-valid": "^0.6.8",

        "@emotion/serialize": "^0.9.1",

        "@emotion/utils": "^0.8.2"

      }

    },

    "@emotion/stylis": {

      "version": "0.7.1",

      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.7.1.tgz",

      "integrity": "sha512-/SLmSIkN13M//53TtNxgxo57mcJk/UJIDFRKwOiLIBEyBHEcipgR6hNMQ/59Sl4VjCJ0Z/3zeAZyvnSLPG/1HQ=="

    },

    "@emotion/unitless": {

      "version": "0.6.7",

      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.6.7.tgz",

      "integrity": "sha512-Arj1hncvEVqQ2p7Ega08uHLr1JuRYBuO5cIvcA+WWEQ5+VmkOE3ZXzl04NbQxeQpWX78G7u6MqxKuNX3wvYZxg=="

    },

    "@emotion/utils": {

      "version": "0.8.2",

      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.8.2.tgz",

      "integrity": "sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw=="

    },

    "@material-ui/core": {

      "version": "3.1.0",

      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.1.0.tgz",
@@ -1548,6 +1450,11 @@ 
      "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=",

      "dev": true

    },

    "array-find": {

      "version": "1.0.0",

      "resolved": "https://registry.npmjs.org/array-find/-/array-find-1.0.0.tgz",

      "integrity": "sha1-bI4obRHtdoMn+OYuzuhzU8o+eLg="

    },

    "array-find-index": {

      "version": "1.0.2",

      "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
@@ -1710,6 +1617,27 @@ 
        "util.promisify": "^1.0.0"

      }

    },

    "babel-runtime": {

      "version": "6.26.0",

      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",

      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",

      "requires": {

        "core-js": "^2.4.0",

        "regenerator-runtime": "^0.11.0"

      },

      "dependencies": {

        "core-js": {

          "version": "2.5.7",

          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz",

          "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw=="

        },

        "regenerator-runtime": {

          "version": "0.11.1",

          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",

          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="

        }

      }

    },

    "balanced-match": {

      "version": "1.0.0",

      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -1852,6 +1780,11 @@ 
        "multicast-dns-service-types": "^1.1.0"

      }

    },

    "bowser": {

      "version": "1.9.4",

      "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz",

      "integrity": "sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ=="

    },

    "brace-expansion": {

      "version": "1.1.11",

      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -3233,6 +3166,11 @@ 
        "strip-eof": "^1.0.0"

      }

    },

    "exenv": {

      "version": "1.2.2",

      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",

      "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="

    },

    "expand-brackets": {

      "version": "2.1.4",

      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
@@ -4576,6 +4514,15 @@ 
      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",

      "dev": true

    },

    "inline-style-prefixer": {

      "version": "2.0.5",

      "resolved": "http://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-2.0.5.tgz",

      "integrity": "sha1-wVPH6I/YT+9cYC6VqBaLJ3BnH+c=",

      "requires": {

        "bowser": "^1.0.0",

        "hyphenate-style-name": "^1.0.1"

      }

    },

    "inquirer": {

      "version": "6.2.0",

      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.2.0.tgz",
@@ -5232,12 +5179,37 @@ 
      "integrity": "sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q==",

      "dev": true

    },

    "lodash._getnative": {

      "version": "3.9.1",

      "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",

      "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U="

    },

    "lodash.debounce": {

      "version": "4.0.8",

      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",

      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",

      "dev": true

    },

    "lodash.isarguments": {

      "version": "3.1.0",

      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",

      "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo="

    },

    "lodash.isarray": {

      "version": "3.0.4",

      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",

      "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U="

    },

    "lodash.keys": {

      "version": "3.1.2",

      "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",

      "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=",

      "requires": {

        "lodash._getnative": "^3.0.0",

        "lodash.isarguments": "^3.0.0",

        "lodash.isarray": "^3.0.0"

      }

    },

    "loglevel": {

      "version": "1.6.1",

      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.1.tgz",
@@ -6256,6 +6228,17 @@ 
      "integrity": "sha512-eTPo5t/4bgaMNZxyjWx6N2a6AuE0mq51KWvpc7nU/MAqixcI6v6KrGUKES0HaomdnolQBBXU/++X6/QQ9KL4tw==",

      "dev": true

    },

    "radium": {

      "version": "0.19.6",

      "resolved": "https://registry.npmjs.org/radium/-/radium-0.19.6.tgz",

      "integrity": "sha512-IABYntqCwYelUUIwA52maSCgJbqtJjHKIoD21wgpw3dGhIUbJ5chDShDGdaFiEzdF03hN9jfQqlmn0bF4YhfrQ==",

      "requires": {

        "array-find": "^1.0.0",

        "exenv": "^1.2.1",

        "inline-style-prefixer": "^2.0.5",

        "prop-types": "^15.5.8"

      }

    },

    "randombytes": {

      "version": "2.0.6",

      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.0.6.tgz",
@@ -6438,17 +6421,16 @@ 
      }

    },

    "react-treebeard": {

      "version": "3.1.0",

      "resolved": "https://registry.npmjs.org/react-treebeard/-/react-treebeard-3.1.0.tgz",

      "integrity": "sha512-u4OEzwZk1Xcxp2s55Ny/Ofp8fHRwlabKOAeGbzQ7XUE9YXFbPj8ajl0FInbXEP4Ys9+E1vHCtgqJ6VBsgbCPVg==",

      "version": "2.1.0",

      "resolved": "https://registry.npmjs.org/react-treebeard/-/react-treebeard-2.1.0.tgz",

      "integrity": "sha512-unoy8IJL1NR5jgTtK+CqOCZKZylh/Tlid0oYajW9bLZCbFelxzmCsF8Y2hyS6pvHqM4W501oOm5O/jvg3VZCrg==",

      "requires": {

        "@babel/runtime": "^7.0.0",

        "@emotion/core": "^0.13.1",

        "@emotion/styled": "^0.10.6",

        "babel-runtime": "^6.23.0",

        "deep-equal": "^1.0.1",

        "prop-types": "^15.6.2",

        "shallowequal": "^1.1.0",

        "velocity-react": "^1.4.1"

        "prop-types": "^15.5.8",

        "radium": "^0.19.0",

        "shallowequal": "^0.2.2",

        "velocity-react": "^1.3.1"

      }

    },

    "reactcss": {
@@ -6886,9 +6868,12 @@ 
      }

    },

    "shallowequal": {

      "version": "1.1.0",

      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",

      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="

      "version": "0.2.2",

      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-0.2.2.tgz",

      "integrity": "sha1-HjL9W8q2rWiKSBLLDMBO/HXHAU4=",

      "requires": {

        "lodash.keys": "^3.1.2"

      }

    },

    "shebang-command": {

      "version": "1.2.0",

package.json

+1 −1
Original line number Diff line number Diff line
@@ -28,7 +28,7 @@ 
    "immutability-helper": "^2.8.1",

    "react-color": "^2.14.1",

    "react-samy-svg": "^3.0.1",

    "react-treebeard": "^3.1.0"

    "react-treebeard": "^2.1.0"

  },

  "peerDependencies": {

    "react": "^16.5.1",

src/components/PartBrowser/PartBrowser.jsx

+27 −17
Original line number Diff line number Diff line
@@ -12,8 +12,11 @@ import Typography from '@material-ui/core/Typography'; 
import SingleConnectedNode from '../SingleConnectedNode';

import {nameSort} from '../../utils/getObjectSorter';



import PartBrowserItem from './PartBrowserItem';

import {treeBeardTheme, getTreeDecorators} from './TreeOverrides';

import PartBrowserItem from './PartBrowserItem';

import PartBrowserDragPreview from './PartBrowserDragPreview';



import defaultSVG from '../../utils/defaultSVG';



const TREE_PATH_SEP = '$';

const EXPAND_ALL = false;
@@ -24,8 +27,20 @@ class PartBrowser extends SingleConnectedNode { 


        activeNode: PropTypes.string.isRequired,

        scale: PropTypes.number.isRequired,



        minimized: PropTypes.bool.isRequired,



        getTreePath: PropTypes.func,

        getTitle: PropTypes.func,

    };



    static defaultProps = {

        getTreePath: (metaNode) => {

            const modelicaUri = metaNode.getAttribute('ModelicaURI');

            return modelicaUri ? modelicaUri.split('.')

                .slice(1)

                .join('$') : null;

        },

        getTitle: metaNode => metaNode.getAttribute('ShortName') || metaNode.getAttribute('name'),

    };



    state = {
@@ -91,27 +106,21 @@ class PartBrowser extends SingleConnectedNode { 
    }



    updateValidChildren(validChildrenMap) {

        const {gmeClient} = this.props;

        const {

            gmeClient,

            getTreePath,

            getTitle,

        } = this.props;



        const validChildren = Object.keys(validChildrenMap)

            .map((id) => {

                const metaNode = gmeClient.getNode(id);

                const modelicaUri = metaNode.getAttribute('ModelicaURI');



                return {

                    id: metaNode.getId(),

                    name: metaNode.getAttribute('ShortName') || metaNode.getAttribute('name'),

                    treePath: modelicaUri ? modelicaUri.split('.')

                        .slice(1)

                        .join('$') : null,

                    modelicaUri: modelicaUri || 'Default',

                    iconUrl: modelicaUri

                        ? `/assets/DecoratorSVG/${modelicaUri}.svg` : '/assets/DecoratorSVG/Default.svg',

                    bbox: {

                        x: 0,

                        y: 0,

                        height: 100,

                        width: 100,

                    },

                    name: getTitle(metaNode),

                    treePath: getTreePath(metaNode),

                    svg: defaultSVG,

                };

            });
@@ -222,6 +231,7 @@ class PartBrowser extends SingleConnectedNode { 
                textAlign: minimized ? 'center' : undefined,

            }}

            >

                <PartBrowserDragPreview scale={scale}/>

                <div style={{display: minimized ? 'none' : undefined}}>

                    {this.tree.children.map(this.buildTreeStructure)}

                </div>

src/components/PartBrowser/PartBrowserItem.jsx

+7 −8
Original line number Diff line number Diff line
@@ -6,8 +6,7 @@ import {getEmptyImage} from 'react-dnd-html5-backend'; 
// noinspection JSUnresolvedVariable

import {Samy, SvgProxy} from 'react-samy-svg';



import {DRAG_TYPES} from '../CONSTANTS';

import SVGCACHE from '../../plugins/MoveSVGToRegistryUtil/svgcache.json';

import dragTypes from '../../utils/dragTypes';



// / End of DragLayer..

const partBrowserItemSource = {
@@ -18,8 +17,8 @@ const partBrowserItemSource = { 
            // Specifics

            nodeData: props.nodeData,

            offset: {

                y: SVGCACHE[props.nodeData.modelicaUri].bbox.height * (props.scale / 2),

                x: SVGCACHE[props.nodeData.modelicaUri].bbox.width * (props.scale / 2),

                y: props.nodeData.svg.bbox.height * (props.scale / 2),

                x: props.nodeData.svg.bbox.width * (props.scale / 2),

            },

        };

    },
@@ -38,11 +37,11 @@ class PartBrowserItem extends Component { 
        nodeData: PropTypes.shape({

            id: PropTypes.string.isRequired,

            name: PropTypes.string,

            modelicaUri: PropTypes.string,

            iconUrl: PropTypes.string,

            svg: PropTypes.object.isRequired,

        }).isRequired,

        connectDragSource: PropTypes.func.isRequired,

        connectDragPreview: PropTypes.func.isRequired,

        scale: PropTypes.number.isRequired,

        listView: PropTypes.bool,

    };
@@ -76,7 +75,7 @@ class PartBrowserItem extends Component { 
            >

                <div>

                    <Samy

                        svgXML={SVGCACHE[nodeData.modelicaUri].base}

                        svgXML={nodeData.svg.base}

                        style={{

                            height: 26,

                            width: 40,
@@ -104,4 +103,4 @@ class PartBrowserItem extends Component { 
    }

}



export default DragSource(DRAG_TYPES.GME_NODE, partBrowserItemSource, collect)(PartBrowserItem);
 
export default DragSource(dragTypes.GME_NODE, partBrowserItemSource, collect)(PartBrowserItem);