style.style styles assignment & merge (styleParser)

[dbauszus-glx]

Style objects (eg. style.default{}) are assumed to be a base style which can be modified by assignment.

Style assignment checks whether the object has a style component. Otherwise the whole object is assumed to be the style.

The example below will alter the default style fillColor and adds fillOpacity to the style block.

let default = {
  strokeColor = '#000'
  fillColor = '#aaa'
}

let cat = {
  style: {
    fillColor: '#fff',
    fillOpacity: 0.5
  }
}

let catStyle = cat.style || cat

// Spread assignment
let style = {...default, ...catStyle}

The output will be:

{
  strokeColor = '#000',
  fillColor = '#fff',
  fillOpacity: 0.5
}

The style objects (eg. default, highlight, selected, cluster) are always assumed to be style objects. A style configuration within a style object would create a valid style which is wrong.

let default = {
  style: {
    strokeColor = '#000'
    fillColor = '#aaa'
  }
}

let cat = {
  style: {
    fillColor: '#fff',
    fillOpacity: 0.5
  }
}

let catStyle = cat.style || cat

// Spread assignment
let style = {...default, ...catStyle}

This will create:

{
  style: {
    strokeColor = '#000'
    fillColor = '#aaa'
  }
  fillColor = '#fff',
  fillOpacity: 0.5
}

There must be checks on the style input. The style should be sanitised with warnings.

strokeColor, fillColor were introduced only for the Object.assignment/spread to work. This is legacy code from a time when there was no merge method, no icon nesting, etc.

Styles should be proper objects using merge.

let style = {
  fill: {
    color: '#fff'
    opacity: 0.5
  },
  stroke: {
    color: '#aaa
  },
  icon: {
    type: 'dot'
  }
}

It has to be decided how arrays (eg. icon:[]) should be handled. At current arrays will overwrite the existing icon[array]. The style itself may also be an array.

[simon-leech]

A style configuration as shown below will throw thousands of console warnings from the merge.mjs module. This was resolved by wrapping each object in the cat in style, but this should be done in the framework.

 "style": {
    "default": {
      "fillOpacity": 0.1,
      "fillColor": "#ffffff",
      "strokeColor": "#373737",
      "strokeWidth": 0.001
    },
    "highlight": {
      "strokeColor": "#f5c52c",
      "strokeWidth": 3
    },
    "themes": {
      "FIELD": {
        "title": "FIELD",
        "type": "categorized",
        "field": "field",
        "cat": {
          "1": {
            "fillColor": "#fef0d9",
            "fillOpacity": 0.1
          },
          "2": {
            "fillOpacity": 0.5,
            "fillColor": "#fdd49e"
          },
          "3": {
            "fillOpacity": 0.5,
            "fillColor": "#fdbb84"
          },
          "4": {
            "fillOpacity": 0.5,
            "fillColor": "#fc8d59"
          },
          "5": {
            "fillOpacity": 0.5,
            "fillColor": "#ef6548"
          },
          "6": {
            "fillOpacity": 0.5,
            "fillColor": "#d7301f"
          },
          "7": {
            "fillOpacity": 0.5,
            "fillColor": "#990000"
          }
        }
      }
}

[dbauszus-glx]

Interesting issue. The merge util probably shouldn't warn if there if an item checked to be an object is an instanceof HTMLElement. The warning doesn't really add anything.

The huge amount of warnings makes me think whether the style should be merged for each feature on each render.

Which in turn validates the warning since we would not have thought about this unnecessary processing step before.