Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

loadFromDatalessJSON: load multiple svg file as object from saved design error #4598

Closed
SanjayChaudhary02 opened this issue Jan 1, 2018 · 12 comments · Fixed by #5970
Closed
Labels
Milestone

Comments

@SanjayChaudhary02
Copy link

SanjayChaudhary02 commented Jan 1, 2018

@kangax While i am trying to load dataless json from saved design , which contain multipath svg files as object it returns error on:fabric.require.js:441:
objects.forEach(function(o, index) {

while i am saving datalessjson by adding obj.sourcePath = obj.origingSVG(oringinal path of svg),
Multipath svg file contain objects key in objects data so after first iteration value of objects replace by url and foreach stop.

  • issue only comes while i am loading multipath svg
    Load svg method:

  • Initially while we add svg from url to canvas
    ` fabric.loadSVGFromURL(src, function(objects, options) {

           var img = fabric.util.groupSVGElements(objects, options);
           img.set('sourcePath', src);
                              current.options.currentCanvas.add(img).renderAll();
                                img.set({
                                    left: 0,
                                    top: 0,
                                    objID: newID,
                                    objType : targetArea,
                                    uploadBaseType: 'svg',
                                    origingSVG: src,
                                    originX:'center',
                                    originY:'center',
                                    selectable: false,
                                    scaleX : current.options.canvasWidth / img.width, 
                                    scaleY : current.options.canvasHeight / img.height, 
                                    applyFill: 0,
                                });
                              current.options.currentObject.center();
                              current.options.currentObject.setCoords();
                              current.options.currentCanvas.renderAll();
                              current.options.currentCanvas.setActiveObject(current.options.currentObject);
                            },null,true);`
    

Output ::
Datalessjson:
"{"version":"2.0.0-rc.3","objects":[{"type":"group","version":"2.0.0-rc.3","originX":"center","originY":"center","left":265.05,"top":176.7,"width":1200,"height":800,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.44,"scaleY":0.44,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"lockScalingX":false,"lockScalingY":false,"objID":"82359779","objType":"background","uploadBaseType":"svg","**objects**":"design-tool/images/backgrounds/201211111150511352699451800566751.svg"},{"type":"group","version":"2.0.0-rc.3","originX":"center","originY":"center","left":379.34,"top":161.97,"width":4544,"height":4056,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.06,"scaleY":0.04,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"lockScalingX":false,"lockScalingY":false,"objID":"82380412","objType":"shape","uploadBaseType":"svg","objects":"images/ICON-01-01.svg"},{"type":"group","version":"2.0.0-rc.3","originX":"center","originY":"center","left":62.01,"top":240.29,"width":151,"height":151,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.38,"scaleY":0.44,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"lockScalingX":false,"lockScalingY":false,"objID":"82386178","objType":"shape","uploadBaseType":"svg","objects":"images/25.svg"},{"type":"path","version":"2.0.0-rc.3","originX":"center","originY":"center","left":260.0490566037736,"top":105.44999999999999,"width":98.13,"height":114.04,"fill":"#00274D","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":0.67,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"evenodd","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"lockScalingX":false,"lockScalingY":false,"objID":"82393032","objType":"shape","uploadBaseType":"svg","sourcePath":"images/36.svg"},{"type":"path","version":"2.0.0-rc.3","originX":"center","originY":"center","left":250.04716981132074,"top":254.6,"width":247.13,"height":233.23,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":0.67,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"evenodd","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"lockScalingX":false,"lockScalingY":false,"objID":"82395514","objType":"shape","uploadBaseType":"svg","sourcePath":"images/58.svg"}],"background":{}}"

Loaded from saved design:
canvas.loadFromDatalessJSON(output, canvas.bind(canvas), function(o, object) {});

Version

2.0

Test Case

http://jsfiddle.net/srchaudharys02/Da7SP/824/

Steps to reproduce

Expected Behavior

Actual Behavior

@asturur
Copy link
Member

asturur commented Feb 5, 2018

Can you provide a fiddle that load an svg , output it and is not able to load it back?

@SanjayChaudhary02
Copy link
Author

SanjayChaudhary02 commented Feb 6, 2018

I have created fiddle with example:
http://jsfiddle.net/srchaudharys02/Da7SP/824/

I have fixed with change in fabricjs method , but will be better if you suggest a way.
If you want then i will share my fix.
Thanks.

@asturur
Copy link
Member

asturur commented Feb 6, 2018

ok look like a bug, now is clear. I ll look into it.
Yes, you should show how you fixed it.

@SanjayChaudhary02
Copy link
Author

SanjayChaudhary02 commented Feb 6, 2018

I have changed fabric.js.

`fabric.Group.fromObject = function(object, callback) {

if (typeof object.objects === 'string') {
  var pathUrl = object.objects; // object.objects contain url of svg object
  object.sourcePath = pathUrl;
  var options = fabric.util.object.clone(object, true);
  fabric.loadSVGFromURL(pathUrl, function (objects, options) {
    //if fill of object changed in design
    if(object.fill!='rgb(0,0,0)'){
      $j.each(objects, function (index, value) {
          value.set({'fill':object.fill});
      });
    }        //opacity of object is changed in design
  if(object.opacity!='1'){
      $j.each(objects, function (index, value) {
          value.set({'opacity':value.opacity*object.opacity});
      });
    }

    var path = fabric.util.groupSVGElements(objects, options);
    path.setOptions(object);
    callback && callback(path);
  });
}else{
  fabric.util.enlivenObjects(object.objects, function(enlivenedObjects) {
    var options = fabric.util.object.clone(object, true);
    delete options.objects;
    callback && callback(new fabric.Group(enlivenedObjects, options, true));
  });
}

};`

If you can't got solution with these change than request i will share my full source code, i have changed code at other places for my other requirement so i don't want you to destruct, but ya i have working library code which are loading datalessjson properly.

once again i am very thankful for your library.

@thomasaull
Copy link

Running into the same problem with 2.2.2 – any updates on this?

@SanjayChaudhary02
Copy link
Author

Please read comments i have already placed solution.

@thomasaull
Copy link

I'd rather have this bugfix included in the library than changing the fabric js core (and overwriting it with the next update). But thanks @SanjayChaudhary02 :)

@brentcappello
Copy link

@asturur @thomasaull If you could take a look at #4994 and see if that implementation resolves your issue and works for fabric as a whole. Thanks!

@ristarr11
Copy link

Running into the same problem with 2.4.2 – any updates on this?

@asturur
Copy link
Member

asturur commented Oct 27, 2018

i forgot about this, too many issues. :(

@ristarr11
Copy link

Thank you for the answer!
Amazing library nevertheless! :)

@asturur asturur added this to the 3.5.1 milestone Nov 15, 2019
@asturur
Copy link
Member

asturur commented Nov 15, 2019

i have a fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants