Fix windows dragging

This commit is contained in:
cyber-dream 2023-04-29 18:34:25 +03:00
parent 06a87af35b
commit 0a8e438d4d
3 changed files with 43 additions and 6 deletions

View File

@ -38,9 +38,12 @@ class Finder{
}) })
if (!WebDesktopEnvironment.isMobile){ if (!WebDesktopEnvironment.isMobile){
let scrollBar = new WdeScrollBar(newWindow.children[1].children[1], newWindow.children[1].children[0])// TODO to querry selector // let scrollBar = new WdeScrollBar(newWindow.children[1].children[1], newWindow.children[1].children[0])// TODO to querry selector
console.log(newWindow.querySelector("#closeWindowButton"))
newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) { newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) {
WebDesktopEnvironment.CloseWindow(newWindow) WebDesktopEnvironment.CloseWindow(newWindow)
}) })
} }
}) })

View File

@ -205,13 +205,41 @@ var getJSON = function(url, callback) {
class WindowsCompositor{ class WindowsCompositor{
windowLayer = undefined windowLayer = undefined
movingElement = null movingElement = null
xPosInit = 0 // xPosInit = 0
yPosInit = 0 // yPosInit = 0
//TODO refactor this to dynamic add/remove listeners //TODO refactor this to dynamic add/remove listeners
constructor(){ constructor(){
this.windowLayer = document.body.querySelector('#windows-layer') this.windowLayer = document.body.querySelector('#windows-layer')
// if (!WebDesktopEnvironment.isMobile) { if (!WebDesktopEnvironment.isMobile) {
let startDrag = function(event) {
let targetClasses = event.target.className.split(' ')
if (targetClasses[targetClasses.length - 1] != 'DragArea'){
return
}
// if (event.target.event.target.className != "DragArea"){}
let xPosInit = event.offsetX
let yPosInit = event.offsetY
let window = event.target.closest('.StandartApplicationWindow')
let dragWindow = function(event){
// console.log(window)
// console.log(event.clientX)
// console.log(event.clientX - xPosInit, event.clientY - yPosInit)
WindowsCompositor.dragElement(window,event.clientX - xPosInit, event.clientY - yPosInit)
}
let stopDrag = function(){
removeEventListener('mousemove', dragWindow)
removeEventListener('mouseup', stopDrag)
}
addEventListener('mousemove', dragWindow)
addEventListener('mouseup', stopDrag)
// console.log(event)
}
this.windowLayer.addEventListener('mousedown', startDrag)
}
if (false) { //FIXME if (false) { //FIXME
addEventListener("mousedown", (event) => { addEventListener("mousedown", (event) => {
this.xPosInit = event.offsetX this.xPosInit = event.offsetX
@ -262,8 +290,14 @@ class WindowsCompositor{
* @param {number} posX * @param {number} posX
* @param {number} posY * @param {number} posY
*/ */
dragElement(element, posX, posY) { //TODO static dragElement(element, posX, posY) { //TODO
element.style.left = `${posX}px` element.style.left = `${posX}px`
element.style.top = `${posY}px` element.style.top = `${posY}px`
} }
startDrag(){
this.windowLayer.addEventListener('mousemove', () => {
console.log("move")
})
}
} }

View File

@ -1,5 +1,5 @@
{{ define "finder/app.tmpl" }} {{ define "finder/app.tmpl" }}
<div id="TestWindowHeader" class="WindowFrameTopBar"> <div id="TestWindowHeader" class="WindowFrameTopBar DragArea">
<button id="closeWindowButton" class="WindowFrameTopBarButton" title="Close Window"></button> <button id="closeWindowButton" class="WindowFrameTopBarButton" title="Close Window"></button>
<div id="Drag" class="WindowDragArea"></div> <div id="Drag" class="WindowDragArea"></div>
<div class="WindowFrameTitle"> <div class="WindowFrameTitle">