search

projectstorm / react-diagrams

a super simple, no-nonsense diagramming library written in react that just works
https://projectstorm.cloud/react-diagrams
MIT License
8.64k stars 1.17k forks source link

losing focus while dragging #628

Closed Antoninecek closed 2 years ago

Antoninecek commented 4 years ago

I have sample code from docs.

const DS = () => {
    // create an instance of the engine with all the defaults
    const engine = createEngine();

    // node 1
    const node1 = new DefaultNodeModel({
        name: 'Node 1',
        color: 'rgb(0,192,255)',
    });
    node1.setPosition(100, 100);
    let port1 = node1.addOutPort('Out');

    // node 2
    const node2 = new DefaultNodeModel({
        name: 'Node 2',
        color: 'rgb(192,192,255)',
    });
    node2.setPosition(200, 100);
    let port2 = node2.addInPort('In');

    // link them and add a label to the link
    const link = port1.link<DefaultLinkModel>(port2);
    //link.addLabel('Hello World!');

    const model = new DiagramModel();
    model.addAll(node1, node2, link);
    engine.setModel(model);

    return (
        <div className="app-wrapper">
            <div style={{height: "100vh", width: "90%", backgroundColor: "aliceblue"}}>
                <CanvasWidget className="canvas" engine={engine}/>
            </div>

        </div>
    );
}
.canvas {
    position: inherit !important;
}

I have to drag and move node very slowly. Cursor leaves node at some place behind while I'm still dragging (holding mousebutton down). Node is selected and still in dragging event so when I return back to the node the drag animation comes up again.

Using newest version of browser (firefox, chrome). React-diagrams v 6.1.1.

Edit: dependencies:

"dependencies": {
    "@emotion/core": "^10.0.28",
    "@emotion/styled": "^10.0.27",
    "@material-ui/core": "^4.9.9",
    "@material-ui/icons": "^4.9.1",
    "@microsoft/file-browser": "^1.0.0-preview.0",
    "@microsoft/microsoft-graph-client": "^1.7.0",
    "@mikecousins/react-pdf": "^5.5.0",
    "@projectstorm/react-canvas-core": "^6.1.1",
    "@projectstorm/react-diagrams": "^6.1.1",
    "@types/jest": "24.0.15",
    "@types/node": "12.0.8",
    "@types/react": "16.8.22",
    "@types/react-dom": "16.8.4",
    "array-move": "^2.2.1",
    "axios": "^0.18.1",
    "closest": "0.0.1",
    "crc": "^3.8.0",
    "dagre": "^0.8.5",
    "draft-js": "^0.11.5",
    "immutability-helper": "^3.0.2",
    "inversify": "^5.0.1",
    "inversify-binding-decorators": "^4.0.0",
    "inversify-inject-decorators": "^3.1.0",
    "inversify-react": "^0.4.3",
    "lodash": "^4.17.15",
    "material-table": "^1.57.2",
    "mathjs": "^6.6.4",
    "moment": "^2.24.0",
    "msal": "^1.2.2",
    "normalizr": "^3.6.0",
    "office-ui-fabric-react": "^7.105.12",
    "pathfinding": "^0.4.18",
    "paths-js": "^0.4.10",
    "primeicons": "^2.0.0",
    "primereact": "^3.4.0",
    "query-string": "^6.12.0",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.0",
    "react-bootstrap-dialog": "^0.13.0",
    "react-contenteditable": "^3.3.4",
    "react-cool-img": "^1.0.24",
    "react-day-picker": "^7.4.0",
    "react-dnd": "^10.0.2",
    "react-dnd-html5-backend": "^10.0.2",
    "react-dom": "^16.13.1",
    "react-draggable": "^3.3.2",
    "react-dropzone": "^10.2.2",
    "react-iframe": "^1.8.0",
    "react-image": "^2.4.0",
    "react-loader-spinner": "^3.1.5",
    "react-notification": "^6.8.5",
    "react-notifications": "^1.6.0",
    "react-number-format": "^4.4.1",
    "react-on-images-loaded": "^2.2.3",
    "react-quill": "^1.3.5",
    "react-redux": "^7.2.0",
    "react-resizable-box": "^2.1.0",
    "react-router-dom": "^5.1.2",
    "react-router-global-history": "^1.1.0",
    "react-rte": "^0.16.1",
    "react-scripts": "^3.4.1",
    "react-scroll-ondrag": "^1.0.0",
    "react-select": "^3.1.0",
    "react-sortable-hoc": "^1.11.0",
    "react-split-pane": "^0.1.91",
    "react-toastify": "^5.5.0",
    "react-tooltip": "^3.11.6",
    "react-virtualized": "^9.21.2",
    "react-visibility-sensor": "^5.1.1",
    "redux": "^4.0.5",
    "redux-form": "^8.3.2",
    "redux-persist": "^6.0.0",
    "redux-promise": "^0.6.0",
    "redux-thunk": "^2.3.0",
    "reflect-metadata": "^0.1.13",
    "resize-observer-polyfill": "^1.5.1",
    "sanitize-html": "^1.22.1",
    "tslint": "^5.20.1",
    "typescript": "3.5.2"
  },
zhanbst commented 4 years ago

it was because using 

.canvas {
    position: inherit !important;
}

you need wrapper canvas with this style

html,
body,
#root {
    height: 100%;
    padding: 0;
    margin: 0;
}

I resolve it with absolute position 

.app-wrapper {
   position: 'relative';
   width: '100%';
   height: 100%
}
.canvas-wrapper {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    position: absolute;
    background-size: 50px 50px;
    background-color: #9e9e9e;
    background-image: linear-gradient( 0deg, transparent 24%, rgba(250, 250, 250, 0.05) 25%, rgba(250, 250, 250, 0.05) 26%, transparent 27%, transparent 74%, rgba(250, 250, 250, 0.05) 75%, rgba(250, 250, 250, 0.05) 76%, transparent 77%, transparent ), linear-gradient( 90deg, transparent 24%, rgba(250, 250, 250, 0.05) 25%, rgba(250, 250, 250, 0.05) 26%, transparent 27%, transparent 74%, rgba(250, 250, 250, 0.05) 75%, rgba(250, 250, 250, 0.05) 76%, transparent 77%, transparent );
}

 render () {
   return <div className='app-wrapper'>
      <div className='canvas-wrapper'>
         <CanvasWidget engine={engine} />
     </div>
   </div>
 }
duhruh commented 4 years ago

I'm also experiencing similar behavior, still trying to track down root cause

duhruh commented 4 years ago

I still don't know the root cause but in the case i'm testing i found that sometimes DragCanvasState.fireMouseMoved gets called before this.initialCanvasX and this.initialCanvasY has been defined, which causes the call to setOffset to be called with NaN

I'm not that familiar with the code so this might be a red herring, maybe @dylanvorster can shed some more light as to what might be happening here.

acidsound commented 4 years ago

it was because using

.canvas {
    position: inherit !important;
}

you need wrapper canvas with this style

html,
body,
#root {
  height: 100%;
  padding: 0;
  margin: 0;
}

I resolve it with absolute position

.app-wrapper {
   position: 'relative';
   width: '100%';
   height: 100%
}
.canvas-wrapper {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    position: absolute;
    background-size: 50px 50px;
    background-color: #9e9e9e;
    background-image: linear-gradient( 0deg, transparent 24%, rgba(250, 250, 250, 0.05) 25%, rgba(250, 250, 250, 0.05) 26%, transparent 27%, transparent 74%, rgba(250, 250, 250, 0.05) 75%, rgba(250, 250, 250, 0.05) 76%, transparent 77%, transparent ), linear-gradient( 90deg, transparent 24%, rgba(250, 250, 250, 0.05) 25%, rgba(250, 250, 250, 0.05) 26%, transparent 27%, transparent 74%, rgba(250, 250, 250, 0.05) 75%, rgba(250, 250, 250, 0.05) 76%, transparent 77%, transparent );
}
 render () {
   return <div className='app-wrapper'>
      <div className='canvas-wrapper'>
         <CanvasWidget engine={engine} />
     </div>
   </div>
 }

It works like a charm! you saved my day. thx :D

Antoninecek commented 2 years ago

I just close this issue due to inactivity (don't know if resolved).