Using TypeScript for event handling in JointJS

I am facing a challenge in adding an event handler for jointjs paper using TypeScript. I have been unable to find a way to implement it with the joint.js definition file.

private paper = new joint.dia.Paper({
          el: $('#paper'),
          width: 650,
          height: 400,
          gridSize: 20,
          model: this.graph,
          markAvailable: true,
          linkConnectionPoint: joint.util.shapePerimeterConnectionPoint,
          snapLinks: true
     });

   this.paper.on('mouseclick', () => {
      console.log('Congratulations, you clicked the mouse!');
   });

I encountered an error message:

TS1068: Unexpected token. A constructor, method, accessor, or property was expected.

Can anyone advise on how to add event handlers for rectangles and lines using TypeScript?

typescriptjointjs

Answer №1

Yes, this method is effective for me.


   paper.on('cell:pointerup', () => {
      console.log('Success, you have activated the mouse click event!');
  });

Answer №2

JointJS relies heavily on external libraries like jQuery and Backbone. Using the paper.mouseclick() function, you can pass an Event as specified in the joint.d.ts definition file:

mouseclick(evt: Event): void;

When calling this function with an Event parameter, it will trigger the event. However, most likely you are more interested in handling the event instead of triggering it. In that case, the Paper class extends a Backbone.View where you can perform actions on it like so:

let paper = new jointjs.dia.Paper();
paper.on('mouseclick', () => {
  console.log('Congratulations, you clicked the mouse!');
});

I hope this information meets your needs.

Answer №3

This code snippet has been very helpful in my project:

paper.on('blank:pointerclick', function(evt, x, y) {

  //perform desired actions

}); //end paper.on

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The element 'name' is missing from the string type

I am working with a list of objects and my goal is to iterate over the list. I need to extract a specific property (string) from each object and store it in a map with boolean values. Below is the code snippet that I have written: this.selectedPeople.forEa ...

htmlangulartypescriptlistforeach

Angular input box with integrated datepicker icons displayed inside

Currently, I have an input field and a datepicker displayed in a row. However, I need to show an icon inside the input box instead. Here is my code: <div class="mb-2" style=" float: left;" class="example-full-width" class= ...

angulartypescript

Deploying Angular to a shared drive can be done in a

My angular.json file contains the following line: "outputPath": "Y:\Sites\MySite", After running ng build, I encountered the error message: An unhandled exception occurred: ENOENT: no such file or directory, mkdir 'D:& ...

angulartypescript

Creating pagination functionality for a React Material table

Check out this Spring Boot endpoint that I use for retrieving items from the database: import React, { useEffect, useState } from "react"; // Additional imports export default function BusinessCustomersTable() { // Functionality and code impl ...

reactjstypescriptspring-bootmaterial-uireact-typescript

The Angular 5 keyup event is being triggered twice

My app is incredibly simple, just a basic hello world. To enhance its appearance, I incorporated bootstrap for the design and ng-bootstrap for the components. Within one of my TS files, you will find the following code: showMeTheKey(event: KeyboardEvent) ...

javascriptangulartypescriptevents

Issues arise in Ionic 3 when attempting to use scripts or external custom jQuery plugins within inner pages

When I utilize a script tag in my index.HTML file, it functions properly on the initial or root pages of Ionic 3. However, upon navigating to other pages using NavController, the script ceases to work on these inner pages. How can I implement a custom jQ ...

javascriptangulartypescriptionic3

What are some examples of utilizing paths within the tsconfig.json file?

Exploring the concept of path-mapping within the tsconfig.json file led me to the idea of utilizing it to streamline cumbersome path references: https://i.sstatic.net/AYmv4.png The project layout is unconventional due to its placement in a mono-repositor ...

typescriptnode-modulestsconfig

The EXIF-JS data is becoming inaccessible beyond the method's scope

Currently, I am in the process of developing a web application using Angular 8. My main objective is to access the exif data of an input image outside the getData method by assigning the obtained data to a global variable. However, when attempting to acces ...

javascriptangulartypescriptexif-js

Angular2: Once user is authenticated, navigate to specific routes

I've developed an admin panel with a router for page navigation. The layout of the admin panel includes a sidebar (Component), header (Component), and content (Component). Within the content, I have inserted <router-outlet></router-outlet> ...

angulartypescriptangular2-routing

The slides in Swiperjs are having trouble moving smoothly

I am experiencing some challenges with swiperjs where the slides are not snapping to the next slide and I am unable to fetch the active index from them. Below is a snippet of my code where I am using typescript, swiperjs version 6.84, and the Ionic frame ...

javascriptreactjstypescriptionic-frameworkswiper.js

When transitioning to generics, the narrowing of types in TypeScript is sometimes lost

I am intrigued by this scenario where Test1 fails while Test2 succeeds. I wonder if there is a way to have Test1 pass without altering the generic signature: enum TableType { Shipment = "Shipment", Batch = "Batch", } type Test& ...

typescript

Could this type declaration in the Vue decorator constructor be accurate?

When using Vue decorator notation, I typically write it like this: @Prop({ type: Object || null, default: null }) However, I noticed in the Vue documentation that they use array notation: @Prop({ type: [ Object, null ], default: null }) Is there a specif ...

typescriptvue.jsdecorator

The triggering of routing in Next.js is not established by useEffect

I'm facing an issue with my Next.js dynamic page that uses routing based on steps in the state. The route is supposed to change whenever a step value changes, like from null to "next" or back. However, the useEffect hook doesn't seem to be reacti ...

javascriptreactjstypescriptnext.js

Oops! An issue occurred during the `ng build` command, indicating a ReferenceError with the message "Buffer is not defined

I'm facing an issue while trying to utilize Buffer in my angular component ts for encoding the Authorization string. Even after attempting npm i @types/node and adding "node" to types field in tsconfig.json, it still doesn't compile with ng buil ...

angulartypescript

Exploring the emission of Vue 3 with the Options API through typing

Is there a way to declare emits in Vue 3 Options API similar to the Composition API approach? Based on the Composition API documentation: (docs) <script setup lang="ts"> // type-based const emit = defineEmits<{ (e: 'change', ...

typescriptvue.jsvuejs3

What is the correct method for incorporating validators into an already existing set within a Custom Form Control?

I'm questioning the validity of my solution. My application utilizes Reactive Form, and for my CustomFormControl (which implements ControlValueAccessor), I've included a validator myControl: ["", Validators.required]. This validator is only requi ...

angulartypescriptangular-reactive-forms

Exploring the use of national flag emojis in VS code

I've been attempting to use flag emojis as reactions on a Discord bot, but they just won't cooperate. Every time I try something like this > ':flag_jp:', I encounter the following error: Error: DiscordAPIError: Unknown Emoji EDIT ...

typescriptdiscord

Incorrect line numbers displayed in component stack trace [TypeScript + React]

Challenge I am currently working on integrating an error boundary into my client-side React application. During development, I aim to showcase the error along with a stack trace within the browser window, similar to the error overlays found in create-reac ...

reactjstypescriptwebpackts-loader

Guide on utilizing the useContext hook in React/Next.js while incorporating TypeScript

As I embark on my journey in the world of TypeScript, I find myself working on a new project in Next.js using TypeScript. My goal is to incorporate authentication functionality into this project by utilizing createContext. Coming from a background in JavaS ...

reactjstypescriptreact-hooksnext.js

The combination of Next.JS and React Objects is not acceptable as a React child

Summary: Encountering the error Error: Objects are not valid as a React child (found: [object Promise]) while making a fetch request in a Typescript project. Interestingly, the same code snippet works without errors in a Javascript project. Recently, I ...

javascriptreactjstypescriptnext.jsfetch