Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | 22x 22x 22x 22x 24x 24x 24x 12x 12x 24x 12x 24x 24x 24x 24x 24x 12x 12x 12x 12x 10x 24x | /*
* Copyright 2021 Harness Inc. All rights reserved.
* Use of this source code is governed by the PolyForm Shield 1.0.0 license
* that can be found in the licenses directory at the root of this repository, also available at
* https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
*/
import React, { useEffect } from 'react'
import { isNil } from 'lodash-es'
import type { DiagramEngine } from '@projectstorm/react-diagrams-core'
import { Event } from '../../Diagram'
interface StageCanvasData {
offsetX?: number
offsetY?: number
zoom?: number
}
export function useStageBuilderCanvasState(engine: DiagramEngine, resetDeps?: React.DependencyList | undefined) {
const model = engine.getModel()
const stageCanvasDataRef = React.useRef<StageCanvasData | undefined>()
const resetDiagram = () => {
model.setOffset(0, 0)
model.setZoomLevel(100)
}
// reset
useEffect(() => {
resetDiagram()
}, resetDeps)
// update model
useEffect(() => {
const { offsetX, offsetY, zoom } = stageCanvasDataRef.current || {}
Iif (!isNil(offsetX) && offsetX !== model.getOffsetX() && !isNil(offsetY) && offsetY !== model.getOffsetY()) {
model.setOffset(offsetX, offsetY)
}
Iif (!isNil(zoom) && zoom !== model.getZoomLevel()) {
model.setZoomLevel(zoom)
}
})
// event handling
React.useEffect(() => {
const offsetUpdateHandler = function (event: any) {
stageCanvasDataRef.current = {
...(stageCanvasDataRef.current || {}),
offsetX: event.offsetX as number,
offsetY: event.offsetY as number
}
}
const zoomUpdateHandler = function (event: any) {
stageCanvasDataRef.current = {
...(stageCanvasDataRef.current || {}),
zoom: event.zoom as number
}
}
const listenerHandle = model.registerListener({
[Event.OffsetUpdated]: offsetUpdateHandler,
[Event.ZoomUpdated]: zoomUpdateHandler
})
return () => {
model.deregisterListener(listenerHandle)
}
}, [model])
return {}
}
|