[Bug]: Migration to joinjts 4.0 Not loading cells

[ROYopedia]

[Bug]: Migration to joinjts 4.0 Not loading cells

[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.

[github-actions]

This issue is stale because it has been open 60 days with no activity. Please remove stale label or comment or this will be closed in 14 days.