Commit bc7bd2c4 authored by Tamas Kecskes's avatar Tamas Kecskes
Browse files

Added ModalSpinner with demo 

Moving ContainmentCanvas (issues with redux and global state...)
parent efc00ae4

demo/demoApp.jsx

+11 −2
Original line number Diff line number Diff line
@@ -8,7 +8,8 @@ import DemoProjectSeedCards from '../src/components/ProjectSeedCards/demo'; 
import DemoAttributeEditor from '../src/components/AttributeEditor/demo';

import DemoConfirmDialog from '../src/components/ConfirmDialog/demo';

import DemoUserProfileNavigator from '../src/components/UserProfileNavigator/demo';



import DemoModalSpinner from '../src/components/ModalSpinner/demo';

import DemoContainmentCanvas from '../src/components/ContainmentCanvas/demo';



export default class demoApp extends Component {

    componentDidMount() {
@@ -35,6 +36,14 @@ export default class demoApp extends Component { 
                component: <DemoUserProfileNavigator/>,

                title: 'UserProfileNavigator',

            },

            {

                component: <DemoModalSpinner/>,

                title: 'ModalSpinner',

            },

            // {

            //     component: <DemoContainmentCanvas/>,

            //     title: 'ContainmentCanvas',

            // },

        ];



        return (

package-lock.json

+282 −247

File changed.

Preview size limit exceeded, changes collapsed.

package.json

+7 −2
Original line number Diff line number Diff line
@@ -38,10 +38,15 @@ 
    "@babel/preset-react": "^7.0.0",

    "babel-loader": "^8.0.2",

    "prop-types": "^15.6.2",

    "react": "^16.5.1",

    "react": "^16.5.2",

    "react-dnd": "^2.5.4",

    "react-dnd-html5-backend": "^2.5.4",

    "react-dom": "^16.5.2",

    "react-redux": "^5.0.6",

    "react-router-dom": "^4.3.1",

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

    "webpack": "^4.19.1",

    "webpack-cli": "^3.1.0",

    "webpack-cli": "^3.1.2",

    "webpack-dev-server": "^3.1.8"

  }

}

src/components/BasicEventManager/BasicEventManager.jsx

0 → 100644
+34 −0
Original line number Diff line number Diff line 
/**

 * @author kecso / https://github.com/kecso

 */

export default class BasicEventManager {

    constructor() {

        this.subscribers = {};

        this.lastEvents = {};



        this.subscribe = this.subscribe.bind(this);

        this.unsubscribe = this.unsubscribe.bind(this);

        this.fire = this.fire.bind(this);

    }



    fire(id, event) {

        const oldEvent = this.lastEvents[id];

        this.lastEvents[id] = event;

        if (JSON.stringify(oldEvent) !== JSON.stringify(event)) {

            (this.subscribers[id] || []).forEach((eventFn) => {

                eventFn(id, event);

            });

        }

    }



    subscribe(id, eventFn) {

        this.subscribers[id] = this.subscribers[id] || [];

        this.subscribers[id].push(eventFn);

        return this.lastEvents[id];

    }



    unsubscribe(id, eventFn) {

        this.subscribers[id] = this.subscribers[id] || [];

        this.subscribers[id].splice(this.subscribers[id].indexOf(eventFn), 1);

    }

}

src/components/ContainmentCanvas/BasicConnectingComponent.jsx

0 → 100644
+68 −0
Original line number Diff line number Diff line 
import React, {Component} from 'react';

import PropTypes from 'prop-types';

import Z_LEVELS from '../../utils/zLevels';



export default class BasicConnectingComponent extends Component {

    static propTypes = {

        connectionManager: PropTypes.object.isRequired,

    };



    constructor(props) {

        super(props);



        const {connectionManager} = this.props;



        connectionManager.setListener(this.onChange);

    }



    state = {

        startPos: null,

        currentPos: null,

        isConnecting: false,

    };



    onChange = (event) => {

        this.setState(event);

    };



    render() {

        const {isConnecting, startPos, currentPos} = this.state;

        let top;

        let left;

        let width;

        let height;



        if (isConnecting) {

            top = Math.min(startPos.y, currentPos.y);

            left = Math.min(startPos.x, currentPos.x);

            height = Math.abs(currentPos.y - startPos.y) + 5;

            width = Math.abs(currentPos.x - startPos.x) + 5;

            if (height > 0 && width > 0) {

                return (

                    <svg

                        width={width}

                        height={height}

                        viewBox={`${0} ${0} ${width} ${height}`}

                        style={{

                            position: 'absolute',

                            top: `${top - 5}px`,

                            left: `${left - 5}px`,

                            zIndex: Z_LEVELS.connection,

                        }}

                    >

                        <line

                            strokeWidth="3"

                            stroke="orange"

                            strokeDasharray="5 5"

                            x1={startPos.x - (left - 5)}

                            y1={startPos.y - (top - 5)}

                            x2={currentPos.x - (left - 5)}

                            y2={currentPos.y - (top - 5)}

                        />

                    </svg>

                );

            }

        }

        return null;

    }

}