@teselagen/ove 0.7.26 → 0.7.28

package/ReflexElement.js

@@ -0,0 +1,160 @@
+///////////////////////////////////////////////////////////
+// ReflexElement
+// By Philippe Leefsma
+// December 2016
+//
+///////////////////////////////////////////////////////////
+import { throttle } from "lodash-es";
+import Measure from "react-measure";
+import PropTypes from "prop-types";
+import Browser from "./Browser";
+import React from "react";
+
+export default class ReflexElement extends React.Component {
+  /////////////////////////////////////////////////////////
+  //
+  //
+  /////////////////////////////////////////////////////////
+  static propTypes = {
+    renderOnResizeRate: PropTypes.number,
+    propagateDimensions: PropTypes.bool,
+    renderOnResize: PropTypes.bool,
+    resizeHeight: PropTypes.bool,
+    resizeWidth: PropTypes.bool,
+    className: PropTypes.string
+  };
+
+  /////////////////////////////////////////////////////////
+  //
+  //
+  /////////////////////////////////////////////////////////
+  static defaultProps = {
+    renderOnResize: Browser.isSafari(), // Safari is creepy ...
+    propagateDimensions: false,
+    renderOnResizeRate: 60,
+    resizeHeight: true,
+    resizeWidth: true,
+    className: ""
+  };
+
+  /////////////////////////////////////////////////////////
+  //
+  //
+  /////////////////////////////////////////////////////////
+  constructor(props) {
+    super(props);
+
+    this.onResize = this.onResize.bind(this);
+
+    this.setStateThrottled = throttle(state => {
+      this.setState(state);
+    }, this.props.renderOnResizeRate);
+
+    this.state = {
+      dimensions: {
+        height: "100%",
+        width: "100%"
+      }
+    };
+  }
+
+  /////////////////////////////////////////////////////////
+  //
+  //
+  /////////////////////////////////////////////////////////
+  async UNSAFE_componentWillReceiveProps(props) {
+    if (props.size !== this.props.size) {
+      const directions = this.toArray(props.direction);
+
+      for (const dir of directions) {
+        await this.props.events.emit("element.size", {
+          size: props.size,
+          direction: dir,
+          element: this
+        });
+      }
+    }
+  }
+
+  /////////////////////////////////////////////////////////
+  //
+  //
+  /////////////////////////////////////////////////////////
+  toArray(obj) {
+    return obj ? (Array.isArray(obj) ? obj : [obj]) : [];
+  }
+
+  /////////////////////////////////////////////////////////
+  //
+  //
+  /////////////////////////////////////////////////////////
+  onResize(rect) {
+    const { renderOnResize, resizeHeight, resizeWidth } = this.props;
+
+    if (renderOnResize) {
+      this.setStateThrottled({
+        dimensions: {
+          ...(resizeHeight && { height: Math.floor(rect.bounds.height) }),
+          ...(resizeWidth && { width: Math.floor(rect.bounds.width) })
+        }
+      });
+    }
+  }
+
+  /////////////////////////////////////////////////////////
+  //
+  //
+  /////////////////////////////////////////////////////////
+  renderChildren() {
+    if (this.props.propagateDimensions) {
+      return React.Children.map(this.props.children, child => {
+        const newProps = Object.assign({}, child.props, {
+          dimensions: this.state.dimensions
+        });
+
+        return React.cloneElement(child, newProps);
+      });
+    }
+
+    return this.props.children;
+  }
+
+  /////////////////////////////////////////////////////////
+  //
+  //
+  /////////////////////////////////////////////////////////
+  render() {
+    const classNames = ["reflex-element", ...this.props.className.split(" ")];
+
+    const className = classNames.join(" ");
+
+    const outerStyle = Object.assign(
+      {},
+      {
+        WebkitBoxFlex: this.props.flex,
+        FlexElement: this.props.flex,
+        MozBoxFlex: this.props.flex,
+        WebkitFlex: this.props.flex,
+        flex: this.props.flex
+      },
+      this.props.style
+    );
+
+    const innerStyle = {
+      height: this.state.dimensions.height,
+      width: this.state.dimensions.width
+    };
+
+    return (
+      <Measure bounds onResize={this.onResize}>
+        {({ measureRef }) => (
+          <div ref={measureRef} className={className} style={outerStyle}>
+            <div className="tg-reflex-element-inner" style={innerStyle}>
+              {this.renderChildren()}
+            </div>
+          </div>
+        )}
+      </Measure>
+    );
+  }
+}

package/ReflexEvents.js

@@ -0,0 +1,77 @@
+///////////////////////////////////////////////////////////
+// ReflexEvents
+// By Philippe Leefsma
+// December 2016
+//
+///////////////////////////////////////////////////////////
+class ReflexEvents {
+  /////////////////////////////////////////////////////////
+  //
+  //
+  /////////////////////////////////////////////////////////
+  constructor() {
+    this._events = {};
+  }
+
+  /////////////////////////////////////////////////////////
+  // Supports multiple events space-separated
+  //
+  /////////////////////////////////////////////////////////
+  on(events, fct) {
+    events.split(" ").forEach(event => {
+      this._events[event] = this._events[event] || [];
+      this._events[event].push(fct);
+    });
+
+    return this;
+  }
+
+  /////////////////////////////////////////////////////////
+  // Supports multiple events space-separated
+  //
+  /////////////////////////////////////////////////////////
+  off(events, fct) {
+    // eslint-disable-next-line eqeqeq
+    if (events == undefined) {
+      this._events = {};
+      return;
+    }
+
+    events.split(" ").forEach(event => {
+      if (event in this._events === false) return;
+
+      if (fct) {
+        this._events[event].splice(this._events[event].indexOf(fct), 1);
+      } else {
+        this._events[event] = [];
+      }
+    });
+
+    return this;
+  }
+
+  /////////////////////////////////////////////////////////
+  //
+  //
+  /////////////////////////////////////////////////////////
+  emit(event /* , args... */) {
+    if (this._events[event] === undefined) return;
+
+    const tmpArray = this._events[event].slice();
+
+    for (let i = 0; i < tmpArray.length; ++i) {
+      const result = tmpArray[i].apply(
+        this,
+        Array.prototype.slice.call(arguments, 1)
+      );
+
+      if (result !== undefined) {
+        return result;
+      }
+    }
+
+    return undefined;
+  }
+}
+
+export default ReflexEvents;

package/ReflexSplitter.js

