I have been using fabricjs since version 1.1.9 and created quite a big application. Now i'm trying to use the newer version 1.4.0, and have found out there are many changes. It was possible to use getActiveObject() to select single object and also to select multiple group object, but now it is throwing error on group object while i am trying to get some property of selected group (like strokeWidth), the error is "Uncaught TypeError: Cannot read property 'strokeWidth' of null". But if i use getActiveGroup() for group object, there is no error. The fact is if this is the problem, i have to recreate my whole project. Is it possible to resolve my situation with some minor fix? Where can i find the change log for version 1.4.0?
maybe this is could be a solution for you.
getActiveObject() returns null if a group is selected and if a object is selected getAtctiveGroup() returns null as well. Just create a function that returns whatever is selected on the canvas.
function getSelection(){
return canvas.getActiveObject() == null ? canvas.getActiveGroup() : canvas.getActiveObject()
}
If you now replace all getActiveObject() with getSelection() calls in your code this should solve your problem. Hope this helps.
You can use canvas.getActiveObjects() which will return all selected objects.
canvas.getActiveObjects().forEach((object) => {
// do something with object
})
Related
How to fix Cannot read property 'hasOwnProperty' of undefined?
Using Angular.JS 1.3
Assigning response data in $rootScope.settings in parentConroller.
so the rootScope will be like this
$rootScope.settings = api.data;
//sample
$rootScope.settings:{
"lastLogin":"2005-01-01",
"isStudent": true,
"assignedCourse": "['JAVA + DS']"
}
And accessing the $rootScope data in anotherController.JS. But here I don't want my array inside string, so to remove double quotes, I tried below ways
Attempt 1:
if($rootScope.settings.hasOwnProperty('assignedCourse')) {
$rootScope.settings.assignedCourse = ['JAVA + DS']
}
Attempt 2:
$rootScope.settings.assignedCourse = JSON.parse(rootScope.settings.assignedCourse.replace(/'/g, '"'));
// giving me Error: Unexpected token ' in JSON at position 1
Attempt 1 is working in the application, but its getting failed when i run karma debugger which is showing TypeError: Cannot read property 'hasOwnProperty' of undefined
Literally don't know how to fix this issue. Struggling to fix more than a days
I've already gone through few SO's related to my issues. but don't get any better solutions
Side Note: currently using only plain old JavaScript, not es6 or updated version.
For starters, you may want to be using angular.isDefined($rootScope.settings.assignedCourse) instead of hasOwnProperty as it is likely syntactically closer to what you are testing for (defined value instead of property ownership)
Regarding attempt 1 failing in the test, settings is undefined. You may need to re-examine your test bed and ensure your scope is being initialized as you expect.
I recreated your attempt 2 successfully, I suspect something else is going on here and may be resulting from another line.
Consider the following backbone collection:
What I would like to do is access the field 'name'. Here's what I did:
this._selectedNodes.pluck('name').forEach((objectName) => {
$objectListLi.append(`<li>${objectName}</li>`);
});
But I keep getting "undefined" as result. What's even weirder is that when I loop through the collection using "id" instead, I get the result.
Any idea why is this happening and how I can fix it?
EDIT:
Notice here that the 'id' is already present in the first layer under models:
However, the 'name' field is only present under attributes:
Could this be the reason why pluck is not able to find 'name'? Maybe pluck is only able to go a level below?
EDIT 2:
I tried the same thing but with map instead of pluck:
this._selectedNodes.map(function(model){
return model.get('name');})
Same thing, I got undefined. So this rules out the possibility of pluck being the problem.
EDIT 3:
Got it work like this:
this._selectedNodes.map(function(model){
return model.attributes.get('name');})
Now, I get the value of the name. However, I'm still unable to integrate it in the foreach loop. Any idea?
At some stage it seems your name is becoming undefined? Maybe do a check for that.
For all nodes is the property of 'name' always available?
this._selectedNodes.pluck('name').forEach((objectName) => {
if (objectName !== 'undefined') // Any scope
$objectListLi.append(`<li>${objectName}</li>`);
});
Finally got it work. I removed pluck and used map instead. The solution is not very elegant, but that's the only one that worked for me.
var names = this._selectedNodes.map(function (model) {
return model.attributes.get('name');
});
names.forEach(function (objectName) {
$objectListLi.append(`<li>${objectName}</li>`);
});
I hope it'll help someone else, and thanks for everyone who tried to help me out.
Javascript
var rewardObj = myComp.getStage().createChildSymbol("reward", "Stage");
$(rewardObj).css
({
left:500, //originSize[2].left,
top:500 //originSize[2].top
});
$(rewardObj).css does nothing and rewardObj.css throws error.
How would I select this object that I just made and move it over. I've used offset successfully in the past to move objects but this one won't budge. I'm thinking that I am selecting it wrong.
I think you need to use the exposed element and not the object
$(rewardObj.element).css()
I'm using an institutional (ie, any fix will have to be on my side) website that is IE specific, but I want to use it with Safari. The website mostly works, but at one point I get the following error in my console:
Uncaught TypeError: Object #<HTMLFormElement> has no method 'all'
When I dig into the Javascript the error is coming from:
function fnFocus() {
var frmCtl = document.frmAddEditAdultPosition ;
if(frmCtl !=null) {
var ctlFN = frmCtl.all("txtFirstName") ;
ctlFN.focus() ;
}
}
Calls to the all method are scattered throughout the code.
My plan, is to use proxypy to fix the Javascript as it comes in. I'm assuming that the all method is something IE specific, but I don't know what I should replace it with.
The elements collection:
frmCtl.elements["txtFirstName"] // Might be another collection if there are duplicate fields of that name
or getElementsByName:
frmCtl.getElementsByName("txtFirstName") // Always a collection
or querySelector:
frmCtl.querySelector('[name="txtFirstName"]') // Gets the first match
or querySelectorAll:
frmCtl.querySelectorAll('[name="txtFirstName"]') // Always a collection
Firstoff I'd like to add I've been learning javascript for like only 2 days now. I'm pretty much way ahead of myself with what I'm trying to get but here goes.
I have a json array from which I get data to replace/insert in my page. The first problem I have is that if it comes across an empty ('null') key it will just stop. Will not even try to continu.
document.getElementById("id1")src=json.img1.link;
document.getElementById("id2")src=json.img2.link;
document.getElementById("id3")src=json.img3.link;
json.img2.link is empty ('null' response from json.). javascript will then not replace "id2" but it also won't replace "id3".
I'm now trying to find a solution where it will if nothing else at least set a default.
The script is not continuing executing because it comes to an error --trying to access property link of an undefined object
Try
document.getElementById('id2').src = json.img2 ? json.img2.link : 'defaultLink';
This way your are checking for undefined (ie null) object in img2 and assigning the default value. This assumes that what is not defined (null) is the img2 object.
Actually I don't think your code should work at all, you are missing the. before the src So, try
document.getElementById("id1").src=json.img1.link;
document.getElementById("id2").src=json.img2.link;
document.getElementById("id3").src=json.img3.link;
and let us know if that doesn't solve the problem.
Btw, +points for learning JavaScript and not just straight into jQuery!