Skip to content

Commit

Permalink
use percentage
Browse files Browse the repository at this point in the history 
test


track affected column on drag start
  • Loading branch information
@colombod
colombod committed Feb 8, 2023
1 parent 03c619f commit 5835600
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 86 deletions.
168 changes: 90 additions & 78 deletions src/polyglot-notebooks-ui-components/src/components/VariableGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,16 @@ export type VariableGridState = {
filter: string,
drag?: {
iniMouse: number,
iniSize: number
sizes: {
targetColumn: {
iniSize: number,
id: string
},
affectedColumn?: {
iniSize: number,
id: string
}
}
}
};

Expand All @@ -37,11 +46,11 @@ export class VariableGrid extends React.Component<VariableGridProps, VariableGri
};

idToClass: { [key: string]: string } = {
"0-0": "name-column-content",
"0-1": "value-column-content",
"0-2": "type-column-content",
"0-3": "kernel-column-content",
"0-4": "actions-column-content"
"0-0": "name",
"0-1": "value",
"0-2": "type",
"0-3": "kernel",
"0-4": "actions"
};

idlayout: {
Expand All @@ -55,15 +64,15 @@ export class VariableGrid extends React.Component<VariableGridProps, VariableGri
},
"0-1": {
left: "0-0",
right: "0-1"
right: "0-2"
},
"0-2": {
left: "0-1",
right: "0-2"
right: "0-3"
},
"0-3": {
left: "0-2",
right: "0-3"
right: "0-4"
},
"0-4": {
left: "0-3",
Expand Down Expand Up @@ -100,81 +109,82 @@ export class VariableGrid extends React.Component<VariableGridProps, VariableGri
});
}

