@teselagen/ove 0.7.26 → 0.7.28

package/UncontrolledSliderWithPlusMinusBtns.js

@@ -0,0 +1,134 @@
+import React from "react";
+import { Icon, Slider, Intent } from "@blueprintjs/core";
+import { preventDefaultStopPropagation } from "../utils/editorUtils";
+import { clamp, isNumber } from "lodash-es";
+import "./UncontrolledSliderWithPlusMinusBtns.css";
+
+export default class UncontrolledSliderWithPlusMinusBtns extends React.Component {
+  state = { value: 0 };
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (
+      nextProps.justUpdateInitialValOnce &&
+      prevState.oldInitialValue !== undefined
+    ) {
+      return null;
+    }
+    //potentially coerce the initial value coming in
+    if (prevState.oldInitialValue !== nextProps.initialValue) {
+      const val = nextProps.coerceInitialValue
+        ? nextProps.coerceInitialValue(nextProps)
+        : nextProps.initialValue;
+      return {
+        value: val, //set the state value if a new initial value comes in!
+        oldInitialValue: nextProps.initialValue
+      };
+    } else {
+      return null;
+    }
+  }
+
+  render() {
+    const { value } = this.state;
+    const {
+      noWraparound,
+      title,
+      initialValue,
+      label,
+      passedRef,
+      clickStepSize,
+      style,
+      onClick,
+      smallSlider,
+      bindOutsideChangeHelper,
+      className,
+      ...rest
+    } = this.props;
+    const { min, max } = this.props;
+
+    const stepSize = this.props.stepSize || (max - min) / 10;
+    if (bindOutsideChangeHelper) {
+      bindOutsideChangeHelper.triggerChange = fn => {
+        const valToPass =
+          isNumber(value) && !isNaN(value) ? value : initialValue;
+        return fn({
+          value: valToPass,
+          changeValue: newVal => {
+            const newnew = clamp(newVal, min, max);
+            this.setState({ value: newnew });
+            this.props.onChange && this.props.onChange(newnew);
+            this.props.onRelease && this.props.onRelease(newnew);
+          }
+        });
+      };
+    }
+    return (
+      <div
+        className={`${className} ${smallSlider ? "small-slider" : ""}`}
+        onClick={e => {
+          onClick && onClick(e);
+          preventDefaultStopPropagation(e);
+        }}
+        ref={passedRef}
+        onDrag={preventDefaultStopPropagation}
+        onDragStart={preventDefaultStopPropagation}
+        onDragEnd={preventDefaultStopPropagation}
+        onMouseDown={preventDefaultStopPropagation}
+        // onMouseUp={preventDefaultStopPropagation} //tnr: commenting this out because it was breaking sliders onRelease
+        title={title}
+        style={{ ...style, display: "flex", marginLeft: 15, marginRight: 20 }}
+      >
+        <Icon
+          onClick={() => {
+            let newVal = value - (clickStepSize || stepSize);
+            if (newVal < min) {
+              if (noWraparound) {
+                newVal = min;
+              } else {
+                newVal = max - (clickStepSize || stepSize);
+              }
+            }
+            this.setState({
+              value: newVal
+            });
+            this.props.onChange(newVal);
+            this.props.onRelease && this.props.onRelease(newVal);
+          }}
+          style={{ cursor: "pointer", marginRight: 8 }}
+          intent={Intent.PRIMARY}
+          icon={this.props.leftIcon || "minus"}
+        />
+        <Slider
+          {...{ ...rest, value }}
+          onRelease={newVal =>
+            this.props.onRelease && this.props.onRelease(newVal)
+          }
+          onChange={value => {
+            this.setState({ value });
+            this.props.onChange && this.props.onChange(value);
+          }}
+        />
+        <Icon
+          onClick={() => {
+            let newVal = value + (clickStepSize || stepSize);
+            if (newVal > max) {
+              if (noWraparound) {
+                newVal = max;
+              } else {
+                newVal = min + (clickStepSize || stepSize);
+              }
+            }
+            this.setState({
+              value: newVal
+            });
+            this.props.onChange(newVal);
+            this.props.onRelease && this.props.onRelease(newVal);
+          }}
+          style={{ cursor: "pointer", marginLeft: 8 }}
+          intent={Intent.PRIMARY}
+          icon={this.props.rightIcon || "plus"}
+        />
+      </div>
+    );
+  }
+}

package/VeTopRightContainer.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+export function VeTopRightContainer({ fullScreen, children }) {
+  return (
+    <div
+      style={fullScreen ? { right: 65, top: 10 } : {}}
+      className="veTopRightContainer"
+    >
+      {children}
+    </div>
+  );
+}

package/ZoomCircularViewSlider.js

