ReferenceError: CanvasPattern is not defined while using standalone version

[VictorPato]

Hi, I love this tool, but I have been having trouble while using the CLI standalone version.
I have no problem using the VSCode extension, but when I try to use the render command I get an error:

➜  documentation-pintora node --version
v16.13.2
➜  documentation-pintora npm i -g @pintora/cli

changed 188 packages, and audited 189 packages in 21s

9 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
➜  documentation-pintora pintora render --input ./input.pintora --output ./output/test.png
/Users/administrador/.nvm/versions/node/v16.13.2/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t||self).pintora={})}(this,function(t){var e={__pro ....
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            

ReferenceError: CanvasPattern is not defined
    at WM (/Users/administrador/.nvm/versions/node/v16.13.2/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1:501623)
    at tE (/Users/administrador/.nvm/versions/node/v16.13.2/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1:504326)
    at e.draw (/Users/administrador/.nvm/versions/node/v16.13.2/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1:508895)
    at eE (/Users/administrador/.nvm/versions/node/v16.13.2/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1:504457)
    at e.draw (/Users/administrador/.nvm/versions/node/v16.13.2/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1:507588)
    at eE (/Users/administrador/.nvm/versions/node/v16.13.2/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1:504457)
    at e._drawRegion (/Users/administrador/.nvm/versions/node/v16.13.2/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1:531469)
    at Timeout._onTimeout (/Users/administrador/.nvm/versions/node/v16.13.2/lib/node_modules/@pintora/cli/node_modules/@pintora/standalone/lib/pintora-standalone.umd.js:1:531883)
    at listOnTimeout (node:internal/timers:557:17)
    at processTimers (node:internal/timers:500:7)
➜  documentation-pintora 

Is it something to do with my dependencies? Is there anyway to fix it? Any help would be appreciated, and I can provide further information.

[hikerpig]

@VictorPato Thank you for the feedback.
I dig into the compiled code and find this may somehow relates to the color in your diagram.
Would you please paste your pintora DSL here so I can try to fix this bug and add it to the unittest ?

[VictorPato]

Sure! Had to do a bit of censoring because it's work related stuff, but the structure is intact (and the issue prevails)

sequenceDiagram
  @param actorBackground #bb99ff
  @param loopLineColor #bb99ff
  autonumber
  participant [<box> service_1] as "Service 1"
  participant [<box> service_2] as "Service 2"
  participant [<box> service_3] as "Service 3"
  participant [<box> service_4] as "Service 4"
  service_1->>+service_2: aaaaaaaaaaaaaa\naaaaaaaaaaaaaaaaaaaaaaaaaa
  service_2->>service_2: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  service_2->>service_2: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    service_2->>+service_3: aaaaaaaaaa\naaaaaaaaaaaaaaaaaaa
    service_3->>service_3: aaaaaaaaaaaaaaaaaaaaaaaaaaaa
    service_3->>service_3: aaaaaaaaaaaaaaaaaaaaaaaaaa
    service_3->>+service_4: aaaaa\naaaaaaaaaaaaaaaaaaaaaaaaaa
    service_4->>-service_3: aaaaaaaaaaaaaa
    service_3->>-service_2:aaaaaaaaaaaaaaa
  service_2-->>service_2: aaaaaaaaaaaaaaa\naaaaaaaaaaaaaaaaaaaaaaaaaaa
  service_2->>-service_1: aaaaaaaaaa
  == bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb ==
  service_2-->>service_2: aaaaaaaaaaaaaaaaa\n aaaaaaaaaaaaaaaaaaaaaaaaaa
  activate service_2
    service_2->>+service_3: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\naaaaaaaaaaaaa
    service_3->>+service_4: aaaa\naaaaaaaaaaaaaaaaaaaaaaa
    service_4->>-service_3: aaaaaa
    service_3->>service_3: aaaaaaaaaaaaaaaaaaaa\naaaaaaaaaaaaaaaaaaaaaa
    service_3->>-service_2: aaaaaa
    service_2->>service_2: aaaaaaaaaaaaaaaaaaaaaa
  alt bbbbbbbbbbbbbbbb
    service_2-->>service_2: aaaaaaaaaaaaaaaaaa
    deactivate service_2
    activate service_2
  else bbbbbbbbbbbbbbbbb
    service_2-->>-service_1: aaaaaaaaaaaaaaa\naaaaaaaaaaaaaaaaa
  end
  service_1->>+service_2: aaaaaaaaaaaaaaaaaaaaa\naaaaaaaaaaaaaaaaa
  service_2->>-service_1: aaaaaaaaaaaaaaaaaaa

[hikerpig]

@VictorPato I am able to reproduce this problem.

In this line alt bbbbbbbbbbbbbbbb , somehow the parser decides that bbbbbbbbbbbbbbbb is a color string and pass it to the renderer. And then in Node.js the node-canvas failed when accessing a non-exist-in-global-scope CanvasPattern.

Here is a quick workaround: you make some adjustment to specify both alt bgcolor and label, it will render without error.

sequenceDiagram
  alt #ffffff ok
    service_2-->>service_2: some text
  else b
  end

And I will try to fix this bug in both parser and the renderer

[VictorPato]

Thank you @hikerpig ! The workaround works correctly. Feel free to close this issue if you see fit.

[hikerpig]

Fixed in v0.6.1