[Bug]: Migration to joinjts 4.0 Not loading cells

[ROYopedia]

What happened?

Hello, Currently I am trying to migrate from jointjs 3.7 to joinjts plus 4.0.
Somehow the cells are not plotting in the paper. I tried to compare demo apps and previous version of our app. Everything looks correct. Also in navigator I can see cells are added to the graph. Any idea?

Paper creation:
const graph = new joint.dia.Graph({}, { cellNamespace });
  const paper = new joint.dia.Paper({
    model: graph,
    async: true,
    preventContextMenu: true,
    sorting: joint.dia.Paper.sorting.APPROX,
    //interactive: true,
    snapLabels: true,
    interactive: {
      labelMove: true,
    },
    cellViewNamespace: cellNamespace,
    background: { color: "#F3F7F6" },
    defaultConnectionPoint: { name: "boundary", args: { offset: 3 } },
    defaultConnector: {
      name: "jumpover",
      args: { jump: "arc" }, //other values arc / cubic
    },
    defaultRouter: function (_vertices, _opt, linkView: any) {
      const link = linkView.model;
      const source = link.getSourceCell();
      const target = link.getTargetCell();
      if (
        (source && isCellHidden(source)) ||
        (target && isCellHidden(target))
      ) {
        //use straight line if either source or target is hidden
        return [];
      }

      return routers.normal([], { margin: 100 }, linkView);
    },
    defaultAnchor: multiLinkAnchor,
    viewport: function (view: joint.dia.CellView | any) {
      return !isCellHidden(view.model);
    },
  });

  Paper scroller creation:
  const paperScroller = new joint.ui.PaperScroller({
      paper,
      autoResizePaper: true,
      contentOptions: {
        allowNewOrigin: "any",
        useModelGeometry: true,
        padding: 1000,
      },
      borderless: true,
      // minVisiblePaperSize: 500,
      inertia: true,
    });
    paperScroller.render();
    canvas.current.appendChild(paperScroller.el);

Any idea???

Version

3.7

What browsers are you seeing the problem on?

Firefox, Chrome

What operating system are you seeing the problem on?

Linux

[kumilingus]

Did you go through our migration guide? What are these 18 errors in the console?

[ROYopedia]

I am following the migration guide. Console errors are related to api fetch error as I am running the app on local.

I am able to get the cells but position is not correct . If I use

scroller.zoomToFit({ padding: 10, useModelGeometry: true });

the cells not coming at all. Also I tried to add pan and pinch event same as kitchesink demo app.

paper.on("paper:pan", (evt, tx, ty) => {
      evt.preventDefault();
      paperScroller.el.scrollLeft += tx;
      paperScroller.el.scrollTop += ty;
    });
    paper.on("paper:pinch", (_evt, ox, oy, scale) => {
      // the default is already prevented
      const zoom = paperScroller.zoom();
      paperScroller.zoom(zoom * scale, {
        min: 0.2,
        max: 5,
        ox,
        oy,
        absolute: true,
      });
    });

paperScroller.zoom() is not working at all.

[kumilingus]

It's hard to say without a reproducible example. The shapes seem to be rendered (they exist in the DOM). Perhaps they don't have their attributes set (d, width, height, etc.)? Could you check? That could be related to the Disable useCSSSelectors by default breaking change.

[ROYopedia]

It has all attributes available.

It seems the position is not correct.
If I do

scroller.zoomToFit({ padding: 10, useModelGeometry: true }); 

It is not even showing in the viewport. If do a mousescrool zoom

function mousewheelZoom(evt: any, x: any, y: any, delta: any) {
      evt.preventDefault();
      let origin = paperScroller.getVisibleArea().center();
      paperScroller.zoom(delta * 0.12, {
        min: 0.1,
        max: 2,
        grid: 0.2,
        ox: x,
        oy: y,
      });
    }

It is going out of the paper.

Any idea how to fit the cells in current viewport? Can you take a reference to demo of yours https://www.jointjs.com/demos/dwdm-circuit and make a upgradation to 4.0?

[kumilingus]

The DWDM demo does not use the paper scroller plugin.

[ROYopedia]

I am facing multiple issue. Previously joint-paper-scroller css class is taking width height by deafult 100%

Now migrating to 4.0 the joint-paper-scroller css class has no height width and it is having lots of space down. which is affecting zoom and other user events.

CSS i used for both

.canvas {
  width: 100%;
  height: 100%;
}
.joint-widget {
  padding: 2px;
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background-color: var(--bg-color);
}
.joint-paper-scroller {
  top: auto;
}

[kumilingus]

Is joint-plus.css imported at all?

[ROYopedia]

joint-plus.css

checking

[kumilingus]

Ok, please let me rephrase it. You didn't import joint-plus.css properly. You are missing JointJS+ related CSS.