Modify JointJS/Rappid inspector or cell model value without relying on the inspector

Recently, I've encountered a challenge in updating the value of a text attribute (name) in a cell model without resorting to the use of the inspector. My goal is for this update to not only reflect in the inspector field but also in the linked cell model value. Despite my efforts, I'm unsure about how to achieve this. Is it even possible?

Answer №1

It seems the meaning of your question is a bit unclear, and unfortunately I do not have a Rappid license to test the UI Inspector feature. However, based on my understanding...

...if you enhance a shape's prototype with a property, you can then easily bind data to it in Angular and see the changes reflected in the shape automatically.

I suspect that this will also update the inspector cell, although I am unable to verify this due to lack of a Rappid license.

By adding a 'name' property to a shape like so:

Object.defineProperty(joint.shapes.basic.Rect.prototype, 'name', {
    get: function () { return this.attr('text/text'); },
    set: function (value) { this.attr('text/text', value); }
});

You can expose the editable element on your controller's scope and bind it accordingly. The HTML structure:

<div ng-app>
  <div ng-controller="MyCtrl">
    <div id="paper"/>
    <div>
      <label>Enter text:</label>
      <input type="text" ng-model="element.name" />
   </div>
  </div>
</div>

The controller code:

function MyCtrl($scope) {

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

  var element = new joint.shapes.basic.Rect({
      position: { x: 100, y: 30 },
      attrs: { text: { text: 'edit my name' } },
      size: { height: 92.7051, width: 150 }
  });

  $scope.element = element;

  graph.addCell(element);

  Object.defineProperty(joint.shapes.basic.Rect.prototype, 'name', {
      get: function () { return this.attr('text/text'); },
      set: function (value) { this.attr('text/text', value); }
  });

}

View the working jsfiddle here: http://jsfiddle.net/r7n9t9s6/3/

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

Bootstrap modal's offset returning blank value

One way to navigate to a specific element within a Bootstrap modal is by checking the offset of that particular element. If there are multiple divs within the modal, each with its own unique id (#row-1, #row-2, etc.), you can open the modal and input the f ...

Sharing images and descriptions on Twitter and Facebook using the `react-share` package: A step-by-step guide

This is the code I'm using for my helmet. <Helmet> <meta property="og:image" content={shareImg} /> <meta property="og:image:secure_url" content={shareImg} /> </Helmet> Here is the snippet of code for Twitter and Facebook ...

A guide to delivering static images using NestJS

I recently started learning the MEAN stack and while exploring Express, I came across an additional layer in the framework called NestJS. It had everything I needed and the Angular-like syntax was perfect for me. However, each new step has been a nightmar ...

Javascript scoping issue with a function that generates and returns other functions

I am facing an issue with my function where I keep getting 2 in the alert message every time. It seems like a variable scope problem, but I haven't been able to resolve it yet. var someObj = {"a" : 1, "b" : 2}; function retrieveData(obj){ var func ...

Can images be placed on the border?

Hi there! I am trying to add an image on a border with a 100px solid width using CSS. I have experimented with positions and z-index, but I can't seem to get the desired effect. Any ideas on how to achieve this? Here is an example image: https://i.sst ...

What is the method for moving the cursor to the MathQuill (0.10) field in order to immediately begin typing and making edits?

I am currently working on a plugin for Etherpad that allows for editing formulae using MathQuill. One issue I am facing is that when the toolbar is opened, I want the cursor to automatically move into the edit field. The field is mathquillified in the foll ...

Only one request allowed per time unit

I am currently utilizing the React library for a project. My task involves retrieving data by typing in an input field. However, the challenge lies in only making a request once the user has finished typing. This means that I should wait until the user h ...

What is the best method for freezing an HTML element in relation to a container using either CSS or JavaScript?

I've been diligently researching this topic up until the final day, but unfortunately, I have yet to find a solution. I am in dire need of assistance with my project. Could someone please help me out? One of my related searches led me to Can I positi ...

Retrieve the ID of the button that was chosen

Hello, I have a card with 3 selectable buttons as described below. <ul class="nav nav-tabs border-0" role="tablist" id="FlightType" onclick="SelectedFlightType()"> <li cla ...

Make sure to execute the fire directive only when ng-repeat has completed

Currently, I am utilizing owl carousel with data being fetched through an Ajax call. Once the data populates the HTML content using ng-repeat, I need to trigger the directive that initializes the owl carousel. How can I achieve this? One approach I consid ...

Explain the concept of parameter JSON or object

I have a method that currently draws some controls on the screen. Now, I want to turn this method into an API in order to make it more dynamic for the user to decide which controls they want to draw. I was thinking of using a JSON structure, but I'm n ...

In the template, I utilize both vue-router and jQuery. However, there seems to be an issue with $(document).ready() not functioning

Looking for guidance on using jQuery in Vue. I've noticed that when I refresh the page, $(document).ready() function is triggered. However, when I use vue-router to switch pages, $(document).ready() does not seem to work. <template> <div ...

Implementing the Context API with React Router: using version '^5.2.0' of react-router-dom and version '17.0.2' of React

I am currently struggling to retrieve the user value from my Header component using the Context API, but unfortunately it is returning as undefined. Below is my code snippet. import React, { createContext, useEffect, useState } from "react"; exp ...

Angular JS validation - avoiding validation of disabled fields

After selecting a checkbox or radio button, certain fields will be displayed. Some of these fields must be filled out, while others are optional. However, even though the mandatory fields are disabled until they are shown, I am unable to submit the form du ...

What is the most efficient method for exporting React components in an array format?

I've successfully implemented this code, but I'm looking for ways to enhance its clarity. I am in the process of building a compilation of SVG patterns and aim to design a dashboard that showcases each pattern similar to what you would find on t ...

Place additional text above the export button within Highcharts

Presently, I'm utilizing the Highcharts API here and here to customize the export button for Highcharts. I am attempting to position an ellipsis inside the export button in order to adhere to certain style guidelines. However, due to the limitations o ...

Updating the parameter names in an AJAX request

Can the data parameters sent with AJAX be dynamically changed to a new name? For instance: let NewParamName = `Post_${incremented_value}`; $.post("index.php" { NewParamName : "someValue" }); Even after sending the request, the name in the parameters rem ...

What is the proper way to invoke the function located within a jQuery plugin?

I have incorporated a jquery plugin called vTicker on my webpage for automatic vertical news scrolling. This plugin, available from this link, works seamlessly with an rss jquery plugin. The integration is successful, but I now have a requirement to add a ...

Validating checkboxes using HTML5

When it comes to HTML5 form validation, there are some limitations. For instance, if you have multiple groups of checkboxes and at least one checkbox in each group needs to be checked, the built-in validation may fall short. This is where I encountered an ...

RegEx in JavaScript to identify and match the innerHTML property of all elements

I am currently in the process of developing a Chrome extension that needs to identify specific pages within a website, including the Log In / Sign In page, the Sign Up / Register page, the About page, and the Contact Us page. My approach involves obtainin ...