@loxia/imx-viewer

## Beschrijving NPM angular componenten ten behoeve van visualisatie van IM-Spoor data.

Stats

StarsIssuesVersionUpdatedCreatedSize
@loxia/imx-viewer
7.1.1-1632913749-16342092154 days ago4 years agoMinified + gzip package size for @loxia/imx-viewer in KB

Readme

Software Component: IMX-viewer

Beschrijving

NPM angular componenten ten behoeve van visualisatie van IM-Spoor data.

IMX-Viewer component

Deze viewer maakt het mogelijk om (meerdere) SVG's met puic referenties te tonen, hierop in te zoomen/pannen. Het is mogelijk om elementen of groepen elementen met puic referenties een custom class te geven of te verwijderen zodat de SVG aan te sturen is. Deze classes dient de applicatie zelf defineren in de applicatie css, via de css kan de lijndikte, kleur en visibility bijvoorbeeld worden aangestuurt. Ter interactie voor de gebruiker zijn elementen op basis van puics klikbaar te maken (linker en rechter muis klik), als de user een muis klik doet wordt er een event opgeleverd die de puic en browser-event bevat. Op een element of groep van elementen met een puic kan een popover worden getoont

Note: Een vereiste (vanuit de svg spec.) voor de viewer is dat de puic UUID's in de SVG zijn geprefixed met een 'p', de api verwacht uitsluitend puics (de 'p' prefix wordt transparant afgehandeld in de imx-viewer!)

Gebruik

Plaats het component in de html, bv:

<imx-viewer id="imxviewercontainer" #imxviewercontainer [svgInfo]="svgInfo"
            [selectieInfos]="selectieInfos$ | async"
            [clickableIds]="clickableIds$ | async"
            (clickHandler)="handleImxviewClick($event)">
</imx-viewer>
  • svgInfo is de informatie welke SVG's getoont moeten worden, via data urls:
new SvgInfo('data:image/svg+xml;utf8, < svg >...</ svg >', new Point(0, 0))
  • selectieInfos bevat de elementen die geselecteerd moeten worden op basis van hun PUIC, bijvoorbeeld:
selectieInfos.push(new SelectieInfo(['ceed826c-ee2e-4056-a4c8-a6c94e9e36a4'], 'MyCssClass'));

Aan het element worden dan de CSS classes imxview-selected en imxview-selected-MyCssClass toegevoegd. Hiermee kan het element worden vormgeven. Als het element een group (<g>) is vergeet dan niet de subelementen te selecteren.

.imxview-selected-MyCssClass * {
   stroke: green;
   fill: green;
}

Deze stylen toevoegen op het hoogste niveau en niet binnen een component.

  • clickableIds is de informatie welke elementen klikbaar moeten zijn, deze tonen hand cursor (links en rechtse muis knop support)
  • clickHandler is event emitter die vertelt welke elementpuic is geklikt (bevat ook orginele browser event)

Installeren

npm install --save @loxia/imx-viewer

En installeer de peer dependencies!
npm install --save svg-pan-zoom@3.6.1
npm install --save dataurl@0.1.0
npm install --save stream@0.0.2

Lokaal starten

Front-end

  1. npm start
  2. Ctrl-P (in de playground)
  3. http://localhost:4201/

Release Notes

7.1.1 11-08-2021

  • PW-5365 Bugfixes:
    • garanderen dat SvgPanZoomInstance altijd eerder is dan SVG's laden.
    • robuust tegen situatie dat er twee imx-viewers bestaan in DOM

7.1.0 02-08-2021

  • PW-5134: getSvgPanZoomInstance() bevat nu altijd een waarde en niet pas als de SVG is geladen.

7.0.4 17-06-2021

  • PW-1356 svg-pan-zoom toegevoegd aan types in TS config, zodat de namespace bekend is bij gebruik van imx-viewer als dependency

7.0.3 11-06-2021

  • PW-4866 ongebruikte dependencies verwijderd

7.0.2 11-05-2021

  • PW-1912 library setup aangepast om te voorkomen dat angular (core) transitief meekomt
  • MST-548 Popover breder gemaakt (100%) zodat alle tekst in de popover past

7.0.1 31-03-2021

  • External dependency name declared so that the rollup knows what to look for when building the UMD bundle

7.0.0 23-03-2021

  • Updated to Angular 10

6.0.3 23-03-2021

  • MST-437: betere afhandeling van hetzelfde spoorse element op 2 bladen

6.0.2 2020-12-01

Meer uitleg in de readme

6.0.1 2020-10-22

MST-387: gebruik LayerX/LayerY voor de popover bepaling

6.0.0 2020-08-03

Bootstrap dependency verwijderd

5.0.1 2020-07-20

Dependencies geupdate

5.0.0 2020-06-03

Upgrade naar Angular 8

4.5.7 2019-05-07

De aanroepmethode voor npm is aangepast zodat deze gelijk is met andere producten

4.5.6 2018-11-20

viewbox offset support

4.5.5 2018-10-01

add loading by url support

4.5.4 2018-09-25

Kleine verbetering: zoomfactor aangepast & offset aangepast

4.5.3 2018-07-20

Kleine verbetering voor focus op klein element

4.5.2 2018-07-20

Add focus support api

4.5.1 2018-07-10

Positiebepaling van context menu en popovers verbeterd.

4.5.0 2018-06-27

right click ondersteuning toegevoegd

4.3.0 2018-05-31

html content support for popovers

4.1.0 2018-05-30

Add popover support

4.0.7 2018-05-30

Bugfix zodat er maar een mouselistener aan een element wordt gekoppeld en weer netjes verwijderd indien gewenst.

4.0.6 2018-05-30

Race condition fix.

...

3.0.1 2017-12-12

Support hersteld voor http-urls. SvgInfo is nu getypeerd.

2.1.0 2017-11-20

imx-viewer ondersteutn ad-hoc selectie op basis van PUIC (elementen met een class die begint met een p). Als er geen class matcht wordt er als fallback gezocht naar een element met een PUIC als ID.

2.0.0 2017-11-06

imx-viewer kan nu meerdere SVG's tonen en verwacht ook als input een array van 1 of meerdere svgInfo JSON strings:

[{
    'svg': 'data:image/svg+xml,<svg witdh="100" height="200"></svg>',
    'coordinates': [0, 0]
},{
    'svg': 'data:image/svg+xml,<svg witdh="100" height="200"></svg>',
    'coordinates': [100, 0]
}]

Bij het opgeven van slechts 1 SVG is de coordinates-object optioneel. Let wel dat het nog wel een array moet zijn.

1.0.0 2017-10-31

Eerste release

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.