Search code examples
svgd3.jsdrag-and-dropclojurescriptshadow-cljs

rid3, shadow-cljs & drag; different behavior in dev and prod

I'm creating an application which can be used to make an overview of your IT-Landscape. Currently it can show a table with the interfaces in your environment and their connected applications. It is also capable of creating an SVG image from this data. The data it self can be added via API calls.

I started with a project via:

leiningen new luminus versiontracker +h2 +shadow-cljs +kee-frame +swagger +(some other)

To be able to generate the SVG file with drag-and-drop support I added rid3 to the project .clj file.

When I run the application in development mode:

lein repl

and

lein shadow-cljs watch app

I can drag any item in the SVG file that is generated. I can click on a circle and drag it to any place I want.

However when I create the 'production' version with:

lein uberjar

and then run this application using:

java -Dconf=config.edn -jar versiontracker.jar

Dragging an object is not working properly. The whole SVG is selected instead of a single object within the SVG image; which result in strange drag-and-drop behavior.

Looking at the event through the console window I can see different behavior.

  • In the development environment if I grab a circle (which has the drag function attached) the srcElement in the sourceEvent is the text that is displayed on top of this circle. Although not the circle is selected dragging works as expected. The selected item follows the mouse while dragging.
  • In the 'production' environment if I grab a circle the srcElement in the sourceEvent is the complete svg; which result in strange drag-and-drop behavior. The selected item does not follow the mouse but the items do start moving around in an unpredictable way.

Go to Version Tracker download the release with tag V0.3.0 for the production version (there is also an H2 database with some sample data) and compare it to the development version by checking out the project.

Any help is appreciated

Solution

  • Your error description is a bit lacking and the project is far too complex to quickly reproduce.

    Do you get any externs inference warnings when building? Do you get any errors/warnings in the Browser console with a production build?

    The most likely cause here is externs. Meaning that property names such as in this (set! (.-fx d) (.-x event)) may end up getting renamed or stripped. As such it would break any behavior that relies in picking the correct names. See the documentation for further info on the subject. It might be enough to add a couple ^js hints in the proper places.

    You are also using a rather old shadow-cljs version (current as of today is 2.16.10). So you need to opt-in to get externs inference warnings via :compiler-options {:infer-externs :auto} in your build config. The newer versions have this enabled by default.