From cc701f4b56d5baa90ceae569ec87bf62f88cc05d Mon Sep 17 00:00:00 2001 From: KuthorX Date: Tue, 29 Jun 2021 23:35:44 +0800 Subject: [PATCH 1/4] feature: add ReSizer to Main --- render-process/index.css | 23 ++++++++++++++++--- render-process/index.tsx | 49 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 69 insertions(+), 3 deletions(-) diff --git a/render-process/index.css b/render-process/index.css index d18597e..2a232b7 100644 --- a/render-process/index.css +++ b/render-process/index.css @@ -10,13 +10,30 @@ body { position: fixed; } +.ant-layout { + flex-wrap: wrap; +} + .sider { - height : 100%; - overflow: hidden; + height : 100%; + overflow : hidden; + transition : all 0s; } .sider:hover { - overflow-y : auto; + overflow-y : auto; +} + +#sizer-hint-bar { + position : absolute; + width : 10px; + height : 100vh; + background : #66ccff; + top : 0; + left : 245px; + opacity : 0; + transition : opacity 0.3s; + cursor : col-resize; } .content { diff --git a/render-process/index.tsx b/render-process/index.tsx index 0acf475..2b7c520 100644 --- a/render-process/index.tsx +++ b/render-process/index.tsx @@ -76,6 +76,54 @@ export default class Main extends Component { workspace: this.settings.curWorkspace.getFilepath(), }); }, 50); + + this.setReSizer(); + } + + setReSizer() { + let startX: number; + let startWidth: number; + + const sider: any = document.getElementsByClassName("sider")[0]; + const reSizerParent: any = document.getElementsByClassName("ant-layout-sider-children")[0]; + const reSizer = document.getElementById("sizer-hint-bar"); + + function initDrag(e: DragEvent) { + startX = e.clientX; + startWidth = parseInt(document.defaultView.getComputedStyle(reSizerParent).width, 10); + document.documentElement.addEventListener("mousemove", doDrag, false); + document.documentElement.addEventListener("mouseup", stopDrag, false); + } + + function doDrag(e: DragEvent) { + let calcWidth = startWidth + e.clientX - startX; + const maxValue = window.innerWidth * 0.8; + const minValue = 100; + if (calcWidth > maxValue) { + calcWidth = maxValue; + } else if (calcWidth < minValue) { + calcWidth = minValue; + } + reSizerParent.style.width = calcWidth + "px"; + sider.style.width = calcWidth + "px"; + sider.style.maxWidth = calcWidth + "px"; + sider.style.minWidth = "0px"; + sider.style.flex = ""; + reSizer.style.left = (calcWidth - 5) + "px"; + } + + function stopDrag(e: DragEvent) { + document.documentElement.removeEventListener("mousemove", doDrag, false); + document.documentElement.removeEventListener("mouseup", stopDrag, false); + } + + reSizer.addEventListener("mouseover", function init() { + reSizer.style.opacity = "1"; + reSizer.addEventListener("mousedown", initDrag, false); + reSizer.addEventListener("mouseout", function init() { + reSizer.style.opacity = "0"; + }, false); + }, false); } updateSettings() { @@ -106,6 +154,7 @@ export default class Main extends Component { "Please Open Workspace" )} +
{ From 02bf7060f8eb37feb5f9886635aecd4ad98c7ed1 Mon Sep 17 00:00:00 2001 From: KuthorX Date: Tue, 29 Jun 2021 23:44:14 +0800 Subject: [PATCH 2/4] optimize: ReSizer listen onresize --- render-process/index.tsx | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/render-process/index.tsx b/render-process/index.tsx index 2b7c520..031ead0 100644 --- a/render-process/index.tsx +++ b/render-process/index.tsx @@ -104,12 +104,16 @@ export default class Main extends Component { } else if (calcWidth < minValue) { calcWidth = minValue; } - reSizerParent.style.width = calcWidth + "px"; - sider.style.width = calcWidth + "px"; - sider.style.maxWidth = calcWidth + "px"; + setWidth(calcWidth); + } + + function setWidth(width: number) { + reSizerParent.style.width = width + "px"; + sider.style.width = width + "px"; + sider.style.maxWidth = width + "px"; sider.style.minWidth = "0px"; sider.style.flex = ""; - reSizer.style.left = (calcWidth - 5) + "px"; + reSizer.style.left = (width - 5) + "px"; } function stopDrag(e: DragEvent) { @@ -117,13 +121,25 @@ export default class Main extends Component { document.documentElement.removeEventListener("mouseup", stopDrag, false); } - reSizer.addEventListener("mouseover", function init() { + reSizer.addEventListener("mouseover", function() { reSizer.style.opacity = "1"; reSizer.addEventListener("mousedown", initDrag, false); reSizer.addEventListener("mouseout", function init() { reSizer.style.opacity = "0"; }, false); }, false); + + window.addEventListener("resize", function() { + let currentWidth = parseInt(document.defaultView.getComputedStyle(reSizerParent).width, 10); + const maxValue = window.innerWidth * 0.8; + const minValue = 100; + if (currentWidth > maxValue) { + currentWidth = maxValue; + } else if (currentWidth < minValue) { + currentWidth = minValue; + } + setWidth(currentWidth); + }) } updateSettings() { From 393c36109f38573575163b5bd8572711894f7ccc Mon Sep 17 00:00:00 2001 From: KuthorX Date: Tue, 29 Jun 2021 23:48:41 +0800 Subject: [PATCH 3/4] optimize: ReSizer function --- render-process/index.tsx | 25 +++++++++---------------- 1 file changed, 9 insertions(+), 16 deletions(-) diff --git a/render-process/index.tsx b/render-process/index.tsx index 031ead0..f711f35 100644 --- a/render-process/index.tsx +++ b/render-process/index.tsx @@ -96,18 +96,18 @@ export default class Main extends Component { } function doDrag(e: DragEvent) { - let calcWidth = startWidth + e.clientX - startX; - const maxValue = window.innerWidth * 0.8; - const minValue = 100; - if (calcWidth > maxValue) { - calcWidth = maxValue; - } else if (calcWidth < minValue) { - calcWidth = minValue; - } + const calcWidth = startWidth + e.clientX - startX; setWidth(calcWidth); } function setWidth(width: number) { + const maxValue = window.innerWidth * 0.8; + const minValue = 100; + if (width > maxValue) { + width = maxValue; + } else if (width < minValue) { + width = minValue; + } reSizerParent.style.width = width + "px"; sider.style.width = width + "px"; sider.style.maxWidth = width + "px"; @@ -130,14 +130,7 @@ export default class Main extends Component { }, false); window.addEventListener("resize", function() { - let currentWidth = parseInt(document.defaultView.getComputedStyle(reSizerParent).width, 10); - const maxValue = window.innerWidth * 0.8; - const minValue = 100; - if (currentWidth > maxValue) { - currentWidth = maxValue; - } else if (currentWidth < minValue) { - currentWidth = minValue; - } + const currentWidth = parseInt(document.defaultView.getComputedStyle(reSizerParent).width, 10); setWidth(currentWidth); }) } From ed454e25be0e3697394ff1f3187a33d7d0873b66 Mon Sep 17 00:00:00 2001 From: KuthorX Date: Sat, 10 Jul 2021 14:27:58 +0800 Subject: [PATCH 4/4] bugfix: content not show --- render-process/index.css | 1 + render-process/index.tsx | 10 +++++++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/render-process/index.css b/render-process/index.css index 2a232b7..ec98a28 100644 --- a/render-process/index.css +++ b/render-process/index.css @@ -34,6 +34,7 @@ body { opacity : 0; transition : opacity 0.3s; cursor : col-resize; + z-index : 10; } .content { diff --git a/render-process/index.tsx b/render-process/index.tsx index f711f35..ad63bbb 100644 --- a/render-process/index.tsx +++ b/render-process/index.tsx @@ -86,7 +86,8 @@ export default class Main extends Component { const sider: any = document.getElementsByClassName("sider")[0]; const reSizerParent: any = document.getElementsByClassName("ant-layout-sider-children")[0]; - const reSizer = document.getElementById("sizer-hint-bar"); + const reSizer: any = document.getElementById("sizer-hint-bar"); + const content: any = document.getElementsByClassName("ant-layout-content content")[0]; function initDrag(e: DragEvent) { startX = e.clientX; @@ -114,6 +115,7 @@ export default class Main extends Component { sider.style.minWidth = "0px"; sider.style.flex = ""; reSizer.style.left = (width - 5) + "px"; + content.style.width = window.innerWidth - width + "px"; } function stopDrag(e: DragEvent) { @@ -132,7 +134,9 @@ export default class Main extends Component { window.addEventListener("resize", function() { const currentWidth = parseInt(document.defaultView.getComputedStyle(reSizerParent).width, 10); setWidth(currentWidth); - }) + }); + + setWidth(250); } updateSettings() { @@ -144,7 +148,7 @@ export default class Main extends Component { const { workdir, workspace } = this.state; document.title = `行为树编辑器 - ${workspace}`; return ( - + {workdir !== "" ? (