Not able to start creating a link in GoJS 3

appmaster · May 10, 2024, 4:20am

I have Shape element, acting as a port:

$create(
      Go.Panel,
      'Horizontal',
      {
        alignment: Go.Spot.Right,
        margin: new Go.Margin(0, 2, 0, 0),
      },

  $create(  
      Go.Shape,
      {
        alignment: Go.Spot.Center,
        geometryString: 'F M144 80v96H48V80h96zM48 32C21.5 32 0 53.5 0 80v96c0 26.5 21.5 48 48 48H72v96c0 48.6 39.4 88 88 88h96v24c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48V336c0-26.5-21.5-48-48-48H304c-26.5 0-48 21.5-48 48v24H160c-22.1 0-40-17.9-40-40V224h24c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48H48zM400 336v96H304V336h96z'
        fill: 'green',
        width: 16,
        height: 16,
        strokeWidth: 0,
        opacity,
        cursor,
        background: 'transparent', // if not setted, pointer cursor will be displayed on svg path only
  
        portId: '',
        fromLinkable: true,
        toLinkable: false,
      },
    )

)

Drag event on this icon does not start link creation. The same code is working in GoJS 2

walter · May 10, 2024, 10:42am

This code looks fine for either GoJS v2 or GoJS v3. I bet you have some configuration problem in your project. Could you please tell us exactly which GoJS-related files you are loading and how they are being chosen and loaded?

Please check that you are not loading the GoJS library twice.

Also, have you reviewed the list of incompatibilities in the Change Log?
Change Log | GoJS

appmaster · May 10, 2024, 11:53am

Could you please tell us exactly which GoJS-related files you are loading and how they are being chosen and loaded?

I use RealtimeDragSelectingTool plugin for v3. Disabling one didnt resolve the problem.

diagram.toolManager.dragSelectingTool = Go.GraphObject.make(
      RealtimeDragSelectingTool,

      {
        isPartialInclusion: true,
        delay: 100,
        box: Go.GraphObject.make(
          Go.Part,
          { layerName: 'Tool', selectable: false },

          Go.GraphObject.make(Go.Shape, {
            name: 'SHAPE',
            fill: `${COLOR.PRIMARY_500}11`,
            stroke: COLOR.PRIMARY_400,
            strokeWidth: 2,
          }),
        ),
      },
)

Please check that you are not loading the GoJS library twice.

I use npm package.

Also, have you reviewed the list of incompatibilities in the Change Log?
Change Log | GoJS

Yes, I did. I replaced deprecated enums and undefined/null values for fill property, undefined margin values and so on.

walter · May 10, 2024, 12:05pm

Ah, which file did you load for this extension?

What build and package system are you using – is it using ES modules?
If so, you need to use the extension files that are in the extensionsJSM/ folder.

Also, what do you mean by:

I replaced . . . undefined/null values for fill property, undefined margin values and so on.

You probably didn’t need to do that unless it was wrong before.

appmaster · May 10, 2024, 12:56pm

Ah, which file did you load for this extension?

This one:

github.com

NorthwoodsSoftware/GoJS/blob/master/extensions/RealtimeDragSelectingTool.js

/*
 *  Copyright (C) 1998-2024 by Northwoods Software Corporation. All Rights Reserved.
 */
/*
 * This is an extension and not part of the main GoJS library.
 * Note that the API for this class may change with any version, even point releases.
 * If you intend to use an extension in production, you should copy the code to your own source directory.
 * Extensions can be found in the GoJS kit under the extensions or extensionsJSM folders.
 * See the Extensions intro page (https://gojs.net/latest/intro/extensions.html) for more information.
 */

/**
 * The RealtimeDragSelectingTool class lets the user select and deselect Parts within the {@link go.DragSelectingTool.box}
 * during a drag, not just at the end of the drag.
 *
 * If you want to experiment with this extension, try the <a href="../../samples/RealtimeDragSelecting.html">Realtime Drag Selecting</a> sample.
 * @category Tool Extension
 */
