Subclassing objects in fabricjs does not result in them being grouped together

Take a look at the link provided below.

Make sure to execute the sample code.

Grouping 1 rectangle - success.

  1. Click on 'Add Rect' twice to display two rectangles.
  2. Drag and select both objects.
  3. Press the group button.
  4. Objects successfully grouped.

Subclassing 2 objects - unsuccessful.

  1. Click on 'Add Labeled Rect' twice to show two subclassed objects (rectangles with text).
  2. Drag and select both objects.
  3. Attempt to group them.
  4. Error message appears in console.

Why can't subclassed objects be transformed into a group?

I have tried grouping rectangles and subclassed objects using version 1.4.4. While rectangles group perfectly, subclassed objects do not.

The error messages displayed are as follows:

Uncaught TypeError: undefined is not a function fabric-1.3.7.js:10702
    fabric.Object.fabric.util.createClass.renderfabric-1.3.7.js:10702
    fabric.Group.fabric.util.createClass._renderObjectfabric-1.3.7.js:15504
    fabric.Group.fabric.util.createClass.renderfabric-1.3.7.js:15477
    fabric.StaticCanvas.fabric.util.createClass._drawfabric-1.3.7.js:5751
    fabric.StaticCanvas.fabric.util.createClass._renderObjectsfabric-1.3.7.js:5879
    fabric.StaticCanvas.fabric.util.createClass.renderAllfabric-1.3.7.js:5850
    fabric.Collection.addfabric-1.3.7.js:181
    (anonymous function)GroupSubclassing.html:71
    x.event.dispatchjquery-2.0.3.js:4676
    y.handle
javascriptfabricjs

Answer №1

The issue arises when the cloned object does not include subclass members.

To resolve this issue, you can implement the following workaround:

ExtendedShape.fromObject = function (obj) {
    return new ExtendedShape(obj);
};

This code snippet should be added after defining your object.

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

What is the best way to send an object to Vue Component?

How can I properly call a Vue Component with a data object? The todo-item tag works as expected, but the todo-item2 tag does not produce any output. I was expecting the same result. Here is the HTML code: <div id="app"> <todo-item v-bind:te ...

javascripthtmlvue.js

Looking for assistance with flipping the order of words in a string?

