northwoodssoftware / gojs-angular-basic

Simple project demonstrating usage of our GoJS/Angular components

gojs-angular-basic

By Northwoods Software for GoJS

This project provides a basic example of using GoJS in an Angular app. Check out the Intro page on using GoJS with Angular for more information.

It makes use of the gojs-angular package to handle setting up Diagram, Palette and Overview components.

When running the sample, try moving / adding / deleting nodes, editing text in the inspector, relinking nodes via ports, undoing (Ctrl-Z), and re-doing (Ctrl-Y) within the diagram. You'll notice the changes are reflected in app-level data. You'll also notice that changes made in the inspector are reflected in the diagram.

Installation

Start by running npm install to install all necessary dependencies.

If you do not have Angular already globally installed, you may do so by running:

npm i -g @angular/cli

Running the project

In the project directory, run:

ng serve

Alternatively, if you do not have Angular installed globally, you may run:

npm run start

Runs the app in the development mode.
Open http://localhost:4200 to view it in the browser.

The page will reload if you make edits.

Learn More

To learn Angular, check out Angular's official site. To learn GoJS, check out gojs.net.

gojs-angular-basic's Issues

`npm install` giving ''Unexpected end of JSON input''

I was trying to use the boilerplate to get better understanding of go-js in Angular
Post cloning the repo when I run 'npm install' for the repo to install its dependencies it produces the error
I am using Angular 9+ on my windows 10.
How can I resolve it?
Thanks a lot !!

Query - How can we load gojs-debug for dev builds

we want to use gojs-debug for dev builds, when we try to pull it, we get an error that go module is already exists/created

How can we align link and pointer (->) to the specific row?

The anchor should start from the PrimaryKey row and end at the ForeignKey row.

Like the below picture

Does it support Angular17？

How to remove the watermark

P

Cannot find module 'gojs'.

How can i get rid of that error am current getting running exactly codes as from from this repo?

It happens on this line "import * as go from 'gojs';" in app.component.ts and inspector.component.ts

unable to reproduce gojs-angular-basic sample

"gojs": "^2.1.0-beta1",
"gojs-angular": "^1.0.1",
"@angular/common": "~8.2.9",
"@angular/compiler": "~8.2.9",
"@angular/core": "~8.2.9",

Access this variable inside diagram init

export class AppComponent {
@ViewChild('myDiagram', { static: true }) public myDiagramComponent: DiagramComponent;
public parentGrpColor = '#FFDD33';

public initDiagram(){
console.log(this.parentGrpColor);

When i try the above code to access variable or function it throws not defined error. I need to set the colors dynamically, and also need to retrieve data from service.

using context menu with angular component

I'm running the sample just fine. Now I have added a context menu on shape (taken from he tutorial : https://gojs.net/latest/samples/blockEditor.html)

So inside the InitDiagram function, I have added the following below code. The context menu shows up just fine and the clickfunction gets fired when clicking on a menu item. The model is updated with the new shape, however the UI is not updated. The shape remains a rectangle. I believe there is some extra steps to take because of Angular. What am I missing ?

`  dia.nodeTemplate.contextMenu =
  $("ContextMenu",
    $("ContextMenuButton",
      $(go.Panel, "Horizontal",
        FigureButton("Rectangle"), FigureButton("RoundedRectangle"), FigureButton("Ellipse"), FigureButton("Diamond")
      )
    ));

function FigureButton(fig, propname = 'figure') {

  return $(go.Shape,
    {
      width: 32, height: 32, scale: 0.5, fill: "lightgray", figure: fig,
      margin: 1, background: "transparent",
      mouseEnter: (e, shape) => { shape.fill = "dodgerblue"; },
      mouseLeave: (e, shape) => { shape.fill = "lightgray"; },
      click: ClickFunction(propname, fig), contextClick: ClickFunction(propname, fig)
    });
}


// PROPNAME is the name of the data property that should be set to the given VALUE.
function ClickFunction(propname, value) {
  return (e, obj) => {
    e.handled = true;  // don't let the click bubble up
    e.diagram.model.commit((m) => {
      m.set(obj.part.adornedPart.data, propname, value);
    });
  };
`}``

ng serve cannot run the project

E:\AngularProject\gojs-angular-basic>ng serve
No projects support the 'serve' target.
Error: No projects support the 'serve' target.
at ServeCommand.initialize (E:\AngularProject\gojs-angular-basic\node_modules@angular\cli\models\architect-command.js:50:19)
at process._tickCallback (internal/process/next_tick.js:68:7)
at Function.Module.runMain (internal/modules/cjs/loader.js:834:11)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)