Ma/ueblueprint
1
0
Fork 0
mirror of https://github.com/barsdeveloper/ueblueprint.git synced 2026-05-21 21:57:38 +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 UEBlueprintDOMModel from "./UEBlueprintDOMModel.js"
import UEBlueprintDragScroll from "./UEBlueprintDragScroll.js"; import UEBlueprintDragScroll from "./UEBlueprintDragScroll.js"
export default class UEBlueprint extends UEBlueprintDOMModel { export default class UEBlueprint extends UEBlueprintDOMModel {
@@ -23,7 +23,7 @@ export default class UEBlueprint extends UEBlueprintDOMModel {
} }
static clamp(val, min, max) { static clamp(val, min, max) {
return Math.min(Math.max(val, min), max); return Math.min(Math.max(val, min), max)
} }
constructor() { constructor() {
@@ -193,10 +193,13 @@ export default class UEBlueprint extends UEBlueprintDOMModel {
* @param {number} y - Vertical expand value (negative means top, positive means bottom) * @param {number} y - Vertical expand value (negative means top, positive means bottom)
*/ */
seamlessExpand(x, y) { seamlessExpand(x, y) {
let scale = this.getScale()
let scaledX = x / scale
let scaledY = y / scale
// First expand the grid to contain the additional space // 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 // 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) { if (x < 0) {
this.gridDOMElement.parentElement.scrollLeft -= x this.gridDOMElement.parentElement.scrollLeft -= x
} }
@@ -213,20 +216,30 @@ export default class UEBlueprint extends UEBlueprintDOMModel {
return this.zoom return this.zoom
} }
setZoom(zoom) { setZoom(zoom, center) {
zoom = this.constructor.clamp(zoom, -12, 0) 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.domElement.classList.remove(`ueb-zoom-${this.zoom}`)
this.zoom = zoom this.zoom = zoom
this.domElement.classList.add(`ueb-zoom-${this.zoom}`) if (center) {
/* let relativeScale = this.getScale() / initialScale
let scale = this.getScale() let newCenter = [
let additionalX = Math.ceil(self.scrolledDOMElement.clientWidth * (1 - 1 / scale)) relativeScale * center[0],
let additionalY = Math.ceil(self.scrolledDOMElement.clientHeight * (1 - 1 / scale)) relativeScale * center[1]
self.blueprintNode.expand(additionalX, additionalY)*/ ]
this.scrollDelta([
(newCenter[0] - center[0]) * initialScale,
(newCenter[1] - center[1]) * initialScale
])
}
} }
getScale() { getScale() {
return getComputedStyle(this.gridDOMElement).getPropertyValue('--ueb-grid-scale') return parseFloat(getComputedStyle(this.gridDOMElement).getPropertyValue('--ueb-grid-scale'))
} }
addNode(...blueprintNode) { addNode(...blueprintNode) {

2
js/UEBlueprintDragScroll.js
View File

@@ -21,7 +21,7 @@ export default class UEBlueprintDragScroll extends UEBlueprintDrag {
this.mouseWheelHandler = function (e) { this.mouseWheelHandler = function (e) {
let zoomLevel = self.blueprintNode.getZoom() let zoomLevel = self.blueprintNode.getZoom()
zoomLevel -= Math.round(e.deltaY / 50) 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) this.blueprintNode.getGridDOMElement().addEventListener('wheel', this.mouseWheelHandler)