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 self.mousePosition = mousePosition
}; };
this.mouseWheelHandler = function (e) { this.mouseWheelHandler = function (e) {
let blueprintRoot = self.scrolledDOMElement.parentElement.parentElement let zoomLevel = self.blueprintNode.getZoom()
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
}
}
zoomLevel -= Math.round(e.deltaY / 50) zoomLevel -= Math.round(e.deltaY / 50)
zoomLevel = self.clamp(zoomLevel, -12, 0) self.blueprintNode.setZoom(zoomLevel)
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)
} }
this.blueprintNode.getGridDOMElement().addEventListener('wheel', this.mouseWheelHandler) this.blueprintNode.getGridDOMElement().addEventListener('wheel', this.mouseWheelHandler)
@@ -51,8 +34,4 @@ export default class UEBlueprintDragScroll extends UEBlueprintDrag {
this.blueprintNode.translate(-x, -y) 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) { static domTemplate(obj) {
return ` return `
<div class="ueb"> <div class="ueb ueb-zoom-${obj.zoom}">
<div class="ueb-viewport-header"> <div class="ueb-viewport-header">
<div class="ueb-viewport-zoom">1:1</div> <div class="ueb-viewport-zoom">1:1</div>
</div> </div>
@@ -31,9 +31,9 @@ export default class UEBlueprint extends UEBlueprintDOMModel {
this.expandGridSize = 400 this.expandGridSize = 400
this.gridDOMElement = null this.gridDOMElement = null
this.dragObject = null this.dragObject = null
this.additional = [2 * this.expandGridSize, 2 * this.expandGridSize] this.additional = /*[2 * this.expandGridSize, 2 * this.expandGridSize]*/[0, 0]
this.translateValue = [this.expandGridSize, this.expandGridSize] this.translateValue = /*[this.expandGridSize, this.expandGridSize]*/[0, 0]
this.scale = 1 this.zoom = 0
this.nodes = [] 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)) 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() { getScale() {
return this.scale return getComputedStyle(this.gridDOMElement).getPropertyValue('--ueb-grid-scale')
} }
addNode(...blueprintNode) { addNode(...blueprintNode) {