Merge branch 'master' of https://github.com/TeselaGen/openVectorEditor …

…into td-alignmentdemo-and-fixes
TeselaGen · Jan 12, 2019 · b7ef63e · b7ef63e
2 parents 3fec6b7 + 1d69ff9
commit b7ef63e
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 11 deletions.
diff --git a/cypress/integration/simpleCircularOrLinearView.spec.js b/cypress/integration/simpleCircularOrLinearView.spec.js
@@ -4,6 +4,11 @@ describe("tabs", function() {
   beforeEach(() => {
     cy.visit("/#/SimpleCircularOrLinearView");
   });
+  it("can toggle part colors", function() {
+    cy.get(`path[stroke="red"]`).should("not.exist");
+    cy.tgToggle("togglePartColor");
+    cy.get(`path[stroke="red"]`).should("exist");
+  });
   it("can toggle a part hover", function() {
     cy.tgToggle("circular");
     cy.get(".veCircularViewLabelText.veAnnotationHovered").should("not.exist");

diff --git a/demo/src/SimpleCircularOrLinearViewDemo.js b/demo/src/SimpleCircularOrLinearViewDemo.js
@@ -24,9 +24,11 @@ export default class SimpleCircularOrLinearViewDemo extends React.Component {
             type: "hoverPart",
             label: "Toggle Part 1 Hover"
           })}
+          {renderToggle({ that: this, type: "toggleSelection" })}
           {renderToggle({ that: this, type: "hideNameAndInfo" })}
           {renderToggle({ that: this, type: "circular" })}
           {renderToggle({ that: this, type: "changeSize" })}
+          {renderToggle({ that: this, type: "togglePartColor" })}
         </div>
         <br />
         <br />
@@ -38,6 +40,9 @@ export default class SimpleCircularOrLinearViewDemo extends React.Component {
             ...(this.state.hideNameAndInfo && { hideName: true }),
             ...(this.state.hoverPart && { hoveredId: "fakeId1" }),
             ...(this.state.changeSize && { height: 500, width: 500 }),
+            ...(this.state.toggleSelection && {
+              selectionLayer: { start: 2, end: 30 }
+            }),
 
             sequenceData: {
               // annotationLabelVisibility: {
@@ -56,13 +61,15 @@ export default class SimpleCircularOrLinearViewDemo extends React.Component {
                   name: "Part 1",
                   id: "fakeId1",
                   start: 10,
-                  end: 20
+                  end: 20,
+                  ...this.state.togglePartColor && {color: "red"}
                 },
                 {
                   name: "Part 2",
                   id: "fakeId2",
                   start: 25,
-                  end: 30
+                  end: 30,
+                  ...this.state.togglePartColor && {color: "blue"}
                 }
               ],
               sequence:

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "open-vector-editor",
-  "version": "7.1.28",
+  "version": "7.1.29",
   "description": "Teselagen's Open Source Vector Editor",
   "main": "lib/index.js",
   "module": "es/index.js",

diff --git a/src/CircularView/Labels/index.js b/src/CircularView/Labels/index.js
@@ -285,7 +285,9 @@ const DrawLabelGroup = withHover(function({
       </text>,
       LabelLine(
         [
-          hovered ? label.innerPoint : label.truncatedInnerPoint,
+          hovered || label.annotationType === "part" //because parts live on the outside of the sequence, we don't need to show the truncated point, we can just point to them directly
+            ? label.innerPoint
+            : label.truncatedInnerPoint,
           label.outerPoint,
           label
         ],

diff --git a/src/CircularView/Part.js b/src/CircularView/Part.js
@@ -6,6 +6,7 @@ export default function CircularPart({
   arrowheadLength = 0.5,
   annotationHeight,
   totalAngle,
+  color,
   ...rest
 }) {
   let path = drawDirectedPiePiece({
@@ -20,8 +21,8 @@ export default function CircularPart({
       {...rest}
       className="vePart veCircularViewPart"
       strokeWidth="0.5"
-      stroke="purple"
-      fill="purple"
+      stroke={color || "purple"}
+      fill={color || "purple"}
       fillOpacity={0}
       d={path.print()}
     />

diff --git a/src/CircularView/drawAnnotations.js b/src/CircularView/drawAnnotations.js
@@ -132,6 +132,7 @@ function drawAnnotations({
       if (showLabels) {
         //add labels to the exported label array (to be drawn by the label component)
         labels[annotation.id] = {
+          annotationType,
           annotationCenterAngle: useStartAngle ? startAngle : centerAngle,
           annotationCenterRadius: annotationRadius,
           text: name,

diff --git a/src/RowItem/Features/Feature.js b/src/RowItem/Features/Feature.js
@@ -13,7 +13,7 @@ class Feature extends React.PureComponent {
       height,
       rangeType,
       forward,
-      name,
+      name = "",
       onMouseLeave,
       onMouseOver,
       hideName,

diff --git a/src/RowItem/Parts/Part.js b/src/RowItem/Parts/Part.js
@@ -11,17 +11,18 @@ function Part(props) {
     height,
     rangeType,
     forward,
-    name,
+    name = "",
     onMouseLeave,
     onMouseOver,
     pointiness = 8,
     fontWidth = 12,
     partClicked,
     partRightClicked,
-    annotation,
+    annotation = {},
     gapsInside,
     gapsBefore
   } = props;
+  const { color = "purple" } = annotation;
 
   let width = (widthInBps + gapsInside) * charWidth;
   let charWN = charWidth; //charWN is normalized
@@ -107,8 +108,8 @@ function Part(props) {
       </title>
       <path
         strokeWidth="1"
-        stroke="purple"
-        fill="purple"
+        stroke={color}
+        fill={color}
         fillOpacity={0}
         transform={forward ? null : "translate(" + width + ",0) scale(-1,1) "}
         d={path}