Ma/ueblueprint
1
0
Fork 0
mirror of https://github.com/barsdeveloper/ueblueprint.git synced 2026-02-13 16:44:49 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Grid zoom centering fixed

Browse Source
This commit is contained in:
barsdeveloper
2021-07-05 00:08:11 +02:00
parent 31a0f5c06d
commit cd475caeda
2 changed files with 27 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
js/UEBlueprint.js
View File

@@ -1,5 +1,5 @@
import UEBlueprintDOMModel from "./UEBlueprintDOMModel.js";
import UEBlueprintDragScroll from "./UEBlueprintDragScroll.js";
import UEBlueprintDOMModel from "./UEBlueprintDOMModel.js"
import UEBlueprintDragScroll from "./UEBlueprintDragScroll.js"
export default class UEBlueprint extends UEBlueprintDOMModel {
@@ -23,7 +23,7 @@ export default class UEBlueprint extends UEBlueprintDOMModel {
}
static clamp(val, min, max) {
return Math.min(Math.max(val, min), max);
return Math.min(Math.max(val, min), max)
}
constructor() {
@@ -193,10 +193,13 @@ export default class UEBlueprint extends UEBlueprintDOMModel {
* @param {number} y - Vertical expand value (negative means top, positive means bottom)
*/
seamlessExpand(x, y) {
let scale = this.getScale()
let scaledX = x / scale
let scaledY = y / scale
// First expand the grid to contain the additional space
this._expand(x, y)
this._expand(scaledX, scaledY)
// If the expansion is towards the left or top, then scroll back to give the illusion that the content is in the same position and translate it accordingly
this._translate(x < 0 ? -x : 0, y < 0 ? -y : 0)
this._translate(scaledX < 0 ? -scaledX : 0, scaledY < 0 ? -scaledY : 0)
if (x < 0) {
this.gridDOMElement.parentElement.scrollLeft -= x
}
@@ -213,20 +216,30 @@ export default class UEBlueprint extends UEBlueprintDOMModel {
return this.zoom
}
setZoom(zoom) {
setZoom(zoom, center) {
zoom = this.constructor.clamp(zoom, -12, 0)
if (zoom == this.zoom) {
return
}
let initialScale = this.getScale()
this.domElement.classList.add(`ueb-zoom-${zoom}`)
this.domElement.classList.remove(`ueb-zoom-${this.zoom}`)
this.zoom = zoom
this.domElement.classList.add(`ueb-zoom-${this.zoom}`)
/*
let scale = this.getScale()
let additionalX = Math.ceil(self.scrolledDOMElement.clientWidth * (1 - 1 / scale))
let additionalY = Math.ceil(self.scrolledDOMElement.clientHeight * (1 - 1 / scale))
self.blueprintNode.expand(additionalX, additionalY)*/
if (center) {
let relativeScale = this.getScale() / initialScale
let newCenter = [
relativeScale * center[0],
relativeScale * center[1]
]
this.scrollDelta([
(newCenter[0] - center[0]) * initialScale,
(newCenter[1] - center[1]) * initialScale
])
}
}
getScale() {
return getComputedStyle(this.gridDOMElement).getPropertyValue('--ueb-grid-scale')
return parseFloat(getComputedStyle(this.gridDOMElement).getPropertyValue('--ueb-grid-scale'))
}
addNode(...blueprintNode) {

2
js/UEBlueprintDragScroll.js
View File

@@ -21,7 +21,7 @@ export default class UEBlueprintDragScroll extends UEBlueprintDrag {
this.mouseWheelHandler = function (e) {
let zoomLevel = self.blueprintNode.getZoom()
zoomLevel -= Math.round(e.deltaY / 50)
self.blueprintNode.setZoom(zoomLevel)
self.blueprintNode.setZoom(zoomLevel, [e.offsetX, e.offsetY])
}
this.blueprintNode.getGridDOMElement().addEventListener('wheel', this.mouseWheelHandler)