Chore/kill yalc with fire (#629)

* init * more shifting * Move @babel dependencies up to workspace root * Begin updating dependent libraries to use sync'd webpack builds w/ watches * Commit changes before a long weekend * Split packages into platform and extensions * Consolidate how/where we specify file/module type entrypoints * Make it possible to pass in extensions as App props * Resolve viewer's modules * Target for UMD bundle * Add Webpack Stylus loader * Provide WebPack build options for microscopy, vtk, and ui * Better entrypoint for extensions * Push changes up to switch PCs * Fix ESM symlink build for Viewers * Shift docs to root * Specify additional lerna config props * Begin providing basic readme info * Rename example extension folder * Shift links to bottom of doc * First attempt at a netlify deploy preview * Attempt to fix deploy preview build * push workspace enabled to initial command; remove second yarn install; use npx to call gitbook cli commands * Try to use global gitbook-cli * Export node_modules path * More agressive with modifying PATH * Follow deploy log output advice * try again to set bin path * Try swapping bash with a new shell * Try bash -l instead of exec bash * Annd let's try again * and again * We may have figured it out johnny, boy * We need to pull cornerstone-wado-image-loader files from hoisted node_modules * Attempt to fix ticks/escapes * Change copy syntax; try running tests on viewers from root for circleci * Lower version to match circleci image * Try alternative jest-canvas-mock location and version file syntax * Run version command instead of calling node directly * Try alternative jest transform * Set path and enable workspaces * Add codecov flags * Use cpx so our copying finishes? * Get all platform unit tests to run * Run and report individually and in parallel * Try once relying on codecov yaml to split w/ flags * Add projects to split by flags * Generate separate reports * Trigger codecov after everything has finished running; these may not support flags * Use recommended flags from issue comments for codecov * Fix typo * Remove clear flag * Shift back to calling codecov from root * Generate example for codecov issue * Try fixing paths * Simplify * Try using codecov orb * Bump circleci version * Upload core and viewer * Use full string paths * Remove individual codecov calls * Fix dir * Combine files before upload * Escape anchors * tryfix syntax * Escape string literal * Combine lines to reduce path * long paths * Use home alias * Fix filename * Try to see the contents of our cat'd file * Also upload `core` * Try running with aliased folder * Fix path; split PR and Merge unit tests into separate jobs * Set default threshold * Fix typo * Changing to scoped package names * Adding note * Catch more updates * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.0 - @ohif/extension-dicom-html@0.0.4-alpha.0 - @ohif/extension-dicom-microscopy@0.0.9-alpha.0 - @ohif/extension-dicom-pdf@0.0.8-alpha.0 - @ohif/extension-vtk@0.1.4-alpha.0 - @ohif/core@0.11.1-alpha.0 - @ohif/i18n@0.2.3-alpha.0 - @ohif/ui@0.2.18-alpha.0 - @ohif/viewer@0.0.22-alpha.0 * Clean up primary readme * Support for dev and dev:* commands * Shift build command; satisfy default PWA build * Remove old scripts * Clean up UI to set webpack scripts * Tidy up project links * Clean duplicate code in UI project * Update UI project's docs * Clean up ui and i18n config * Reduce duplicate code in `@ohif/core` * Fix @ohif/ui versions * bump @ohif/core versions * Redux testkit dep * Remove unused/duplicate config files for projects/packages * ohif-core --> @ohif/core * Safer publish command * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.1 - @ohif/extension-dicom-html@0.0.4-alpha.1 - @ohif/extension-dicom-microscopy@0.0.9-alpha.1 - @ohif/extension-dicom-pdf@0.0.8-alpha.1 - @ohif/extension-vtk@0.1.4-alpha.1 - @ohif/core@0.11.1-alpha.1 - @ohif/i18n@0.2.3-alpha.1 - @ohif/ui@0.2.18-alpha.1 - @ohif/viewer@0.0.22-alpha.1 * test version bump * Add global prettier config * chore(release): publish %s [skip ci] - @ohif/viewer@0.0.22-alpha.2 * test lerna publish * Update package.jsons * Fix build scripts * catch changes * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.2 - @ohif/extension-dicom-html@0.0.4-alpha.2 - @ohif/extension-dicom-microscopy@0.0.9-alpha.2 - @ohif/extension-dicom-pdf@0.0.8-alpha.2 - @ohif/extension-vtk@0.1.4-alpha.2 - @ohif/core@0.11.1-alpha.2 - @ohif/i18n@0.2.3-alpha.2 - @ohif/ui@0.2.18-alpha.2 - @ohif/viewer@0.0.22-alpha.3 * fix eslint issues caused by eslint 6 and our react-app config * Publish with canary tag * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.3 - @ohif/extension-dicom-html@0.0.4-alpha.3 - @ohif/extension-dicom-microscopy@0.0.9-alpha.3 - @ohif/extension-dicom-pdf@0.0.8-alpha.3 - @ohif/extension-vtk@0.1.4-alpha.3 - @ohif/core@0.11.1-alpha.3 - @ohif/i18n@0.2.3-alpha.3 - @ohif/ui@0.2.18-alpha.3 - @ohif/viewer@0.0.22-alpha.4 * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.4 - @ohif/extension-dicom-html@0.0.4-alpha.4 - @ohif/extension-dicom-microscopy@0.0.9-alpha.4 - @ohif/extension-dicom-pdf@0.0.8-alpha.4 - @ohif/extension-vtk@0.1.4-alpha.4 - @ohif/core@0.11.1-alpha.4 - @ohif/i18n@0.2.3-alpha.4 - @ohif/ui@0.2.18-alpha.4 - @ohif/viewer@0.0.22-alpha.5 * Simplify build * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.5 - @ohif/extension-dicom-html@0.0.4-alpha.5 - @ohif/extension-dicom-microscopy@0.0.9-alpha.5 - @ohif/extension-dicom-pdf@0.0.8-alpha.5 - @ohif/extension-vtk@0.1.4-alpha.5 - @ohif/core@0.11.1-alpha.5 - @ohif/i18n@0.2.3-alpha.5 - @ohif/ui@0.2.18-alpha.5 - @ohif/viewer@0.0.22-alpha.6 * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.6 - @ohif/extension-dicom-html@0.0.4-alpha.6 - @ohif/extension-dicom-microscopy@0.0.9-alpha.6 - @ohif/extension-dicom-pdf@0.0.8-alpha.6 - @ohif/extension-vtk@0.1.4-alpha.6 - @ohif/core@0.11.1-alpha.6 - @ohif/i18n@0.2.3-alpha.6 - @ohif/ui@0.2.18-alpha.6 - @ohif/viewer@0.0.22-alpha.7 * Split version and publish * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.7 - @ohif/extension-dicom-html@0.0.4-alpha.7 - @ohif/extension-dicom-microscopy@0.0.9-alpha.7 - @ohif/extension-dicom-pdf@0.0.8-alpha.7 - @ohif/extension-vtk@0.1.4-alpha.7 - @ohif/core@0.11.1-alpha.7 - @ohif/i18n@0.2.3-alpha.7 - @ohif/ui@0.2.18-alpha.7 - @ohif/viewer@0.0.22-alpha.8 * Try simplify netlify build * react-viewerbase --> @ohif/ui * add test for stylus loader * Try new way to specify publish path * Use an output folder that won't be ignored * Try move command * fiddle with paths * Dig for some information * Make sure we're in root for our commands * Remove discovery * Setup script-tag example * Fix typo * Move config folder * Update cornerstone extension to use shared/root webpack configs * capture changes * Update extension webpack configs * Don't check in docz output * Fix babel runtime resolution issue * Simplify ui build steps * Push in progress * Shift directories * Get viewer dev path to work * Fix viewer commonjs build * Fix build pwa config for viewers * Make sure our package specific command can be called from root * Update notes * Fix imports and misc. merge notes * Bump wado-image-loader version * Switch up commands to remove webworkers copy * Fix CI config * Fix more broken package references * Add react-dropzone * Persist so e2e test can use * Fix lockfile * Use cypress orb to simplify CI * Fix config * Try again * Install yarn latest for orb * Install yarn a different way * Wait on correct port * Run tests in viewer project * Fix cypress config * Make Cypress happier - use default location * Simplify e2e testing * Capture UI changes since fork * Catch core up * Grab latest deps after merge * Fix broken import * Make sure cornerstone-wado-image-loader resolves to 3+ * Note regarding orbs * Fix refresh on 404 routes * Fix odd error for cornerstone-wado-image-loader * Different target for UMD * Simplify dev script * Try to get fancy with netlify output * Let's do it again * Try to fix measurementTools issue * See if we can get our lerna magic to work on merge to monorepo branch
2019-08-13 15:36:46 -04:00
1 parent cac911f08e
commit 08ff214ea6
@@ -0,0 +1,64 @@
+import React, { PureComponent } from 'react';
+
+import { LayoutChooser } from './LayoutChooser.js';
+import PropTypes from 'prop-types';
+import ToolbarButton from '../../viewer/ToolbarButton';
+
+export class LayoutButton extends PureComponent {
+  static defaultProps = {
+    dropdownVisible: false,
+  };
+
+  static propTypes = {
+    dropdownVisible: PropTypes.bool.isRequired,
+    /** Called with the selectedCell number when grid sell is selected */
+    onChange: PropTypes.func,
+    /** The cell to show as selected */
+    selectedCell: PropTypes.object,
+  };
+
+  state = {
+    dropdownVisible: this.props.dropdownVisible,
+  };
+
+  componentDidUpdate(prevProps) {
+    if (this.props.dropdownVisible !== prevProps.dropdownVisible) {
+      this.setState({
+        dropdownVisible: this.props.dropdownVisible,
+      });
+    }
+  }
+
+  onClick = () => {
+    this.setState({
+      dropdownVisible: !this.state.dropdownVisible,
+    });
+  };
+
+  onChange = selectedCell => {
+    if (this.props.onChange) {
+      this.props.onChange(selectedCell);
+    }
+  };
+
+  render() {
+    return (
+      <div className="btn-group">
+        <ToolbarButton
+          isActive={this.state.dropdownVisible}
+          label={'Layout'}
+          icon="th"
+          onClick={this.onClick}
+        />
+        <LayoutChooser
+          visible={this.state.dropdownVisible}
+          onChange={this.onChange}
+          onClick={this.onClick}
+          selectedCell={this.props.selectedCell}
+        />
+      </div>
+    );
+  }
+}
+
+export default LayoutButton;
@@ -0,0 +1,129 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import './LayoutChooser.styl';
+
+/**
+ * Adds the 'hover' class to cells above and to the left of the current cell
+ * This is used to "fill in" the grid that the user will change the layout to,
+ * if they click on a specific table cell.
+ **/
+
+class LayoutChooser extends PureComponent {
+  static propTypes = {
+    rows: PropTypes.number.isRequired,
+    columns: PropTypes.number.isRequired,
+    visible: PropTypes.bool.isRequired,
+    selectedCell: PropTypes.object,
+    boxSize: PropTypes.number.isRequired,
+    cellBorder: PropTypes.number.isRequired,
+    onClick: PropTypes.func,
+    onChange: PropTypes.func,
+  };
+
+  static defaultProps = {
+    rows: 3,
+    columns: 3,
+    visible: true,
+    boxSize: 20,
+    cellBorder: 1,
+    selectedCell: {
+      row: -1,
+      col: -1,
+    },
+  };
+
+  constructor(props) {
+    super(props);
+    this.emptyCell = {
+      row: -1,
+      column: -1,
+    };
+    this.state = {
+      table: [[]],
+      selectedCell: this.props.selectedCell,
+    };
+  }
+  componentDidMount() {
+    this.highlightCells(this.emptyCell);
+  }
+  onClick(currentCell) {
+    this.setState({
+      selectedCell: currentCell,
+    });
+    this.highlightCells(currentCell);
+    if (this.props.onClick) {
+      this.props.onClick(currentCell);
+    }
+    if (this.props.onChange) {
+      this.props.onChange(currentCell);
+    }
+  }
+  isRange = (cell, parentCell) => {
+    return cell.row <= parentCell.row && cell.col <= parentCell.col;
+  };
+  highlightCells = currentCell => {
+    let table = [];
+    for (let row = 0; row < this.props.rows; row++) {
+      let newRow = [];
+      for (let col = 0; col < this.props.columns; col++) {
+        let cell = { row: row, col: col };
+        if (this.isRange(cell, currentCell)) {
+          cell.className = 'hover';
+        } else if (
+          this.isRange(currentCell, this.emptyCell) &&
+          this.isRange(cell, this.state.selectedCell)
+        ) {
+          cell.className = 'selectedBefore';
+        }
+        newRow.push(cell);
+      }
+      table.push(newRow);
+    }
+    this.setState({ table: table });
+  };
+
+  render() {
+    let columns = this.props.columns;
+    const style = {
+      display: this.props.visible ? 'block' : 'none',
+      minWidth:
+        columns * this.props.boxSize + (columns + 5) * this.props.cellBorder,
+    };
+    return (
+      <div
+        className="layoutChooser layoutChooser-dropdown-menu"
+        role="menu"
+        style={style}
+      >
+        <table>
+          <tbody>
+            {this.state.table.map((row, i) => {
+              return (
+                <tr key={i}>
+                  {row.map((cell, j) => {
+                    return (
+                      <td
+                        className={cell.className}
+                        style={{
+                          width: this.props.boxSize,
+                          height: this.props.boxSize,
+                          border: 'solid 1px black',
+                        }}
+                        key={j}
+                        onMouseEnter={() => this.highlightCells(cell)}
+                        onMouseLeave={() => this.highlightCells(this.emptyCell)}
+                        onClick={() => this.onClick(cell)}
+                      />
+                    );
+                  })}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}
+
+export { LayoutChooser };
@@ -0,0 +1,47 @@
+@import './../../design/styles/common/button.styl'
+@import './../../design/styles/common/global.styl'
+
+$borderColor = rgba(77, 99, 110, 0.81)
+
+.layoutChooser-dropdown-menu
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  float: left;
+  min-width: 160px;
+  padding: 5px 0;
+  margin: 2px 0 0;
+  font-size: 14px;
+  text-align: left;
+  list-style: none;
+  background-color: #fff;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0,0,0,.15);
+  border-radius: 4px;
+  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
+  box-shadow: 0 6px 12px rgba(0,0,0,.175);
+
+.layoutChooser
+  .selectedBefore
+    background-color: #5cc3eb
+
+  border: 1px solid $borderColor;
+  border-radius: 8px
+  padding: 5px 0;
+  position: absolute;
+  z-index: 5000
+
+  table
+    margin: 0 auto
+    border-spacing: 0;
+    border-collapse: collapse;
+    td
+      cursor: pointer
+      transition(background-color 0.1s ease)
+
+      &:hover, &.hover // Add the hover class here to be triggered by mouseenter/mouseleave
+        background-color: #209ac9
@@ -0,0 +1,10 @@
+.LayoutExample {
+  background-color: var(--primary-background-color);
+  width: 160px;
+  height: 160px;
+}
+
+.GridLayout td {
+  padding: 5px;
+  border: 1px solid black;
+}
@@ -0,0 +1,49 @@
+---
+name: Layout Button
+menu: Components
+route: /components/layout-button
+---
+
+import { Playground, Props } from 'docz'
+import { State } from 'react-powerplug'
+import { LayoutButton } from './../index.js'
+import './layoutButton.css'
+import NameSpace from '../../../__docs__/NameSpace'
+
+# Layout Button
+
+## Basic usage
+
+<Playground>
+    <State initial={{
+        selectedCell: {
+            className: 'hover',
+            col: 1,
+            row: 1
+        },
+    }}>
+        {({ state, setState }) => (
+            <React.Fragment>
+                {/* STATE */}
+                <div><pre>{JSON.stringify(state, null, 2) }</pre></div>
+
+                {/* COMPONENT */}
+                <div className="LayoutExample">
+                    <LayoutButton
+                        {...state}
+                        onChange={cell => setState({ selectedCell: cell })}
+                    />
+                </div>
+            </React.Fragment>
+        )}
+    </State>
+
+</Playground>
+
+## API
+
+<Props of={LayoutButton} />
+
+## Translation Namespace
+
+<NameSpace name="Buttons" />
@@ -0,0 +1,2 @@
+export { LayoutButton } from './LayoutButton.js';
+export { LayoutChooser } from './LayoutChooser.js';