handleStart(e: React.DragEvent<HTMLDivElement>, id: string) {
getTableSize(): number {
const tableElement = document.getElementById("table-root")!;
return this.getWidth(tableElement);
}

getWidth(element: Element) {
const computedStyle = window.getComputedStyle(element);
const width = parseInt(computedStyle.width);
return width;
}

handleStart(e: React.DragEvent<HTMLDivElement>, id: string) {
const element = document.getElementById(id);
if (element) {
let iniMouse = e.clientX;
let iniSize = parseInt(window.getComputedStyle(element).width);
let iniSize = this.getWidth(element);
let sizes: {
targetColumn: {
iniSize: number,
id: string
},
affectedColumn?: {
iniSize: number,
id: string
}
} = {
targetColumn: {
iniSize,
id
}
};
const affectedcolumnId = this.idlayout[id].right;
if (affectedcolumnId) {
sizes.affectedColumn = {
id: affectedcolumnId,
iniSize: this.getWidth(document.getElementById(id)!)
}
}
this.setState({
...this.state,
drag: {
iniMouse: iniMouse,
iniSize: iniSize
sizes: sizes
}
});
}
}

handleMove(e: React.DragEvent<HTMLDivElement>, id: string) {
if (this.state.drag && e.clientX) {
const element = document.getElementById(id);

const element = document.getElementById(id)!;
const tableWidth = this.getTableSize();

if (element) {
const iniMouse = this.state.drag.iniMouse!;
const iniSize = this.state.drag.iniSize!;
const endMouse = e.clientX;
const delta = (endMouse - iniMouse)
const endSize = iniSize + delta;
element.style.width = `${endSize}px`;
const targetClass = this.idToClass[id];
const affectedcolumnId = this.idlayout[id].right;
const startDragPosition = this.state.drag.iniMouse!;
const sizes = this.state.drag.sizes;
const iniSize = sizes.targetColumn.iniSize!;
const endDragPosition = e.clientX;
const delta = (endDragPosition - startDragPosition);
const iniSizePercentage = (iniSize / tableWidth) * 100.0;
const deltaPercentage = (delta / tableWidth) * 100.0;
const endSizePercentage = iniSizePercentage + deltaPercentage;
const targetClass = `${this.idToClass[id]}-column`;
const affectedcolumnId = sizes.affectedColumn?.id;

if (targetClass && affectedcolumnId) {
const affectedColumn = document.getElementById(affectedcolumnId)!;
const w = affectedColumn.clientWidth - delta;
affectedColumn.style.width = `${w}px`;

const targetToResizeClass = this.idToClass[affectedcolumnId];
const targets = document.querySelectorAll(`.${targetClass}`);
for (let index = 0; index < targets.length; index++) {
const target = targets[index] as any;
target.style["max-width"] = `${endSize}px`;
}

const targetsToResize = document.querySelectorAll(`.${targetToResizeClass}`);
for (let index = 0; index < targetsToResize.length; index++) {
const targetToResize = targetsToResize[index] as any;
targetToResize.style["max-width"] = `${w}px`;
}
}
}
}
}
const affectedColumnClass = `${this.idToClass[affectedcolumnId]}-column`;
const w = ((sizes.affectedColumn?.iniSize! / tableWidth) * 100.0) - deltaPercentage;

handleDragEnd(e: React.DragEvent<HTMLDivElement>, id: string): void {
const element = document.getElementById(id);
const affectedcolumnId = this.idlayout[id].right;

if (element && affectedcolumnId) {
const affectedColumn = document.getElementById(affectedcolumnId)!;
const targetClass = this.idToClass[id];
const targetToResizeClass = this.idToClass[affectedcolumnId];
const computedStyle = window.getComputedStyle(document.getElementById(id)!);
const computedStyleForAffected = window.getComputedStyle(document.getElementById(id)!);
if (targetClass) {
window.setTimeout(() => {
const targets = document.querySelectorAll(`.${targetClass}`);
for (let index = 0; index < targets.length; index++) {
const target = targets[index] as any;
target.style["max-width"] = computedStyle.width;
}
const targetColumn: any = document.querySelector(`col.${targetClass}`)!;
const affectedColumn: any = document.querySelector(`col.${affectedColumnClass}`)!;

const targetsToResize = document.querySelectorAll(`.${targetToResizeClass}`);
for (let index = 0; index < targetsToResize.length; index++) {
const targetToResize = targetsToResize[index] as any;
targetToResize.style["max-width"] = computedStyleForAffected.width;
}
}, 10);
targetColumn.style["width"] = `${endSizePercentage}%`;
affectedColumn.style["width"] = `${w}%`;
}
}
}
}
Expand Down Expand Up @@ -207,10 +217,13 @@ export class VariableGrid extends React.Component<VariableGridProps, VariableGri
}
}



handleInput(e: React.FormEvent<HTMLInputElement>): void {
const inputField = e.target as HTMLInputElement;
this.updateFilter(inputField.value);
}

