Move zoom to model file

This commit is contained in:
barsdeveloper
2021-07-01 23:22:22 +02:00
parent 531cbd0891
commit d9484b7e54
2 changed files with 23 additions and 28 deletions

View File

@@ -19,26 +19,9 @@ export default class UEBlueprintDragScroll extends UEBlueprintDrag {
self.mousePosition = mousePosition
};
this.mouseWheelHandler = function (e) {
let blueprintRoot = self.scrolledDOMElement.parentElement.parentElement
let zoomLevel = 0
let zoomLevelClass = "ueb-zoom-0"
let classes = blueprintRoot.classList.values()
for (let className of classes) {
let v = className.match(/ueb\-zoom\-(\-?\d+)/)
if (v) {
zoomLevelClass = v[0]
zoomLevel = parseInt(v[1])
break
}
}
let zoomLevel = self.blueprintNode.getZoom()
zoomLevel -= Math.round(e.deltaY / 50)
zoomLevel = self.clamp(zoomLevel, -12, 0)
blueprintRoot.classList.remove(zoomLevelClass)
blueprintRoot.classList.add("ueb-zoom-" + zoomLevel)
let scale = self.blueprintNode.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)
self.blueprintNode.setZoom(zoomLevel)
}
this.blueprintNode.getGridDOMElement().addEventListener('wheel', this.mouseWheelHandler)
@@ -51,8 +34,4 @@ export default class UEBlueprintDragScroll extends UEBlueprintDrag {
this.blueprintNode.translate(-x, -y)
}
clamp(val, min, max) {
return Math.min(Math.max(val, min), max);
}
}

View File

@@ -5,7 +5,7 @@ export default class UEBlueprint extends UEBlueprintDOMModel {
static domTemplate(obj) {
return `
<div class="ueb">
<div class="ueb ueb-zoom-${obj.zoom}">
<div class="ueb-viewport-header">
<div class="ueb-viewport-zoom">1:1</div>
</div>
@@ -31,9 +31,9 @@ export default class UEBlueprint extends UEBlueprintDOMModel {
this.expandGridSize = 400
this.gridDOMElement = null
this.dragObject = null
this.additional = [2 * this.expandGridSize, 2 * this.expandGridSize]
this.translateValue = [this.expandGridSize, this.expandGridSize]
this.scale = 1
this.additional = /*[2 * this.expandGridSize, 2 * this.expandGridSize]*/[0, 0]
this.translateValue = /*[this.expandGridSize, this.expandGridSize]*/[0, 0]
this.zoom = 0
this.nodes = []
}
@@ -209,8 +209,24 @@ export default class UEBlueprint extends UEBlueprintDOMModel {
return this.expandGridSize * Math.round(x / this.expandGridSize + 0.5 * Math.sign(x))
}
getZoom() {
return this.zoom
}
setZoom(zoom) {
zoom = this.constructor.clamp(zoom, -12, 0)
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)*/
}
getScale() {
return this.scale
return getComputedStyle(this.gridDOMElement).getPropertyValue('--ueb-grid-scale')
}
addNode(...blueprintNode) {