What namespace is LinearGradientFill?

Adobe XD UXP Plugin API
1

As I understand fill can be either Color or LinearGradientFill or RadialGradientFill or ImageFill. What is the proper way to understand what fill was applied. I checked typeof but it doesn’t work. I believe LinearGradientFill is not scenegraph module but which one instead?

console.log("scenegraph.Color", typeof(scenegraph.Color));
console.log("scenegraph.LinearGradientFill", typeof(scenegraph.LinearGradientFill));
console.log("scenegraph.RadialGradientFill", typeof(scenegraph.RadialGradientFill));

has following output:

scenegraph.Color function
scenegraph.LinearGradientFill undefined
scenegraph.RadialGradientFill undefined
2

@gdreyv Hope this helps:

const fs = require("uxp").storage.localFileSystem;

export function className(o) {
  return o.constructor.name;
}

export function computeFill(sceneNode) {
  let fill = sceneNode.fill
  if (sceneNode.fillEnabled && fill) {
    let kind = className(fill);
    if (kind == "Color") {
      return {color: computeColorFillCss(fill)}
    } else if (kind == "ImageFill") {
      return {bitmap: true};
    } else if (kind == "LinearGradientFill" || kind == "RadialGradientFill") {
      return {svg: true};
    }
  }
  return;
}

function computeColorFillCss(f) {
  // https://adobexdplatform.com/plugin-docs/reference/Color.html#Color-toHex
  if (f.a == 255) {
    return f.toHex(true)
  } else {
    return "rgba(" + f.r + ", " + f.g + ", " + f.b + ", " + f.a + ")"
  }
}
1 Like
3

Hi @gdreyv,

the thing is that – despite what the docs say (@ashryan any update about this :wink: ?) , LinearGradientFill is actually called LinearGradient and RadialGradientFill (which, of course, doesn’t have a doc page, yet) is actually called RadialGradient.

You’ll find that typof LinearGradient and typeof RadialGradient will produce evaluate to functions jjust like Color.

Therefore, the answer to your question is that it is in the scenegraph module, but wrongly documented (see this issue for further reference)…

Hope this helps,
Happy Coding,
Pablo

1 Like
4

Just curious how it can be that class name is LinearGradient but prototype/constructor name is LinearGradientFill?

1 Like
5

Probably, LinearGradient is the name with which it gets exported from the module (removing the fill part to ensure consistency with things like Color) and LinearGradientFill is the “implementation” name…

class LinearGradientFill {} 

module.exports = {
  LinearGradient: LinearGradientFill 
}
1 Like
6

@peterflynn, is this something we’re planning on updating in the references?

1 Like