diff --git a/common/css/drag.css b/common/css/drag.css index a00ef451..6ab71c51 100644 --- a/common/css/drag.css +++ b/common/css/drag.css @@ -40,14 +40,6 @@ animation-fill-mode: forwards; } -.drag-w-resize * { - cursor: w-resize !important; -} - -.drag-s-resize * { - cursor: s-resize !important; -} - /* 由于拖拽而产生尺寸改变元素的容器 */ .drag-s-container { display: flex; @@ -93,20 +85,6 @@ html[data-bs-theme=dark] .drag-w-elem { background-color: rgb(8 105 170); } -.drag-elem-shadow { - display: none; - position: absolute; - width: 100%; - height: 100%; - z-index: 99; - background-color: transparent; - opacity: 0; -} - -.drag-elem-shadow.active { - display: block; -} - .drag-disable * { pointer-events: none !important; } \ No newline at end of file diff --git a/common/css/scrollbar.css b/common/css/scrollbar.css index 6141e215..4be445a1 100644 --- a/common/css/scrollbar.css +++ b/common/css/scrollbar.css @@ -19,6 +19,7 @@ body ::-webkit-scrollbar-track { body ::-webkit-scrollbar-thumb { background-color: #C3C1C1; border-radius: 1px; + cursor: context-menu; } ::-webkit-scrollbar-thumb:hover, diff --git a/common/modules/mixly-modules/common/drag.js b/common/modules/mixly-modules/common/drag.js index fc2f9b3e..7e746686 100644 --- a/common/modules/mixly-modules/common/drag.js +++ b/common/modules/mixly-modules/common/drag.js @@ -37,7 +37,6 @@ class Drag { this.$last = $($children[1]); this.config.elem = [ this.$first, this.$last ]; this.$dragElem = $('
'); - this.$dragElemShadow = $('
'); const dragType = this.config.type === 'h'? 's' : 'w'; this.$container.addClass(`drag-${dragType}-container`); this.shown = Drag.Extend.POSITIVE; @@ -63,7 +62,6 @@ class Drag { this.shown = Drag.Extend.NEGATIVE; } this.$container.prepend(this.$dragElem); - this.$container.prepend(this.$dragElemShadow); this.size = [`${size}%`, `${100 - size}%`]; if (size >=100 || size <=0) { const startExitFullSize = parseFloat(this.config.startExitFullSize); @@ -87,17 +85,22 @@ class Drag { const dragElem = this.$dragElem[0]; const container = this.$container[0]; const { type, min, elem, full } = this.config; + dragElem.onpointerdown = (elemEvent) => { + const { currentTarget } = elemEvent; + currentTarget.setPointerCapture(elemEvent.pointerId); + }; + dragElem.onpointerup = (elemEvent) => { + const { currentTarget } = elemEvent; + currentTarget.releasePointerCapture(elemEvent.pointerId); + }; dragElem.onmousedown = (elemEvent) => { - this.$dragElemShadow.addClass('active'); let dis, prev; if (type === 'h') { dis = elemEvent.clientY; dragElem.top = dragElem.offsetTop; - $('body').addClass('drag-s-resize'); } else { dis = elemEvent.clientX; dragElem.left = dragElem.offsetLeft; - $('body').addClass('drag-w-resize'); } const prevSize = this.size; @@ -135,12 +138,6 @@ class Drag { return false; }; document.onmouseup = () => { - this.$dragElemShadow.removeClass('active'); - if (type === 'h') { - $('body').removeClass('drag-s-resize'); - } else { - $('body').removeClass('drag-w-resize'); - } this.prevSize = prevSize; document.onmousemove = null; document.onmouseup = null; @@ -245,8 +242,9 @@ class Drag { dispose() { this.resetEvent(); this.$dragElem[0].onmousedown = null; + this.$dragElem[0].onpointerdown = null; + this.$dragElem[0].onpointerup = null; this.$dragElem.remove(); - this.$dragElemShadow.remove(); } bind(type, func) { diff --git a/common/modules/mixly-modules/common/editor-blockly.js b/common/modules/mixly-modules/common/editor-blockly.js index ad5bc6a0..a8c7c552 100644 --- a/common/modules/mixly-modules/common/editor-blockly.js +++ b/common/modules/mixly-modules/common/editor-blockly.js @@ -78,6 +78,16 @@ class EditorBlockly extends EditorBase { } : {} }); + const $blocklyScrollbarHandle = this.$blockly.find('.blocklyScrollbarHandle'); + $blocklyScrollbarHandle.on('pointerdown', (event) => { + const { currentTarget } = event; + currentTarget.setPointerCapture(event.pointerId); + }); + $blocklyScrollbarHandle.on('pointerup', (event) => { + const { currentTarget } = event; + currentTarget.releasePointerCapture(event.pointerId); + }); + this.editor.registerToolboxCategoryCallback( Blockly.Variables.CATEGORY_NAME, (...args) => Blockly.Variables.flyoutCategory(...args) diff --git a/common/modules/mixly-modules/common/editor-monaco.js b/common/modules/mixly-modules/common/editor-monaco.js index fbbbb989..61aaecd3 100644 --- a/common/modules/mixly-modules/common/editor-monaco.js +++ b/common/modules/mixly-modules/common/editor-monaco.js @@ -103,7 +103,9 @@ class EditorMonaco extends EditorBase { wordWrapColumn: 300, scrollbar: { vertical: 'visible', - horizontal: 'visible' + horizontal: 'visible', + verticalScrollbarSize: 10, + horizontalScrollbarSize: 10 } }); this.addEventsListener(); @@ -156,6 +158,16 @@ class EditorMonaco extends EditorBase { } #addChangeEventListener_() { + const $content = EditorMonaco.getContent(); + const $slider = $content.find('.slider,.minimap-slider'); + $slider.on('pointerdown', (event) => { + const { currentTarget } = event; + currentTarget.setPointerCapture(event.pointerId); + }); + $slider.on('pointerup', (event) => { + const { currentTarget } = event; + currentTarget.releasePointerCapture(event.pointerId); + }); this.#changeListener_ = EditorMonaco.events.bind('change', () => { this.#enableChangeEvent_ && this.runEvent('change'); }); @@ -169,8 +181,11 @@ class EditorMonaco extends EditorBase { onUnmounted() { super.onUnmounted(); const editor = EditorMonaco.getEditor(); + const $content = EditorMonaco.getContent(); + const $slider = $content.find('.slider,.minimap-slider'); this.#state_ = editor.saveViewState(); - EditorMonaco.getContent().detach(); + $slider.off('pointerdown pointerup'); + $content.detach(); this.getContent().empty(); this.#removeChangeEventListener_(); }