AstroDraw / AstroChart

A free and open-source TypeScript library for generating SVG charts to display planets in astrology.
https://astrodraw.github.io
MIT License
212 stars 55 forks source link

[feature] Add setting to enable user to create custom symbols #17

Closed afucher closed 2 years ago

afucher commented 2 years ago

The settings now will have a new attribute CUSTOM_SYMBOL_FN that will receive the same parameters that the internal getSymbol receives and in addition the context element.

Example creating a custom svg element

function custom_symbol(name, x, y, context) {
  console.log(name, x, y);
  const symbol = document.createElementNS(context.root.namespaceURI, 'circle')
  symbol.setAttribute('cx', x - astrology.SIGNS_STROKE)
  symbol.setAttribute('cy', y - astrology.SIGNS_STROKE)
  symbol.setAttribute('width', '20px')
  symbol.setAttribute('height', '20px')
  symbol.setAttribute('r', '10')
  symbol.setAttribute('fill', 'blue')
  return symbol;
}
window.onload = function () {
  var chart = new astrology.Chart('paper', 600, 600, {CUSTOM_SYMBOL_FN: custom_symbol});  
  chart.radix( data).aspects();
};

Example with image from a external source

function custom_symbol(name, x, y, context) {
  console.log(name, x, y);
  if(name == astrology.SYMBOL_MARS) return null; // null or undefined will fallback to the defaul implemetation
  const symbol = document.createElementNS(context.root.namespaceURI, 'image')
  symbol.setAttribute('href', 'http://localhost:8080/assets/Sun.svg')
  symbol.setAttribute('x', x - 10)
  symbol.setAttribute('y', y - 10)
  symbol.setAttribute('width', '20px')
  symbol.setAttribute('height', '20px')
  return symbol;
}
window.onload = function () {
  var chart = new astrology.Chart('paper', 600, 600, {CUSTOM_SYMBOL_FN: custom_symbol});
  chart.radix(data).aspects();
};

closes #5