Custom view not behaving as expected

[mgrubb]

I'm trying to get a custom view to work in the java-emf-theia-example project.
I've added a new element type called chore, and it's showing up in the model, and I can get the new shape to render but it is behaving oddly. First, whenever a new element is created, the shape is put way off outside the visible area of the canvas.
Also it is not visible until I scroll out quite a bit. If I move the new views too far to the left they also disappear until I scroll out some more.

Dev environment is MacOS 13.6
openjdk version "17.0.8.1" 2023-08-24
OpenJDK Runtime Environment Temurin-17.0.8.1+1 (build 17.0.8.1+1)
OpenJDK 64-Bit Server VM Temurin-17.0.8.1+1 (build 17.0.8.1+1, mixed mode, sharing)
Node v16.20.1

I created the shape using Inkscape 1.3 and copied the d attribute from the svg file.
I also looked at the Pre-rendered view, but wasn't sure where to put the file loading because render can't be marked as async.

View code:

@injectable()
export class ChoreView extends ShapeView {
    render(node: Readonly<SNode>, context: RenderingContext): VNode | undefined {
        // console.log('Rendering chore view');
        if (!isEdgeLayoutable(node) && !this.isVisible(node, context)) {
            return undefined;
        }
        const vnode = (
            <g>
                <path
                    // eslint-disable-next-line max-len
                    d='m 2330,266 v 26 h 42 44 v -26 h -44 z m 0,50 v 26 h 42 44 v -26 h -44 z m 42,-75 v 25 h 44 v 26 h -44 v 24 h 44 v 26 h -44 v 50 h 212 V 241 Z'
                    x='0'
                    y='0'
                    width={Math.max(0, node.size.width)}
                    height={Math.max(0, node.size.height)}
                    class-application={true}
                />
            </g>
        );
        return vnode;
    }
}

A quick screen cap of what I'm seeing:

Screen.Recording.2023-10-23.at.10.52.11.AM.mov

[tortmayr]

Hi @mgrubb

it looks like you are ignoring the nodes position attributes when rendering the view.
You are rending the path at x=0, y=0 which in your case seems to be outside of the visible canvas.
The x and y values of your path should reflect the nodes position:

  const vnode = (
            <g>
                <path
                    // eslint-disable-next-line max-len
                    d='m 2330,266 v 26 h 42 44 v -26 h -44 z m 0,50 v 26 h 42 44 v -26 h -44 z m 42,-75 v 25 h 44 v 26 h -44 v 24 h 44 v 26 h -44 v 50 h 212 V 241 Z'
                    x={node.posittion.x}
                    y={node.position.y}
                    width={Math.max(0, node.size.width)}
                    height={Math.max(0, node.size.height)}
                    class-application={true}
                />
            </g>
        );

I also looked at the Pre-rendered view, but wasn't sure where to put the file loading because render can't be marked as async.

The PreRenderedView is intended for elements that are "prerendered" on the server. In this case you would load the file on the server side and then create a GPreRenderedElement and put the loaed svg in the "code" property.