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,202 @@
+import './CineDialog.styl';
+
+import React, { PureComponent } from 'react';
+import { withTranslation } from '../../utils/LanguageProvider';
+import { Icon } from './../../elements/Icon';
+import PropTypes from 'prop-types';
+
+class CineDialog extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      cineFrameRate: props.cineFrameRate,
+      isPlaying: props.isPlaying,
+    };
+  }
+
+  static propTypes = {
+    /** Minimum value for range slider */
+    cineMinFrameRate: PropTypes.number.isRequired,
+    /** Maximum value for range slider */
+    cineMaxFrameRate: PropTypes.number.isRequired,
+    /** Increment range slider can "step" in either direction. */
+    cineStepFrameRate: PropTypes.number.isRequired,
+    cineFrameRate: PropTypes.number.isRequired,
+    /** 'True' if playing, 'False' if paused. */
+    isPlaying: PropTypes.bool.isRequired,
+    onPlayPauseChanged: PropTypes.func,
+    onFrameRateChanged: PropTypes.func,
+    onClickNextButton: PropTypes.func,
+    onClickBackButton: PropTypes.func,
+    onClickSkipToStart: PropTypes.func,
+    onClickSkipToEnd: PropTypes.func,
+    /** i18next translation function */
+    t: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {
+    cineMinFrameRate: 1,
+    cineMaxFrameRate: 90,
+    cineStepFrameRate: 1,
+    cineFrameRate: 24,
+    isPlaying: false,
+  };
+
+  componentDidUpdate(prevProps) {
+    // TODO: Not sure if we should just switch this to a stateless
+    // fully-controlled component instead
+    if (
+      this.props.isPlaying !== prevProps.isPlaying ||
+      this.props.isPlaying !== this.state.isPlaying
+    ) {
+      this.setState({
+        isPlaying: this.props.isPlaying,
+      });
+    }
+
+    if (
+      this.props.cineFrameRate !== prevProps.cineFrameRate ||
+      this.props.cineFrameRate !== this.state.cineFrameRate
+    ) {
+      this.setState({
+        cineFrameRate: this.props.cineFrameRate,
+      });
+    }
+  }
+
+  handleInputChange = event => {
+    const target = event.target;
+
+    let value = target.value;
+
+    if (target.type === 'range') {
+      value = parseFloat(target.value);
+    }
+
+    const name = target.name;
+
+    this.setState({
+      [name]: value,
+    });
+
+    if (name === 'cineFrameRate' && this.props.onFrameRateChanged) {
+      this.props.onFrameRateChanged(parseFloat(value));
+    }
+  };
+
+  onClickPlayPause = () => {
+    const value = !this.state.isPlaying;
+
+    this.setState({
+      isPlaying: value,
+    });
+
+    if (this.props.onPlayPauseChanged) {
+      this.props.onPlayPauseChanged(value);
+    }
+  };
+
+  onClickNextButton = event => {
+    if (this.props.onClickNextButton) {
+      this.props.onClickNextButton(event);
+    }
+  };
+
+  onClickBackButton = event => {
+    if (this.props.onClickBackButton) {
+      this.props.onClickBackButton(event);
+    }
+  };
+
+  onClickSkipToStart = event => {
+    if (this.props.onClickSkipToStart) {
+      this.props.onClickSkipToStart(event);
+    }
+  };
+
+  onClickSkipToEnd = event => {
+    if (this.props.onClickSkipToEnd) {
+      this.props.onClickSkipToEnd(event);
+    }
+  };
+
+  // TODO:
+  // - Add next / previous display set buttons which just call
+  // onClickNextDisplaySet and onClickPreviousDisplaySet which are passed in as props.
+  // See https://github.com/OHIF/Viewers/blob/master/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.html#L38
+  // - Add 'isEnabled' prop: https://github.com/OHIF/Viewers/blob/master/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.js#L301
+  render() {
+    const { t } = this.props;
+    return (
+      <div className="CineDialog">
+        <div className="noselect double-row-style">
+          <div className="cine-controls">
+            <div className="btn-group">
+              <button
+                title={t('Skip to first image')}
+                className="btn"
+                data-toggle="tooltip"
+                onClick={this.onClickSkipToStart}
+              >
+                <Icon name="fast-backward" />
+              </button>
+              <button
+                title={t('Previous image')}
+                className="btn"
+                data-toggle="tooltip"
+                onClick={this.onClickBackButton}
+              >
+                <Icon name="step-backward" />
+              </button>
+              <button
+                title={t('Play / Stop')}
+                className="btn"
+                data-toggle="tooltip"
+                onClick={this.onClickPlayPause}
+              >
+                <Icon name={this.state.isPlaying ? 'stop' : 'play'} />
+              </button>
+              <button
+                title={t('Next image')}
+                className="btn"
+                data-toggle="tooltip"
+                onClick={this.onClickNextButton}
+              >
+                <Icon name="step-forward" />
+              </button>
+              <button
+                title={t('Skip to last image')}
+                className="btn"
+                data-toggle="tooltip"
+                onClick={this.onClickSkipToEnd}
+              >
+                <Icon name="fast-forward" />
+              </button>
+            </div>
+          </div>
+          <div className="cine-options">
+            <div className="fps-section">
+              <input
+                type="range"
+                name="cineFrameRate"
+                min={this.props.cineMinFrameRate}
+                max={this.props.cineMaxFrameRate}
+                step={this.props.cineStepFrameRate}
+                value={this.state.cineFrameRate}
+                onChange={this.handleInputChange}
+              />
+            </div>
+            <span className="fps">
+              {this.state.cineFrameRate.toFixed(1)} {t('fps')}
+            </span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+const connectedComponent = withTranslation('CineDialog')(CineDialog);
+export { connectedComponent as CineDialog };
+export default connectedComponent;
@@ -0,0 +1,172 @@
+@import './../../design/styles/common/global.styl'
+@import './../../design/styles/common/form.styl'
+
+.CineDialog
+  background: var(--ui-gray-darkest);
+  color: var(--text-secondary-color);
+  filter: drop-shadow(0 0 3px var(--ui-gray-darkest))
+  border: none
+  border-radius: 8px
+  width: inherit;
+
+  h5
+    font-size: 20px
+    line-height: 35px
+    margin: 0
+
+  h5, label
+    font-weight: 400
+
+  .cine-navigation, .cine-controls, .cine-options
+    cursor: default
+
+  .fps-section
+    input[type="range"]
+      background-color: transparent
+      border: 0 none
+      outline: 0 none
+
+      &::-ms-tooltip
+        display: none
+
+  .double-row-style
+    box-sizing: border-box
+    width: 290px
+    height: 70px
+    padding: 10px
+    top: 2%
+    left: 35%
+
+    .cine-navigation
+      position: absolute
+      right: 16px
+      top: 10px
+
+      .btn
+        padding: 0 4px
+
+        i
+          font-size: 32px
+          line-height: 32px
+
+    .cine-controls
+      left: 0px
+
+    .cine-options
+      padding: 0px 0
+
+      .fps-section
+        width: 175px
+        float: left
+
+      .fps
+        float: right
+
+
+  .single-row-style
+    box-sizing: content-box
+    width: 425px
+    height: 45px
+    padding: 4px 8px
+    top: 2%
+    left: 35%
+
+    .cine-navigation
+      float: right
+      overflow: hidden
+      padding-right: 12px
+      position: relative
+
+      .btn
+        padding: 0 2px
+        margin: 0 0 0 2px
+        border: 0 none
+        &:first-of-type
+          margin-left: 0
+
+        i
+          font-size: 32px
+          line-height: 45px
+
+    .cine-controls
+      position: relative
+      float: left
+      overflow: hidden
+
+      .btn
+        font-size: 22px
+        line-height: 45px
+        min-width: 28px
+        padding: 0 0px
+        margin: 0 4px
+        border: 0 none
+
+    .cine-options
+      display: block
+      position: relative
+      width: 150px
+      float: left
+      overflow: hidden
+      padding: 0
+      margin: 0 0 0 10px
+
+      .fps-section
+        display: block
+        float: left
+        width: 80px
+        input[type="range"]
+          line-height: 45px
+          height: 45px
+
+      .fps
+        display: block
+        width: 68px
+        float: left
+        padding: 0
+        margin: 0 0 0 2px
+        text-align: center
+        line-height: 45px
+        font-size: 14px;
+        line-height: 1.42857143;
+
+  .btn
+    color: var(--text-secondary-color);
+    background-color: transparent
+    border: 0
+    border-radius: 4px
+    font-size: 15px
+    width: 45px
+    font-weight: normal
+    height: 37px
+    line-height: 37px
+    padding: 0 12px
+
+    &:hover, &:active, &.active
+      color: var(--hover-color);
+
+    &[disabled]
+      &:hover
+        color: inherit
+      &:active
+        color: var(--text-secondary-color);
+
+    &.btn-primary, &.btn-secondary, &.btn-danger
+      transition: background-color 0.3s ease
+
+      &:hover, &:active, &:focus
+        opacity: 0.8
+
+    &.btn-primary
+      background-color: var(--active-color);
+      color: var(--primary-background-color)
+
+    &.btn-secondary
+      background-color: var(--text-secondary-color);
+      color: var(--primary-background-color)
+
+    &.btn-danger
+      background-color: var(--text-destructive-color);
+      color: var(--text-primary-color);
+
+    &.active
+      box-shadow: inset 1px 1px 2px var(--ui-gray-darkest)
@@ -0,0 +1,57 @@
+---
+name: CINE Dialog
+menu: Components
+route: /components/cine-dialog
+---
+
+import { Playground, Props } from 'docz'
+import { State } from 'react-powerplug'
+import { CineDialog } from './../index'
+import NameSpace from '../../../__docs__/NameSpace'
+
+# CINE Dialog
+
+## Basic usage
+
+<Playground>
+  <State
+    initial={{
+      isPlaying: false,
+      cineFrameRate: 24,
+      isLoopEnabled: true,
+      lastChange: '',
+    }}
+  >
+    {({ state, setState }) => (
+      <React.Fragment>
+        <div>
+          <pre>{JSON.stringify(state, null, 2)}</pre>
+        </div>
+        <div style={{ maxWidth: '300px', margin: '0 auto' }}>
+          <CineDialog
+            {...state}
+            onClickSkipToStart={() =>
+              setState({ lastChange: 'Clicked SkipToStart' })
+            }
+            onClickSkipToEnd={() =>
+              setState({ lastChange: 'Clicked SkipToEnd' })
+            }
+            onClickNextButton={() => setState({ lastChange: 'Clicked Next' })}
+            onClickBackButton={() => setState({ lastChange: 'Clicked Back' })}
+            onLoopChanged={value => setState({ isLoopEnabled: value })}
+            onFrameRateChanged={value => setState({ cineFrameRate: value })}
+            onPlayPauseChanged={() => setState({ isPlaying: !state.isPlaying })}
+          />
+        </div>
+      </React.Fragment>
+    )}
+  </State>
+</Playground>
+
+## API
+
+<Props of={CineDialog} />
+
+## Translation Namespace
+
+<NameSpace name="CineDialog" />
@@ -0,0 +1,2 @@
+import CineDialog from './CineDialog';
+export { CineDialog };