<EdgePropertyMappingsInspector/>

This component automatically renders a form for editing edge properties based on the edge property mappings defined on the surface. It is designed for use inside of an Inspector and provides an easy way to allow users to customize edge appearance and behavior.

Usage

If you haven't yet read the docs for InspectorComponent we'd recommend it.

This component is used in the template for an inspector. It uses the useInspector() hook to resolve an inspector to attach to.

import { useState } from "react"
import { EdgePropertyMappingsInspector, InspectorComponent } from "@visuallyjs/browser-ui-react"

export default function MyInspectorComponent(props) {

    return <InspectorComponent>

        {(current) => {
            
            { current.objectType === Edge.objectType &&
                <EdgePropertyMappingsInspector />
            }
        }}

    </InspectorComponent>
}
    

Props

EdgePropertyMappingsInspectorProps

Props for the EdgePropertyMappingsInspector component.

Name	Type	Description
cssClass?	string	Optional class name to use on the wrapper div. Defaults to vjs-inspector-section.
getPropertyName?	(pm:PropertyMapping<EdgeMapping>) => string	Optional, you can implement this method to return your own names to use for properties in the inspector.
mappings?	EdgePropertyMappings	Optional property mappings to render a form for. The default behaviour is to retrieve the property mappings from the inspector context
showName?	boolean	Optional, whether or not to show property names. Defaults to true.

Edge Mappings

This component expects that you have some edge mappings declared on your surface - it is these that the component uses to build the form.

Edge mappings allows you to match specific values for a given property to a set of config options for an edge.

An edge mapping declares a property, which is the name of some property an edge's backing data that VisuallyJs will attempt to match. In the code snippet below we're matching the property lineStyle. Then there is a mappings section, which is an object whose keys are the values we're matching.

In this example we see four possible matches - "source", "target", "plain" and "dashed". Each match then declares a set of zero or more configuration options for the edge.

The name property is optional; it is used in the edge property mapper inspector as the default label to show for the section pertaining to the property mapping. If omitted, the value of property will be used as the section label.

{
    "property": "lineStyle",
    "name": "Line Style",
    "mappings": {
      "source": {
        "overlays": [
          {
            "type": "Arrow",
            "options": {
              "location": 0,
              "direction": -1,
              "width": 5,
              "length": 10
            }
          }
        ]
      },
      "target": {
        "overlays": [
          {
            "type": "Arrow",
            "options": {
              "location": 1,
              "width": 5,
              "length": 10
            }
          }
        ]
      },
      "plain": {},
      "dashed": {
        "cssClass": "some-css-class"
      }
    }
}