search

Mermaid-Chart / vscode-mermaid-preview

Previews Mermaid diagrams
MIT License
150 stars 16 forks source link

Preview zoom/scroll issues #102

Open synclpz opened 4 years ago

synclpz commented 4 years ago

Expected behaviour

Loading a decent diagram requires zooming/scrolling, which is definitely broken at least in my fresh install of VSCode and this extension.

Expected to use zoom with scrolling mouse/touchpad and to use scroll with dragging diagram using left mouse/tohchpad button.

sequenceDiagram
  participant User
  participant App as Mobile App
  participant Browser
  participant Backend as Mobile Backend
  participant Landing as Landing Web-server
  participant API as Service API
  participant SSO

  User->>+Browser: Open URL to Landing
  Browser->>+Landing: Get Landing 
  Landing-->>-Browser: Load Landing SPA JS
  Browser->>Browser: Run Landing JS and get token from URL fragment
  Browser->>+SSO: Get certs
  SSO-->>-Browser: Certs
  Browser->>Browser: Validate JWT and get MSISDN/subscriberId
  note over Browser: To not overcomplicate the diagram <br/>assuming JWT is valid and MSISDN <br/>or subscriberId is found
  Browser->>+SSO: Request own JWT with scope of invitation API and grant_type=token with intermediary JWT
  alt successful case
    SSO-->>Browser: Issue new token for invitation API
    Browser->>SSO: Invalidate Intermediary JWT
    SSO->>SSO: Invalidates JWT
    SSO-->>-Browser: JWT Invalidated
    Browser->>+API: Get invitations w/Authorization: Bearer <JWT>
    API->>API: Validate JWT
    alt successful case  
      API-->>-Browser: Reply as in specification
      Browser-->>-User: Show loaded page w/invitations
    else not valid JWT
      activate API
      API-->>-Browser: Unauthenticated
      note over Browser: tries Token refresh
    end
  else any checks on SSO side fail (IP changed/token invalid/so on)
    activate SSO
    activate Browser
    SSO-->>-Browser: Access denied
    Browser-->>-User: SPA shows a message asking user to log in to MLK
  end

Actual behaviour

Zoom works while scrolling up/down while mouse pointer placed on a diagram, scroll works while mouse pointer placed not on a diagram. Dragging the diagram is actually impossible due to diagram begins shaking and moving out of view.

vstirbu commented 4 years ago

Mermaid does not have builtin zoom functionality. It might have changed, but last time I've checked most diagrams render to fill the view. Not a bit problem in the browser as you can zoom to a certain degree, but vscode does not allow that.

The plugin attempts to solve this using the d3.zoom functionality as the mermaid renders the diagrams with d3 anyway. The results are not perfect but I do not see a better solution at this time. I'm open to suggestions on this topic!

ReginaldBull commented 2 years ago

Hello,

The zoom functionality as it was in VS Code is now not any more available or broken. It was possible a few months ago, not perfectly but good enough. At least in July 2022. Currently, I'm unable to zoom. That is a pity because with that, I don't have a practicable solution to check it. And convert it after a change to an HTML page and open it in a browser is not optimal.

vstirbu commented 2 years ago

Mermaid.live has zoom functionality now.

I would appreciate if a volunteer can investigate if that solution can be integrated in the react app that runs in the webview.