@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
9 lines • 3.95 kB
JavaScript
import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";const styles='\n :host {\n --current-main-area-size: 50%;\n --resizer-size: 3px;\n --min-main-area-size: 200px;\n --min-sidebar-size: 150px;\n --main-area-size: calc(max(var(--current-main-area-size), var(--min-main-area-size)));\n\n height: 100%;\n width: 100%;\n display: block;\n overflow: auto;\n }\n\n .wrapper {\n display: flex;\n flex-direction: row;\n height: 100%;\n width: 100%;\n container: sidebar / size; /* stylelint-disable-line property-no-unknown */\n }\n\n .container {\n --resizer-position: calc(min(var(--main-area-size), calc(100% - var(--min-sidebar-size))));\n --min-container-size: calc(var(--min-sidebar-size) + var(--min-main-area-size) + var(--resizer-size));\n\n display: flex;\n flex-direction: row;\n height: 100%;\n width: 100%;\n position: relative;\n gap: var(--resizer-size);\n\n min-width: var(--min-container-size);\n }\n\n #resizer {\n background-color: var(--color-background-elevation-1);\n position: absolute;\n user-select: none;\n\n /* horizontal */\n width: var(--resizer-size);\n cursor: col-resize;\n left: var(--resizer-position);\n bottom: 0;\n top: 0;\n }\n\n slot {\n overflow: auto;\n display: block;\n }\n\n slot[name="main"] {\n\n /* horizontal */\n width: var(--resizer-position);\n min-width: var(--min-main-area-size);\n }\n\n slot[name="sidebar"] {\n flex: 1 0 0;\n\n min-width: var(--min-sidebar-size);\n }\n\n .horizontal .container {\n flex-direction: column;\n min-height: var(--min-container-size);\n min-width: auto;\n }\n\n .horizontal #resizer {\n width: auto;\n height: var(--resizer-size);\n cursor: row-resize;\n top: var(--resizer-position);\n left: 0;\n right: 0;\n }\n\n .horizontal slot[name="main"] {\n width: auto;\n min-width: auto;\n height: var(--resizer-position);\n min-height: var(--min-main-area-size);\n }\n\n .horizontal slot[name="sidebar"] {\n min-width: auto;\n min-height: var(--min-sidebar-size);\n }\n',splitViewStyles=new CSSStyleSheet;splitViewStyles.replaceSync(styles);export class SplitView extends HTMLElement{static litTagName=LitHtml.literal`devtools-split-view`;#e=this.attachShadow({mode:"open"});#n=[0,0];#i=0;#t=[0,0];#s;#o=!1;connectedCallback(){this.style.setProperty("--current-main-area-size","60%"),this.#e.adoptedStyleSheets=[splitViewStyles],this.#s=new ResizeObserver((e=>this.#r(e[0].contentRect))),this.#s.observe(this),this.#a()}get horizontal(){return this.#o}set horizontal(e){this.#o=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#a)}#r=e=>{const n=this.#i;e.width<=600&&e.height>=600||this.#o?this.#i=1:this.#i=0,this.#i!==n&&ComponentHelpers.ScheduledRender.scheduleRender(this,this.#a)};#l=e=>{const n=this.#e.querySelector("slot[name=main]");if(!n)throw new Error("Main slot not found");const i=n.getBoundingClientRect();this.#t=[i.width,i.height],this.#n=[e.clientX,e.clientY],window.addEventListener("mousemove",this.#h,!0),window.addEventListener("mouseup",this.#m,!0)};#m=()=>{window.removeEventListener("mousemove",this.#h,!0),window.removeEventListener("mouseup",this.#m,!0)};#h=e=>{const n=[e.clientX,e.clientY][this.#i]-this.#n[this.#i],i=this.getBoundingClientRect(),t=[i.width,i.height],s=100*(this.#t[this.#i]+n)/t[this.#i];this.style.setProperty("--current-main-area-size",s+"%")};#a=()=>{LitHtml.render(LitHtml.html`
<div class="wrapper ${1===this.#i?"horizontal":""}">
<div class="container">
<slot name="main"></slot>
<div id="resizer" =${this.#l}></div>
<slot name="sidebar"></slot>
</div>
</div>
`,this.#e,{host:this})}}ComponentHelpers.CustomElements.defineComponent("devtools-split-view",SplitView);