poi-plugin-compass 0.1.1 → 0.1.2

package/assets/compass.css

@@ -220,6 +220,7 @@
 
 .compass-edge {
   outline: none;
+  cursor: pointer;
 }
 
 .compass-edge line {
@@ -275,12 +276,27 @@
   cursor: pointer;
 }
 
+.compass-edge.is-selected line,
+.compass-edge:hover line,
+.compass-edge:focus line,
 .compass-edge.is-manual-choice:hover line,
 .compass-edge.is-manual-choice:focus line {
   stroke: #f4d476;
   stroke-width: 8;
 }
 
+.compass-edge-id-label {
+  fill: #ffffff;
+  font-size: 14px;
+  font-weight: 800;
+  text-anchor: middle;
+  paint-order: stroke;
+  stroke: #151a22;
+  stroke-width: 4px;
+  stroke-linejoin: round;
+  pointer-events: none;
+}
+
 .compass-edge-label {
   fill: #e2e8f0;
   font-size: 18px;

package/index.js

@@ -496,6 +496,7 @@ class Compass extends React.Component {
         : mapIds[0],
       phaseId: phaseOptionsForMap(mapIds[0])[0]?.id || null,
       selectedNode: pluginState.currentNode || null,
+      selectedEdge: null,
       overrides: {},
       exportOpen: false,
       exportRoute: null,
@@ -535,6 +536,7 @@ class Compass extends React.Component {
       mapId,
       phaseId: phaseOptionsForMap(mapId)[0]?.id || null,
       selectedNode: null,
+      selectedEdge: null,
       overrides: {},
       exportRoute: null,
       exportEnemies: {},
@@ -582,15 +584,15 @@ class Compass extends React.Component {
   }
 
   selectPhase(phaseId) {
-    this.setState({ phaseId, selectedNode: null, overrides: {}, exportRoute: null, exportEnemies: {}, exportFormations: {}, exportError: null })
+    this.setState({ phaseId, selectedNode: null, selectedEdge: null, overrides: {}, exportRoute: null, exportEnemies: {}, exportFormations: {}, exportError: null })
   }
 
   selectNode(node) {
-    this.setState({ selectedNode: node })
+    this.setState({ selectedNode: node, selectedEdge: null })
   }
 
   selectFleet(deckId) {
-    this.setState({ deckId, selectedNode: null, overrides: {}, exportRoute: null, exportEnemies: {}, exportFormations: {}, exportError: null })
+    this.setState({ deckId, selectedNode: null, selectedEdge: null, overrides: {}, exportRoute: null, exportEnemies: {}, exportFormations: {}, exportError: null })
   }
 
   renderLosIcons(scores) {
@@ -611,15 +613,20 @@ class Compass extends React.Component {
       `制空 ${air.min === air.max ? air.min : `${air.min}～${air.max}`}`)
   }
 
-  setManualOverride(node, to) {
+  setManualOverride(node, to, edgeId = null) {
     this.setState((state) => ({
       overrides: { ...state.overrides, [node]: to },
       selectedNode: node,
+      selectedEdge: edgeId,
       exportRoute: null,
       exportError: null,
     }))
   }
 
+  selectEdge(edgeId) {
+    this.setState({ selectedEdge: edgeId })
+  }
+
   renderMap(mapDefinition, geometry, evaluation, selectedNode, currentNode, passedNodes = [], mapId = null) {
     if (!mapGeometryAvailable(mapDefinition, geometry)) {
       return h('div', { className: 'compass-empty-panel' }, 'poi 地图数据不可用')
@@ -658,6 +665,7 @@ class Compass extends React.Component {
           || []
         const manualChoice = evaluation.decisions[edge.from]?.manual
           && manualOutcomes.some((outcome) => outcome.to === edge.to)
+        const selected = this.state.selectedEdge === edge.cell
         const edgeClassNames = [
           'compass-edge',
           probability.global != null ? 'is-reachable' : '',
@@ -665,21 +673,33 @@ class Compass extends React.Component {
           probabilityTier(probability.global),
           passedEdges.has(`${edge.from}->${edge.to}`) ? 'is-passed' : '',
           manualChoice ? 'is-manual-choice' : '',
+          selected ? 'is-selected' : '',
         ].filter(Boolean).join(' ')
         const activateEdge = (event) => {
           if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault()
-            this.setManualOverride(edge.from, edge.to)
+            if (manualChoice) this.setManualOverride(edge.from, edge.to, edge.cell)
+            else this.selectEdge(edge.cell)
           }
         }
         return h('g', {
           key: `edge-${edge.cell}`,
           className: edgeClassNames,
-          role: manualChoice ? 'button' : undefined,
-          tabIndex: manualChoice ? 0 : undefined,
-          onClick: manualChoice ? () => this.setManualOverride(edge.from, edge.to) : undefined,
-          onKeyDown: manualChoice ? activateEdge : undefined,
+          role: 'button',
+          tabIndex: 0,
+          'aria-label': `边 ID ${edge.cell}：${edge.from}→${edge.to}`,
+          onClick: () => manualChoice
+            ? this.setManualOverride(edge.from, edge.to, edge.cell)
+            : this.selectEdge(edge.cell),
+          onKeyDown: activateEdge,
         },
+          h('title', null, [
+            `边 ID ${edge.cell}：${edge.from} → ${edge.to}`,
+            manualChoice ? '点击选择方向' : null,
+            probability.global != null && Number(probability.global) > 0
+              ? `局部 ${formatPercent(probability.local, probability.estimated)}`
+              : null,
+          ].filter(Boolean).join(' · ')),
           h('line', {
             x1: from.x,
             y1: from.y,
@@ -694,10 +714,12 @@ class Compass extends React.Component {
               className: 'compass-edge-label',
             }, formatPercent(probability.global, probability.estimated))
             : null,
-          probability.global != null && Number(probability.global) > 0
-            ? h('title', null, manualChoice
-              ? `能动分歧：选择 ${edge.to}`
-              : `局部 ${formatPercent(probability.local, probability.estimated)}`)
+          selected
+            ? h('text', {
+              x: (from.x + to.x) / 2,
+              y: (from.y + to.y) / 2 - 18,
+              className: 'compass-edge-id-label',
+            }, `ID ${edge.cell}`)
             : null,
         )
       }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poi-plugin-compass",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "通常海域舰队罗盘",
   "main": "index.js",
   "repository": {
@@ -52,7 +52,7 @@
     "icon": "fa/compass",
     "priority": 20,
     "apiVer": {
-      "11.99.99": "0.1.1"
+      "11.99.99": "0.1.2"
     }
   },
   "peerDependencies": {