Placeholder with backgroud

Hi. I have a question, and that is if it is possible to backgroud a placeholder in a group and fill the entire top as follows:

image

Thanks in advance.

Yes. Use the “RoundedTopRectangle” and “RoundedBottomRectangle” figures that are defined in RoundedRectangles.js in the extensions directory.

See the Rounded Groups sample. And maybe also see the Two Halves sample.

Ok ok. I was trying to import the RoundedRectangles.ts file, since I’m working on an Angular 9 project. I added the path “node_modules/gojs/extensionsTS” in the tsconfig in includes, but it still gives me an error, it says that the module can’t be found. What will I need to import it correctly?

My other question would be how to use it when it is imported correctly. Do you add normal in the Shape (example: $(go.Shape, “RoundedTopRectangle”)? In the component, how would it be imported?

As with all extensions, you should copy the file into your own project and make sure it imports the GoJS library that you are using.

I don’t quite understand what you mean by copying the file into the project, sorry. My project is a Angular project and GoJS was installed using npm. My question is how to import the RoundedRectangles.ts from the extensionsTS folder?

I try to import {RoundedTopRectangles} from ‘gojs/extensionsTS/RoundedTopRectangles’, but it doesn’t work

Copy the file into your project as if it were one of your files. Modify the import to match the rest of your code that uses GoJS.

I’ve imported, but I have a problem with the border in one corner. It doesn’t fit. Here’s the code about that part:

     $(go.Shape, "RoundedTopRectangle",
            new go.Binding("fill", "background"),
            new go.Binding("spot1", "spot1"),
            new go.Binding("spot2", "spot2"),
            new go.Binding("stroke", "stroke"),
            { strokeWidth: 1, parameter1: 15}),
            $(go.Panel, "Vertical",  
            $(go.Panel, "Horizontal", 
              new go.Binding("width", "width"),
              new go.Binding("height", "height"),
              {background: 'red'},
              $(go.TextBlock,
                {
                  alignment: go.Spot.Top,
                  editable: false,
                  margin: 12,
                  opacity: 0.75
                },

image

I already solved that hahaha. I was following the example Rounded Nodes Consisting of Two Halves