@@ -0,0 +1,205 @@
+///////////////////////////////////////////////////////////
+// ReflexSplitter
+// By Philippe Leefsma
+// December 2016
+//
+///////////////////////////////////////////////////////////
+import PropTypes from "prop-types";
+import ReactDOM from "react-dom";
+import Browser from "./Browser";
+import React from "react";
+
+export default class ReflexSplitter extends React.Component {
+  /////////////////////////////////////////////////////////
+  //
+  //
+  /////////////////////////////////////////////////////////
+  static propTypes = {
+    children: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.node),
+      PropTypes.node
+    ]),
+    onStartResize: PropTypes.func,
+    onStopResize: PropTypes.func,
+    className: PropTypes.string,
+    propagate: PropTypes.bool,
+    onResize: PropTypes.func,
+    style: PropTypes.object
+  };
+
+  /////////////////////////////////////////////////////////
+  //
+  //
+  /////////////////////////////////////////////////////////
+  static defaultProps = {
+    document: typeof document === "undefined" ? null : document,
+    onStartResize: null,
+    onStopResize: null,
+    propagate: false,
+    onResize: null,
+    className: "",
+    style: {}
+  };
+
+  /////////////////////////////////////////////////////////
+  //
+  //
+  /////////////////////////////////////////////////////////
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      active: false
+    };
+
+    this.onMouseMove = this.onMouseMove.bind(this);
+    this.onMouseDown = this.onMouseDown.bind(this);
+    this.onMouseUp = this.onMouseUp.bind(this);
+
+    this.document = props.document;
+  }
+
+  /////////////////////////////////////////////////////////
+  //
+  //
+  /////////////////////////////////////////////////////////
+  componentDidMount() {
+    if (!this.document) {
+      return;
+    }
+
+    this.document.addEventListener("touchend", this.onMouseUp);
+
+    this.document.addEventListener("mouseup", this.onMouseUp);
+
+    this.document.addEventListener("mousemove", this.onMouseMove, {
+      passive: false
+    });
+
+    this.document.addEventListener("touchmove", this.onMouseMove, {
+      passive: false
+    });
+  }
+
+  /////////////////////////////////////////////////////////
+  //
+  //
+  /////////////////////////////////////////////////////////
+  componentWillUnmount() {
+    if (!this.document) {
+      return;
+    }
+
+    this.document.removeEventListener("mouseup", this.onMouseUp);
+
+    this.document.removeEventListener("touchend", this.onMouseUp);
+
+    this.document.removeEventListener("mousemove", this.onMouseMove);
+
+    this.document.removeEventListener("touchmove", this.onMouseMove);
+  }
+
+  /////////////////////////////////////////////////////////
+  //
+  //
+  /////////////////////////////////////////////////////////
+  onMouseMove(event) {
+    if (this.state.active) {
+      this.props.events.emit("splitter.resize", {
+        splitter: this,
+        event
+      });
+
+      if (this.props.onResize) {
+        this.props.onResize({
+          domElement: ReactDOM.findDOMNode(this),
+          component: this
+        });
+      }
+
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+
+  /////////////////////////////////////////////////////////
+  //
+  //
+  /////////////////////////////////////////////////////////
+  onMouseDown(event) {
+    this.setState({
+      active: true
+    });
+
+    if (this.props.onStartResize) {
+      // cancels resize from controller
+      // if needed by returning true
+      // to onStartResize
+      if (
+        this.props.onStartResize({
+          domElement: ReactDOM.findDOMNode(this),
+          component: this
+        })
+      ) {
+        return;
+      }
+    }
+
+    this.props.events.emit("splitter.startResize", {
+      splitter: this,
+      event
+    });
+  }
+
+  /////////////////////////////////////////////////////////
+  //
+  //
+  /////////////////////////////////////////////////////////
+  onMouseUp(event) {
+    if (this.state.active) {
+      this.setState({
+        active: false
+      });
+
+      if (this.props.onStopResize) {
+        this.props.onStopResize({
+          domElement: ReactDOM.findDOMNode(this),
+          component: this
+        });
+      }
+
+      this.props.events.emit("splitter.stopResize", {
+        splitter: this,
+        event
+      });
+    }
+  }
+
+  /////////////////////////////////////////////////////////
+  //
+  //
+  /////////////////////////////////////////////////////////
+  render() {
+    const classNames = ["reflex-splitter", ...this.props.className.split(" ")];
+
+    if (Browser.isMobile()) {
+      classNames.push("reflex-thin");
+    }
+
+    if (this.state.active) {
+      classNames.push("active");
+    }
+
+    return (
+      <div
+        className={classNames.join(" ")}
+        onTouchStart={this.onMouseDown}
+        onMouseDown={this.onMouseDown}
+        style={this.props.style}
+        id={this.props.id}
+      >
+        {this.props.children}
+      </div>
+    );
+  }
+}

package/RenameSequenceDialog.js

@@ -0,0 +1,7 @@
+import createSimpleDialog from "./createSimpleDialog";
+
+export default createSimpleDialog({
+  formName: "renameSequenceDialog",
+  fields: [{ name: "newName", isRequired: true }],
+  withDialogProps: { title: "Rename Sequence", height: 190 }
+});

package/RotateCircularViewSlider.js

@@ -0,0 +1,93 @@
+import React, { useEffect } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import { SLIDER_NORM_WIDTH, SLIDER_SMALL_WIDTH } from "../constants/constants";
+
+import UncontrolledSliderWithPlusMinusBtns from "../helperComponents/UncontrolledSliderWithPlusMinusBtns";
+
+export function RotateCircularViewSlider({
+  setRotationRadians,
+  zoomLevel,
+  maxZoomLevel,
+  bindOutsideChangeHelper,
+  smallSlider,
+  editorName
+}) {
+  const mainSelector = editorName ? `.veEditor.${editorName}` : ".veEditor";
+  const target = React.useRef();
+  const svgEleRef = React.useRef();
+
+  useEffect(() => {
+    // use document.querySelector so that the code can still work after changing the parent node of this component
+    const svgEle = document
+      .querySelector(mainSelector)
+      ?.querySelector(".veCircularView .circularViewSvg");
+    svgEleRef.current = svgEle;
+  }, [editorName, mainSelector]);
+
+  const showLabelsDebounced = useDebouncedCallback(
+    el => {
+      try {
+        if (el) el.classList.remove("veHideLabels");
+        else {
+          console.error(`whoops we shouldn't be here`);
+        }
+      } catch (e) {
+        console.error(`error 92hf290fasd:`, e);
+      }
+    },
+    // delay in ms
+    300,
+    { leading: true }
+  );
+
+  const stepSize = Math.min(
+    3,
+    (3 / (zoomLevel / 2)) * (maxZoomLevel / (zoomLevel / 2))
+  );
+  return (
+    <div
+      style={{
+        zIndex: 900,
+        position: "absolute"
+      }}
+    >
+      <UncontrolledSliderWithPlusMinusBtns
+        bindOutsideChangeHelper={bindOutsideChangeHelper}
+        onChange={_val => {
+          const val = 360 - _val;
+          if (!svgEleRef.current) {
+            svgEleRef.current = document
+              .querySelector(mainSelector)
+              ?.querySelector(".veCircularView .circularViewSvg");
+          }
+          const el = svgEleRef.current;
+          if (!el) return;
+          const innerEl = el?.querySelector("g");
+          innerEl.style.transform = `rotate(${val}deg)`;
+          setRotationRadians((val * Math.PI) / 180);
+          if (zoomLevel <= 1) {
+            el.classList.add("veHideLabels");
+          }
+          showLabelsDebounced(el);
+        }}
+        smallSlider
+        passedRef={target}
+        showTrackFill={false}
+        leftIcon="arrow-left"
+        rightIcon="arrow-right"
+        title="Rotate"
+        style={{
+          paddingTop: "4px",
+          width: smallSlider ? SLIDER_SMALL_WIDTH : SLIDER_NORM_WIDTH
+        }}
+        className="veRotateCircularSlider ove-slider"
+        labelRenderer={false}
+        stepSize={stepSize}
+        justUpdateInitialValOnce
+        // initialValue={initialRotation || 0}
+        max={360}
+        min={0}
+      />
+    </div>
+  );
+}

package/RowView/index.d.ts

@@ -1,5 +1,4 @@
 import { default as React } from '../../../../node_modules/react';
-
 export interface RowViewProps {
   editorName: string; //the name of the editor instance (this should match what you've set up in your redux store)
   height: number; //default = 400