Installation

1. Entwicklung

1.1. Installation aus den Quellen

mkdir -p ~/projects && cd ~/projects
git clone git@bitbucket.org:locr/jsicondisplacement.git JsIconDisplacement
cd JsIconDisplacement
npm install
# für automatisiertes Testen
npm test
# um einen Webserver auf port 3000 zu starten (für manuelle tests)
npm start

2. Verwendung

2.1. über Kommandozeile

Beispiel input.json

{
    "space": {
        "damping": 0.01,
        "maxNumberOfSteps": 1000,
        "maxSpringStiffness": 1000,
        "maxSpringDamping": 10
    },
    "icons": [
        {
            "x": 387.381556,
            "y": 163.052253,
            "m": 1,
            "r": 45,
            "distance": 45
        },
        {
            "x": 478.391148,
            "y": 326.109461,
            "m": 1,
            "r": 45,
            "distance": 45
        },
        {
            "x": 80.546928,
            "y": 247.315659,
            "m": 1,
            "r": 45,
            "distance": 45
        },
        {
            "x": 557.453072,
            "y": 69.264444,
            "m": 1,
            "r": 45,
            "distance": 45
        },
        {
            "x": 154.707453,
            "y": 0,
            "m": 1,
            "r": 45,
            "distance": 45
        },
        {
            "x": 311.843714,
            "y": 600,
            "m": 1,
            "r": 45,
            "distance": 45
        },
        {
            "x": 330.890968,
            "y": 3.540705,
            "m": 1,
            "r": 49,
            "distance": 49
        },
        {
            "x": 222.213063,
            "y": 453.221985,
            "m": 1,
            "r": 49,
            "distance": 49
        }
    ]
}

Beispielaufruf (json-Ausgabe)

node ./src/displace.cli.mjs < test/assets/input.json

Beispielausgabe als json

{
    "icons": [
        {
            "x": 342.48324212982516,
            "y": 238.9554788361184,
            "origin-x": 387.381556,
            "origin-y": 163.052253,
            "m": 1,
            "r": 45,
            "distance": 45
        },
        {
            "x": 555.6572973380045,
            "y": 376.6214582739604,
            "origin-x": 478.391148,
            "origin-y": 326.109461,
            "m": 1,
            "r": 45,
            "distance": 45
        },
        {
            "x": -11.546512009713652,
            "y": 257.90927388957215,
            "origin-x": 80.546928,
            "origin-y": 247.315659,
            "m": 1,
            "r": 45,
            "distance": 45
        },
        {
            "x": 645.3868609128315,
            "y": 40.36206190678112,
            "origin-x": 557.453072,
            "origin-y": 69.264444,
            "m": 1,
            "r": 45,
            "distance": 45
        },
        {
            "x": 91.99065456163262,
            "y": -67.79098656067258,
            "origin-x": 154.707453,
            "origin-y": 0,
            "m": 1,
            "r": 45,
            "distance": 45
        },
        {
            "x": 325.89953273814956,
            "y": 691.1243075146512,
            "origin-x": 311.843714,
            "origin-y": 600,
            "m": 1,
            "r": 45,
            "distance": 45
        },
        {
            "x": 335.91766726487293,
            "y": -97.87226413704586,
            "origin-x": 330.890968,
            "origin-y": 3.540705,
            "m": 1,
            "r": 49,
            "distance": 49
        },
        {
            "x": 136.8535058443356,
            "y": 505.08673812137647,
            "origin-x": 222.213063,
            "origin-y": 453.221985,
            "m": 1,
            "r": 49,
            "distance": 49
        }
    ]
}

Beispielaufruf (svg-Ausgabe)

node ./src/displace.cli.mjs --output-format=svg < test/assets/input.json

Beispielausgabe (output.svg)

SVG Ergebnis

2.2. über Webseite einbinden

In das Projekt als git submodule einbinden

cd ~/projects/MyProject/libraries
git submodule add git@bitbucket.org:locr/jsicondisplacement.git JsIconDisplacement

In die Webseite einbinden

<!DOCTYPE html>
<html>
    <head>
        <script src="./libraries/JsIconDisplacement/src/cp.js"></script>
        <script type="module">
            import displaceIcons from './libraries/JsIconDisplacement/src/displace.lib.mjs';

            document.addEventListener('DOMContentLoaded', async () => {
                const icons = [
                    {
                        x: 10,
                        y: 15,
                        m: 1,
                        r: 45,
                        distance: 45
                    },
                    {
                        x: 55,
                        y: 30,
                        m: 1,
                        r: 45,
                        distance: 45
                    }
                ];
                const displacedIcons = await displaceIcons(icons);
                console.log(displacedIcons);
            });
        </script>
    </head>
    <body>
    </body>
</html>