NPM angular componenten ten behoeve van visualisatie van IM-Spoor data.
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!)
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)
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;
}
- 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
npm install --save @loxia/imx-viewer
En installeer de peer dependencies!
npm install --save svg-pan-zoom@3.6.1
npm start- Ctrl-P (in de playground)
http://localhost:4201/
- PW-16727 Fixing API leakage
- PW-16727 Now allowing the override of initial zoom and pan behaviour (Incorrect API, use 13.2.1!)
- MST-792 Clippath geintroduceerd die de render load beperkt en dus performance verbeterd bij zoomenen en pannen
- PW-16022 Breaking change: Update to Angular 17
- PW-16749 fix sonar
- PW-14837 Add missing font class
- MST-445 fix issue waardoor libraries (MST) het interne interface van svg-pan-zoom niet builden
- PW-13354 reset svgPanZoomRef in updateDOM
- BREAKING CHANGES:
- PW-11796 Upgraded naar Angular 16
BREAKING CHANGES:
- PW-11796 Upgraded naar Angular 15
BREAKING CHANGES:
- PW-11769 Upgraded naar Angular 14
- PW-13354 reset svgPanZoomRef in updateDOM (hotfix)
- PW-12771 OnDestroy wordt svgPanZoomRef opgeruimd
- PW-10552 Popover title als innerHtml. Maakt het mogelijk om ook HTML elementen te injecteren
- PW-7230 wegwerken dataurl (niet gemaakt voor in de browser, maar in NodeJS) en daarmee stream en utl dependency.
- PW-11548 toevoegen styles die in CE te kiezen zijn.
- PW-11548 fix line thickness and font size (pt -> px)
- PW-9449 verwijder inline styles uit svg's
- PW-9449 inlineDgnCssImport is nu default false!
- PW-7091 Fix voor maken van SvgPanZoomRef
BREAKING CHANGES
- Upgraded de SVG-IMX-Viewer naar Angular 13
BREAKING CHANGES
- Upgraded de SVG-IMX-Viewer naar Angular 12
- PW-7164 Bugfix voor de verdwijnende mousepointer
- 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
- Output event wanneer SVG('s) laden is afgerond
- PW-5365 Bugfixes:
- garanderen dat SvgPanZoomInstance altijd eerder is dan SVG's laden.
- robuust tegen situatie dat er twee imx-viewers bestaan in DOM
- PW-5134: getSvgPanZoomInstance() bevat nu altijd een waarde en niet pas als de SVG is geladen.
- PW-1356 svg-pan-zoom toegevoegd aan types in TS config, zodat de namespace bekend is bij gebruik van imx-viewer als dependency
- PW-4866 ongebruikte dependencies verwijderd
- 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
- External dependency name declared so that the rollup knows what to look for when building the UMD bundle
- Updated to Angular 10
- MST-437: betere afhandeling van hetzelfde spoorse element op 2 bladen
Meer uitleg in de readme
MST-387: gebruik LayerX/LayerY voor de popover bepaling
Bootstrap dependency verwijderd
Dependencies geupdate
Upgrade naar Angular 8
De aanroepmethode voor npm is aangepast zodat deze gelijk is met andere producten
viewbox offset support
add loading by url support
Kleine verbetering: zoomfactor aangepast & offset aangepast
Kleine verbetering voor focus op klein element
Add focus support api
Positiebepaling van context menu en popovers verbeterd.
right click ondersteuning toegevoegd
html content support for popovers
Add popover support
Bugfix zodat er maar een mouselistener aan een element wordt gekoppeld en weer netjes verwijderd indien gewenst.
Race condition fix.
...
Support hersteld voor http-urls. SvgInfo is nu getypeerd.
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.
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.
Eerste release