Zoom is not working properly

This issue has been tracked since 2022-02-21.

Hi, zoom in/out works weirdly on Chrome.

here is just regular zoom from joint.ui.Toolbar component https://recordit.co/szT9W3HpL6

and here I also tried to do this trick on zoom-in click https://recordit.co/7AtOJHqCEz

paperScroller.zoomToRect(graph.getBBox(), { padding: 20 })

for more context check also #693 (comment)

kumilingus wrote this answer on 2022-02-21

Hi, I'm not sure if this is related to the issue no. #693. (does it happen for a graph without links?)

Are you using BPMN or BPMN2 shapes?

Is it something you are able to reproduce on any of our demos? What are the steps to reproduce?

You can also share code with us, which we can debug, by sending an email to support[at]client.io.

kumilingus wrote this answer on 2022-02-21

Also what version of Rappid and JointJS do you use (joint.version and joint.versionRappid)?

rubenyeghikyan-highway wrote this answer on 2022-02-22

HI, I'm using "basic.Image" shapes with custom svg elements

const renderCustomShape = (
      shape: string,
      shapeName: string,
      label: string,
    ) => {
      return new joint.shapes.basic.Image({
        shapeName,
        label,
        size: {
          width: 60,
          height: 60,
        },
        attrs: {
          image: {
            width: 1024,
            height: 768,
            'xlink:href': shape,
            preserveAspectRatio: 'none',
          },
          text: {
            text: label,
            display: '',
            stroke: '#000000',
            'stroke-width': 0,
          },
        },
      });
    };

I will try to reproduce on demos as well and get back to you.

I'm using following versions

joint.version: 3.5.2
joint.versionRappid: 3.4.1
rubenyeghikyan-highway wrote this answer on 2022-02-22

Couldn't reproduce on your demos, most probably some styles are missing, what style files I should use?

I have
import '@clientio/rappid/rappid.css'

and

import 'styles/bpms.css';

rubenyeghikyan-highway wrote this answer on 2022-02-22

Just compared bpms.css files from my project with the new version. It turned out they are pretty old.

The one on my project is v2.1.0 (2017-09-21), but the new version that I got is v3.4.1 (v3.4.1)

** Update **
Didn't fix the zoom issue.

Pan is also not working properly

kumilingus wrote this answer on 2022-02-22

The bpmn.css is the styling for the BPMNEditor application. Your application has a different layout (the stencil is on left) so it does not really apply here. You need this @clientio/rappid/rappid.css and everything else is optional.

How do you position the PaperScroller? What is the exact position on the screen? Does it go under the stencil or does it start at the right side of the stencil?

rubenyeghikyan-highway wrote this answer on 2022-02-22

The bpmn.css is the styling for the BPMNEditor application. Your application has a different layout (the stencil is on left) so it does not really apply here. You need this @clientio/rappid/rappid.css and everything else is optional.

How do you position the PaperScroller? What is the exact position on the screen? Does it go under the stencil or does it start at the right side of the stencil?

I use just standard configs for it.

const scroller = new joint.ui.PaperScroller({
 padding: 5,
 paper,
 autoResizePaper: false,
 cursor: 'grab',
});

app skeleton is following

[             HEADER           ]
[SIDEBAR 1] [CANVAS] [SIDEBAR 2]

SIDEBAR 1 : Stencil (joint.ui. Stencil) { width: 302px }
CANVAS: main paper of rappid { width: calc(100% - 652px) }
SIDEBAR 2: Inspector (joint.ui.Inspector) { width: 350px }

kumilingus wrote this answer on 2022-02-22

I don't know. I think you'll have to share your application with us or try to reproduce it somehow (take the BPMNEditor and modify it the same way you did your application). We do live debugging, but that's part of our paid support package only.

rubenyeghikyan-highway wrote this answer on 2022-02-24

I don't know. I think you'll have to share your application with us or try to reproduce it somehow (take the BPMNEditor and modify it the same way you did your application). We do live debugging, but that's part of our paid support package only.

Hi, working on that, will try to share at least some part, or apply our changes on demo and see if we could reproduce.

Meanwhile I noticed this.

https://recordit.co/bFFUzUQS2x This is your BPMN Editor app demo. As you can see it properly changes width and height parameters of element on zoom.

This is our application: https://recordit.co/eGtEnF1cym. Here it only changes width, while height stays the same (only +0.1 minor change) on zoom out. So this once again proves that something is wrong with stylings.
Could you please give some more insights on what parameter stands for base of the height change? I assume it does something like x * zoomRatio (where zoomRatio is 2, 3 5, 0.3, 0.7 etc)

kumilingus wrote this answer on 2022-02-24

So this once again proves that something is wrong with stylings.

I'm not sure what it proves. The plugin just calculates the height and set it on the background element via CSS style.

It's derived from a formula like this:

scroller.options.baseHeight * paper.scale().sy + scroller.options.padding + requiredExtraPadding

Where:

  • scroller.options.baseHeight is the paper.getComputedSize().height by default (evaluated at initialization).
  • requiredExtraPadding it is an extra padding to make sure a point of the paper is in the center of the paper scroller (e.g. when you zoom +/-, you want the same point to be in the middle of the paper scroller as before/after zoom).
rubenyeghikyan-highway wrote this answer on 2022-02-25

After playing with page styles I finally got it fixed. We had to make container position absolute. I fell like all rappid/joint styles need huge refactoring as it's now based mostly on absolute positioning which makes integration with other systems pretty hard. We can close this issue now, but hope to see new version of rappid soon with modern styles which is more flexible and doesn't force you to change your existing app structure. Thanks.

kumilingus wrote this answer on 2022-02-26

Could you please provide us with an example of an application structure that you have been forced to change?

rubenyeghikyan-highway wrote this answer on 2022-03-03

maybe I used wrong term, I mean I had to change markup of my application as well as some styles like making container element position absolute etc. So my point is that rappid/joint forces you to have specific markup and styling which IMHO is not expected behavior for lib. You should just give it a wrapper, with any styles and it should render inside that wrapper, and should only use that container and should not be based on global things like window size or anything else.

I hope I elaborated my point, let me know if something is not clear.

kumilingus wrote this answer on 2022-03-07

I think I understood the first time. I'm sure there is a plenty room for improvements. I'm not aware that Rappid UI plugins forces you to use position: absolute or depend on the window size though. They require a container with position: relative (which is, I suppose, ok). The ui.PaperScroller requires also the size or maximal size when the autoResizePaper is set true. I just wanted you to provide me with an example we can work with and improve the behavior. Or perhaps you have a modern UI library in mind that deals with this in a better way. Anything that might help. If not, do not worry, we'll do our research anyway.

More Details About Repo
Owner Name clientIO
Repo Name joint
Full Name clientIO/joint
Language JavaScript
Created Date 2009-09-11
Updated Date 2022-12-03
Star Count 3715
Watcher Count 155
Fork Count 817
Issue Count 51

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date