rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-09-01 06:56:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: enhance demo

Browse Source
This commit is contained in:
mathuo 2021-10-31 21:24:30 +00:00
parent 17f64bcc9e
commit f1ec5dfe4f
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
5 changed files with 119 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/dockview-demo/src/index.scss
View File

@ -48,7 +48,6 @@ body {
}
button {
max-width: 125px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

4
packages/dockview-demo/src/layout-grid/controlCenter.scss
View File

@ -2,7 +2,7 @@
display: flex;
flex-direction: column;
height: 100%;
padding: 2px;
padding: 4px 8px;
box-sizing: border-box;
.control-center-row {
@ -10,7 +10,7 @@
box-sizing: border-box;
button {
width: 125px;
width: 175px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

33
packages/dockview-demo/src/services/sidebarItem.tsx
View File

@ -1,6 +1,5 @@
import { ViewContainer } from './viewContainer';
import * as React from 'react';
import { toggleClass } from '../dom';
export const Container = (props: {
container: ViewContainer;
@ -17,7 +16,15 @@ export const Container = (props: {
const [dragEntered, setDragEntered] = React.useState<boolean>(false);
const timer = React.useRef<any>(null);
const onDragOver = (e: React.DragEvent) => {
if (!timer.current) {
timer.current = setTimeout(() => {
props.onDragOver(e);
}, 1000);
}
if (isDragging.current) {
return;
}
@ -44,11 +51,14 @@ export const Container = (props: {
const isBottom = yp >= 50;
setSelection(isTop ? 'top' : 'bottom');
props.onDragOver(e);
};
const onDragLeave = (e: React.DragEvent) => {
if (timer.current) {
clearTimeout(timer.current);
timer.current = null;
}
if (isDragging.current) {
return;
}
@ -59,6 +69,10 @@ export const Container = (props: {
};
const onDrop = (e: React.DragEvent) => {
if (timer.current) {
clearTimeout(timer.current);
timer.current = null;
}
if (isDragging.current) {
return;
}
@ -102,10 +116,10 @@ export const Container = (props: {
onDrop={onDrop}
style={{
borderLeft: props.isActive
? '1px solid white'
: '1px solid transparent',
? '2px solid white'
: '2px solid transparent',
}}
className="container-item"
className={`activity-bar-item${props.isActive ? ' active' : ''}`}
>
{dragEntered && (
<div
@ -124,12 +138,7 @@ export const Container = (props: {
}}
/>
)}
<span
style={{ fontSize: '30px' }}
className="material-icons-outlined"
>
{props.container.icon}
</span>
<a className="material-icons-outlined">{props.container.icon}</a>
</div>
);
};

40
packages/dockview-demo/src/services/widgets.scss
View File

@ -1,14 +1,32 @@
.activity-bar-space {
&.activity-bar-space-dragover {
background-color: green !important;
}
.sidebar-part {
background-color: #252526;
}
.container-item {
display: flex;
justify-content: center;
align-items: center;
height: 48px;
box-sizing: border-box;
position: relative;
.activity-bar-part {
background-color: #333333;
.activity-bar-item {
display: flex;
cursor: pointer;
justify-content: center;
align-items: center;
height: 48px;
box-sizing: border-box;
position: relative;
color: grey;
font-size: 24px;
&:hover,
&.active {
color: white;
}
}
.activity-bar-space {
height: 100%;
&.activity-bar-space-dragover {
border-top: 2px solid white;
}
}
}

71
packages/dockview-demo/src/services/widgets.tsx
View File

@ -197,6 +197,8 @@ export const Activitybar = (props: IGridviewPanelProps) => {
);
break;
}
viewService.model.setActiveViewContainer(sourceContainer.id);
}
};
@ -205,9 +207,21 @@ export const Activitybar = (props: IGridviewPanelProps) => {
if (data) {
const { paneId } = data;
const view = viewService.model.getView(paneId);
if (!view) {
console.log(`view ${paneId} doesn't exist`);
return;
}
const viewContainer = viewService.model.getViewContainer2(view);
if (!viewContainer) {
console.log(`viewContainer for view ${view.id} doesn't exist`);
return;
}
viewService.model.removeViews([view], viewContainer);
// viewContainer.removeView(view);
const newContainer = new PaneviewContainer(
`t_${Date.now().toString().substr(5)}`,
VIEW_REGISTRY
@ -230,7 +244,7 @@ export const Activitybar = (props: IGridviewPanelProps) => {
};
return (
<div style={{ background: 'rgb(51,51,51)', cursor: 'pointer' }}>
<div className="activity-bar-part">
{containers.map((container, i) => {
const isActive = activeContainerid === container.id;
return (
@ -254,6 +268,11 @@ const ExtraSpace = (props: {
}) => {
const ref = React.useRef<HTMLDivElement>(null);
const onDrop = (event: React.DragEvent) => {
toggleClass(ref.current, 'activity-bar-space-dragover', false);
props.onNewContainer(event);
};
return (
<div
ref={ref}
@ -268,8 +287,7 @@ const ExtraSpace = (props: {
onDragLeave={(e) => {
toggleClass(ref.current, 'activity-bar-space-dragover', false);
}}
onDrop={props.onNewContainer}
style={{ height: '100%', backgroundColor: 'red' }}
onDrop={onDrop}
></div>
);
};
@ -292,6 +310,28 @@ export const Sidebar = () => {
return <SidebarPart id={sidebarId} />;
};
const headerComponents: PanelCollection<IPaneviewPanelProps> = {
default: (props) => {
const onClick = () => props.api.setExpanded(!props.api.isExpanded);
return (
<div
onClick={onClick}
style={{
display: 'flex',
alignItems: 'center',
padding: '0px 8px',
cursor: 'pointer',
}}
>
<a className="material-icons-outlined">
{props.api.isExpanded ? 'expand_more' : 'chevron_right'}
</a>
<span>{props.title}</span>
</div>
);
},
};
export const SidebarPart = (props: { id: string }) => {
const [api, setApi] = React.useState<PaneviewApi>();
@ -314,6 +354,7 @@ export const SidebarPart = (props: { id: string }) => {
isExpanded: view.isExpanded,
title: view.title,
component: 'default',
headerComponent: 'default',
params: {
viewId: view.id,
},
@ -339,6 +380,7 @@ export const SidebarPart = (props: { id: string }) => {
isExpanded: view.isExpanded,
title: view.title,
component: 'default',
headerComponent: 'default',
params: {
viewId: view.id,
},
@ -365,6 +407,10 @@ export const SidebarPart = (props: { id: string }) => {
if (containerData) {
const { container } = JSON.parse(containerData);
if (container === props.id) {
return;
}
const sourceContainer = viewService.model.getViewContainer(
container
);
@ -372,6 +418,15 @@ export const SidebarPart = (props: { id: string }) => {
props.id
);
if (!sourceContainer) {
console.log(`sourceContainer ${props.id} doesn't exist`);
return;
}
if (!targetContainer) {
console.log(`targetContainer ${props.id} doesn't exist`);
return;
}
sourceContainer.views.forEach((v) => {
viewService.model.moveViewToLocation(v, targetContainer, 0);
});
@ -396,6 +451,12 @@ export const SidebarPart = (props: { id: string }) => {
const viewId = data.paneId;
const viewContainer = viewService.model.getViewContainer(props.id);
if (!viewContainer) {
console.log(`viewContainer ${props.id} doesn't exist`);
return;
}
const view = viewService.model.getView(viewId);
viewService.model.moveViewToLocation(view, viewContainer, toIndex);
@ -407,8 +468,10 @@ export const SidebarPart = (props: { id: string }) => {
return (
<PaneviewReact
className="sidebar-part"
onDidDrop={onDidDrop}
components={components}
headerComponents={headerComponents}
onReady={onReady}
/>
);