dropShadow Filter Causing Link Cut-Off in DoubleLink/Standard Link

[Jennygra]

Introduction

I encountered an issue after adding the dropShadow filter to the DoubleLink/Standard Link. It seems like the problem arises when dragging the link "outside its base area":

• When the link extends beyond the base area, the portion of the link outside the base is hidden, making it appear as if the link is cut off.
• Zooming in partially recovers the hidden part of the link, but zooming out again causes it to disappear.

After removing the dropShadow filter.

ngAfterViewInit(): void {
    this.paper = new dia.Paper({
            model: this.graph,
            background: {
                color: "#fff",
            },
            frozen: true,
            async: true,
            sorting: dia.Paper.sorting.APPROX,
            cellViewNamespace: shapes,
            snapLabels: true,
            gridSize: 10,
            interactive: {
                linkMove: true,
                labelMove: true,
            },
        });

     this.paperScroller = new ui.PaperScroller({
            paper: this.paper,
            cursor: "grab",
            baseHeight: 100,
            baseWidth: 100,
            borderless: true,
            inertia: { friction: 0.8 },
            autoResizePaper: true,
            scrollWhileDragging: true,
            contentOptions: () => {
                return {
                    useModelGeometry: true,
                    allowNewOrigin: "any",
                    padding: 40,
                    allowNegativeBottomRight: true,
                };
            },
        });

       this.paper.unfreeze();
       this.paperScroller.render().center;
       this._canvas.appendChild(this.paperScroller.el);
  }        

  public createLink(
        source: shapes.standard.Rectangle,
        target: shapes.standard.Rectangle,
    ): shapes.standard.Link | shapes.standard.DoubleLink {
       const data = {
            source: {id: sourceNode.id, port: sourcePortId, name: "perpendicular"},
            target: {id: targetNode.id, port: targetPortId, name: "perpendicular"},
            router: { name: "manhattan" },
            connector: { name: "straight", args: { cornerType: 'cubic', cornerRadius: 20, cornerPreserveAspectRatio: true } },
            z: 1,
            attrs: {
                line: {
                    stroke: "#21B6A8",
                    strokeWidth: 2,
                    targetMarker: {
                        strokeWidth: targetMarkerStrokeWidth,
                    },
                },
            },
        }

        return this.type === "main" ? new shapes.standard.DoubleLink(data) : new shapes.standard.Link(data);
    }
    
  private zoom(x: number, y: number, delta: number) {
        this.paperScroller.zoom(delta * 0.2, { min: 0.2, max: 3, grid: 0.2, ox: x, oy: y });
    }

I appreciate your help.

Library version: 4.0.0
Angular version: 15.1.2

Steps to reproduce

link.attr("line/filter", { name: 'dropShadow', args: { opacity: 0.4, blur: 2}});

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS, JointJS+

[kumilingus]

Is the code shared related to the image? It does not look like a manhattan router with rounded corners. The picture is too enlarged to say for sure.

Can you try setting the paper overflow option to true?

It could be related to the paper not extending beyond the link boundary because useModelGeometry is used and the model doesn't know about the curvature of the link (the model knows vertices only).

---

Also, are you saying that removing the dropShadow filter will resolve the issue?
Is it related to #1314?