Skip to content

Commit

Permalink
動的分割バーの作成中
Browse files Browse the repository at this point in the history
  • Loading branch information
@SoraKumo001
SoraKumo001 committed Sep 7, 2019
1 parent edb34f4 commit 021d222
Show file tree
Hide file tree
Showing 8 changed files with 554 additions and 123 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ ReactDOM.render(<App />, document.getElementById("root") as HTMLElement);
| overlapped | boolean | falseにするとウインドウが親ウインドウ内にのみ表示 |
| windowStyle | number | WindowStyle ビットの込み合わせ <br> TITLE:タイトルバー<br> MAX:最大化ボタン<br> MIN:最小化ボタン<br> CLOSE:クローズボタン<br> FRAME:枠の表示<br> RESIZE:サイズ変更<br> |
| windowState | WindowState | WindowState　ウインドウの状態<br> NORMAL:通常<br> MAX:最大化<br> MIN:最小化<br> HIDE:非表示<br> |
| clientStyle | React.CSSProperties | クライアント領域に適用するスタイル |
| onUpdate | function(p:WindowInfo) &#124; null | ウインドウの状態が変化するとコールバックされる |

### 4.3 メソッド
Expand Down
19 changes: 19 additions & 0 deletions images/resize.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
300 changes: 226 additions & 74 deletions src/splitView/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,103 +1,244 @@
import { Component, createRef } from "react";
import React from "react";

import styled from "styled-components";
import ResizeObserver from "resize-observer-polyfill";
import React, { Component, createRef, ReactNode } from "react";
import { Manager, JWFEvent, MovePoint } from "../lib/Manager";
import { Root } from "./parts/Root";
import { Bar } from "./parts/Bar";
import { Child } from "./parts/Child";

export type SplitType = "ns" | "sn" | "we" | "ew";

