@stories-js/core
Version:
Stories web components to build stories
169 lines • 4.99 kB
JavaScript
/*!
* (C) StoriesJS https://storiesjs.org - GPL-2.0 License
*/
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { Component, h, Prop, Element, Event } from '@stencil/core';
export class SplitPane {
constructor() {
this.minSize = 0;
this.defaultSize = 0;
this.pointerDown = (e) => {
e.preventDefault();
this.isResizing = true;
const clientRect = this.el.getBoundingClientRect();
this.left = clientRect.x;
this.top = clientRect.y;
this.el.addEventListener("pointermove", this.pointerMove);
this.el.addEventListener("pointerup", this.pointerUp);
};
this.pointerMove = (e) => {
e.preventDefault();
if (this.split === "horizontal") {
const newMedianLeft = e.clientX - this.left;
const width = this.median.getBoundingClientRect().width;
this.value = Math.round(newMedianLeft - width / 2);
// Check min size
this.value = this.value < this.minSize ? this.minSize : this.value;
this.el.style.gridTemplateColumns = `${this.value}px ${width}px 1fr`;
}
else {
const newMedianTop = e.clientY - this.top;
const height = this.median.getBoundingClientRect().height;
this.value = Math.round(newMedianTop - height / 2);
// Check min size
this.value = this.value < this.minSize ? this.minSize : this.value;
this.el.style.gridTemplateRows = `${this.value}px ${height}px 1fr`;
}
};
this.pointerUp = (e) => {
e.preventDefault();
this.isResizing = false;
this.storiesSizeChange.emit(this.value);
this.el.removeEventListener("pointermove", this.pointerMove);
this.el.removeEventListener("pointerup", this.pointerUp);
};
}
componentDidLoad() {
if (this.defaultSize > 0 || this.minSize > 0) {
if (this.split === "horizontal") {
const width = this.median.getBoundingClientRect().width;
this.value = Math.round(this.defaultSize);
// Check min size
this.value = this.value < this.minSize ? this.minSize : this.value;
this.el.style.gridTemplateColumns = `${this.value}px ${width}px 1fr`;
}
else {
const height = this.median.getBoundingClientRect().height;
this.value = Math.round(this.defaultSize);
// Check min size
this.value = this.value < this.minSize ? this.minSize : this.value;
this.el.style.gridTemplateRows = `${this.value}px ${height}px 1fr`;
}
}
}
render() {
return [
h("slot", { name: "slot1" }),
h("div", { ref: el => this.median = el, id: "median", onPointerDown: this.pointerDown }),
h("slot", { name: "slot2" })
];
}
static get is() { return "stories-split-pane"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["split-pane.scss"]
}; }
static get styleUrls() { return {
"$": ["split-pane.css"]
}; }
static get properties() { return {
"split": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"horizontal\" | \"vertical\"",
"resolved": "\"horizontal\" | \"vertical\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "split",
"reflect": false
},
"minSize": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "min-size",
"reflect": false,
"defaultValue": "0"
},
"defaultSize": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "default-size",
"reflect": false,
"defaultValue": "0"
},
"isResizing": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "resizing",
"reflect": true
}
}; }
static get events() { return [{
"method": "storiesSizeChange",
"name": "storiesSizeChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
}
}]; }
static get elementRef() { return "el"; }
}
//# sourceMappingURL=split-pane.js.map