How do I achieve the desired output by passing the specified string as an argument to a function? input: "Reverse this line" output: "esreveR siht enil" This is my implementation function reverseWords(string) { var wordArray = string.split(" ...

javascriptarraysalgorithmecmascript-6

What is the best way to call LeafletMap from the main directory?

Transitioning from Version 2.8.0 to 3.0.5 presented a challenge as the API had undergone significant changes. The Map Element was no longer exported, replaced by a MapContainer which utilizes the Context API to access certain properties. While this change ...

javascriptreactjsleafletreact-leaflet

How can you handle undefined values in the query object parameter when using Mongoose's Find function?

Alright: Sound.find({ what: req.query.what, where: req.query.where, date: req.query.date, hour: req.query.hour}, function(err, varToStoreResult, count) { //perform some actions }); Let's consider a scenario where only req.query.what has a ...

javascriptnode.jsmongodbexpressmongoose

The initial step is duplicated in both "Intro.js" and "Intro.js-react"

The problem is as follows: Upon reloading, a pop-up appears in the upper left corner with an incorrect progress bar displaying 0, as shown in the screenshot below. https://i.sstatic.net/djCyf.png If you click on "Next", the same content reappears but th ...

javascriptreactjstypescriptnext.jsintro.js

Improved way to handle nested if statements in JavaScript

Suppose there exist 3 divs within my HTML document with the following IDs: stepone steptwo stepthree The objective is to first fetch JSON data from the server and load it into the stepone div. If the returned status is '1', then display ' ...

javascriptjqueryif-statement

Could this potentially be a good fit for a JavaScript Closure implementation?

This code is functional, but I've been contemplating whether it could benefit from implementing closure. Let me explain. What I aim to achieve is: $(".trigger").click(function() { $(this).parents(".heading").next(".list").slideToggle("slow", ...

javascriptjqueryclosures

The request is unsuccessful due to the absence of the 'Access-Control-Allow-Origin' header

I've set up a form using Get Response (the email client) and I'm attempting to implement ajax in order to display a custom success or failure message upon submission. The code seems to be functioning correctly. However, as soon as I connect the a ...

javascripthtmlajax

Is it possible to incorporate the parameters from a Knockout custom validator into the error message?

I have created a unique custom validator similar to the one available here. The purpose of my validator is to be versatile enough for use in different contexts. This specific validator checks file type extensions that are inputted, returning true if the o ...

javascriptknockout.jsknockout-validation

What is the process for checking the selected option, retrieving an array value, and displaying it in a div by clicking a button?

The query may seem a bit unclear, but I will do my best to explain. Here is the HTML code snippet: <div id="buttonholder"> <button id="previous">< Previous round</button> <button id="next">Next round ></button> ...

javascriptjqueryhtml

Enhance jQuery for a dynamic navigation dropdown with multiple sub-menus

Looking for help with a jQuery script as I am a beginner in using jQuery. jQuery(document).ready(function ($) { $(".sub-menu").hide(); $(".current_page_item .sub-menu").slideDown(200);; $("li.menu-item").click(function () { if ($('.sub-menu&apos ...

javascriptjquerycssmenunavigation

Executing a JavaScript function following a PHP form submission

I've been struggling to understand why the checkDates() function is not being called after submitting the form. The checkForm() JS function works perfectly fine, but for some reason, checkDates() doesn't seem to work. I even tried moving it above ...

javascriptphpjquery

Encountering an issue while trying to utilize the firestorePlugin from vuefire in Vuejs 3 createApp. The problem is that I am receiving an Uncaught TypeError: Cannot set property '$

I recently encountered an issue in my Vue.js 3 app with the following code snippet in my main.js file: import { createApp } from "vue"; import App from "./App.vue"; import { firestorePlugin } from "vuefire"; const app = creat ...

javascriptvue.jsvuejs3vuefire

When all other elements can be located by ID on the page, JavaScript struggles to find a particular one

Encountering a strange issue while using JavaScript to locate an element by its ID. For some reason, when trying to run a function against it, the selection turns out to be undefined. Interestingly, this particular element has the same type of definition a ...

javascriptjqueryhtmlruby-on-rails

How to upload a document to Alfresco using JavaScript API

I am facing an issue while attempting to upload a file from a node application to my local Alfresco server. I have been able to login, create, and delete folders successfully, but I am encountering difficulties when trying to upload files. let AlfrescoApi ...

javascriptalfresco

The Meteor server has the capability to automatically restart when faced with slow requests

I have a Meteor application that is facing issues with hanging calls. The problem arises when processing a large number of items in a loop and performing upserts on the server-side Mongo database, which I suspect is being done asynchronously. I am aware th ...

javascriptnode.jsmongodbmeteor

A guide to assigning multiple classes to an element in Vue.js depending on the props!

Take a look at my code to grasp the issue. <template> <div class="header" :class="flat ? 'flat' : null" :class="app ? 'app' : null"> </div> </template> <script> export default ...

javascripthtmlcssvue.jsvuejs2

HAproxy: unique error handling for OPTIONS and POST requests with 503 errorfile

Our Web application utilizes ajax calls to a backend that operates on a different domain, requiring CORS. The backend setup includes an HAproxy 1.4.22 along with multiple Wildflys running on the OpenShift PaaS. During times when a Wildfly instance is unava ...

javascriptajaxcorshaproxy

What is the best way to output a received HTML page from the server?

I'm currently working on printing an HTML page that was generated using Node.js on my server. After sending the page to the client side as a response to an AJAX request, I have stored it in a JavaScript variable. var resp_json = printRequest.getRespo ...

javascripthtmlajaxnode.js

How can you display content from another page without resorting to scroll bars?

Hey there, I am new to web development and could use some assistance! I have been using jQuery and a snippet of JavaScript code to display content from another page on my site. However, I have noticed that sometimes it causes a scroll bar to appear. For ex ...

javascriptjqueryhtmlcss