Skip to content
Snippets Groups Projects
Commit b2680c6e authored by Yannis Barlas's avatar Yannis Barlas Committed by chris
Browse files

backup

parent c7408111
No related branches found
No related tags found
1 merge request!161Connect ui
Hide whitespace changes
Inline Side-by-side
stories/tables/Grid.stories.js
+ 1
− 1
View file @ b2680c6e
...@@ -10,7 +10,7 @@ const Wrapper = styled.div` ...@@ -10,7 +10,7 @@ const Wrapper = styled.div`
export const Base = () => ( export const Base = () => (
<Wrapper> <Wrapper>
<Grid intialRows={5} initialColumns={5} />; <Grid />
</Wrapper> </Wrapper>
); );
......
stories/tables/TableTool.stories.js
+ 10
− 1
View file @ b2680c6e
import React from 'react'; import React from 'react';
import styled from 'styled-components';
// import { lorem } from 'faker' // import { lorem } from 'faker'
import TableTool from '../../wax-prosemirror-components/src/ui/tables/TableTool'; import TableTool from '../../wax-prosemirror-components/src/ui/tables/TableTool';
export const Base = () => <TableTool />; const Wrapper = styled.div`
height: 450px;
`;
export const Base = () => (
<Wrapper>
<TableTool />
</Wrapper>
);
export default { export default {
component: TableTool, component: TableTool,
......
wax-prosemirror-components/src/ui/tables/Grid.js
+ 83
− 186
View file @ b2680c6e
...@@ -3,43 +3,20 @@ import PropTypes from 'prop-types'; ...@@ -3,43 +3,20 @@ import PropTypes from 'prop-types';
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components';
import { range } from 'lodash'; import { range } from 'lodash';
import GridCell from './GridCell'; const MIN_GRID_SIZE = 20;
const MAX_GRID_SIZE = 20;
const INITIAL_GRID_SIZE = 5; const INITIAL_ACTIVE_GRID_SIZE = 1;
const CELL_SIZE = 12; const CELL_SIZE = 12;
const GUTTER = 4; const GUTTER = 4;
const Wrapper = styled.div` const Wrapper = styled.div`
/* flex-direction: column; */
position: relative; position: relative;
/* height: 100px;
width: 100px; */
/* background: turquoise; */
border: 1px solid gray;
border-radius: 5px;
box-sizing: border-box; box-sizing: border-box;
height: ${props => `${16 + props.rows * (CELL_SIZE + GUTTER)}px`}; height: ${props => `${props.rows * (CELL_SIZE + GUTTER)}px`};
width: ${props => `${props.columns * (CELL_SIZE + GUTTER)}px`}; width: ${props => `${props.columns * (CELL_SIZE + GUTTER)}px`};
padding: 8px;
`; `;
const StyledRow = styled.div`
display: flex;
flex-direction: row;
`;
const StyledGridCell = styled(GridCell)`
margin: 1px;
`;
// .attrs(props => ({
// style: {
// background: props.active && 'skyblue',
// },
// }))
const StyledCell = styled.div.attrs(({ top, left }) => ({ const StyledCell = styled.div.attrs(({ top, left }) => ({
style: { style: {
top, top,
...@@ -57,38 +34,19 @@ const StyledCell = styled.div.attrs(({ top, left }) => ({ ...@@ -57,38 +34,19 @@ const StyledCell = styled.div.attrs(({ top, left }) => ({
// top: ${props => props.top}; // top: ${props => props.top};
// left: ${props => props.left}; // left: ${props => props.left};
/* ${props => props.active && `background: skyblue;`} */
// const Cell = props => {
// const { active, className, onMouseEnter, rowIndex, columnIndex } = props;
// return (
// <StyledCell
// row={rowIndex}
// column={columnIndex}
// active={active}
// className={className}
// onMouseEnter={onMouseEnter}
// />
// );
// };
class Cell extends React.PureComponent { class Cell extends React.PureComponent {
render() { render() {
// console.log('render!'); console.log('render!');
const { const {
active, active,
// className, // className,
onMouseEnter, // onMouseEnter,
// rowIndex, // rowIndex,
// columnIndex, // columnIndex,
top, top,
left, left,
} = this.props; } = this.props;
// if (rowIndex === 0 && columnIndex === 0) {
// console.log(this.props);
// }
return ( return (
<StyledCell <StyledCell
style={{ style={{
...@@ -97,8 +55,7 @@ class Cell extends React.PureComponent { ...@@ -97,8 +55,7 @@ class Cell extends React.PureComponent {
// row={rowIndex} // row={rowIndex}
// column={columnIndex} // column={columnIndex}
active={active} active={active}
// className={className} // onMouseEnter={onMouseEnter}
onMouseEnter={onMouseEnter}
top={top} top={top}
left={left} left={left}
/> />
...@@ -106,164 +63,104 @@ class Cell extends React.PureComponent { ...@@ -106,164 +63,104 @@ class Cell extends React.PureComponent {
} }
} }
const Row = props => { // const Cell = props => {
const { activeRows, activeColumns, columns, rowIndex, updateActive } = props; // console.log('render!');
// const {
return ( // active,
<StyledRow> // // className,
{range(columns).map(columnIndex => ( // // onMouseEnter,
<StyledGridCell // // rowIndex,
active={rowIndex < activeRows && columnIndex < activeColumns} // // columnIndex,
onMouseEnter={() => updateActive(rowIndex + 1, columnIndex + 1)} // top,
key={columnIndex} // left,
/> // } = props;
))}
</StyledRow>
);
};
const Grid = props => {
const { className, initialRows, initialColumns } = props;
const [rows, setRows] = useState(INITIAL_GRID_SIZE);
const [columns, setColumns] = useState(INITIAL_GRID_SIZE);
const [activeRows, setActiveRows] = useState(1);
const [activeColumns, setActiveColumns] = useState(1);
// const [state, setState] = useState({
// rows: 5,
// columns: 5,
// activeRows: 1,
// activeColumns: 1,
// });
const updateActive = (rowPosition, columnPosition) => { // return (
console.log('run!'); // <StyledCell
// console.log(rowPosition, columnPosition); // style={{
// console.log(rowPosition, rows); // background: active && 'skyblue',
// expand // }}
// const newRowCount = // // row={rowIndex}
// rowPosition === rows && rowPosition < 20 ? rows + 1 : rows; // // column={columnIndex}
// setRows(newRowCount); // active={active}
// rowPosition === rows && rowPosition < 20 && setRows(rows + 1); // // onMouseEnter={onMouseEnter}
// const newColumnCount = // top={top}
// columnPosition === columns && columnPosition < 20 ? columns + 1 : columns; // left={left}
// setColumns(newColumnCount); // />
// columnPosition === columns && // );
// columnPosition < 20 && // };
// setColumns(columns + 1);
setActiveRows(rowPosition);
// setActiveColumns(columnPosition);
// contract
// rowPosition < rows && rows < 20 && rowPosition > 5 && setRows(rows - 1);
// setState({
// activeRows: rowPosition,
// activeColumns: columnPosition,
// rows: rowPosition === rows && rowPosition < 20 ? rows + 1 : rows,
// columns,
// });
};
// console.log('render me'); let counter = 0;
// const { rows, columns, activeRows, activeColumns } = state; const Grid = props => {
const { className } = props;
// return ( const [rows, setRows] = useState(MIN_GRID_SIZE);
// <Wrapper className={className}> const [columns, setColumns] = useState(MIN_GRID_SIZE);
// {range(rows).map(rowIndex => {
// return (
// <Row
// activeRows={activeRows}
// activeColumns={activeColumns}
// columns={columns}
// rowIndex={rowIndex}
// key={rowIndex}
// updateActive={updateActive}
// />
// );
// })}
// <span> const [activeRows, setActiveRows] = useState(INITIAL_ACTIVE_GRID_SIZE);
// {activeColumns} x {activeRows} const [activeColumns, setActiveColumns] = useState(INITIAL_ACTIVE_GRID_SIZE);
// </span>
// </Wrapper>
// );
const onMouseMove = e => { const onMouseMove = e => {
// console.log(e.nativeEvent.offsetX); counter++;
// const { offsetX, offsetY } = e.nativeEvent; // console.log(counter);
// console.log(offsetX, offsetY); // const startTime = performance.now();
// console.log(e.clientX, e.clientY);
// console.log(e_offsetX, e_offsetY);
// get position of our Wrapper within page // get position of our Wrapper within page
const container = e.currentTarget.getBoundingClientRect(); const container = e.currentTarget.getBoundingClientRect();
const containerX = e.pageX - container.left; const containerX = e.pageX - container.left;
const containerY = e.pageY - container.top; const containerY = e.pageY - container.top;
const overRow = Math.ceil(containerY / (CELL_SIZE + GUTTER)); const overRow = Math.ceil(containerY / (CELL_SIZE + GUTTER));
// console.log('offsetY', offsetY, 'overRow', overRow);
const overColumn = Math.ceil(containerX / (CELL_SIZE + GUTTER)); const overColumn = Math.ceil(containerX / (CELL_SIZE + GUTTER));
setActiveRows(overRow); // const endTime = performance.now();
setActiveColumns(overColumn); // console.log(endTime - startTime);
// overRow === rows && overRow < 20 && setRows(rows + 1);
// overRow + 1 < rows && overRow > 3 && setRows(rows - 1);
if (overColumn < 5) { // if (overColumn < MIN_GRID_SIZE) {
setColumns(5); // setColumns(MIN_GRID_SIZE);
} else if (overColumn >= 5 && overColumn <= 20) { // } else if (overColumn >= MIN_GRID_SIZE && overColumn < MAX_GRID_SIZE) {
setColumns(overColumn + 1); // setColumns(overColumn + 1);
} // }
// overColumn < 5 && setColumns(5);
// overColumn >= 5 && overColumn <= 20 && setColumns(overColumn + 1);
if (overRow < 5) {
setRows(5);
} else if (overRow >= 5 && overRow <= 20) {
setRows(overRow + 1);
}
// overRow < 5 && setRows(5); // if (overRow < MIN_GRID_SIZE) {
// overRow >= 5 && overRow <= 20 && setRows(overRow + 1); // setRows(MIN_GRID_SIZE);
// } else if (overRow >= MIN_GRID_SIZE && overRow < MAX_GRID_SIZE) {
// setRows(overRow + 1);
// }
// overColumn === columns && overColumn < 20 && setColumns(columns + 1); setActiveRows(overRow);
// overColumn + 1 < columns && overColumn > 3 && setColumns(columns - 1); setActiveColumns(overColumn);
}; };
return ( return (
<Wrapper <>
className={className} <Wrapper
onMouseMove={onMouseMove} className={className}
columns={columns} onMouseMove={onMouseMove}
rows={rows} columns={columns}
> rows={rows}
{range(rows).map(rowIndex => >
range(columns).map(columnIndex => { {range(rows).map(rowIndex =>
// console.log(rowIndex, columnIndex); range(columns).map(columnIndex => {
return ( return (
<Cell <Cell
active={rowIndex < activeRows && columnIndex < activeColumns} active={rowIndex < activeRows && columnIndex < activeColumns}
key={`${rowIndex}:${columnIndex}`} key={`${rowIndex}:${columnIndex}`}
rowIndex={rowIndex} rowIndex={rowIndex}
columnIndex={columnIndex} columnIndex={columnIndex}
// onMouseEnter={() => updateActive(rowIndex, columnIndex)} // onMouseEnter={() => updateActive(rowIndex, columnIndex)}
top={`${rowIndex * CELL_SIZE + rowIndex * GUTTER}px`} top={`${rowIndex * CELL_SIZE + rowIndex * GUTTER}px`}
left={`${columnIndex * 12 + columnIndex * GUTTER}px`} left={`${columnIndex * 12 + columnIndex * GUTTER}px`}
/> />
); );
}), }),
)} )}
</Wrapper>
{/* <span>
<span>
{activeColumns} x {activeRows} {activeColumns} x {activeRows}
</span> */} </span>
</Wrapper> </>
); );
}; };
......
wax-prosemirror-components/src/ui/tables/TableTool.js
+ 228
− 358
View file @ b2680c6e
/* eslint-disable react/prop-types */ /* eslint-disable react/prop-types */
/* eslint-disable react/jsx-handler-names */
/* eslint-disable react/destructuring-assignment */
/* eslint-disable no-underscore-dangle */
/* eslint-disable no-plusplus */
/* eslint-disable prefer-template */
/* eslint-disable prefer-destructuring */
/* eslint-disable max-classes-per-file */
/* eslint-disable jsx-a11y/no-static-element-interactions */
// import cx from 'classnames'; // import cx from 'classnames';
import React, { useState } from 'react'; import React, { useState } from 'react';
// import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import styled from 'styled-components'; import styled from 'styled-components';
// import clamp from './clamp'; // import clamp from './clamp';
const clamp = (min, val, max) => {
if (val < min) {
return min;
}
if (val > max) {
return max;
}
return val;
};
const isIntersected = (r1, r2, padding) => {
const pp = padding || 0;
return !(
r2.x - pp > r1.x + r1.w + pp ||
r2.x + r2.w + pp < r1.x - pp ||
r2.y - pp > r1.y + r1.h + pp ||
r2.y + r2.h + pp < r1.y - pp
);
};
const fromXY = (x, y, padding) => {
padding = padding || 0;
return {
x: x - padding,
y: y - padding,
w: padding * 2,
h: padding * 2,
};
};
const fromHTMlElement = el => {
const display = document.defaultView.getComputedStyle(el).display;
if (display === 'contents' && el.children.length === 1) {
// el has no layout at all, use its children instead.
return fromHTMlElement(el.children[0]);
}
const rect = el.getBoundingClientRect();
return {
x: rect.left,
y: rect.top,
w: rect.width,
h: rect.height,
};
};
const htmlElementToRect = el => {
const rect = el.getBoundingClientRect();
return {
x: rect.left,
y: rect.top,
w: rect.width,
h: rect.height,
};
};
// import htmlElementToRect from './htmlElementToRect'; // import htmlElementToRect from './htmlElementToRect';
// import { fromHTMlElement, fromXY, isIntersected } from './rects'; // import { fromHTMlElement, fromXY, isIntersected } from './rects';
...@@ -20,251 +84,45 @@ const GUTTER_SIZE = 5; ...@@ -20,251 +84,45 @@ const GUTTER_SIZE = 5;
const CELL_SIZE = 16; const CELL_SIZE = 16;
const MAX_SIZE = 20; const MAX_SIZE = 20;
// class GridCell extends React.PureComponent<any, any, any> { class GridCell extends React.PureComponent {
// render(): React.Element<any> { render() {
// const { x, y, selected } = this.props; console.log('render!');
// const style = { const { x, y, selected } = this.props;
// left: x + 'px', const style = {
// top: y + 'px', left: x + 'px',
// width: CELL_SIZE + 'px', top: y + 'px',
// height: CELL_SIZE + 'px', width: CELL_SIZE + 'px',
// }; height: CELL_SIZE + 'px',
// const className = cx('czi-table-grid-size-editor-cell', { border: '1px solid gray',
// selected, boxSizing: 'border-box',
// }); position: 'absolute',
// return <div className={className} style={style} />; zIndex: 2,
// } };
// }
if (selected) style.background = 'skyblue';
const StyledGridCell = styled.div` // const className = cx('czi-table-grid-size-editor-cell', {
left: ${props => `${props.x}px`}; // selected,
top: ${props => `${props.y}px`}; // });
width: ${props => `${CELL_SIZE}px`}; return <div style={style} />;
height: ${props => `${CELL_SIZE}px`};
`;
const GridCell = props => {
const { className, x, y, selected } = props;
// const className = cx('czi-table-grid-size-editor-cell', {
// selected,
// });
return <StyledGridCell x={x} y={y} className={className} />;
};
// class TableGridSizeEditor extends React.PureComponent<any, any, any> {
// _ex = 0;
// _ey = 0;
// _mx = 0;
// _my = 0;
// _rafID = 0;
// _ref = null;
// _entered = false;
// props: {
// close: (val: TableGridSizeEditorValue) => void,
// };
// state: TableGridSizeEditorValue = {
// rows: 1,
// cols: 1,
// };
// componentWillUnmount(): void {
// if (this._entered) {
// document.removeEventListener('mousemove', this._onMouseMove, true);
// }
// this._rafID && cancelAnimationFrame(this._rafID);
// }
// render(): React.Element<any> {
// const { rows, cols } = this.state;
// let rr = Math.max(5, rows);
// let cc = Math.max(5, cols);
// if (rr === rows) {
// rr = Math.min(MAX_SIZE, rr + 1);
// }
// if (cc === cols) {
// cc = Math.min(MAX_SIZE, cc + 1);
// }
// const cells = [];
// let ii = 0;
// let y = 0;
// let w = 0;
// let h = 0;
// while (ii < rr) {
// y += GUTTER_SIZE;
// let jj = 0;
// let x = 0;
// while (jj < cc) {
// x += GUTTER_SIZE;
// const selected = ii < rows && jj < cols;
// cells.push(
// <GridCell
// key={`${String(ii)}-${String(jj)}`}
// selected={selected}
// x={x}
// y={y}
// />,
// );
// x += CELL_SIZE;
// w = x + GUTTER_SIZE;
// jj++;
// }
// y += CELL_SIZE;
// h = y + GUTTER_SIZE;
// ii++;
// }
// const bodyStyle = { width: w + 'px', height: h + 'px' };
// return (
// <div className="czi-table-grid-size-editor" ref={this._onRef}>
// <div
// className="czi-table-grid-size-editor-body"
// onMouseDown={this._onMouseDown}
// onMouseEnter={this._onMouseEnter}
// style={bodyStyle}
// >
// {cells}
// </div>
// <div className="czi-table-grid-size-editor-footer">
// {rows} X {cols}
// </div>
// </div>
// );
// }
// _onRef = (ref: any): void => {
// this._ref = ref;
// };
// _onMouseEnter = (e: MouseEvent): void => {
// const node = e.currentTarget;
// if (node instanceof HTMLElement) {
// const rect = fromHTMlElement(node);
// const mx = Math.round(e.clientX);
// const my = Math.round(e.clientY);
// this._ex = rect.x;
// this._ey = rect.y;
// this._mx = mx;
// this._my = my;
// if (!this._entered) {
// this._entered = true;
// document.addEventListener('mousemove', this._onMouseMove, true);
// }
// }
// };
// _onMouseMove = (e: MouseEvent): void => {
// const el = this._ref && ReactDOM.findDOMNode(this._ref);
// const elRect = el ? htmlElementToRect(el) : null;
// const mouseRect = fromXY(e.screenX, e.screenY, 10);
// if (elRect && mouseRect && isIntersected(elRect, mouseRect, 50)) {
// // This prevents `PopUpManager` from collapsing the editor.
// e.preventDefault();
// e.stopImmediatePropagation();
// }
// const mx = Math.round(e.clientX);
// const my = Math.round(e.clientY);
// if (mx !== this._mx || my !== this._my) {
// this._mx = mx;
// this._my = my;
// this._rafID && cancelAnimationFrame(this._rafID);
// this._rafID = requestAnimationFrame(this._updateGridSize);
// }
// };
// _updateGridSize = (): void => {
// this._rafID = 0;
// const mx = this._mx;
// const my = this._my;
// const x = mx - this._ex;
// const y = my - this._ey;
// const rr = clamp(1, Math.ceil(y / (CELL_SIZE + GUTTER_SIZE)), MAX_SIZE);
// const cc = clamp(1, Math.ceil(x / (CELL_SIZE + GUTTER_SIZE)), MAX_SIZE);
// const { rows, cols } = this.state;
// if (rows !== rr || cols !== cc) {
// this.setState({ rows: rr, cols: cc });
// }
// };
// _onMouseDown = (e: SyntheticEvent): void => {
// e.preventDefault();
// this.props.close(this.state);
// };
// }
const TableGridSizeEditor = props => {
const [rows, setRows] = useState(1);
const [columns, setColumns] = useState(1);
let rr = Math.max(5, rows);
let cc = Math.max(5, columns);
if (rr === rows) {
rr = Math.min(MAX_SIZE, rr + 1);
} }
if (cc === columns) { }
cc = Math.min(MAX_SIZE, cc + 1);
class TableGridSizeEditor extends React.PureComponent {
_ex = 0;
_ey = 0;
_mx = 0;
_my = 0;
_rafID = 0;
_ref = null;
_entered = false;
constructor(props) {
super(props);
this.state = {
rows: 1,
cols: 1,
};
} }
const cells = [];
let ii = 0;
let y = 0;
let w = 0;
let h = 0;
while (ii < rr) {
y += GUTTER_SIZE;
let jj = 0;
let x = 0;
while (jj < cc) {
x += GUTTER_SIZE;
const selected = ii < rows && jj < columns;
cells.push(
<GridCell
key={`${String(ii)}-${String(jj)}`}
selected={selected}
x={x}
y={y}
/>,
);
x += CELL_SIZE;
w = x + GUTTER_SIZE;
jj++;
}
y += CELL_SIZE;
h = y + GUTTER_SIZE;
ii++;
}
const bodyStyle = { width: w + 'px', height: h + 'px' };
return (
<div
// className="czi-table-grid-size-editor"
// ref={this._onRef}
>
<div
// className="czi-table-grid-size-editor-body"
// onMouseDown={this._onMouseDown}
// onMouseEnter={this._onMouseEnter}
// style={bodyStyle}
>
{cells}
</div>
<div className="czi-table-grid-size-editor-footer">
{rows} X {columns}
</div>
</div>
);
// _ex = 0;
// _ey = 0;
// _mx = 0;
// _my = 0;
// _rafID = 0;
// _ref = null;
// _entered = false;
// props: { // props: {
// close: (val: TableGridSizeEditorValue) => void, // close: (val: TableGridSizeEditorValue) => void,
...@@ -277,123 +135,135 @@ const TableGridSizeEditor = props => { ...@@ -277,123 +135,135 @@ const TableGridSizeEditor = props => {
// this._rafID && cancelAnimationFrame(this._rafID); // this._rafID && cancelAnimationFrame(this._rafID);
// } // }
// render(): React.Element<any> { _onRef = (ref: any): void => {
// const { rows, cols } = this.state; this._ref = ref;
// let rr = Math.max(5, rows); };
// let cc = Math.max(5, cols);
// if (rr === rows) { _onMouseEnter = e => {
// rr = Math.min(MAX_SIZE, rr + 1); const node = e.currentTarget;
// } if (node instanceof HTMLElement) {
// if (cc === cols) { const rect = fromHTMlElement(node);
// cc = Math.min(MAX_SIZE, cc + 1); const mx = Math.round(e.clientX);
// } const my = Math.round(e.clientY);
// const cells = []; this._ex = rect.x;
// let ii = 0; this._ey = rect.y;
// let y = 0; this._mx = mx;
// let w = 0; this._my = my;
// let h = 0; if (!this._entered) {
// while (ii < rr) { this._entered = true;
// y += GUTTER_SIZE; document.addEventListener('mousemove', this._onMouseMove, true);
// let jj = 0; }
// let x = 0; }
// while (jj < cc) { };
// x += GUTTER_SIZE;
// const selected = ii < rows && jj < cols;
// cells.push(
// <GridCell
// key={`${String(ii)}-${String(jj)}`}
// selected={selected}
// x={x}
// y={y}
// />,
// );
// x += CELL_SIZE;
// w = x + GUTTER_SIZE;
// jj++;
// }
// y += CELL_SIZE;
// h = y + GUTTER_SIZE;
// ii++;
// }
// const bodyStyle = { width: w + 'px', height: h + 'px' };
// return (
// <div className="czi-table-grid-size-editor" ref={this._onRef}>
// <div
// className="czi-table-grid-size-editor-body"
// onMouseDown={this._onMouseDown}
// onMouseEnter={this._onMouseEnter}
// style={bodyStyle}
// >
// {cells}
// </div>
// <div className="czi-table-grid-size-editor-footer">
// {rows} X {cols}
// </div>
// </div>
// );
// }
// _onRef = (ref: any): void => {
// this._ref = ref;
// };
// _onMouseEnter = (e: MouseEvent): void => {
// const node = e.currentTarget;
// if (node instanceof HTMLElement) {
// const rect = fromHTMlElement(node);
// const mx = Math.round(e.clientX);
// const my = Math.round(e.clientY);
// this._ex = rect.x;
// this._ey = rect.y;
// this._mx = mx;
// this._my = my;
// if (!this._entered) {
// this._entered = true;
// document.addEventListener('mousemove', this._onMouseMove, true);
// }
// }
// };
// _onMouseMove = (e: MouseEvent): void => {
// const el = this._ref && ReactDOM.findDOMNode(this._ref);
// const elRect = el ? htmlElementToRect(el) : null;
// const mouseRect = fromXY(e.screenX, e.screenY, 10);
// if (elRect && mouseRect && isIntersected(elRect, mouseRect, 50)) { _onMouseMove = e => {
// // This prevents `PopUpManager` from collapsing the editor. const el = this._ref && ReactDOM.findDOMNode(this._ref);
// e.preventDefault(); const elRect = el ? htmlElementToRect(el) : null;
// e.stopImmediatePropagation(); const mouseRect = fromXY(e.screenX, e.screenY, 10);
// }
// const mx = Math.round(e.clientX); if (elRect && mouseRect && isIntersected(elRect, mouseRect, 50)) {
// const my = Math.round(e.clientY); // This prevents `PopUpManager` from collapsing the editor.
// if (mx !== this._mx || my !== this._my) { e.preventDefault();
// this._mx = mx; e.stopImmediatePropagation();
// this._my = my; }
// this._rafID && cancelAnimationFrame(this._rafID);
// this._rafID = requestAnimationFrame(this._updateGridSize);
// }
// };
// _updateGridSize = (): void => { const mx = Math.round(e.clientX);
// this._rafID = 0; const my = Math.round(e.clientY);
// const mx = this._mx; if (mx !== this._mx || my !== this._my) {
// const my = this._my; this._mx = mx;
// const x = mx - this._ex; this._my = my;
// const y = my - this._ey; this._rafID && cancelAnimationFrame(this._rafID);
// const rr = clamp(1, Math.ceil(y / (CELL_SIZE + GUTTER_SIZE)), MAX_SIZE); this._rafID = requestAnimationFrame(this._updateGridSize);
// const cc = clamp(1, Math.ceil(x / (CELL_SIZE + GUTTER_SIZE)), MAX_SIZE); }
// const { rows, cols } = this.state; };
// if (rows !== rr || cols !== cc) {
// this.setState({ rows: rr, cols: cc }); _updateGridSize = () => {
// } this._rafID = 0;
// }; const mx = this._mx;
const my = this._my;
const x = mx - this._ex;
const y = my - this._ey;
const rr = clamp(1, Math.ceil(y / (CELL_SIZE + GUTTER_SIZE)), MAX_SIZE);
const cc = clamp(1, Math.ceil(x / (CELL_SIZE + GUTTER_SIZE)), MAX_SIZE);
const { rows, cols } = this.state;
if (rows !== rr || cols !== cc) {
this.setState({ rows: rr, cols: cc });
}
};
_onMouseDown = e => {
e.preventDefault();
this.props.close(this.state);
};
render() {
const { rows, cols } = this.state;
let rr = Math.max(5, rows);
let cc = Math.max(5, cols);
if (rr === rows) {
rr = Math.min(MAX_SIZE, rr + 1);
}
if (cc === cols) {
cc = Math.min(MAX_SIZE, cc + 1);
}
const cells = [];
let ii = 0;
let y = 0;
let w = 0;
let h = 0;
while (ii < rr) {
y += GUTTER_SIZE;
let jj = 0;
let x = 0;
while (jj < cc) {
x += GUTTER_SIZE;
const selected = ii < rows && jj < cols;
cells.push(
<GridCell
key={`${String(ii)}-${String(jj)}`}
selected={selected}
x={x}
y={y}
/>,
);
x += CELL_SIZE;
w = x + GUTTER_SIZE;
jj++;
}
y += CELL_SIZE;
h = y + GUTTER_SIZE;
ii++;
}
// _onMouseDown = (e: SyntheticEvent): void => { const wrapperStyle = {
// e.preventDefault(); border: '1px solid gray',
// this.props.close(this.state); boxSizing: 'border-box',
// }; position: 'absolute',
}; zIndex: 2,
};
const bodyStyle = {
width: w + 'px',
height: h + 'px',
position: 'relative',
};
return (
<div style={wrapperStyle} ref={this._onRef}>
<div
// className="czi-table-grid-size-editor-body"
onMouseDown={this._onMouseDown}
onMouseEnter={this._onMouseEnter}
style={bodyStyle}
>
{cells}
</div>
<div className="czi-table-grid-size-editor-footer">
{rows} X {cols}
</div>
</div>
);
}
}
export default TableGridSizeEditor; export default TableGridSizeEditor;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment