// not used in the code, but saved here for reference:
const portShapes = {
  inPortLeft: `
    <shape h="35" w="20" aspect="variable" strokewidth="inherit">
      <connections>
        <constraint x="0" y="0.5" perimeter="1" />
        <constraint x="1" y="0.5" perimeter="1" />
      </connections>
      <background>
      </background>
      <foreground>
        <path>
          <move x="0"  y="0" />
          <line x="20" y="17.5" />
          <line x="0"  y="35" />
          <close />
        </path>
        <fillstroke />
      </foreground>
    </shape>
  `,
  inPortRight: `
    <shape h="35" w="20" aspect="variable" strokewidth="inherit">
      <connections>
        <constraint x="0" y="0.5" perimeter="1" />
        <constraint x="1" y="0.5" perimeter="1" />
      </connections>
      <background>
      </background>
      <foreground>
        <path>
          <move x="20"  y="0" />
          <line x="0" y="17.5" />
          <line x="20"  y="35" />
          <close />
        </path>
        <fillstroke />
      </foreground>
    </shape>
  `,
  inPortTop: `
    <shape h="20" w="35" aspect="variable" strokewidth="inherit">
      <connections>
        <constraint x="0.5" y="0" perimeter="1" />
        <constraint x="0.5" y="1" perimeter="1" />
      </connections>
      <background>
      </background>
      <foreground>
        <path>
          <move x="0"  y="0" />
          <line x="35" y="0" />
          <line x="17.5"  y="20" />
          <close />
        </path>
        <fillstroke />
      </foreground>
    </shape>
  `,
  inPortBottom: `
    <shape h="20" w="35" aspect="variable" strokewidth="inherit">
      <connections>
        <constraint x="0.5" y="0" perimeter="1" />
        <constraint x="0.5" y="1" perimeter="1" />
      </connections>
      <background>
      </background>
      <foreground>
        <path>
          <move x="0"  y="20" />
          <line x="17.5" y="0" />
          <line x="35"  y="20" />
          <close />
        </path>
        <fillstroke />
      </foreground>
    </shape>
  `,

  versionedArtifact: `
    <shape h="100" w="100" aspect="variable" strokewidth="inherit">
      <connections>
        <constraint x="0" y="0" perimeter="1" />
        <constraint x="0.5" y="0" perimeter="1" />
        <constraint x="1" y="0" perimeter="1" />
        <constraint x="0" y="0.5" perimeter="1" />
        <constraint x="1" y="0.5" perimeter="1" />
        <constraint x="0" y="1" perimeter="1" />
        <constraint x="0.5" y="1" perimeter="1" />
        <constraint x="1" y="1" perimeter="1" />
      </connections>
      <background>
      </background>
      <foreground>
        <path>
          <move x="0" y="0" />
          <line x="100" y="0" />
          <line x="100" y="100" />
          <line x="0" y="100" />
          <close />
          <move x="5" y="10" />
          <line x="95" y="10" />
          <line x="95" y="90" />
          <line x="5" y="90" />
          <close />
        </path>
        <fillstroke />
      </foreground>
    </shape>
  `,
};

