Change the size of the individual cells within JointJS

Question

Change the size of the individual cells within JointJS

I have some code for a jointjs demo that includes basic shapes on a paper. I am looking to adjust the size of the shapes or highlight them when clicked on or when the cursor moves over them.


        var graph = new joint.dia.Graph;
        
        var paper = new joint.dia.Paper({
            el: $('#paper'),
            width: 650,
            height: 400,
            gridSize: 20,
            model: graph
        });

        // Code for creating and adding various shapes to the graph...

As a beginner with jointjs, I faced challenges while trying to resize the shapes. Any assistance would be greatly appreciated.


        // Further code snippets showcasing click events and resizing functionality...

Although highlighting is working upon clicking the cell, I also aim to enable resizing of the cells upon clicking on them.

Your guidance in resolving this issue would be highly valuable.

javascript jointjs

Answer 1

Answer №1

You're on the right track, but make sure you're calling the resize() method correctly. Instead of using the ID of the element as a string, try this:

cellView.model.resize(width + 10, height);

It seems like your example is missing the definitions for the variables width and height. In JointJS, there are models and views - for instance, highlight() belongs to views (), while resize() is part of the element model (). Remember that you can access models from views by using the view.model property.

Answer 2

You're on the right track, but make sure you're calling the resize() method correctly. Instead of using the ID of the element as a string, try this:

cellView.model.resize(width + 10, height);

It seems like your example is missing the definitions for the variables width and height. In JointJS, there are models and views - for instance, highlight() belongs to views (), while resize() is part of the element model (). Remember that you can access models from views by using the view.model property.

Change the size of the individual cells within JointJS

Answer №1

Similar questions

Guide for using two Async Pipe functions in Angular 7

Converting SHA-256 from Java to JavaScript in an Ionic project using NPM: A step-by-step guide

Removing classes from multiple elements on hover and click in Vue 2

Looking for guidance on restructuring a JSON object?

Combine the filter and orderBy components in AngularJS ng-options for a customized select dropdown menu

Display function not functioning properly following AJAX request

Transfer responsibilities of events to the canvas and then fetch the Element in the handler

Displaying an additional section using hover effects in Bootstrap

Using jQuery Validation for implementing a step-by-step validation process in a wizard form

The white-spaces in Quill JS do not retain their original formatting

Issue: template.config.js not found during creation of a React Native project on version 0.59.9

Tips for updating checked checkboxes in a php mysql database

The server is unable to process your request to /graphql

What other options are available for achieving the same functionality as FormData.delete() given its low level of support?

Error message: Unauthorized request error with the change.org JavaScript API

Calling a function within another function is not allowed in Typescript

Tips for combining values from two inputs to an angular ng-model in AngularJS

Modifying Props in Reactjs: Ways to update data passed from parent component to child component

Importing multiple modules in Typescript is a common practice

Angular JS form cloning feature