From 75cc0307f376ebaca04dee08ab996bf103d5f932 Mon Sep 17 00:00:00 2001 From: Niklas Rentz Date: Mon, 10 Jun 2024 16:28:00 +0200 Subject: [PATCH] fixes option initialization for and handling of proxies in the CLI. --- .../src/proxy-view/proxy-view-actions.ts | 4 +++- .../src/proxy-view/proxy-view-util.ts | 19 ++++++++++--------- .../klighd-core/src/proxy-view/proxy-view.tsx | 19 ++++++++++++------- 3 files changed, 25 insertions(+), 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 index abc5112a..4cca363e 100644 --- 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 index 17d27a87..aa3cd320 100644 --- 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,9 +743,7 @@ 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) } } @@ -752,8 +751,9 @@ export function updateTransform(vnode: VNode, transform: TransformAttributes): v * 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 index 0e0dd787..00768109 100644 --- 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}. */