Interceptor Beispiel: ToolGroup/Werzeugoption beeinflussen

Beispiel Interceptor, um in Embedded Documents die Edit-Optionen einer ToolGroup/Werzeugoption zu beeinflussen.

Zur Vorbelegung eines Werkzeugs mit bestimmt Einstellungen (z.B. Farbe oder Breite) wird die Funktion initEditorConfiguration verwendet. Die Veränderung der UI-Elemente/Werkzeug findet in der Funktion updateEditorConfiguration statt.

Unter Method 1 werden einzelne Werkzeuge innerhalb einer ToolGroup ausgeblendet. Die Konfigurationsmöglichkeiten des Tools bleiben erhalten.

Method 2 blendet nicht nur einzelne Werkzeug-Optionen aus - sondern gleich die ganze Box mit den Werkzeug-Optionen und es kann nur noch das eine vorgegebene, erlaubte Werkzeug verwendet werden.

const presetInterceptor = {
	/** Predefine color and size of a rectangle **/
    initEditorConfiguration(instance) {
        const { documentViewer, Annotations } = instance.Core;
		
        documentViewer.getTool('AnnotationCreateRectangle').setStyles(currentStyle => ({
            StrokeColor: new Annotations.Color(78, 125, 233),
            StrokeThickness: 3
        }));
	},
	/** Disable buttons on toolBarBox **/
	updateEditorConfiguration: async (instance, info, config) => {
		/** 
		* Method 1:
		* Disable buttons on toolsOverlay (selection of different predefined tools of the same type)
		**/
		instance.UI.disableElements(['rectangleToolButton2', 'rectangleToolButton3', 'rectangleToolButton4']);		
		
		/**
		* Method 2:
		* Completely remove the toolsOverlay from Edit-Menu 
		* Note: at least 1 element is required (see above disableElements) - otherwise the complete tool disappears
		**/
		instance.UI.addEventListener('click', event => {
		  if(event.toElement.dataset.element == "shapeToolGroupButton") {
				const doc = document.getElementById("webviewer-1").contentDocument;			  
				const element = doc.querySelector("button[data-element='rectangleToolButton']")
				
				/** Remove the complete toolOverlay but keep the main button on the left side **/
				element.parentElement.parentElement.parentElement.style.display = "none";
		  }
		});
	}
}

window.ed.registerInterceptor(presetInterceptor);
2 Likes