Javascript integration - KiCad Web Viewer

Help / Discuss
1

Is there anyone who could help me with integrating this javascript to xwiki - KiCad Web Viewer | Climbers.net ?
At the begining I attached the javascript as JavaScriptExtension in objects of the page and I added CSS as StyleSheetExtension in the same way. I set both of them to be used on this page or on demand so I expect they are loaded automatically on this page. Then I inserted following code to the page:

{{velocity}}
  {{html clean="false"}}
    $doc.getAttachment('interior.svg').getContentAsString()
    <script>
      KiCadWebView.schematic('my_schematic');
    </script>
  {{/html}}
{{/velocity}}

But it says these errors in web inspector:

  • Uncaught ReferenceError: KiCadWebView is not defined
  • Uncaught Error: Mismatched anonymous define() module:… in require.min.js

It seems like the javascript (JSX) is loaded after the code above… But it doesn’t work even if I enter whole the javascript code in JSX. As I found here the second error is related to requirejs but I don’t understand the background so I just tried copy & paste solution from another thread:

{{velocity}}
  {{html clean="false"}}
    $doc.getAttachment('interior.svg').getContentAsString()
    <script>
      require.config({
        paths: {
          'KiCad': 'https://xwiki.example/bin/download/KiCad%20Web%20Viewer/WebHome/KiCadWebView'
        }
      });
      require(['KiCad'], function(KiCad) {
        KiCadWebView.schematic('my_schematic');
      });
    </script>
  {{/html}}
{{/velocity}}

This is close to desired result but there is still error in web inspector:

  • Uncaught ReferenceError: SVGPanZoom is not defined
    Although the SVGPanZoom is in the javascript library (KiCadWebView.js).

Then I tried the most trivial way:

{{velocity}}
  {{html clean="false"}}
    $doc.getAttachment('interior.svg').getContentAsString()
    <script>
      $doc.getAttachment('KiCadWebView.js').getContentAsString()
      KiCadWebView.schematic('my_schematic');
    </script>
  {{/html}}
{{/velocity}}

But it’s almost same:

  • Uncaught ReferenceError: SVGPanZoom is not defined
  • Mismatched anonymous define() module: function () { ‘use strict’;

Any help is appreciated!

2

KiCadWebView relies on a global variable named SVGPanZoom which is not nice. This global variable is defined only when SVGPanZoom is loaded without RequireJS. When RequireJS is present, as is the case in XWiki, the SVGPanZoom module should be accessed through RequireJS, which KiCadWebView obviously doesn’t do…

You cannot change the code of KiCadWebView (but you can report an issue on their side). Your only option is to set the SVGPanZoom global variable that KiCadWebView expects. I would put the KiCadWebView code and your integration code in two separate pages (JSX objects). The integration code should probably look like this:

require.config({
  paths: {
    // KiCadWebView doesn't define a RequireJS module but it bundles SVGPanZoom which defines one.
    'SVGPanZoom': 'https://xwiki.example/bin/download/KiCad%20Web%20Viewer/WebHome/KiCadWebView'
  }
});
require(['SVGPanZoom'], function(SVGPanZoom) {
  window.SVGPanZoom = SVGPanZoom;
  KiCadWebView.schematic('my_schematic');
});

Hope this helps,
Marus

3

Marus, thanks for your help! After some experiments I got it work. There are some troubles with sizing elements (viewbox) but it is another story…

Below is code that worked for me:

{{velocity}}
  {{html clean="false"}}
    $doc.getAttachment('interior.svg').getContentAsString()
    #set ($discard = $xwiki.jsx.use('KiCad WebWeb Viewer.WebHome'))
  {{/html}}
{{/velocity}}
{{html clean="false"}}
<script>
  require.config({
    paths: {
      'SVGPanZoom': 'https://wiki.mwmotors.cz/bin/download/KiCad%20Web%20Viewer/WebHome/KiCadWebView'
    }
  });
  require(['SVGPanZoom'], function(SVGPanZoom) {
    window.SVGPanZoom = SVGPanZoom;
    var el = document.getElementsByTagName('svg')[0]; // first svg on page
    KiCadWebView.schematic(el);
  });
</script>
{{/html}}