Model diagram wheel disable (#3761)

DARPA-ASKEM · Jun 10, 2024 · 3d68173 · 3d68173
1 parent 0627800
commit 3d68173
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 45 deletions.
diff --git a/packages/client/graph-scaffolder/src/core/renderer.ts b/packages/client/graph-scaffolder/src/core/renderer.ts
@@ -346,6 +346,7 @@ export abstract class Renderer<V, E> extends EventEmitter {
  .style('pointer-events', 'none');
  }
  };
+
  const zoomEnd = () => {
  if (!this.graph || !chart) return;
  this.zoomTransformObject = d3.zoomTransform(chart.node() as Element);
@@ -354,16 +355,20 @@ export abstract class Renderer<V, E> extends EventEmitter {
 
  const minZoom = 0.05;
  const maxZoom = Math.max(2, Math.floor((this.graph.width as number) / this.chartSize.width));
+ const zoomRange = this.options.zoomRange || [minZoom, maxZoom];
+
+ this.zoom = d3
+ .zoom()
+ .filter((event: MouseEvent) => {
+ if (renderer.options?.zoomModifier) {
+ return !(event.type === 'wheel') || event?.[renderer.options.zoomModifier];
+ }
+ return true;
+ })
+ .scaleExtent(zoomRange)
+ .on('zoom', zoomed)
+ .on('end', zoomEnd);
 
- if (this.options.zoomRange) {
- this.zoom = d3
- .zoom()
- .scaleExtent(this.options.zoomRange)
- .on('zoom', zoomed)
- .on('end', zoomEnd);
- } else {
- this.zoom = d3.zoom().scaleExtent([minZoom, maxZoom]).on('zoom', zoomed).on('end', zoomEnd);
- }
  svg.call(this.zoom as any).on('dblclick.zoom', null);
 
  if (this.options.useStableZoomPan && this.zoomTransformObject) {

diff --git a/packages/client/graph-scaffolder/src/types/index.ts b/packages/client/graph-scaffolder/src/types/index.ts
@@ -64,6 +64,7 @@ export interface Options {
 
  useZoom?: boolean;
  zoomRange?: [number, number];
+ zoomModifier?: string;
  useStableLayout?: boolean;
 
  // Attempt to use the same set of zoom parameters across layout changes

diff --git a/packages/client/hmi-client/src/assets/css/theme/extensions/_selectbutton.scss b/packages/client/hmi-client/src/assets/css/theme/extensions/_selectbutton.scss
@@ -6,25 +6,25 @@
  border-radius: 6px;
  border: 1px solid var(--surface-border);
  background-color: var(--tab-backgroundcolor-unselected);
- height: 40px; 
+ height: 40px;
 
  .p-button {
  padding: 12px;
- border-radius: $borderRadius; 
+ border-radius: $borderRadius;
  background-color: var(--tab-backgroundcolor-unselected);
  border: none;
  &:hover {
  background: $toggleButtonHoverBg;
  }
  &:focus {
- background: $toggleButtonActiveBg; 
+ background: $toggleButtonActiveBg;
  &.p-highlight {
  background: $toggleButtonBg;
- } 
+ }
  }
  &.p-highlight {
  background: $toggleButtonBg;
- border-radius: $borderRadius; 
+ border-radius: $borderRadius;
  }
  }
 }
@@ -42,6 +42,10 @@
  height:24px;
  border-radius: $borderRadius;
 
+ .p-button-label {
+ font-size: var(--font-caption);
+ }
+
  .p-button {
  padding: 8px;
  border-radius: $smallBorderRadius;
@@ -54,6 +58,6 @@
 .p-selectbutton.p-button-xsm {
  @extend .p-button-sm;
  .p-button-label {
- font-size: var(--font-caption);
+ font-size: var(--font-tiny);
  }
-}
+}
diff --git a/...ges/client/hmi-client/src/components/model/petrinet/model-diagrams/tera-model-diagram.vue b/...ges/client/hmi-client/src/components/model/petrinet/model-diagrams/tera-model-diagram.vue
@@ -4,42 +4,31 @@
  :show-tooltip="!isEmpty(hoveredTransitionId)"
  >
  <main>
- <TeraResizablePanel
- v-if="!isPreview"
- class="diagram-container"
- :class="{ unlocked: !isLocked }"
- :style="isLocked && { pointerEvents: 'none' }"
- >
+ <TeraResizablePanel v-if="!isPreview" class="diagram-container">
  <section class="graph-element">
  <Toolbar>
  <template #start>
  <span>
  <Button
  @click="resetZoom"
  label="Reset zoom"
- class="p-button-sm p-button-outlined"
- style="background-color: var(--gray-50)"
- onmouseover="this.style.backgroundColor='--gray-100';"
- onmouseout="this.style.backgroundColor='(--gray-50)';"
- severity="secondary"
- />
- <Button
- @click="isLocked = !isLocked"
- :icon="isLocked ? 'pi pi-lock' : 'pi pi-unlock'"
- :label="isLocked ? 'Unlock to adjust' : 'Lock to freeze'"
- class="p-button-sm p-button-outlined"
- style="background-color: var(--gray-50)"
- onmouseover="this.style.backgroundColor='--gray-100';"
- onmouseout="this.style.backgroundColor='(--gray-50)';"
+ size="small"
  severity="secondary"
+ outlined
  />
+ <span class="how-to-zoom">
+ <kbd>Ctrl</kbd>
+ +
+ <kbd>scroll</kbd>&nbsp;to zoom</span
+ >
  </span>
  </template>
  <template #center> </template>
  <template #end>
  <span>
  <SelectButton
  v-if="model && isStratified"
+ class="p-button-sm"
  :model-value="stratifiedView"
  @change="
  if ($event.value) {
@@ -146,7 +135,6 @@ const props = defineProps<{
 
 const emit = defineEmits(['update-configuration']);
 
-const isLocked = ref(true);
 const isCollapsed = ref(true);
 const graphElement = ref<HTMLDivElement | null>(null);
 const graphLegendLabels = ref<string[]>([]);
@@ -236,7 +224,7 @@ async function renderGraph() {
 
  // Render graph
  const graphData =
- isCollapsed.value === true && isStratified.value
+ isCollapsed.value && isStratified.value
  ? convertToIGraph(templatesSummary)
  : convertToIGraph(rawTemplates);
 
@@ -283,9 +271,7 @@ main {
  display: flex;
  flex-direction: column;
 }
-.unlocked {
- border: 1px solid var(--primary-color);
-}
+
 .preview {
  /* Having both min and max heights prevents height from resizing itself while being dragged on templating canvas
  This resizes on template canvas but not when its in a workflow node?? (tera-model-node)
@@ -334,6 +320,11 @@ main {
 .graph-element {
  background-color: var(--surface-secondary);
  height: 100%;
+ cursor: grab;
+
+ &:active {
+ cursor: grabbing;
+ }
 }
 
 :deep(.graph-element .p-button) {
@@ -343,24 +334,47 @@ main {
  }
 }
 
+.how-to-zoom {
+ display: flex;
+ align-items: center;
+ font-size: var(--font-caption);
+ background-color: var(--surface-transparent);
+ backdrop-filter: blur(4px);
+ padding: 0 var(--gap-small);
+ border-radius: var(--border-radius);
+ pointer-events: none;
+ user-select: none;
+}
+
+kbd {
+ background-color: var(--surface-section);
+ border: 1px solid var(--surface-border);
+ border-radius: var(--border-radius);
+ padding: 2px var(--gap-xsmall);
+ font-size: var(--font-tiny);
+ font-weight: var(--font-weight-semibold);
+}
+
 .legend {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
- margin: 1rem;
+ margin: var(--gap-small);
+ margin-bottom: var(--gap);
+ gap: var(--gap);
+ pointer-events: none;
 }
 .legend-item {
  display: flex;
  align-items: center;
- margin: 0 1rem;
+ gap: var(--gap-xsmall);
 }
 .legend-circle {
  display: inline-block;
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
- margin-right: 0.5rem;
 }
 
 .legend-anchor {

diff --git a/packages/client/hmi-client/src/model-representation/petrinet/petrinet-renderer.ts b/packages/client/hmi-client/src/model-representation/petrinet/petrinet-renderer.ts
@@ -226,7 +226,7 @@ export class PetrinetRenderer extends BasicRenderer<NodeData, EdgeData> {
  selection.selectAll('path').style('stroke-width', 2);
  }
 
- toggoleNodeSelectionByLabel(label: string) {
+ toggleNodeSelectionByLabel(label: string) {
  const selection = this.chart?.selectAll('.node-ui').filter((d: any) => d.label === label);
  if (selection && selection.size() === 1) {
  this.toggleNodeSelection(selection as D3SelectionINode<NodeData>);

diff --git a/packages/client/hmi-client/src/model-representation/service.ts b/packages/client/hmi-client/src/model-representation/service.ts
@@ -139,6 +139,7 @@ export const getModelRenderer = (
  el: graphElement,
  useAStarRouting: false,
  useStableZoomPan: true,
+ zoomModifier: 'ctrlKey',
  runLayout: runDagreLayout,
  dims,
  nestedMap,
@@ -150,6 +151,7 @@ export const getModelRenderer = (
  el: graphElement,
  useAStarRouting: false,
  useStableZoomPan: true,
+ zoomModifier: 'ctrlKey',
  runLayout: runDagreLayout,
  dragSelector: 'no-drag'
  });