draggable tracker icons

[alttp.git] / resources / js / components / tracker / ToggleIcon.js

diff --git a/resources/js/components/tracker/ToggleIcon.js b/resources/js/components/tracker/ToggleIcon.js
index 98ae93240d0656087f0dd17719c9af89a9b80da1..0d8afa4068440afcd962fe3d5fe9c971506d2f32 100644 (file)
--- a/resources/js/components/tracker/ToggleIcon.js
+++ b/resources/js/components/tracker/ToggleIcon.js
@@ -24,6 +24,7 @@ const ToggleIcon = ({ controller, className, icons, svg }) => {
        const activeController = controller || ToggleIcon.nullController;
        const active = activeController.getActive(state, icons);
        const defaultIcon = activeController.getDefault(state, icons);
+       const icon = active || defaultIcon || icons[0];
        const classNames = ['toggle-icon'];
        if (active) {
                classNames.push('active');
@@ -36,6 +37,7 @@ const ToggleIcon = ({ controller, className, icons, svg }) => {
        if (svg) {
                return <g
                        className={classNames.join(' ')}
+                       data-icon={icon}
                        onClick={(e) => {
                                activeController.handlePrimary(state, setManualState, icons);
                                e.preventDefault();
@@ -47,7 +49,7 @@ const ToggleIcon = ({ controller, className, icons, svg }) => {
                                e.stopPropagation();
                        }}
                >
-                       <ZeldaIcon name={active || defaultIcon || icons[0]} svg />
+                       <ZeldaIcon name={icon} svg />
                </g>;
        }
        return <span
@@ -265,6 +267,13 @@ ToggleIcon.nullController = {
        handleSecondary: doNothing,
 };
 
+ToggleIcon.pinController = (pin, removePin) => ({
+       getActive: firstIcon,
+       getDefault: firstIcon,
+       handlePrimary: doNothing,
+       handleSecondary: () => removePin(pin),
+});
+
 ToggleIcon.simpleController = {
        getActive: highestActive,
        getDefault: firstIcon,