updateFilter(filter: string) {
this.setState({
...this.state,
Expand Down Expand Up @@ -285,69 +298,72 @@ export class VariableGrid extends React.Component<VariableGridProps, VariableGri
/>
</div>
<div className="table-container" >
<table>
<table id="table-root">
<colgroup>
<col className="name-column"></col>
<col className="value-column"></col>
<col className="type-column"></col>
<col className="kernel-column"></col>
<col className="actions-column"></col>
</colgroup>
<tbody>
<tr>
<th
key={0}
id={`0-0`}
className="header"
className="header name-column"
>
Name
<div
className='grip'
draggable={true}
onDragStart={(e) => this.handleStart(e, `0-0`)}
onDrag={(e) => this.handleMove(e, `0-0`)}
onDragEnd={(e) => this.handleDragEnd(e, `0-0`)}
/>
</th>
<th
key={1}
id={`0-1`}
className="header"
className="header value-column"
>
Value
<div
className='grip'
draggable={true}
onDragStart={(e) => this.handleStart(e, `0-1`)}
onDrag={(e) => this.handleMove(e, `0-1`)}
onDragEnd={(e) => this.handleDragEnd(e, `0-1`)}
/>
</th>
<th
key={2}
id={`0-2`}
className="header"
className="header type-column"
>
Type
<div
className='grip'
draggable={true}
onDragStart={(e) => this.handleStart(e, `0-2`)}
onDrag={(e) => this.handleMove(e, `0-2`)}
onDragEnd={(e) => this.handleDragEnd(e, `0-2`)}
/>
</th>
<th
key={3}
id={`0-3`}
className="header"
className="header kernel-column"
>
Kernel
<div
className='grip'
draggable={true}
onDragStart={(e) => this.handleStart(e, `0-3`)}
onDrag={(e) => this.handleMove(e, `0-3`)}
onDragEnd={(e) => this.handleDragEnd(e, `0-3`)}
/>
</th>
<th
key={4}
id={`0-4`}
className="header"
className="header actions-column"
>
Actions
</th>
Expand All @@ -365,7 +381,6 @@ export class VariableGrid extends React.Component<VariableGridProps, VariableGri
draggable={true}
onDragStart={(e) => this.handleStart(e, `0-0`)}
onDrag={(e) => this.handleMove(e, `0-0`)}
onDragEnd={(e) => this.handleDragEnd(e, `0-0`)}
/>
</td>
<td key={1} id={`${row.id}-${1}`} className="value-column">
Expand All @@ -379,7 +394,6 @@ export class VariableGrid extends React.Component<VariableGridProps, VariableGri
draggable={true}
onDragStart={(e) => this.handleStart(e, `0-1`)}
onDrag={(e) => this.handleMove(e, `0-1`)}
onDragEnd={(e) => this.handleDragEnd(e, `0-1`)}
/>
</td>
<td key={2} id={`${row.id}-${2}`} className="type-column">
Expand All @@ -393,7 +407,6 @@ export class VariableGrid extends React.Component<VariableGridProps, VariableGri
draggable={true}
onDragStart={(e) => this.handleStart(e, `0-2`)}
onDrag={(e) => this.handleMove(e, `0-2`)}
onDragEnd={(e) => this.handleDragEnd(e, `0-2`)}
/>
</td>
<td key={3} id={`${row.id}-${3}`} className="kernel-column">
Expand All @@ -407,7 +420,6 @@ export class VariableGrid extends React.Component<VariableGridProps, VariableGri
draggable={true}
onDragStart={(e) => this.handleStart(e, `0-3`)}
onDrag={(e) => this.handleMove(e, `0-3`)}
onDragEnd={(e) => this.handleDragEnd(e, `0-3`)}
/>
</td>
<td key={4} id={`${row.id}-${4}`} className="actions-column">
Expand Down
15 changes: 8 additions & 7 deletions src/polyglot-notebooks-ui-components/src/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ table {
border-collapse: collapse;
position: relative;
overflow-y: auto;
table-layout: fixed;
}

th,
Expand Down Expand Up @@ -82,27 +83,27 @@ td {
height: 100%;
}

td.name-column {
col.name-column {
width: 20%;
}

td.type-column {
col.type-column {
width: 15%;
}

td.value-column {
col.value-column {
width: 40%;
}

td.kernel-column {
col.kernel-column {
width: 15%;
}

td.actions-column {
col.actions-column {
width: 10%;
}

div.name-column-content {
/* div.name-column-content {
max-width: 20vw;
}
Expand All @@ -120,7 +121,7 @@ div.kernel-column-content {
div.actions-column-content {
max-width: 10vw;
}
} */

button {
background-color: var(--vscode-button-background);
Expand Down
2 changes: 1 addition & 1 deletion src/polyglot-notebooks-ui-components/webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
'variable-grid': './src/localTest.tsx'
'variable-grid': './src/index.tsx'
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json', '.svg'],
Expand Down

0 comments on commit 5835600

Please sign in to comment.