class RealtimeDragSelectingTool extends go.DragSelectingTool {
    constructor(init) {

This file has been truncated. show original

What build and package system are you using – is it using ES modules?

npm 9.8.1

import Go from 'gojs'
export type * from 'gojs'

import { RealtimeDragSelectingTool } from './RealtimeDragSelectingTool'

Go.Diagram.licenseKey = import.meta.env.VITE_GOJS_LICENSE_KEY

const $create = Go.GraphObject.make

export { Go, $create, RealtimeDragSelectingTool }

walter · May 10, 2024, 1:00pm

Ah, so that is the problem. Have you tried using the module in extensionsJSM/?

appmaster · May 10, 2024, 1:01pm

what is this? I dont see folder named like this

walter · May 10, 2024, 1:06pm

The package.json just controls which GoJS library file to use.

It doesn’t control which extension your project uses. We recommend that you copy the extension file into your project, although that is not needed if just loading an unmodified extension at extensions/ using a simple (non-module) <script> tag.

appmaster · May 10, 2024, 1:12pm

Complete removing of this plugin didnt fix these bugs, no matter wether it has loaded by script tag or module importing.

Moreover, I need to provide RealtimeDragSelectingTool reference to Go.GraphObject.make method, so I need to import one as module

walter · May 10, 2024, 1:24pm

OK, so there are additional configuration problems. Could you show us which GoJS-related files are loaded, in the debugger? Also, are there are any warning or error messages in the console?

appmaster · May 10, 2024, 1:27pm

There are less warnings if I import like this:

import Go from 'gojs/release/go'

gojs files:

walter · May 10, 2024, 1:35pm

[EDIT] No, you should make sure that all of your modules import exactly the same specifier for each module. In the case of GoJS, I suggest you use “gojs”. That is what each of the extensions do.

OK, this at least confirms that you are using ES modules (for GoJS, at least), and thus that you need to use the extensionsJSM/ files rather than those from extensions/.

It also confirms that your system isn’t choosing the “development” build but the “production” build. (That doesn’t matter for extensions.)

Those binding errors are real problems, because you are trying to bind non-existent target properties on the Shape and TextBlock classes.

However those binding errors aren’t the cause of the basic problems that you have. I’m sorry, but I still do not have enough information to figure out what’s going on.

appmaster · May 10, 2024, 1:41pm

you need to use the extensionsJSM/ files rather than those from extensions/.

what is the difference? I tried all these imports, nothing works:

import Go from 'gojs'

import Go from 'gojs/release/go-module'

import Go from 'gojs/release/go.mjs'

However those binding errors aren’t the cause of the basic problems that you have. I’m sorry, but I still do not have enough information to figure out what’s going on.

what information I need to provide?

walter · May 10, 2024, 1:51pm

Did you make sure that all of your files did exactly the same import?

The JS files in extensions/ can only be loaded via a plain <script> tag.
The JS files in extensionsJSM/ can only be loaded as ES modules.

If your build system is trying to use UMD/CommonJS modules, that would definitely cause your project to break. You should check that. But that’s probably not the cause.

appmaster · May 10, 2024, 1:55pm

Did you make sure that all of your files did exactly the same import?

I import gojs in entry file, then reimport one in other files:

import { Go, $create, RealtimeDragSelectingTool } from '@/plugins/gojs'

@/plugins/gojs:

import Go from 'gojs'
export type * from 'gojs'

import { RealtimeDragSelectingTool } from './RealtimeDragSelectingTool'

Go.Diagram.licenseKey = import.meta.env.VITE_GOJS_LICENSE_KEY

const $create = Go.GraphObject.make

export { Go, $create, RealtimeDragSelectingTool }

If your build system is trying to use UMD/CommonJS modules

I use vite, which converts commonjs to esm.

walter · May 10, 2024, 2:22pm

What’s export type * from 'gojs'; That looks odd to me.

Ah, that RealtimeDragSelectingTool.js file is not a CommonJS module. It can only be loaded as plain JavaScript.

walter · May 10, 2024, 3:29pm

If you want, you can ignore these problems by commenting out the use of that extension tool, so that we can address the other problems that you have posted about.

Is the user able to do any interaction using the mouse, at all? If so, can you characterize the nature of the things the user can no longer do? Do keyboard events still work, or is there a problem with focus?

appmaster · May 12, 2024, 4:59am

Is the user able to do any interaction using the mouse, at all?

I can drag nodes around only, keyboard events work as usually. No click or contextmenu events available now.

walter · May 12, 2024, 11:07am

OK, so the only input event problem is handling mouse clicks.

Have you tried updating to GoJS 3.0.2?

Do you get the same behavior when using different browsers on the same machine? Or on different kinds of platforms, especially with touch/finger or stylus events?

appmaster · May 13, 2024, 5:15am

Have you tried updating to GoJS 3.0.2?

Yes, its on 3.0.2

Do you get the same behavior when using different browsers on the same machine? Or on different kinds of platforms, especially with touch/finger or stylus events?

The same beahvior on Chrome 124 & Mozilla 125 desktop. Did not test on mobile devices.