@loxia/imx-viewer 7.1.2 → 7.2.0

package/README.md

@@ -35,7 +35,6 @@ Plaats het component in de html, bv:
   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;
@@ -46,6 +45,51 @@ Plaats het component in de html, bv:
 - 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
+* Standaard wordt er een inline dgn.css import gedaan in de SVG (@import url("dgn.css")).
+  De dgn.css import werkt alleen indien er een dgn.css aanwezig is op <base-url>/dgn.css, bijv (www.testapp.com/dgn.css)
+  * Het is ook mogelijk dit uit te schakelen door de input 'inlineDgnCssImport' op false te zetten
+* 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.   
+
 ## Installeren
 	npm install --save @loxia/imx-viewer
 	
@@ -62,6 +106,13 @@ Plaats het component in de html, bv:
 
 ## Release Notes
 
+### 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