Allow customizing the shape picker

[thecodewarrior]

• [x] I agree to follow the Code of Conduct that this project adheres to.
• [x] I have searched the issue tracker for a feature request that matches the one I want to file, without success.

Is your feature request related to a problem? Please describe. I have a significant library of custom shapes, and it would be extremely convenient if I could customize the connection arrow popup to use them instead of the default, hard-coded shapes.

Along with that I'd like to be able to customize the distance the shape picker uses, since I usually space my nodes with a gap of 40pt. It looks like the default implementation does some kind of center-to-center offset, so the offset type would have to be configurable as well.

Describe the solution you'd like A config option to customize the shape picker and cell spacing. The shape library could use style+size+content, as with the current picker code, it could use the same syntax as custom libraries, or it could straight up be a reference to a library XML file, similar to the "customLibraries": [] config option.

Style+size+content syntax:

{
  "shapePicker": [
    {"style": "whiteSpace=wrap;html=1;points=[[0,0,0,40,0],[0,0.5,0,0,-10],[0,0.5,0,0,0],[0,0.5,0,0,10],[0,1,0,40,0],[0.5,0,0,0,0],[0.5,1,0,0,0],[1,0,0,-40,0],[1,0.5,0,0,-10],[1,0.5,0,0,0],[1,0.5,0,0,10],[1,1,0,-40,0]];", "w": 120, "h": 40},
    {"style": "shape=parallelogram;perimeter=parallelogramPerimeter;html=1;fixedSize=1;points=[[0,0,0,40,0],[0,0.25,0,15,0],[0,0.5,0,10,0],[0,0.75,0,5,0],[0,1,0,40,0],[0.5,0,0,0,0],[0.5,1,0,0,0],[1,0,0,-40,0],[1,0.25,0,-5,0],[1,0.5,0,-10,0],[1,0.75,0,-15,0],[1,1,0,-40,0]];", "w": 120, "h": 40},
    {"style": "shape=hexagon;perimeter=hexagonPerimeter2;html=1;fixedSize=1;points=[[0,0,0,40,0],[0,0.25,0,10,0],[0,0.5,0,0,0],[0,0.75,0,10,0],[0,1,0,40,0],[0.5,0,0,0,0],[0.5,1,0,0,0],[1,0,0,-40,0],[1,0.25,0,-10,0],[1,0.5,0,0,0],[1,0.75,0,-10,0],[1,1,0,-40,0]];", "w": 120, "h": 40}
  ],
  "shapePickerOffset": {
    "type": "space-between",
    "offset": 40
  }
}

Library syntax:

{
  "shapePicker": [
    {
      "xml": "<mxGraphModel><root><mxCell id=\"0\"/><mxCell id=\"1\" parent=\"0\"/><mxCell id=\"2\" value=\"\" style=\"rounded=0;whiteSpace=wrap;html=1;points=[[0,0,0,40,0],[0,0.5,0,0,-10],[0,0.5,0,0,0],[0,0.5,0,0,10],[0,1,0,40,0],[0.5,0,0,0,0],[0.5,1,0,0,0],[1,0,0,-40,0],[1,0.5,0,0,-10],[1,0.5,0,0,0],[1,0.5,0,0,10],[1,1,0,-40,0]];\" vertex=\"1\" parent=\"1\"><mxGeometry width=\"120\" height=\"40\" as=\"geometry\"/></mxCell></root></mxGraphModel>",
      "w": 120,
      "h": 40,
      "aspect": "fixed"
    },
    {
      "xml": "<mxGraphModel><root><mxCell id=\"0\"/><mxCell id=\"1\" parent=\"0\"/><mxCell id=\"2\" value=\"\" style=\"shape=parallelogram;perimeter=parallelogramPerimeter;html=1;fixedSize=1;points=[[0,0,0,40,0],[0,0.25,0,15,0],[0,0.5,0,10,0],[0,0.75,0,5,0],[0,1,0,40,0],[0.5,0,0,0,0],[0.5,1,0,0,0],[1,0,0,-40,0],[1,0.25,0,-5,0],[1,0.5,0,-10,0],[1,0.75,0,-15,0],[1,1,0,-40,0]];\" vertex=\"1\" parent=\"1\"><mxGeometry width=\"120\" height=\"40\" as=\"geometry\"/></mxCell></root></mxGraphModel>",
      "w": 120,
      "h": 40,
      "aspect": "fixed"
    },
    {
      "xml": "<mxGraphModel><root><mxCell id=\"0\"/><mxCell id=\"1\" parent=\"0\"/><mxCell id=\"2\" value=\"\" style=\"shape=hexagon;perimeter=hexagonPerimeter2;html=1;fixedSize=1;points=[[0,0,0,40,0],[0,0.25,0,10,0],[0,0.5,0,0,0],[0,0.75,0,10,0],[0,1,0,40,0],[0.5,0,0,0,0],[0.5,1,0,0,0],[1,0,0,-40,0],[1,0.25,0,-10,0],[1,0.5,0,0,0],[1,0.75,0,-10,0],[1,1,0,-40,0]];\" vertex=\"1\" parent=\"1\"><mxGeometry width=\"120\" height=\"40\" as=\"geometry\"/></mxCell></root></mxGraphModel>",
      "w": 120,
      "h": 40,
      "aspect": "fixed"
    }
  ],
  "shapePickerOffset": {
    "type": "space-between",
    "offset": 40
  }
}

Describe alternatives you've considered The only alternative I know of is to continue doing what I've been doing: dragging shapes from the sidebar and/or duplicating existing shapes.

Additional context The default styles vs. what I want: