inherit Name attribute from SVG using importSVG

[jus...@fantasmo.io]

Hello all,

The project I'm working on essentially creates a mini-map for a georeferenced ThreeJS scene, passing the camera position and orientation down into Paper, and it works great! One final feature I'd like to add is showing the name of the Path object that is being hovered.

I'm using D3 to convert GeoJSON to an SVG, then converting the resulting SVG into PaperJS paths using importSVG().

My SVG path elements end up looking like this:

<path d="M01.010101, ..." type="unit" name="Store A">
<path d="M02.101010, ..." type="corridor">

In brief, I have an attribute for the 'type' [either Unit or Corridor] of feature, and for the Unit-type features there is an attribute 'name'.

When a Unit-type path is hovered, I intend to display that name in a DOM element elsewhere in the page. 

I am using importSVG like this:

// Notice I'm not using Paperscript
paper.project.importSVG(document.getElementById('levelSVG'), {
    expandShapes: true, // expand shapes to full Paperjs Path objects
    applyMatrix: true, // imported items have their transformation matrices applied to their contents
    onLoad: function(item, svgData) {
      _this.setState({'levelCanvasObject': item});  // ignore this Reactiness
      item.scale(parseFloat(magnification)); // ignore this
    }
});

.. And as a result I get a beautiful interactive Canvas describing the floor the user is on!

However, I noticed that when I import the SVG, the resulting Object has this structure:

Group {
  applyMatrix: true,
  ...,
  children: [
    0: Path {
      applyMatrix: true,
      ...,
      name: null // this is what I want to populate with the name attribute
      // there is also no type attribute (so I can't tell if it's a Unit or Corridor)
    },
    ...
  ],
  ...
}

In summary, the goal is to highlight the Unit-type paths with a red color when hovered with the mouse, and use that show the Path's name somewhere in the DOM. My initial thoughts are that I should be passing the 'name' and 'type' attributes down from the SVG to the Paper paths during the import process. Then using onMouseEnter/Leave methods on each path to grab the path type; if it's a Unit type, then grab the path name and append it to a DOM element somewhere.

Am I on the right track? How can I get the name and type on each Path using importSVG? How would you recommend implementing a feature like this?

Thanks,

JJ @ Fantasmo

[jus...@fantasmo.io]

I found this in the source code:

function importPath(node) {
  return PathItem.create(node.getAttribute('d'));
}

as a helper function for importSVG()... I suppose I could try to override this, to assign the 'name' to the pathItem's [inherited from Item] name attribute after it's created. I could also probably also add the type attribute and onMouse[Enter/Leave] functionality here. 

So that's an option. What about running a long loop in the onLoad method? It's not ideal, but it could work. onLoad recieves the Object of paths as well as the SVG element, so assuming (big assumption) that they match up I could loop through one or the other and run all the operations.

onLoad: function(item, svgData) {
    // _this.setState({'levelCanvasObject': item});  // ignore
    // item.scale(parseFloat(magnification)); // ignore
    item.children.forEach((path, index) => {
      const relativeSVGPath = svgData.children[index];
      path.name = relativeSVGPath.name;
      path.type = relativeSVGPath.type;
      path.onMouseEnter(() => { /* add name to DOM element if it's a Unit type */ }
      path.onMouseLeave(() => { /* remove name from DOM element */ }
    });
}

[Stefan Krüger]

Hello JJ @ Fantasmo,

if i remember correctly if you have id attributes in the svg they get converted to the name properties...

than only your type thing is missing..

but if the ids/names are unique you eventually could use the browser build in search to find the node in the svg document and grab the 'type' thing..

- just some thoughts...

sunny greetings

stefan