@teselagen/ove 0.0.14 → 0.0.16

package/src/Reflex/ReflexElement.js

@@ -0,0 +1,160 @@
+///////////////////////////////////////////////////////////
+// ReflexElement
+// By Philippe Leefsma
+// December 2016
+//
+///////////////////////////////////////////////////////////
+import { throttle } from "lodash";
+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/src/Reflex/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/src/Reflex/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/src/Reflex/index.js

@@ -0,0 +1,5 @@
+import ReflexContainer from "./ReflexContainer";
+import ReflexSplitter from "./ReflexSplitter";
+import ReflexElement from "./ReflexElement";
+
+export { ReflexContainer, ReflexSplitter, ReflexElement };

package/src/Reflex/reflex-styles.css

@@ -0,0 +1,128 @@
+.reflex-layout.reflex-container {
+  justify-content: flex-start;
+  /* align items in Main Axis */
+  align-items: stretch;
+  /* align items in Cross Axis */
+  align-content: stretch;
+  display: -webkit-box;
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -moz-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -ms-flexbox;
+  /* TWEENER - IE 10 */
+  display: -webkit-flex;
+  /* NEW - Chrome */
+  display: flex;
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.reflex-layout.reflex-container.horizontal {
+  flex-direction: column;
+}
+
+.reflex-layout.reflex-container.vertical {
+  flex-direction: row;
+}
+
+.reflex-layout > .reflex-element {
+  position: relative;
+  overflow: auto;
+  height: 100%;
+  width: 100%;
+}
+
+.reflex-layout > .reflex-splitter {
+  background-color: #f5f8fa;
+  z-index: 100;
+}
+
+.reflex-layout > .reflex-splitter.active,
+.reflex-layout > .reflex-splitter:hover {
+  background-color: #f5f8fa;
+  transition: all 1s ease;
+}
+
+.reflex-layout.horizontal > .reflex-splitter {
+  border-bottom: 1px solid #f5f8fa;
+  border-top: 1px solid #f5f8fa;
+  cursor: row-resize;
+  width: 100%;
+  height: 2px;
+}
+
+.reflex-layout.horizontal > .reflex-splitter:hover,
+.reflex-layout.horizontal > .reflex-splitter.active {
+  border-bottom: 1px solid #f5f8fa;
+  border-top: 1px solid #f5f8fa;
+}
+
+.reflex-layout.vertical > .reflex-splitter {
+  border-right: 1px solid #f5f8fa;
+  border-left: 1px solid #f5f8fa;
+  cursor: col-resize;
+  height: 95%;
+  width: 2px;
+  margin-top: 33px;
+}
+.bp3-dark .reflex-layout.vertical > .reflex-splitter {
+  border-right: 1px solid #4a4b4b;
+  border-left: 1px solid #4a4b4b;
+}
+
+.reflex-layout.vertical > .reflex-splitter:hover,
+.reflex-layout.vertical > .reflex-splitter.active {
+  border-right: 1px solid #f5f8fa;
+  border-left: 1px solid #f5f8fa;
+}
+
+.reflex-layout > .reflex-splitter.reflex-thin {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  background: #000;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding;
+  background-clip: padding-box;
+  opacity: 0.2;
+  z-index: 100;
+}
+
+.reflex-layout
+  > .reflex-splitter.reflex-thin.active
+  .reflex-layout
+  > .reflex-splitter.reflex-thin:hover {
+  transition: all 1.5s ease;
+  opacity: 0.5;
+}
+
+.reflex-layout.horizontal > .reflex-splitter.reflex-thin {
+  border-bottom: 8px solid rgba(255, 255, 255, 0);
+  border-top: 8px solid rgba(255, 255, 255, 0);
+  height: 17px !important;
+  cursor: row-resize;
+  margin: -8px 0;
+  width: 100%;
+}
+
+.reflex-layout.horizontal > .reflex-splitter.reflex-thin.active,
+.reflex-layout.horizontal > .reflex-splitter.reflex-thin:hover {
+  border-bottom: 8px solid #e4e4e4;
+  border-top: 8px solid #e4e4e4;
+}
+
+.reflex-layout.vertical > .reflex-splitter.reflex-thin {
+  border-right: 8px solid rgba(255, 255, 255, 0);
+  border-left: 8px solid rgba(255, 255, 255, 0);
+  width: 17px !important;
+  cursor: col-resize;
+  margin: 0 -8px;
+  height: 100%;
+}
+
+.reflex-layout.vertical > .reflex-splitter.reflex-thin.active,
+.reflex-layout.vertical > .reflex-splitter.reflex-thin:hover {
+  border-right: 8px solid #e4e4e4;
+  border-left: 8px solid #e4e4e4;
+}

package/src/Reflex/reflex-styles.css.map

@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "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",
+    "sources": [
+        "reflex-styles.scss"
+    ],
+    "names": [],
+    "file": "reflex-styles.css"
+}

package/src/RowItem/AnnotationContainerHolder.js

@@ -0,0 +1,20 @@
+import React from "react";
+
+const AnnotationContainerHolder = function (props) {
+  return (
+    <div
+      className={props.className || "annotationContainer"}
+      width="100%"
+      style={{
+        height: props.containerHeight,
+        position: "relative",
+        display: "block",
+        marginTop: props.marginTop + props.extraMargin,
+        marginBottom: props.marginBottom
+      }}
+    >
+      {props.children}
+    </div>
+  );
+};
+export default AnnotationContainerHolder;

package/src/RowItem/AnnotationPositioner.js

@@ -0,0 +1,27 @@
+import React from "react";
+
+class AnnotationPositioner extends React.PureComponent {
+  render() {
+    return (
+      <svg
+        data-y-offset={this.props.yOffset}
+        transform={this.props.transform || null}
+        height={`${Math.max(0, this.props.height)}px`}
+        className={
+          (this.props.className || "") + " veRowViewAnnotationPosition"
+        }
+        width={Math.max(0, this.props.width + 5)}
+        style={{
+          position: "absolute",
+          top: this.props.top,
+          left: this.props.left
+        }}
+      >
+        {this.props.children}
+      </svg>
+    );
+  }
+}
+export default AnnotationPositioner;
+
+// key={'feature' + annotation.id + 'start:' + annotationRange.start}