konva icon indicating copy to clipboard operation
konva copied to clipboard

TypeScript definitions claims you can't pass custom event properties

Open jez9999 opened this issue 1 year ago • 0 comments

I'm generating a custom drag-drop event:

	e.target.fire("piecedrop", { dropTarget: shape, evt: e.evt }, true);

Then I'm hooking it up to one of my class methods:

	stage.on("piecedrop", this.#handlePieceDrop);

In Javascript, this handler method can happily receive the event object, and dropTarget is on the received event (I'm using target for the piece being dragged so I need to pass this custom extra information). This is good. I want to be able to pass this extra info.

	#handlePieceDrop = (e: KonvaEventObject<any>) => {
		if (e.dropTarget) { ... }
	};

However, the TypeScript type for the handler method, defined in Node.d.ts, is (e: KonvaEventObject<any>) => { ... }. Because the KonvaEventObject<EventType> interface doesn't define an index signature, TypeScript thinks it's a problem for me to try to access properties on that event object not explicitly defined, and so that code gives me an error:

VS TypeScript error

Konva's TypeScript definitions should be updated to reflect the fact that KonvaEventObject<any> can have any custom property set on it.

You could use e.evt to contain your custom info, but I think this would be a bad idea as it seems to be intended for the associated DOM event. All the native event handler definitions make it a DOM event, and the example drag-drop custom event code just passes it through, keeping it as a DOM event:

            previousShape.fire(
              'dragleave',
              {
                evt: evt.evt,
              },
              true
            );

So it would be surprising if it suddenly because some other custom object.

jez9999 avatar Sep 22 '22 15:09 jez9999