Unable to import Extensions in Angular Project

GoJS
1

I am referring to this thread TableLayout extension inside a diagram using Angular 13

I want to use the figure Terminator from figures.ts
import { FigureParameter } from ‘…/…/…/app/extensionsTS/Figures’

and also want to use GuidedDraggingTool
import { GuidedDraggingTool } from ‘…/…/…/app/extensionsTS/GuidedDraggingTool’

2

Like that thread says, you should copy the files out of the GoJS extensionsTS directory and put them into your own directory.

You must also ensure those files are importing GoJS the same way that your own code is.

3

following the exact steps. no error on angular / compilation front.

import { FigureParameter } from ‘…/…/…/app/extensionsTS/Figures’

this.$(go.Shape, “Terminator”, { //capsule shape

                    fill: "White",

                    stroke: "#C2C8D7",

                    width: 60,

                    height: 30,

                  }),

ERROR Error: Unknown Shape.figure: Terminator
at B (go.js:12:15)
at W.set (go.js:1253:248)
at Ll (go.js:913:69)
at DiagramEditorComponent.Jl [as $] (go.js:912:94)
at DiagramEditorComponent.addAVObjectDummyNodeTemplate (diagram-editor.component.ts:530:28)
at DiagramEditorComponent.initDiagram (diagram-editor.component.ts:174:10)
at DiagramEditorComponent.ngAfterViewInit (diagram-editor.component.ts:115:10)
at callHook (core.mjs:2542:1)
at callHooks (core.mjs:2511:1)
at executeInitAndCheckHooks (core.mjs:2462:1)
at refreshView (core.mjs:9557:1)
at refreshEmbeddedViews (core.mjs:10634:1)
at refreshView (core.mjs:9510:1)
at refreshComponent (core.mjs:10680:1)
at refreshChildComponents (core.mjs:9282:1)
at refreshView (core.mjs:9536:1)

4

with the

import { GuidedDraggingTool } from ‘…/…/…/app/extensionsTS/GuidedDraggingTool’

is is giving such error

Error: src/app/extensionsTS/GuidedDraggingTool.ts:204:10 - error TS4114: This member must have an ‘override’ modifier because it overrides a member in the base class ‘DraggingTool’.

204 public doDeactivate(): void {
~~~~~~~~~~~~

Error: src/app/extensionsTS/GuidedDraggingTool.ts:213:10 - error TS4114: This member must have an ‘override’ modifier because it overrides a member in the base class ‘DraggingTool’.

213 public doDragOver(pt: go.Point, obj: go.GraphObject): void {
~~~~~~~~~~

Error: src/app/extensionsTS/GuidedDraggingTool.ts:233:10 - error TS4114: This member must have an ‘override’ modifier because it overrides a member in the base class ‘DraggingTool’.

233 public doDropOnto(pt: go.Point, obj: go.GraphObject): void {
~~~~~~~~~~

5

What version of TypeScript are you using? When I try to compile it, I don’t get those errors.

As for:

ERROR Error: Unknown Shape.figure: Terminator

I’m not sure, only that it seems the Figures.ts code is not running before the point in this app. You could always copy over the figure definitions into your app instead of using the figures.ts file. That means here you would just copy:

go.Shape.defineFigureGenerator('Terminator', (shape, w, h) => {
  const geo = new go.Geometry();
  const fig = new go.PathFigure(.25 * w, 0, true);
  geo.add(fig);
  fig.add(new go.PathSegment(go.PathSegment.Arc, 270, 180, .75 * w, 0.5 * h, .25 * w, .5 * h));
  fig.add(new go.PathSegment(go.PathSegment.Arc, 90, 180, .25 * w, 0.5 * h, .25 * w, .5 * h));
  geo.spot1 = new go.Spot(.23, 0);
  geo.spot2 = new go.Spot(.77, 1);
  return geo;
});
6

“typescript”: “^4.6.3”

the above code works fine for terminator shape.

error still occur while importing any other extensions externally

7

It’s hard for me to know what’s going on, but I suggest you try taking any extesnsions and bringing them into your source folder to be siblings of the app code, eg:

/src/yourAppCode.ts
/src/someExtension.ts
/src/anotherExtenasion.ts

And then make sure all files import GoJS in exactly the same way, so every file must have:

import * as go from 'gojs';

etc. Or else your build system may make duplicates of the go object, and classes may not get extended properly.

8

Still no luck, the GuidedDraggingTool still throws error

Error: src/app/component/diagram-editor/GuidedDraggingTool.ts:204:10 - error TS4114: This member must have an ‘override’ modifier because it overrides a member in the base class ‘DraggingTool’.

204 public doDeactivate(): void {
~~~~~~~~~~~~

Error: src/app/component/diagram-editor/GuidedDraggingTool.ts:213:10 - error TS4114: This member must have an ‘override’ modifier because it overrides a member in the base class ‘DraggingTool’.

213 public doDragOver(pt: go.Point, obj: go.GraphObject): void {
~~~~~~~~~~

Error: src/app/component/diagram-editor/GuidedDraggingTool.ts:233:10 - error TS4114: This member must have an ‘override’ modifier because it overrides a member in the base class ‘DraggingTool’.

233 public doDropOnto(pt: go.Point, obj: go.GraphObject): void {
~~~~~~~~~~

9

We haven’t updated the code to support the new override keyword.
Use the noImplicitOverride option.

10

Thanks a lot Walter, this Works!