interface StyleProps {
type?: 'ns' | 'sn' | 'we' | 'ew';
interface SplitProps {
type?: SplitType;
pos?: number;
activeSize?: number;
barSize?: number;
children?: ReactNode | null;
style?: React.CSSProperties;
}
export const Root = styled.div.attrs<StyleProps>(p => ({
style: {
}
})) <StyleProps>`
& {
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background-color:blue;
}
`

interface BarProps {
/**
*画面分割コンポーネント
*
* @export
* @class SplitView
* @extends {Component<SplitProps, { pos: number }>}
*/

interface State {
pos: number;
size: number;
type: 'ns' | 'sn' | 'we' | 'ew';
activeMode: boolean;
barOpen: boolean;
}
export const Bar = styled.div.attrs<BarProps>(p => {
let style = {};
switch (p.type) {
case 'we':
style = {
top: 0,
bottom: 0,
left: p.pos + 'px',
width: p.size + 'px',
cursor: 'ew-resize'
}
break;
case 'ew':
style = {}
break;
case 'ns':
style = {}
break;
case 'sn':
style = {}
break;
}
return { style };
}) <BarProps>`
position:absolute;
box-sizing: border-box;
background-color: #777777;
border: outset 2px #b8b7b7;
user-select: none;
`
export class SplitView extends Component<StyleProps, { pos: number }> {
splitterRef = createRef<HTMLDivElement>();
barType: 'ns' | 'sn' | 'we' | 'ew' = 'we';
constructor(props: StyleProps) {
export class SplitView extends Component<SplitProps, State> {
static defaultProps = {
type: "we",
barSize: 8,
pos: 100,
activeSize: 300,
style: {}
};
private closeHandle?: number;
private resizeObserver?: ResizeObserver;
private rootRef = createRef<HTMLDivElement>();
private splitterRef = createRef<HTMLDivElement>();
private childRef = [createRef<HTMLDivElement>(), createRef<HTMLDivElement>()];
private children: (ReactNode | undefined)[] = [undefined, undefined];
public constructor(props: SplitProps) {
super(props);
if (props.type)
this.barType = props.type;

this.state = { pos: props.pos !== undefined ? props.pos : 100 };

this.state = { pos: props.pos!, activeMode: false, barOpen: true };
if (props.children) {
if (props.children instanceof Array) {
this.children = props.children;
}
}
}
render() {
public render() {
return (
<Root id="root">
<Bar ref={this.splitterRef} onTouchStart={this.onMouseDown.bind(this)}
onMouseDown={this.onMouseDown.bind(this)} type='we' size={8} pos={this.state.pos} />
</Root>)
<Root ref={this.rootRef} style={this.props.style!}>
<Child ref={this.childRef[1]}>{this.children[1]}</Child>
<Child ref={this.childRef[0]}>{this.children[0]}</Child>
<Bar
activeMode={this.state.activeMode}
open={this.state.barOpen}
refs={this.splitterRef}
onTouchStart={this.onMouseDown.bind(this)}
onMouseDown={this.onMouseDown.bind(this)}
type={this.props.type!}
size={this.props.barSize!}
pos={this.state.pos}
procOpen={open => this.onOpen(open)}
></Bar>
</Root>
);
}
componentDidUpdate() {
this.onLayout();
}
public componentDidMount() {
const node = this.splitterRef.current!;
node.addEventListener("move", this.onMove.bind(this));

this.resizeObserver = new ResizeObserver(() => {
this.onLayout();
});
this.resizeObserver.observe(this.rootRef.current! as Element);

this.onLayout();
}
public componentWillUnmount() {
const node = this.splitterRef.current!;
node.removeEventListener("move", this.onMove.bind(this));
if (this.resizeObserver) {
this.resizeObserver.disconnect();
this.resizeObserver = undefined;
}
}
onMove(e: JWFEvent) {
protected onMove(e: JWFEvent) {
let p = e.params as MovePoint;
let pos = this.state.pos;
switch (this.barType) {
switch (this.props.type!) {
case "we":
pos = p.nodePoint.x + p.nowPoint.x - p.basePoint.x;
break;
case "ew":
pos = p.nodePoint.x - (p.nowPoint.x - p.basePoint.x);
break;
case "ns":
pos = p.nodePoint.y + p.nowPoint.y - p.basePoint.y;
break;
case "sn":
pos = p.nodePoint.y - (p.nowPoint.y - p.basePoint.y);
break;
}
console.log(pos);
this.setState({ pos });
}
onMouseDown(e:
| React.MouseEvent<HTMLDivElement, MouseEvent>
| React.TouchEvent<HTMLDivElement>) {
closeBar() {
if (this.closeHandle) {
clearTimeout(this.closeHandle);
}
setTimeout(() => {
// this.onOpen(false);
this.closeHandle = undefined;
}, 2000);
}
protected onLayout() {
let activeMode = false;
let pos = this.state.pos;
const rootRef = this.rootRef!.current!;
const children = [this.childRef[0].current!, this.childRef[1].current!];
const barSize = this.props.barSize!;
const barType = this.props.type;
const width = rootRef.offsetWidth;
const height = rootRef.offsetHeight;

if (barType === "we" || barType === "ew") {
const w = width - (pos + barSize);
if (w < this.props.activeSize!) {
activeMode = true;
if (!this.state.activeMode) {
children[1].style.left = "0";
children[1].style.right = "0";
children[1].style.width = null;
children[1].style.height = null;
children[1].style.top = "0";
children[1].style.bottom = "0";
this.closeBar();
}
}
} else {
const h = height - (pos + barSize);
if (h < this.props.activeSize!) {
activeMode = true;
if (!this.state.activeMode) {
children[1].style.left = "0";
children[1].style.right = "0";
children[1].style.top = "0";
children[1].style.bottom = "0";
children[1].style.width = null;
children[1].style.height = null;
this.closeBar();
}
}
}
if (activeMode !== this.state.activeMode) {
if (!activeMode) {
this.onOpen(true);
}
this.setState({ activeMode });
}

switch (barType) {
case "we":
children[0].style.left = "0";
children[0].style.right = null;
children[0].style.width = pos + "px";
children[0].style.height = null;
children[0].style.top = "0";
children[0].style.bottom = "0";
if (!activeMode) {
children[1].style.left = pos + barSize + "px";
children[1].style.right = "0";
children[1].style.width = null;
children[1].style.height = null;
children[1].style.top = "0";
children[1].style.bottom = "0";
}
break;
case "ew":
children[0].style.left = null;
children[0].style.right = "0";
children[0].style.width = pos + "px";
children[0].style.height = null;
children[0].style.top = "0";
children[0].style.bottom = "0";
if (!activeMode) {
children[1].style.left = "0";
children[1].style.right = pos + barSize + "px";
children[1].style.width = null;
children[1].style.height = null;
children[1].style.top = "0";
children[1].style.bottom = "0";
}
break;
case "ns":
children[0].style.top = "0";
children[0].style.bottom = null;
children[0].style.width = null;
children[0].style.height = pos + "px";
children[0].style.left = "0";
children[0].style.right = "0";
if (!activeMode) {
children[1].style.top = pos + barSize + "px";
children[1].style.bottom = "0";
children[1].style.width = null;
children[1].style.height = null;
children[1].style.left = "0";
children[1].style.right = "0";
}
break;
case "sn":
children[0].style.top = null;
children[0].style.bottom = "0";
children[0].style.width = null;
children[0].style.height = pos + "px";
children[0].style.left = "0";
children[0].style.right = "0";
if (!activeMode) {
children[1].style.top = "0";
children[1].style.bottom = pos + barSize + "px";
children[1].style.width = null;
children[1].style.height = null;
children[1].style.left = "0";
children[1].style.right = "0";
}
break;
}
}
protected onMouseDown(
e:
| React.MouseEvent<HTMLDivElement, MouseEvent>
| React.TouchEvent<HTMLDivElement>
) {
if (Manager.moveNode == null) {
const node = this.splitterRef.current!;
Manager.moveNode = node;
Expand All @@ -113,4 +254,15 @@ export class SplitView extends Component<StyleProps, { pos: number }> {
e.preventDefault();
}
}
}
onOpen(open: boolean) {
const children = this.childRef[0].current!;
if (open) {
children.style.animation =
this.props.type + "DrawerShow 0.5s ease 0s forwards";
} else {
children.style.animation =
this.props.type + "DrawerClose 0.5s ease 0s forwards";
}
this.setState({ barOpen: open });
}
}
Loading

0 comments on commit 021d222

Please sign in to comment.