Merge pull request #178 from kieler/nre/cli-proxies

fixes option initialization for and handling of proxies in the CLI.
kieler · Jun 11, 2024 · 04316ac · 04316ac
2 parents b714fd8 + 75cc030
commit 04316ac
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 17 deletions.
diff --git a/packages/klighd-core/src/proxy-view/proxy-view-actions.ts b/packages/klighd-core/src/proxy-view/proxy-view-actions.ts
@@ -3,7 +3,7 @@
  *
  * http://rtsys.informatik.uni-kiel.de/kieler
  *
- * Copyright 2022-2023 by
+ * Copyright 2022-2024 by
  * + Kiel University
  *   + Department of Computer Science
  *     + Real-Time and Embedded Systems Group
@@ -217,6 +217,8 @@ export class ProxyViewActionHandler extends MouseListener implements IActionHand
                 this.optionsRegistry.onChange(() => this.proxyView.clearRenderings())
                 // Make sure to be notified when rendering options are changed
                 this.renderOptionsRegistry.onChange(() => this.proxyView.updateOptions(this.renderOptionsRegistry))
+                // Initialize the proxy view with all current options.
+                this.proxyView.updateOptions(this.renderOptionsRegistry)
                 this.onChangeRegistered = true
             }
         } else if (this.proxyView) {

diff --git a/packages/klighd-core/src/proxy-view/proxy-view-util.ts b/packages/klighd-core/src/proxy-view/proxy-view-util.ts
@@ -3,7 +3,7 @@
  *
  * http://rtsys.informatik.uni-kiel.de/kieler
  *
- * Copyright 2022-2023 by
+ * Copyright 2022-2024 by
  * + Kiel University
  *   + Department of Computer Science
  *     + Real-Time and Embedded Systems Group
@@ -718,8 +718,9 @@ export function getIntersection(p1: Point, p2: Point, bounds: Bounds): Point | u
  * Updates a VNode's transform attribute.
  * @param vnode The VNode.
  * @param transform The TransformAttributes.
+ * @param baseDiv The base div ID of the root node, from the viewerOptions.
  */
-export function updateTransform(vnode: VNode, transform: TransformAttributes): void {
+export function updateTransform(vnode: VNode, transform: TransformAttributes, baseDiv: string): void {
     // Just changing the VNode's transform attribute is insufficient
     // as it doesn't change the document's transform attribute while on the canvas
     if (vnode.data) {
@@ -742,18 +743,17 @@ export function updateTransform(vnode: VNode, transform: TransformAttributes): v
         vnode.data.attrs.transform = transformString
 
         // Update transform while on the canvas
-        document
-            .getElementById(`keith-diagram_sprotty_${vnode.key?.toString()}`)
-            ?.setAttribute('transform', transformString)
+        document.getElementById(`${baseDiv}_${vnode.key?.toString()}`)?.setAttribute('transform', transformString)
     }
 }
 
 /**
  * Updates a VNode's opacity.
  * @param vnode The VNode.
  * @param opacity The new opacity.
+ * @param baseDiv The base div ID of the root node, from the viewerOptions.
  */
-export function updateOpacity(vnode: VNode, opacity: number): void {
+export function updateOpacity(vnode: VNode, opacity: number, baseDiv: string): void {
     // Just changing the VNode's opacity is insufficient
     // as it doesn't change the document's opacity while on the canvas
     if (vnode.data) {
@@ -764,7 +764,7 @@ export function updateOpacity(vnode: VNode, opacity: number): void {
         vnode.data.style.opacity = opacity.toString()
 
         // Update opacity while on the canvas
-        const element = document.getElementById(`keith-diagram_sprotty_${vnode.key?.toString()}`)
+        const element = document.getElementById(`${baseDiv}_${vnode.key?.toString()}`)
         if (element) {
             element.style.opacity = opacity.toString()
         }
@@ -775,8 +775,9 @@ export function updateOpacity(vnode: VNode, opacity: number): void {
  * Updates a VNode's pointer-events to make it click-through.
  * @param vnode The VNode.
  * @param clickThrough Whether the VNode should be click-through.
+ * @param baseDiv The base div ID of the root node, from the viewerOptions.
  */
-export function updateClickThrough(vnode: VNode, clickThrough: boolean): void {
+export function updateClickThrough(vnode: VNode, clickThrough: boolean, baseDiv: string): void {
     // Just changing the VNode's pointer-events is insufficient
     // as it doesn't change the document's pointer-events while on the canvas
     if (vnode.data) {
@@ -788,7 +789,7 @@ export function updateClickThrough(vnode: VNode, clickThrough: boolean): void {
         vnode.data.style['pointer-events'] = pointerEvent
 
         // Update pointer-events while on the canvas
-        const element = document.getElementById(`keith-diagram_sprotty_${vnode.key?.toString()}`)
+        const element = document.getElementById(`${baseDiv}_${vnode.key?.toString()}`)
         if (element) {
             element.style.pointerEvents = pointerEvent
         }

diff --git a/packages/klighd-core/src/proxy-view/proxy-view.tsx b/packages/klighd-core/src/proxy-view/proxy-view.tsx
@@ -4,7 +4,7 @@
  *
  * http://rtsys.informatik.uni-kiel.de/kieler
  *
- * Copyright 2022-2023 by
+ * Copyright 2022-2024 by
  * + Kiel University
  *   + Department of Computer Science
  *     + Real-Time and Embedded Systems Group
@@ -30,6 +30,7 @@ import {
     PatcherProvider,
     SGraphImpl,
     TYPES,
+    ViewerOptions,
 } from 'sprotty'
 import { angleOfPoint, Bounds, Point } from 'sprotty-protocol'
 import { isDetailWithChildren } from '../depth-map'
@@ -127,6 +128,8 @@ export class ProxyView extends AbstractUIExtension {
     /** Provides the utensil to replace HTML elements. */
     @inject(TYPES.PatcherProvider) private patcherProvider: PatcherProvider
 
+    @inject(TYPES.ViewerOptions) private viewerOptions: ViewerOptions
+
     /** Used to replace HTML elements. */
     private patcher: Patcher
 
@@ -1328,7 +1331,7 @@ export class ProxyView extends AbstractUIExtension {
     ): VNode | undefined {
         if (!(node instanceof SKNode)) {
             // VNode, this is a predefined rendering (e.g. cluster)
-            updateTransform(node, transform)
+            updateTransform(node, transform, this.viewerOptions.baseDiv)
             return node
         }
         if (node.opacity <= 0) {
@@ -1373,11 +1376,11 @@ export class ProxyView extends AbstractUIExtension {
             // Store this node
             this.renderings.set(id, vnode)
             // Place proxy at the calculated position
-            updateTransform(vnode, transform)
+            updateTransform(vnode, transform, this.viewerOptions.baseDiv)
             // Update its opacity
-            updateOpacity(vnode, opacity)
+            updateOpacity(vnode, opacity, this.viewerOptions.baseDiv)
             // Update whether it should be click-through
-            updateClickThrough(vnode, !this.interactiveProxiesEnabled || this.clickThrough)
+            updateClickThrough(vnode, !this.interactiveProxiesEnabled || this.clickThrough, this.viewerOptions.baseDiv)
         }
 
         return vnode
@@ -1418,7 +1421,7 @@ export class ProxyView extends AbstractUIExtension {
         const vnode = ctx.forceRenderElement(edge)
 
         if (vnode) {
-            updateTransform(vnode, transform)
+            updateTransform(vnode, transform, this.viewerOptions.baseDiv)
         }
 
         return vnode
@@ -1692,7 +1695,9 @@ export class ProxyView extends AbstractUIExtension {
     setMouseUp(): void {
         // Upon release, proxies shouldn't be click-through
         this.clickThrough = false
-        this.currProxies.forEach(({ proxy }) => updateClickThrough(proxy, !this.interactiveProxiesEnabled))
+        this.currProxies.forEach(({ proxy }) =>
+            updateClickThrough(proxy, !this.interactiveProxiesEnabled, this.viewerOptions.baseDiv)
+        )
     }
 
     /** Updates the proxy-view options specified in the {@link RenderOptionsRegistry}. */