Show sig ID (#119)

* feat(Map): Add option to show sig ID on system

* feat(Map): Add option to show sig ID in custom label

assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeTheme.tsx

@@ -2,7 +2,7 @@ import { memo } from 'react';
 import { Handle, Position } from 'reactflow';
 import clsx from 'clsx';
 
-import classes from './SolarSystemNodeTheme.module.scss'; 
+import classes from './SolarSystemNodeTheme.module.scss';
 import { PrimeIcons } from 'primereact/api';
 
 import { useSolarSystemNode } from '../../hooks/useSolarSystemNode';
@@ -15,47 +15,65 @@ import {
 import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/WormholeClassComp';
 import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
 
-
-export const SolarSystemNodeTheme = memo((props) => {
-  const nodeVars = useSolarSystemNode(props);
+export const SolarSystemNodeTheme = memo(props => {
+  const {
+    charactersInSystem,
+    classTitle,
+    classTitleColor,
+    customName,
+    effectName,
+    hasUserCharacters,
+    hubs,
+    visible,
+    labelCustom,
+    labelsInfo,
+    locked,
+    isShattered,
+    isThickConnections,
+    isWormhole,
+    killsCount,
+    killsActivityType,
+    regionClass,
+    regionName,
+    status,
+    selected,
+    tag,
+    showHandlers,
+    systemName,
+    sortedStatics,
+    solarSystemId,
+    unsplashedLeft,
+    unsplashedRight,
+    dbClick: handleDbClick,
+  } = useSolarSystemNode(props);
 
   return (
     <>
-      {nodeVars.visible && (
+      {visible && (
         <div className={classes.Bookmarks}>
-          {nodeVars.labelCustom !== '' && (
+          {labelCustom !== '' && (
             <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.custom)}>
-              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] ">
-                {nodeVars.labelCustom}
-              </span>
+              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] ">{labelCustom}</span>
             </div>
           )}
 
-          {nodeVars.isShattered && (
+          {isShattered && (
             <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered)}>
               <span className={clsx('pi pi-chart-pie', classes.icon)} />
             </div>
           )}
 
-          {nodeVars.killsCount && (
-            <div
-              className={clsx(
-                classes.Bookmark,
-                MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!]
-              )}
-            >
+          {killsCount && (
+            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[killsActivityType!])}>
               <div className={clsx(classes.BookmarkWithIcon)}>
                 <span className={clsx(PrimeIcons.BOLT, classes.icon)} />
-                <span className={clsx(classes.text)}>{nodeVars.killsCount}</span>
+                <span className={clsx(classes.text)}>{killsCount}</span>
               </div>
             </div>
           )}
 
-          {nodeVars.labelsInfo.map(x => (
-            <div
-              key={x.id}
-              className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[x.id])}
-            >
+          {labelsInfo.map(x => (
+            <div key={x.id} className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[x.id])}>
               {x.shortName}
             </div>
           ))}
@@ -63,31 +81,18 @@ export const SolarSystemNodeTheme = memo((props) => {
       )}
 
       <div
-        className={clsx(
-          classes.RootCustomNode,
-          nodeVars.regionClass && classes[nodeVars.regionClass],
-          classes[STATUS_CLASSES[nodeVars.status]],
-          { [classes.selected]: nodeVars.selected },
-        )}
+        className={clsx(classes.RootCustomNode, regionClass && classes[regionClass], classes[STATUS_CLASSES[status]], {
+          [classes.selected]: selected,
+        })}
       >
-        {nodeVars.visible && (
+        {visible && (
           <>
             <div className={classes.HeadRow}>
-              <div
-                className={clsx(
-                  classes.classTitle,
-                  nodeVars.classTitleColor,
-                  '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]',
-                )}
-              >
-                {nodeVars.classTitle ?? '-'}
+              <div className={clsx(classes.classTitle, classTitleColor, '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]')}>
+                {classTitle ?? '-'}
               </div>
 
-              {nodeVars.tag != null && nodeVars.tag !== '' && (
-                <div className={clsx(classes.TagTitle)}>
-                  {nodeVars.tag}
-                </div>
-              )}
+              {tag != null && tag !== '' && <div className={clsx(classes.TagTitle)}>{tag}</div>}
 
               <div
                 className={clsx(
@@ -95,71 +100,63 @@ export const SolarSystemNodeTheme = memo((props) => {
                   '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] flex-grow overflow-hidden text-ellipsis whitespace-nowrap',
                 )}
               >
-                {nodeVars.systemName}
+                {systemName}
               </div>
 
-              {nodeVars.isWormhole && (
+              {isWormhole && (
                 <div className={classes.statics}>
-                  {nodeVars.sortedStatics.map(whClass => (
+                  {sortedStatics.map(whClass => (
                     <WormholeClassComp key={whClass} id={whClass} />
                   ))}
                 </div>
               )}
 
-              {nodeVars.effectName !== null && nodeVars.isWormhole && (
-                <div className={clsx(classes.effect, EFFECT_BACKGROUND_STYLES[nodeVars.effectName])} />
+              {effectName !== null && isWormhole && (
+                <div className={clsx(classes.effect, EFFECT_BACKGROUND_STYLES[effectName])} />
               )}
             </div>
 
             <div className={clsx(classes.BottomRow, 'flex items-center justify-between')}>
-              {nodeVars.customName && (
+              {customName && (
                 <div
                   className={clsx(
                     classes.CustomName,
                     '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] whitespace-nowrap overflow-hidden text-ellipsis mr-0.5',
                   )}
                 >
-                  {nodeVars.customName}
+                  {customName}
                 </div>
               )}
 
-              {!nodeVars.isWormhole && !nodeVars.customName && (
+              {!isWormhole && !customName && (
                 <div
                   className={clsx(
                     classes.RegionName,
                     '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] whitespace-nowrap overflow-hidden text-ellipsis mr-0.5',
                   )}
                 >
-                  {nodeVars.regionName}
+                  {regionName}
                 </div>
               )}
 
-              {nodeVars.isWormhole && !nodeVars.customName && <div />}
+              {isWormhole && !customName && <div />}
 
               <div className="flex items-center justify-end">
                 <div className="flex gap-1 items-center">
-                  {nodeVars.locked && (
-                    <i
-                      className={PrimeIcons.LOCK}
-                      style={{ fontSize: '0.45rem', fontWeight: 'bold' }}
-                    />
+                  {locked && <i className={PrimeIcons.LOCK} style={{ fontSize: '0.45rem', fontWeight: 'bold' }} />}
+
+                  {hubs.includes(solarSystemId.toString()) && (
+                    <i className={PrimeIcons.MAP_MARKER} style={{ fontSize: '0.45rem', fontWeight: 'bold' }} />
                   )}
 
-                  {nodeVars.hubs.includes(nodeVars.solarSystemId.toString()) && (
-                    <i
-                      className={PrimeIcons.MAP_MARKER}
-                      style={{ fontSize: '0.45rem', fontWeight: 'bold' }}
-                    />
-                  )}
-
-                  {nodeVars.charactersInSystem.length > 0 && (
+                  {charactersInSystem.length > 0 && (
                     <div
                       className={clsx(classes.localCounter, {
-                        [classes.hasUserCharacters]: nodeVars.hasUserCharacters,
+                        [classes.hasUserCharacters]: hasUserCharacters,
                       })}
                     >
                       <i className="pi pi-users" style={{ fontSize: '0.50rem' }} />
-                      <span className="font-sans">{nodeVars.charactersInSystem.length}</span>
+                      <span className="font-sans">{charactersInSystem.length}</span>
                     </div>
                   )}
                 </div>
@@ -169,19 +166,19 @@ export const SolarSystemNodeTheme = memo((props) => {
         )}
       </div>
 
-      {nodeVars.visible && (
+      {visible && (
         <>
-          {nodeVars.unsplashedLeft.length > 0 && (
+          {unsplashedLeft.length > 0 && (
             <div className={classes.Unsplashed}>
-              {nodeVars.unsplashedLeft.map(sig => (
+              {unsplashedLeft.map(sig => (
                 <UnsplashedSignature key={sig.sig_id} signature={sig} />
               ))}
             </div>
           )}
 
-          {nodeVars.unsplashedRight.length > 0 && (
+          {unsplashedRight.length > 0 && (
             <div className={clsx(classes.Unsplashed, classes['Unsplashed--right'])}>
-              {nodeVars.unsplashedRight.map(sig => (
+              {unsplashedRight.map(sig => (
                 <UnsplashedSignature key={sig.sig_id} signature={sig} />
               ))}
             </div>
@@ -189,44 +186,44 @@ export const SolarSystemNodeTheme = memo((props) => {
         </>
       )}
 
-      <div onMouseDownCapture={nodeVars.dbClick} className={classes.Handlers}>
+      <div onMouseDownCapture={handleDbClick} className={classes.Handlers}>
         <Handle
           type="source"
           className={clsx(classes.Handle, classes.HandleTop, {
-            [classes.selected]: nodeVars.selected,
-            [classes.Tick]: nodeVars.isThickConnections,
+            [classes.selected]: selected,
+            [classes.Tick]: isThickConnections,
           })}
-          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
+          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
           position={Position.Top}
           id="a"
         />
         <Handle
           type="source"
           className={clsx(classes.Handle, classes.HandleRight, {
-            [classes.selected]: nodeVars.selected,
-            [classes.Tick]: nodeVars.isThickConnections,
+            [classes.selected]: selected,
+            [classes.Tick]: isThickConnections,
           })}
-          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
+          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
           position={Position.Right}
           id="b"
         />
         <Handle
           type="source"
           className={clsx(classes.Handle, classes.HandleBottom, {
-            [classes.selected]: nodeVars.selected,
-            [classes.Tick]: nodeVars.isThickConnections,
+            [classes.selected]: selected,
+            [classes.Tick]: isThickConnections,
           })}
-          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
+          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
           position={Position.Bottom}
           id="c"
         />
         <Handle
           type="source"
           className={clsx(classes.Handle, classes.HandleLeft, {
-            [classes.selected]: nodeVars.selected,
-            [classes.Tick]: nodeVars.isThickConnections,
+            [classes.selected]: selected,
+            [classes.Tick]: isThickConnections,
           })}
-          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
+          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
           position={Position.Left}
           id="d"
         />
@@ -234,3 +231,5 @@ export const SolarSystemNodeTheme = memo((props) => {
     </>
   );
 });
+
+SolarSystemNodeTheme.displayName = 'SolarSystemNodeTheme';