diff options
4 files changed, 179 insertions, 117 deletions
diff --git a/.vscode/launch.json b/.vscode/launch.json index a7c30ca1e..9692c79d9 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -4,106 +4,110 @@ // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ - { - "type": "chrome", - "request": "launch", - "name": "Launch Chrome against localhost", - "sourceMaps": true, - "breakOnLoad": true, - "url": "http://localhost:1050/login", - "webRoot": "${workspaceFolder}", - "runtimeArgs": [ - "--experimental-modules" - ] - }, - { - "type": "chrome", - "request": "launch", - "name": "Launch Chromium against localhost", - "sourceMaps": true, - "breakOnLoad": true, - "url": "http://localhost:1050/login", - "webRoot": "${workspaceFolder}", - "runtimeExecutable": "/usr/bin/chromium", - "runtimeArgs": [ - "--experimental-modules" - ] - }, - { - "type": "firefox", - "request": "launch", - "name": "Launch Firefox against localhost", - //"sourceMaps": "client", - "reAttach": true, - "url": "http://localhost:1050/login", - "webRoot": "${workspaceFolder}", - }, - { - "type": "chrome", - "request": "launch", - "name": "Launch Chrome against Dash server", - "sourceMaps": true, - "breakOnLoad": true, - "url": "https://browndash.com/login", - //"url": "http://dash-web.eastus2.cloudapp.azure.com:1050/login", - "webRoot": "${workspaceFolder}", - }, - { - "type": "node", - "request": "attach", - "name": "Typescript Server", - "protocol": "inspector", - "port": 9229, - "localRoot": "${workspaceFolder}", - "remoteRoot": "${workspaceFolder}" - }, - { - "type": "node", - "request": "launch", - "name": "Current TS File", - "runtimeExecutable": "npx", - "runtimeArgs": [ - "ts-node-dev", - "--nolazy", - "--inspect", - "--", - "${relativeFile}" - ], - "port": 9229 - }, - { - "type": "node", - "request": "launch", - "name": "Mocha Tests", - "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha", - "args": [ - "-r", - "ts-node/register", - "--timeout", - "999999", - "--colors", - "${workspaceFolder}/test/**/*.ts" - ], - "console": "integratedTerminal", - "internalConsoleOptions": "openOnSessionStart", - "protocol": "inspector" - }, - { - "type": "node", - "request": "launch", - "name": "Mocha Current File", - "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha", - "args": [ - "-r", - "ts-node/register", - "--timeout", - "999999", - "--colors", - "${file}" - ], - "console": "integratedTerminal", - "internalConsoleOptions": "openOnSessionStart", - "protocol": "inspector" - }, + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "sourceMaps": true, + "breakOnLoad": true, + "url": "http://localhost:1050/login", + "webRoot": "${workspaceFolder}", + "runtimeArgs": [ + "--experimental-modules" + ] + }, + { + "type": "chrome", + "request": "launch", + "name": "Launch Chromium against localhost", + "sourceMaps": true, + "breakOnLoad": true, + "url": "http://localhost:1050/login", + "webRoot": "${workspaceFolder}", + "runtimeExecutable": "/usr/bin/chromium", + "runtimeArgs": [ + "--experimental-modules" + ] + }, + { + "type": "firefox", + "request": "launch", + "name": "Launch Firefox against localhost", + "reAttach": true, + "url": "http://localhost:1050/login", + "webRoot": "${workspaceFolder}", + "pathMappings": [ + { + "url": "webpack://dash/src", + "path": "${workspaceFolder}/src" + } + ] + }, + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome against Dash server", + "sourceMaps": true, + "breakOnLoad": true, + "url": "https://browndash.com/login", + "webRoot": "${workspaceFolder}" + }, + { + "type": "node", + "request": "attach", + "name": "Typescript Server", + "protocol": "inspector", + "port": 9229, + "localRoot": "${workspaceFolder}", + "remoteRoot": "${workspaceFolder}" + }, + { + "type": "node", + "request": "launch", + "name": "Current TS File", + "runtimeExecutable": "npx", + "runtimeArgs": [ + "ts-node-dev", + "--nolazy", + "--inspect", + "--", + "${relativeFile}" + ], + "port": 9229 + }, + { + "type": "node", + "request": "launch", + "name": "Mocha Tests", + "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha", + "args": [ + "-r", + "ts-node/register", + "--timeout", + "999999", + "--colors", + "${workspaceFolder}/test/**/*.ts" + ], + "console": "integratedTerminal", + "internalConsoleOptions": "openOnSessionStart", + "protocol": "inspector" + }, + { + "type": "node", + "request": "launch", + "name": "Mocha Current File", + "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha", + "args": [ + "-r", + "ts-node/register", + "--timeout", + "999999", + "--colors", + "${file}" + ], + "console": "integratedTerminal", + "internalConsoleOptions": "openOnSessionStart", + "protocol": "inspector" + } ] }
\ No newline at end of file diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 0cdf63939..5435650b4 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -302,9 +302,9 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti if (existingHeader) { const index = this.columnHeaders.indexOf(existingHeader) if (this.columnHeaders.length == 1) { - return this.props.PanelWidth() - this.columnStartXCoords[index] - 4 * this.gridGap + return this.props.PanelWidth() - this.columnStartXCoords[index] - 4 * this.gridGap - 100 } - return this.columnStartXCoords[index + 1] - this.columnStartXCoords[index] - 2 * this.gridGap + return this.columnStartXCoords[index + 1] - this.columnStartXCoords[index] - 2 * this.gridGap - 100 } return 1000; } @@ -350,13 +350,16 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti // } resizeColumns = (n: number) => { + //TODO: that isn't the proper width of columns const totalWidth = this.PanelWidth - const colWidth = totalWidth / n + const dividerWidth = 70 + const totaldividerWidth = (n - 1) * dividerWidth + const colWidth = (totalWidth - totaldividerWidth) / n const newColXCoords: number[] = [] let colStart = 0 for (let i = 0; i < n; i++) { newColXCoords.push(colStart) - colStart += colWidth + colStart += colWidth + dividerWidth } this.columnStartXCoords = newColXCoords console.log(newColXCoords) @@ -617,6 +620,29 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti } } + //TODO: look at MultiRowResizer.tsx + // @action + // onDividerPointerDown = (e: React.PointerEvent) => { + // const eles = HTMLElement[e.currentTarget.Elem] + // DragManager.StartDrag(e.target, {}, e.clientX, e.clientY) + // } + + @action + onDividerPointerOver = (e: React.PointerEvent, index: number) => { + if (DragManager.docsBeingDragged.length == 0) { + //convert client X to how we're doing stuff + const xPos = e.clientX + 2 * this.xMargin + // get difference (-25 is because that's the center of the divider) + const xDividerPos = this.columnStartXCoords[index + 1] - 25 + const diff = xDividerPos - xPos + // make a copy of the array + const colXCoords : number[] = [] + this.columnStartXCoords.forEach(val => colXCoords.push(val)) + colXCoords[index + 1] -= diff + this.columnStartXCoords = colXCoords + } + } + // @computed get renderedSections() { TraceMobx(); @@ -631,13 +657,19 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti const col = this.sectionNoteTaking(sections[i][0], sections[i][1]) eles.push(col) //TODO make this look pretty - // if (i < sections.length - 1) { - // eles.push( - // <div className={"collectionNoteTakingViewFieldColumn"}> - // new div - // </div> - // ) - // } + if (i < sections.length - 1) { + eles.push( + <div className="columnDivider" onPointerOver={e => this.onDividerPointerOver(e, i)} key={i} + style={{ + height: "100%", + width: 50, + padding: `0 10 10 0`, + margin: "auto", + backgroundColor: "black" + }} + /> + ) + } } return eles } diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx new file mode 100644 index 000000000..11e1b5d62 --- /dev/null +++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx @@ -0,0 +1,28 @@ +import { auto } from "async"; +import { action } from "mobx"; +import * as React from "react"; +import { DragManager } from "../../util/DragManager"; + +interface DividerProps { + index: number + columnStartXCoords: number[] + xMargin: number +} + +export default class Divider extends React.Component<DividerProps>{ + + + + render() { + return ( + <div style={{ + height: "100%", + width: 50, + padding: `0 10 10 0`, + margin: "auto", + backgroundColor: "black" + }} + /> + ) + } +}
\ No newline at end of file diff --git a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx index b9bed7174..55cfa3348 100644 --- a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx @@ -59,7 +59,6 @@ interface CSVFieldColumnProps { export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFieldColumnProps> { @observable private _background = "inherit"; - // It seems like this is being a little funky atm @computed get columnWidth() { // base cases if (!this.props.columnHeaders || !this.props.headingObject || this.props.columnHeaders.length == 1) { @@ -70,7 +69,8 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel return this.props.maxColWidth } const endColValue = i == this.props.numGroupColumns - 1 ? this.props.PanelWidth : this.props.columnStartXCoords[i+1] - return endColValue - this.props.columnStartXCoords[i] - 10 + // TODO make the math work here. 35 is half of 70, which is the current width of the divider + return endColValue - this.props.columnStartXCoords[i] - 35 } private dropDisposer?: DragManager.DragDropDisposer; @@ -312,14 +312,12 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel render() { TraceMobx(); - const headings = this.props.headings(); const heading = this._heading; - const uniqueHeadings = headings.map((i, idx) => headings.indexOf(i) === idx); return ( <div className={"collectionNoteTakingViewFieldColumn" + (SnappingManager.GetIsDragging() ? "Dragging" : "")} key={heading} style={{ //TODO: change this so that it's based on the column width - width: `${100 / (uniqueHeadings.length || 1)}%`, + width: this.columnWidth, height: "100%", background: this._background }} |