@@ -0,0 +1,62 @@
+import React from "react";
+import { SLIDER_NORM_WIDTH, SLIDER_SMALL_WIDTH } from "../constants/constants";
+import UncontrolledSliderWithPlusMinusBtns from "../helperComponents/UncontrolledSliderWithPlusMinusBtns";
+export function ZoomCircularViewSlider({
+  zoomHelper,
+  zoomLevel,
+  setZoomLevel,
+  maxZoomLevel,
+  onZoom,
+  smallSlider
+}) {
+  let clickStepSize = (maxZoomLevel - 1) / 440;
+  clickStepSize = clickStepSize * Math.max(1, Math.log(zoomLevel + 2));
+  clickStepSize = Math.round(clickStepSize * 1000) / 1000;
+  const stepSize = clickStepSize;
+  const min = 1;
+  function setZoom(val) {
+    const newZoomLev = val;
+    setZoomLevel(newZoomLev);
+    onZoom(newZoomLev);
+  }
+  if (zoomLevel > maxZoomLevel) {
+    setTimeout(() => {
+      if (zoomHelper.current && zoomHelper.current.triggerChange) {
+        zoomHelper.current.triggerChange(({ changeValue }) => {
+          changeValue(maxZoomLevel);
+        });
+      }
+    }, 0);
+  }
+  return (
+    <div
+      style={{
+        position: "absolute",
+        left: smallSlider ? 100 : 150,
+        top: 0,
+        zIndex: 900
+      }}
+    >
+      <UncontrolledSliderWithPlusMinusBtns
+        bindOutsideChangeHelper={zoomHelper.current}
+        onChange={setZoom}
+        onRelease={setZoom}
+        title="Adjust Zoom Level"
+        style={{
+          paddingTop: "4px",
+          width: smallSlider ? SLIDER_SMALL_WIDTH : SLIDER_NORM_WIDTH
+        }}
+        smallSlider
+        noWraparound
+        className="veZoomCircularSlider ove-slider"
+        labelRenderer={false}
+        stepSize={stepSize}
+        clickStepSize={clickStepSize}
+        initialValue={zoomLevel || 1}
+        justUpdateInitialValOnce
+        max={maxZoomLevel || 14}
+        min={min}
+      />
+    </div>
+  );
+}

package/ZoomLinearView.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { SLIDER_NORM_WIDTH, SLIDER_SMALL_WIDTH } from "../constants/constants";
+import UncontrolledSliderWithPlusMinusBtns from "../helperComponents/UncontrolledSliderWithPlusMinusBtns";
+import { scrollToCaret } from "./index";
+
+export function ZoomLinearView({
+  setCharWidth,
+  minCharWidth,
+  bindOutsideChangeHelper,
+  afterOnChange,
+  smallSlider
+}) {
+  return (
+    <div className="tg-zoom-bar" style={{ zIndex: 900, position: "absolute" }}>
+      <UncontrolledSliderWithPlusMinusBtns
+        noWraparound
+        bindOutsideChangeHelper={bindOutsideChangeHelper}
+        onClick={() => {
+          setTimeout(scrollToCaret, 0);
+        }}
+        onChange={zoomLvl => {
+          //zoomLvl is in the range of 0 to 10
+          const scaleFactor = Math.pow(12 / minCharWidth, 1 / 10);
+          const newCharWidth = minCharWidth * Math.pow(scaleFactor, zoomLvl);
+          setCharWidth(newCharWidth);
+          scrollToCaret();
+          afterOnChange && afterOnChange();
+        }}
+        leftIcon="minus"
+        rightIcon="plus"
+        title="Zoom"
+        smallSlider
+        style={{
+          paddingTop: "4px",
+          width: smallSlider ? SLIDER_SMALL_WIDTH : SLIDER_NORM_WIDTH
+        }}
+        className="veZoomLinearSlider ove-slider"
+        labelRenderer={false}
+        stepSize={0.05}
+        clickStepSize={0.5}
+        initialValue={0}
+        max={10}
+        min={0}
+      ></UncontrolledSliderWithPlusMinusBtns>
+    </div>
+  );
+}

package/addAlignment.js

@@ -0,0 +1,6 @@
+export default function addAlignment(store, alignment = {}) {
+  store.dispatch({
+    type: "UPSERT_ALIGNMENT_RUN",
+    payload: alignment
+  });
+}

package/addMetaToActionCreators.js

@@ -0,0 +1,12 @@
+export default function addMetaToActionCreators(actions, meta) {
+  const metaActions = {};
+  Object.keys(actions).forEach(function (actionName) {
+    metaActions[actionName] = function (firstArg, additionalMeta) {
+      return actions[actionName](firstArg, {
+        ...meta,
+        ...(additionalMeta || {})
+      });
+    };
+  });
+  return metaActions;
+}

package/addWrappedAddons.js

@@ -0,0 +1,20 @@
+import { flatMap } from "lodash-es";
+import { normalizePositionByRangeLength } from "@teselagen/range-utils";
+
+export function addWrappedAddons(anns, seqLen) {
+  return flatMap(anns, ann => {
+    if (ann.overlapsSelf) {
+      return [
+        ann,
+        {
+          ...ann,
+          start: normalizePositionByRangeLength(ann.end + 1, seqLen),
+          end: normalizePositionByRangeLength(ann.start - 1, seqLen),
+          isWrappedAddon: true,
+          rangeTypeOverride: "middle" //we add this rangeTypeOverride here to get the wrapping piece to draw differently than normal
+        }
+      ];
+    }
+    return [ann];
+  });
+}