Angular2 and TextEditor extensions

GoJS
1

Hi,

I’m working on a workflow designing tool using GoJs in an angular4 application.
I would like to let the user create link between workflow steps, once he created the link I want him to pick up the right action name from a dropdown list.

I’ve found the exact extension for that “TextEditorSelectBox” but i have no idea how to use this extension in my Angular 4 component. Did not find any documentation about it.

I suppose it’s in my linkTemplate Definition that I have to inject something, any help would ba appreciated.

Here is the sample code of my link templating :

workflowDiagram.linkTemplate = $(go.Link,  // the whole link panel
            new go.Binding("points").makeTwoWay(),
            { curve: go.Link.Bezier, reshapable: true , toShortLength: 15 },
            new go.Binding("curviness", "curviness"),
            $(go.Shape,  // the link shape
                { stroke: "#888", strokeWidth: 4 }),
            $(go.Shape,  // the arrowhead
                { toArrow: "standard", stroke: "#888", strokeWidth: 4 }),
            $(go.Panel, "Auto",
                $(go.TextBlock,  // the label text
                    { textAlign: "center",
                        font: "10pt helvetica, arial, sans-serif",
                        stroke: "#555555",
                        margin: 4,
                        editable: true},
                    new go.Binding("text", "text"))
            )
        );

Thanks for your help !

2

Have you seen this sample? Text Editing Examples

Note how you can either set TextEditingTool.defaultTextEditor to TextEditorSelectBox on the ToolManager.textEditingTool, or just set TextBlock.textEditor to that on the TextBlock in your Link template. That sample demonstrates both setting it globally on the TextEditingTool and locally on the TextBlock, to different custom text editors.

3

Yes i have seen it, i was wondering the best solution to import the TextEditorSelectBox in my Angular component

4

That depends on how you are loading go.js.

You can load the extensions/TextEditorSelectBox.js in a <script> after GoJS has been loaded.

You can require extensionsTS/TextEditorSelectBox.

You can import extensionsTS/TextEditorSelectBox, although I haven’t tried this.

5

@dribes how did you imported the extension js file in project ? i belive you are using gojs using npm and importing as import * as go from ‘gojs’.