const encodedPortShapes = {
  inPortLeft: `stencil(pZNdD4IgFIZ/DbcNYa3rZvU/yE7JRHBAX/++Y0c3zXC2btzO+4wHfFEm81CqBpjgJZM7JoRc4wPHO42C06hCA0Wk7Ka8VkcDREL0roK7PsXOoG0JXseWyj3jW9Y6OJN54axFiXY2jMiAo0xpi2v5g2Td9s9uWnWna3CHGiJ4yjNKmTgsFmf/iGWOSep1ZH5URXXx7mpP01VJdnYevoAeN6rtdwJ6XLsbJFuba6cXGG0Hgg9Dtun7+UUydshFhsK4ADNXiXmiCWxQG0NfY+rKJh2/U/oD3sEL)`,
  inPortRight: `shape=stencil(pZNdD4IgFIZ/DbcNYa3rZvU/yE7JQnBAVv++o0eXH9ls3bid9xkP8qJMpiFXJTDBcyZ3TAi5xgeOdxoFp1GFErJIWaW8VkcDREL07gp3fYqtQdscvI41lXvGt6x2cCbTzFmLEu1sGJAeR5nSFtfyB8na7Z/ttGrfrsQdCojgKU8oZeKwWJz8I5YpJnPHkelRZdeLdzd7mq6aZWfn4QPocKnqfiegw4Wr4H24cW3f6ukMRtueYShINl0/vzhGErlIkRkX4MtdYj5TBVaojaHPce7OJiU3Kf0CTfAC)`,
  inPortTop: `shape=stencil(nZPRDoIgGIWfhtuGsNZ1s3oP0r9kIjggrbfv1183S23VDds5Z3zAAZhMQ6FqYIIXTB6YEILjgLIlKbckVaghi+Q1ymt1NkBJiN6V0Oo8DgRtC/A6dqk8Mr5nHZIzmWbOWoRoZ8NLMskRprTFufxOML4ZNvAYNKkaV6gggic3IZeJ09/g5BewTNFZO45Mzyorr97dbD6ftZpdnIeFYIxr1fU7C8a4cg1MDrfU2XI7I8BoOwHIxdZ/ISS7t4K/g2TGBfhwleivNIENamPoNa5d2azj3qUf0BtP)`,
  inPortBottom: `shape=stencil(nZNRD4IgFIV/Da8NYa3nZvU/EG/JQnBAWv++q1c3m9pWL27nnPHJPQCTeaxUA0zwiskTE0Jw/KDsSMo9SRUb0Im8VgWjCguUxBT8HTpTppFgXAXBpD6VZ8aPrEdyJnPtnUOI8S5+JLMcYco4XMufBOO7cQOvUZNq8A81JAjkZuQycfkbnP0Cljk6W+PIvFD6fgv+4crlqs3s6gOsBFPcqL7fRTDFtW9hNtzHaJNcr2ciWONmhOywXvwvDLn/Yxva+ghfzhL9jSqwQmMtXcetM1uUPLj0BAbjDQ==)`,
};

const ctrlStyle = `whiteSpace=wrap;html=1;shadow=1;resizable=0;recursiveResize=0;movableLabel=1;metaEdit=1;strokeColor=#004C99;strokeWidth=2;rounded=0;fillColor=#D4E1F5;spacingTop=-6;comic=0;rotatable=0;`;

const dataStyle = `whiteSpace=wrap;html=1;shadow=1;resizable=0;recursiveResize=0;movableLabel=1;metaEdit=1;strokeColor=#6D9656;strokeWidth=1;rounded=0;spacingTop=-6;comic=0;fontSize=12;spacing=2;spacingLeft=0;dashed=1;fillColor=#E3F7E2;rotatable=0;`;

// used for auto-rotation
const portStyles = {
  ctrlInLeft: `shape=${encodedPortShapes.inPortLeft};${ctrlStyle}`,
  ctrlInRight: `shape=${encodedPortShapes.inPortRight};${ctrlStyle}`,
  ctrlInTop: `shape=${encodedPortShapes.inPortTop};${ctrlStyle}`,
  ctrlInBottom: `shape=${encodedPortShapes.inPortBottom};${ctrlStyle}`,

  ctrlOutLeft: `shape=${encodedPortShapes.inPortRight};${ctrlStyle}`,
  ctrlOutRight: `shape=${encodedPortShapes.inPortLeft};${ctrlStyle}`,
  ctrlOutTop: `shape=${encodedPortShapes.inPortBottom};${ctrlStyle}`,
  ctrlOutBottom: `shape=${encodedPortShapes.inPortTop};${ctrlStyle}`,

  dataInLeft: `shape=${encodedPortShapes.inPortLeft};${dataStyle}`,
  dataInRight: `shape=${encodedPortShapes.inPortRight};${dataStyle}`,
  dataInTop: `shape=${encodedPortShapes.inPortTop};${dataStyle}`,
  dataInBottom: `shape=${encodedPortShapes.inPortBottom};${dataStyle}`,

  dataOutLeft: `shape=${encodedPortShapes.inPortRight};${dataStyle}`,
  dataOutRight: `shape=${encodedPortShapes.inPortLeft};${dataStyle}`,
  dataOutTop: `shape=${encodedPortShapes.inPortBottom};${dataStyle}`,
  dataOutBottom: `shape=${encodedPortShapes.inPortTop};${dataStyle}`,
};

