losing focus while dragging

[Antoninecek]

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]

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]

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

[duhruh]

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]

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]

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