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)

Clickarea / Vanggebied

Het is mogelijk om gebruik te maken van 'clickareas', door de useClickArea input mee te geven aan de IMX-Viewer. Een clickarea is een onzichtbare kopie van een lijntje, die het makkelijker maakt om een element aan te klikken.

<imx-viewer id="imxviewercontainer" [svgInfo]="svgInfo"
			[clickableIds]="clickableIds$ | async"
			(clickHandler)="handleImxviewClick($event)"
            [useClickArea]="true">
</imx-viewer>

Indien useClickArea aan staat, dan wordt dit toegepast voor alle elementen van:

• clickableIds
• rightClickableIds
• popoverInfos

Alleen elementen die als 'child' element een polyline hebben worden ondersteund. Hieronder een voorbeeld element:

<g id="p6012dc79-86c2-4fae-a5b2-503af2fe0b34">
    <polyline class="ci144 lw4 L60" points="432.250,168.625 437.000,168.625"></polyline>      
</g>

De onzichtbare elementen worden standaard voorzien van de onderstaande CSS class. Middels CSS variabelen is het mogelijk om dit vanuit een applicatie te overschrijven, zie https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

.imxview-selected > polyline.imxview-clickarea, polyline.imxview-clickarea {
    stroke: var(--imxview-clickarea-stroke, transparent);
    stroke-width: var(--imxview-clickarea-stroke-width, 10px);
    stroke-dasharray: none;
}

Met de onderstaande css kan de default breedte van een clickarea aangepast worden, default is 10px.

:root {
    --imxview-clickarea-stroke-width: 20px;
}

DGN.css

• De standaard DGN.css wordt meegeleverd met IMX-viewer het is mogelijk om deze op te nemen in een project door deze te importeren. @import "~@loxia/imx-viewer/css/dgn.css"; Door eerst de dgn.css te importeren en daarna eigen css te definieren kan deze worden overschreven zonder gebruik van !important. Het gebruik van !important om css te overschijven is ongewenst.
• Er kan ook een inline dgn.css import worden gedaan in de SVG (@import url("dgn.css")). De dgn.css import werkt alleen indien er een dgn.css aanwezig is op /dgn.css, bijv (www.testapp.com/dgn.css). Het mechanisme hiervoor is in te schakelen door de input 'inlineDgnCssImport' op true te zetten

Installeren

npm install --save @loxia/imx-viewer

En installeer de peer dependencies!
npm install --save [email protected]

Lokaal starten

Front-end

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

Release Notes

15.0.0 04-11-2024

• PITS-1010: fix twitching on railconnection detail switch (This reintroduces bug in MST (https://rigd-loxia.atlassian.net/browse/PW-13354) which will need to be fixed through the ImxViewerBehaviourApi)

14.0.0 11-09-2024

• BREAKING CHANGES:
  • PW-18818 Upgrade to Angular 18

13.3.4 09-09-2024

• PITS-616 svg presentatie fix voor hoogte en slepen

13.3.3 26-08-2024

• PITS-617 Pits needs to store and reset scroll position, so pan event emitted from imx-viewer.

13.3.2 13-08-2024

• add missing font size to dgn.css

13.3.1 26-06-2024

• PITS-139 objecten markeren
  • imx-viewer now calls puicHelper.setRootSvg when svg is loaded

13.3.0 13-05-2024

• RPE-80 add functionality to align svg's

13.2.1 04-04-2024

• PW-16727 Fixing API leakage

13.2.0 02-04-2024

• PW-16727 Now allowing the override of initial zoom and pan behaviour (Incorrect API, use 13.2.1!)

13.1.0 11-03-2024

• MST-792 Clippath geintroduceerd die de render load beperkt en dus performance verbeterd bij zoomenen en pannen

13.0.0 07-03-2024

• PW-16022 Breaking change: Update to Angular 17

12.0.3 29-02-2024

• PW-16749 fix sonar

12.0.2 14-12-2023

• PW-14837 Add missing font class

12.0.1 19-10-2023

• MST-445 fix issue waardoor libraries (MST) het interne interface van svg-pan-zoom niet builden

12.0.0 22-08-2023

• PW-13354 reset svgPanZoomRef in updateDOM
• BREAKING CHANGES:
  • PW-11796 Upgraded naar Angular 16

11.0.0 05-07-2023

BREAKING CHANGES:

• PW-11796 Upgraded naar Angular 15

10.0.0 21-06-2023

BREAKING CHANGES:

• PW-11769 Upgraded naar Angular 14

9.4.2 10-08-2023

• PW-13354 reset svgPanZoomRef in updateDOM (hotfix)

9.4.1 11-05-2023

• PW-12771 OnDestroy wordt svgPanZoomRef opgeruimd

9.4.0 25-04-2023

• PW-10552 Popover title als innerHtml. Maakt het mogelijk om ook HTML elementen te injecteren

9.3.0 11-04-2023

• PW-7230 wegwerken dataurl (niet gemaakt voor in de browser, maar in NodeJS) en daarmee stream en utl dependency.

9.2.0 14-03-2023

• PW-11548 toevoegen styles die in CE te kiezen zijn.

9.1.2 10-02-2023

• PW-11548 fix line thickness and font size (pt -> px)

9.1.0 16-12-2022

• PW-9449 verwijder inline styles uit svg's
• PW-9449 inlineDgnCssImport is nu default false!

9.0.1 14-03-2022

• PW-7091 Fix voor maken van SvgPanZoomRef

9.0.0 07-03-2022

BREAKING CHANGES

• Upgraded de SVG-IMX-Viewer naar Angular 13

8.0.0 15-02-2022

BREAKING CHANGES

• Upgraded de SVG-IMX-Viewer naar Angular 12

7.2.1 08-02-2022

• PW-7164 Bugfix voor de verdwijnende mousepointer

7.2.0 28-01-2022

• Vanggebied bij aanklikken elementen groter maken
  • functionaliteit aan en uit te zetten via flag 'useClickArea'
  • dgn.css import (@import url("dgn.css"))in de svg is nu optioneel
  • dgn.css wordt meegeleverd in npm package
• Bugfix: clickhandlers ook geplaatst op elementen met PUIC als class

7.1.2 18-10-2021

• Output event wanneer SVG('s) laden is afgerond

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