Support phantom arrows #11

yishn · Jan 25, 2020 · e6decb8 · e6decb8
1 parent cb0d785
commit e6decb8
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 21 deletions.
diff --git a/src/components/GridArrow.js b/src/components/GridArrow.js
@@ -337,7 +337,7 @@ export default class GridArrow extends Component {
           >
             <path
               d={path}
-              stroke="black"
+              stroke={this.props.line === 'none' ? 'transparent' : 'black'}
               stroke-width={this.props.line === 'double' ? 6 : 1}
               stroke-dasharray={
                 {

diff --git a/src/components/Properties.js b/src/components/Properties.js
@@ -97,18 +97,29 @@ export default class Properties extends Component {
           change = {[prop]: data[prop] === id ? 'none' : id}
         } else if (id === 'head') {
           change = {head: data.head == null ? 'none' : null}
-        } else if (['solid', 'dashed', 'dotted'].includes(id)) {
-          change = {line: id}
-        } else if (id === 'double') {
-          change = {
-            line: id,
-            ...([null, 'none'].includes(data.head) ? {} : {head: null}),
-            ...([null, 'mapsto', 'none'].includes(data.tail)
-              ? {}
-              : {tail: 'none'})
+        } else if (['double', 'solid', 'dashed', 'dotted'].includes(id)) {
+          change = {line: (data.line || 'solid') === id ? 'none' : id}
+
+          if (change.line === 'double') {
+            change = {
+              ...change,
+              ...([null, 'none'].includes(data.head) ? {} : {head: null}),
+              ...([null, 'mapsto', 'none'].includes(data.tail)
+                ? {}
+                : {tail: 'none'})
+            }
+          } else if (change.line === 'none') {
+            change = {
+              ...change,
+              head: 'none',
+              tail: 'none',
+              labelPosition: 'inside'
+            }
           }
         } else if (['labelleft', 'labelright', 'labelinside'].includes(id)) {
-          change = {labelPosition: id.slice(5)}
+          change = {
+            labelPosition: data.line === 'none' ? 'inside' : id.slice(5)
+          }
         } else if (['hook', 'harpoon'].includes(id)) {
           let prop = id === 'hook' ? 'tail' : 'head'
           let ids = [id, `${id}alt`, 'none']
@@ -249,22 +260,23 @@ export default class Properties extends Component {
 
           <Button
             checked={data.tail === 'tail'}
-            disabled={data.line === 'double'}
+            disabled={['none', 'double'].includes(data.line)}
             icon="./img/properties/tail.svg"
             name="Tail"
             onClick={this.handleButtonClick('tail')}
           />
 
           <Button
             checked={data.tail === 'mapsto'}
+            disabled={['none'].includes(data.line)}
             icon="./img/properties/mapsto.svg"
             name="Maps To"
             onClick={this.handleButtonClick('mapsto')}
           />
 
           <Button
             checked={['hook', 'hookalt'].includes(data.tail)}
-            disabled={data.line === 'double'}
+            disabled={['none', 'double'].includes(data.line)}
             icon={`./img/properties/${
               data.tail === 'hookalt' ? 'hookalt' : 'hook'
             }.svg`}
@@ -349,7 +361,7 @@ export default class Properties extends Component {
 
           <Button
             checked={['harpoon', 'harpoonalt'].includes(data.head)}
-            disabled={data.line === 'double'}
+            disabled={['none', 'double'].includes(data.line)}
             icon={`./img/properties/${
               data.head === 'harpoonalt' ? 'harpoonalt' : 'harpoon'
             }.svg`}
@@ -359,14 +371,15 @@ export default class Properties extends Component {
 
           <Button
             checked={data.head == null}
+            disabled={['none'].includes(data.line)}
             icon="./img/properties/head.svg"
             name="Default Head"
             onClick={this.handleButtonClick('head')}
           />
 
           <Button
             checked={data.head == 'twoheads'}
-            disabled={data.line === 'double'}
+            disabled={['none', 'double'].includes(data.line)}
             icon="./img/properties/twoheads.svg"
             name="Two Heads"
             onClick={this.handleButtonClick('twoheads')}
@@ -376,6 +389,7 @@ export default class Properties extends Component {
 
           <Button
             checked={!data.labelPosition || data.labelPosition === 'left'}
+            disabled={['none'].includes(data.line)}
             icon="./img/properties/labelleft.svg"
             name="Left Label (A)"
             onClick={this.handleButtonClick('labelleft')}
@@ -390,6 +404,7 @@ export default class Properties extends Component {
 
           <Button
             checked={data.labelPosition === 'right'}
+            disabled={['none'].includes(data.line)}
             icon="./img/properties/labelright.svg"
             name="Right Label (D)"
             onClick={this.handleButtonClick('labelright')}

diff --git a/src/diagram.js b/src/diagram.js
@@ -80,7 +80,7 @@ export function toTeX(diagram) {
           from={edge.from}
           to={edge.to}
           value={edge.value}
-          labelPosition={edge.labelPosition}
+          labelPosition={edge.line === 'none' ? null : edge.labelPosition}
           args={[
             ...[
               edge.head,
@@ -94,7 +94,11 @@ export function toTeX(diagram) {
                   solid: null,
                   dashed: 'dashed',
                   dotted: 'dotted',
-                  none: ['no head', null, null][i],
+                  none: [
+                    edge.line === 'none' ? null : 'no head',
+                    'phantom',
+                    null
+                  ][i],
                   default: null,
                   harpoon: 'harpoon',
                   harpoonalt: "harpoon'",
@@ -126,10 +130,9 @@ export function toTeX(diagram) {
             ...(edge.loop != null
               ? (() => {
                   let [angle, clockwise] = edge.loop || [0, false]
-                  let [inAngle, outAngle] = [
-                    (235 + angle + 360) % 360,
-                    (305 + angle + 360) % 360
-                  ]
+                  let [inAngle, outAngle] = [235, 305].map(
+                    x => (x + angle + 360) % 360
+                  )
                   if (!clockwise) {
                     ;[inAngle, outAngle] = [outAngle, inAngle]
                   }