Updating Styles in Layers

[oscarotero]

Updating Styles in Layers

[oscarotero]

Ok, that's a bug. I just released the v0.8.1 that fix this.

[oscarotero]

Hello. I think there's some missing code in your example. (where is layers[i] defined?)
The method getAll returns an array with the result, so you have to use a forEach to iterate with it:

layers[i].getAll('style').forEach(style => {
});

And I recommend to use push or set to insert new elements to a node:

style.fills = [];
style.push('fills', {
  _class: 'color',
  //...
});

And finally, the save method changed in the latest version and does not returns a promise any more, but the sketch instance itself.

[sho13]

Apologies for the missing code, am working under NDA. Thank you i'll give that a shot

[sho13]

So I tried to use push or set and they both returned a TypeError: style.push/set is not a function

[oscarotero]

This is because you're not using the latest version (0.8.0).

[sho13]

So the new updated save function gives me this error after I logged this.queue and I get null is there something I'm doing wrong?

err: RangeError: Maximum call stack size exceeded
    at Sketch.save (/node-sketch/src/Sketch.js:88:9)
    at Sketch.save (/node-sketch/src/Sketch.js:90:31)
    at Sketch.save (/node-sketch/src/Sketch.js:90:31)
    at Sketch.save (/node-sketch/src/Sketch.js:90:31)
    at Sketch.save (/node-sketch/src/Sketch.js:90:31)
    at Sketch.save (/node-sketch/src/Sketch.js:90:31)
    at Sketch.save (/node-sketch/src/Sketch.js:90:31)
    at Sketch.save (/node-sketch/src/Sketch.js:90:31)
    at Sketch.save (/node-sketch/src/Sketch.js:90:31)
    at Sketch.save (/node-sketch/src/Sketch.js:90:31)`

When I made a hard change back to the 0.6.0 code in the save referenced by the red here b99cdb4#diff-1c9563195fd681cf4b3a8d5e979d6c82

I break my file back to the initial problems

[sho13]

Thank you, that fixed the bug, I am curious though I've tried using set and push and it still corrupts the file and Sketch still gives me the errors as in my initial issue.

[oscarotero]

The error is because you are inserting data that does no follow the scheme of the sketch format.

A style node can be something like this:

{"_class":"style","borders":[{"_class":"border","isEnabled":false,"color":{"_class":"color","alpha":1,"blue":0.592,"green":0.592,"red":0.592},"fillType":0,"position":1,"thickness":1}],"endDecorationType":0,"fills":[{"_class":"fill","isEnabled":true,"color":{"_class":"color","alpha":1,"blue":0.6858524659863946,"green":0.4452263878267147,"red":0.07594874312621591},"fillType":0,"noiseIndex":0,"noiseIntensity":0,"patternFillType":1,"patternTileScale":1}],"miterLimit":10,"shadows":[{"_class":"shadow","isEnabled":true,"blurRadius":4,"color":{"_class":"color","alpha":1,"blue":0,"green":0,"red":0},"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":1},"offsetX":0,"offsetY":2,"spread":0}],"sharedObjectID":"7835A451-D28F-4816-9E42-372B111D0E06","startDecorationType":0}

You can use this tool to see the json structure as a tree.

A workaround could be something like this:

layers[i].getAll('style').forEach(style => {
    //Get the fills of this style
    style.getAll('fill').forEach(fill => {
        fill.set('color', {
              _class: 'color',
              alpha: endColor[3] === undefined ? undefined : endColor[3],
              blue: endColor[2],
              green: endColor[1],
              red: endColor[0],
          });
    });
});

I didn't try this, but you get the idea.

Note: to see the data scheme of any node, you can do this:

const fill = layer.get('fill').toJson();
console.log(JSON.stringify(fill));

[sho13]

Right I understand, however I'm trying to create the key fill in some cases and it seems to fail.

Is there a way to create a node?

[oscarotero]

Internally set/push uses https://github.com/oscarotero/node-sketch/blob/master/index.js#L107 to create new nodes.
What errors are you getting?

[sho13]

I see:

layers[i].get("style", style => {
        console.log('style:: ', style);
        style.getAll('fill').forEach(fill => {
          fill.push('color', {
            _class: 'color',
            alpha: endColor[3] === undefined ? undefined : endColor[3],
            blue: endColor[2],
            green: endColor[1],
            red: endColor[0],
          })
          console.log('fill:: ', fill);

        })
})

This doesn't really work, because the fill key isn't logged at all.

Mainly because there isn't a fill key in the object I'm working with.

This with a save function doesn't break the file, but the changes aren't persisting.

And say i change the placement of the console.log of fill to before the set/push it still doesn't log fill at all.

[oscarotero]

This is not correct:

layers[i].get("style", style => {
});

get() is the same than getAll() but returns only the first element found, instead an array with all. You're passing the callback as argument, so this callback is used as a filter function. Please, see the docs https://github.com/oscarotero/node-sketch#node

you have to do this:

const style = layers[i].get('style');

or, to iterate with all instances of style:

layers[i].getAll('style').forEach(style => {
    //here the code
});

[sho13]

Made an attempt with this version, my changes didn't persist::

      let style = layers[i].get("style");

      style.getAll("fill").forEach(fill => {
        console.log('fill:: ', fill);

        fill.set('color', {
          _class: 'color',
          alpha: endColor[3] === undefined ? undefined : endColor[3],
          blue: endColor[2],
          green: endColor[1],
          red: endColor[0],
        })
      })

this also doesn't persist with::

layers[i].getAll("style").forEach(style => {
        style.getAll('fill').forEach(fill => {
          fill.push('color', {
            _class: 'color',
            alpha: endColor[3] === undefined ? undefined : endColor[3],
            blue: endColor[2],
            green: endColor[1],
            red: endColor[0],
          })
        })
      })

you're telling me that fill would be created upon push/set, is there any way to confirm that the node is created?

there's no fill in that style object so fill isn't being get. is there a work around?

i tried setting a style.fill = []; before the push, but no dice.

[oscarotero]

push adds a new value in the array and set replaces the old value with a new value. In your case, each fill has only a color (a layer can have several fills, but each fill contains only a color, as you can see in the data structure). So you must use set, not push, because fill.color is not an array.

I just tried this and works fine for me:

file.pages[0].getAll('style').forEach(style => {
    style.getAll('fill').forEach(fill => {
            fill.set('color', {
                _class: 'color',
                alpha: 0.5,
                blue: 0.5,
                green: 0.4,
                red: 0.3
            });
    })
});

[sho13]

Okay, thank you for the clarification, but what happens in the case that fill doesn't exist?

It doesn't seem to hit the set because the fill doesn't exist in that style object.

layers[i].getAll("style").forEach(style => {
        console.log('style.fill:: ', style.fill);
        style.getAll('fill').forEach(fill => {
          console.log('HIT')
          fill.set('color', {
            _class: 'color',
            alpha: endColor[3] === undefined ? undefined : endColor[3],
            blue: endColor[2],
            green: endColor[1],
            red: endColor[0],
          })
        })
      })

the console for style.fill is undefined

[sho13]

I figured it out, here's the snippet::

layers[i].getAll("style").forEach(style => {
        console.log('style.fill:: ', style.fill);
        style.fill = []
        style.push('fill', {
          _class: 'color',
          alpha: endColor[3] === undefined ? undefined : endColor[3]/255,
          blue: endColor[2]/255,
          green: endColor[1]/255,
          red: endColor[0]/255,
        })
        console.log('style.fill:: ', style.fill);
      })

i had to set a fill property with an array and then push the object onto it.

the problem is now though, it still doesn't persist into the saved sketch file.

[oscarotero]

Another solution is simply set an array of fills:

style.set('fill', [
    {
        _class: 'fill',
        color: {
            _class: 'color',
            //...
        }
        //...
    }
]);

the problem is now though, it still doesn't persist into the saved sketch file.

I just execute this code and works fine. I have a result.sketch file with the colors changed.

sketch
    .read(__dirname + '/example.sketch')
    .then(file => {
        file.pages[0].getAll('style').forEach(style => {
            style.getAll('fill').forEach(fill => {
                    fill.set('color', {
                        _class: 'color',
                        alpha: 0.5,
                        blue: 0.5,
                        green: 0.4,
                        red: 0.3
                    });
            })
        });

        file.save(__dirname + '/result.sketch');
    })
    .catch(err => {
        console.error('Error reading the sketch file');
        console.error(err);
    });

[sho13]

I see would you say that if I have a recursive function running inside the .then() that there'd be a scoping issue?

[oscarotero]

I run a recursive function (to replace all colors) and then save the file. Everything is in the same place and it works fine. I don't understand what do you mean with scoping issue. Can I see your whole code?

[sho13]

Sure,

  updateSketch: (req, res) => {
    let { pageID, objectID, type, endColor } = req.body;
    endColor = endColor.map(n => n / 255);

    ns.read(filePath)
      .then((sketch) => {
        let { pages } = sketch;
        for(let i = 0; i < pages.length; i++) {
          if(pages[i].do_objectID === pageID) {
            // console.log('pages:: ', pages[i]);
            let { layers } = pages[i];
            recurseSketch(layers, objectID, endColor, type);
          }
        }
        console.log('save???')
        sketch.save(path.join(__dirname + `/../../uploadedSketchFiles/output.sketch`))
      }).catch((e) => { console.log('err:', e)})
  },

this is the recursive function

const recurseSketch = (layers, objectID, endColor, type) => {
  for(let i = 0; i < layers.length; i++) {
    if(layers[i].do_objectID === objectID) {
      layers[i].getAll("style").forEach(style => {
        switch (type) {
          case 'backgroundColor':
            console.log('style.fill:: ', style.fill);
            style.fill = []
            return style.push('fill', {
              _class: 'color',
              alpha: endColor[3] === undefined ? undefined : endColor[3],
              blue: endColor[2],
              green: endColor[1],
              red: endColor[0],
            })
            break;
          default:
            console.log('SUp')
            return;
        }
        console.log('style.fill:: ', style.fill);
      })
    }
    if(layers[i] !== undefined && layers[i].layers !== undefined) {
      recurseSketch(layers[i].layers, objectID, endColor, type);
    }
  }
}

[oscarotero]

This should save the changes in output.sketch. Are you sure that any change is performed?

Another thing I see: get() and getAll() search the node recursively and accept functions as filter, so you don't need all that code. Just:

page.getAll(layer => layer.do_objectID === objectID).forEach(layer => {
    layer.getAll('style').forEach(style => {
    });
})

[sho13]

Thanks for the clarification, yeah for some reason it still doesn't save the changes in the output.sketch
i made the change to::

          pages[i].getAll(layer => {
            layer.do_objectID === objectID
          }).forEach(layer => {
            layer.getAll('style').forEach(style => {
              style.set('fill', [{
                _class: 'color',
                alpha: endColor[3] === undefined ? undefined : endColor[3],
                blue: endColor[2],
                green: endColor[1],
                red: endColor[0],
              }])
            })
          })

and the changes still aren't persisting into the output.sketch files

also in the previous comment, my style.fill = [], the console.log for style.get('fill') comes back as undefined