Ma/ueblueprint
1
0
Fork 0
mirror of https://github.com/barsdeveloper/ueblueprint.git synced 2026-03-13 11:47:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fizing zoom wip

Browse Source
This commit is contained in:
barsdeveloper
2021-08-26 23:43:43 +02:00
parent 4017d6ab64
commit 3f176ea4a4
3 changed files with 42 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
js/UEBlueprint.js
View File

@@ -240,10 +240,19 @@ export default class UEBlueprint extends HTMLElement {
return return
} }
let initialScale = this.getScale() let initialScale = this.getScale()
this.classList.add(`ueb-zoom-${zoom}`)
this.classList.remove(`ueb-zoom-${this.zoom}`) this.classList.remove(`ueb-zoom-${this.zoom}`)
this.classList.add(`ueb-zoom-${zoom}`)
this.zoom = zoom this.zoom = zoom
if (center) { if (center) {
let point = document.createElement('div');
point.style.width = '2px'
point.style.height = '2px'
point.style.background = 'red'
point.style.position = 'absolute'
document.querySelector('.ueb-grid').appendChild(point)
let relativeScale = this.getScale() / initialScale let relativeScale = this.getScale() / initialScale
let newCenter = [ let newCenter = [
relativeScale * center[0], relativeScale * center[0],
@@ -253,6 +262,8 @@ export default class UEBlueprint extends HTMLElement {
(newCenter[0] - center[0]) * initialScale, (newCenter[0] - center[0]) * initialScale,
(newCenter[1] - center[1]) * initialScale (newCenter[1] - center[1]) * initialScale
]) ])
point.style.left = `${center[0]}px`
point.style.top = `${center[1]}px`
} }
} }

13
js/UEBlueprintDragScroll.js
View File

@@ -18,13 +18,18 @@ export default class UEBlueprintDragScroll extends UEBlueprintDrag {
self.mousePosition = mousePosition self.mousePosition = mousePosition
}; };
this.mouseWheelHandler = function (e) { this.mouseWheelHandler = function (e) {
e.preventDefault()
let zoomLevel = self.blueprintNode.getZoom() let zoomLevel = self.blueprintNode.getZoom()
zoomLevel -= Math.round(e.deltaY / 50) zoomLevel -= Math.sign(e.deltaY)
self.blueprintNode.setZoom(zoomLevel, [e.offsetX, e.offsetY]) let scale = self.blueprintNode.getScale()
const targetOffset = e.target.getBoundingClientRect()
const currentTargetOffset = e.currentTarget.getBoundingClientRect()
let offset = [e.offsetX + targetOffset.x - currentTargetOffset.x, e.offsetY + targetOffset.y - currentTargetOffset.y]
console.log([offset[0] - e.x, offset[1] - e.y])
self.blueprintNode.setZoom(zoomLevel, offset)
} }
this.blueprintNode.getGridDOMElement().addEventListener('wheel', this.mouseWheelHandler) this.blueprintNode.getGridDOMElement().addEventListener('wheel', this.mouseWheelHandler, false)
this.blueprintNode.getGridDOMElement().addEventListener('wheel', e => e.preventDefault())
this.blueprintNode.getGridDOMElement().parentElement.addEventListener('wheel', e => e.preventDefault()) this.blueprintNode.getGridDOMElement().parentElement.addEventListener('wheel', e => e.preventDefault())
} }

26
ueblueprint.js
View File

@@ -84,13 +84,18 @@ class UEBlueprintDragScroll extends UEBlueprintDrag {
self.mousePosition = mousePosition; self.mousePosition = mousePosition;
}; };
this.mouseWheelHandler = function (e) { this.mouseWheelHandler = function (e) {
e.preventDefault();
let zoomLevel = self.blueprintNode.getZoom(); let zoomLevel = self.blueprintNode.getZoom();
zoomLevel -= Math.round(e.deltaY / 50); zoomLevel -= Math.sign(e.deltaY);
self.blueprintNode.setZoom(zoomLevel, [e.offsetX, e.offsetY]); self.blueprintNode.getScale();
const targetOffset = e.target.getBoundingClientRect();
const currentTargetOffset = e.currentTarget.getBoundingClientRect();
let offset = [e.offsetX + targetOffset.x - currentTargetOffset.x, e.offsetY + targetOffset.y - currentTargetOffset.y];
console.log([offset[0] - e.x, offset[1] - e.y]);
self.blueprintNode.setZoom(zoomLevel, offset);
}; };
this.blueprintNode.getGridDOMElement().addEventListener('wheel', this.mouseWheelHandler); this.blueprintNode.getGridDOMElement().addEventListener('wheel', this.mouseWheelHandler, false);
this.blueprintNode.getGridDOMElement().addEventListener('wheel', e => e.preventDefault());
this.blueprintNode.getGridDOMElement().parentElement.addEventListener('wheel', e => e.preventDefault()); this.blueprintNode.getGridDOMElement().parentElement.addEventListener('wheel', e => e.preventDefault());
} }
@@ -341,10 +346,19 @@ class UEBlueprint extends HTMLElement {
return return
} }
let initialScale = this.getScale(); let initialScale = this.getScale();
this.classList.add(`ueb-zoom-${zoom}`);
this.classList.remove(`ueb-zoom-${this.zoom}`); this.classList.remove(`ueb-zoom-${this.zoom}`);
this.classList.add(`ueb-zoom-${zoom}`);
this.zoom = zoom; this.zoom = zoom;
if (center) { if (center) {
let point = document.createElement('div');
point.style.width = '2px';
point.style.height = '2px';
point.style.background = 'red';
point.style.position = 'absolute';
document.querySelector('.ueb-grid').appendChild(point);
let relativeScale = this.getScale() / initialScale; let relativeScale = this.getScale() / initialScale;
let newCenter = [ let newCenter = [
relativeScale * center[0], relativeScale * center[0],
@@ -354,6 +368,8 @@ class UEBlueprint extends HTMLElement {
(newCenter[0] - center[0]) * initialScale, (newCenter[0] - center[0]) * initialScale,
(newCenter[1] - center[1]) * initialScale (newCenter[1] - center[1]) * initialScale
]); ]);
point.style.left = `${center[0]}px`;
point.style.top = `${center[1]}px`;
} }
} }