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.

Sign up for GitHub

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

Jump to bottom

style.style styles assignment & merge (styleParser) #970

Closed
dbauszus-glx opened this issue Oct 18, 2023 · 2 comments · Fixed by #1132
Closed

style.style styles assignment & merge (styleParser) #970

dbauszus-glx opened this issue Oct 18, 2023 · 2 comments · Fixed by #1132
Assignees
@dbauszus-glx
Labels
Bug A genuine bug. There must be some form of error exception to work with. Code Issues related to the code structure and performance. Feature New feature requests or changes to the behaviour or look of existing application features. RFC Request for Comment or Change.

Comments

@dbauszus-glx
Copy link
Member

dbauszus-glx commented Oct 18, 2023 •
edited

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.
@dbauszus-glx dbauszus-glx added Bug A genuine bug. There must be some form of error exception to work with. Feature New feature requests or changes to the behaviour or look of existing application features. Code Issues related to the code structure and performance. RFC Request for Comment or Change. labels Oct 18, 2023
@dbauszus-glx dbauszus-glx self-assigned this Dec 22, 2023
@simon-leech
Copy link
Contributor

simon-leech commented Feb 13, 2024 •
edited

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
Copy link
Member Author

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.

@dbauszus-glx dbauszus-glx linked a pull request Feb 13, 2024 that will close this issue
mapp.layer.styleParser() method #1132
Merged
@dbauszus-glx dbauszus-glx changed the title style.style styles assignment & merge style.style styles assignment & merge (styleParser) Mar 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@dbauszus-glx dbauszus-glx

Labels
Bug A genuine bug. There must be some form of error exception to work with. Code Issues related to the code structure and performance. Feature New feature requests or changes to the behaviour or look of existing application features. RFC Request for Comment or Change.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

mapp.layer.styleParser() method dbauszus-glx/xyz_dev
2 participants
@dbauszus-glx @simon-leech