import { mix } from 'mixwith';

import PixiTrack from './PixiTrack';

import { RuleMixin } from './RuleMixin';
import { HorizontalRuleMixin } from './HorizontalRule';
import { VerticalRuleMixin } from './VerticalRule';

export class CrossRule extends mix(PixiTrack).with(RuleMixin, HorizontalRuleMixin, VerticalRuleMixin) {
  constructor(stage, xPosition, yPosition, options, animate) {
    super(stage, options, animate);

    this.xPosition = xPosition;
    this.yPosition = yPosition;
  }

  draw() {
    const graphics = this.pMain;
    graphics.clear();

    this.drawHorizontalRule(graphics);
    this.drawVerticalRule(graphics);
  }

  mouseMoveHandler(mousePos) {
    this.highlighted = (
      this.isWithin(mousePos.x, mousePos.y)
      && (
        this.isMouseOverHorizontalLine(mousePos)
        || this.isMouseOverVerticalLine(mousePos)
      )
    );

    this.draw();
  }
}

export default CrossRule;

import { mix, Mixin } from 'mixwith';

import PixiTrack from './PixiTrack.js';
import { colorToHex } from './utils';

import { RuleMixin } from './RuleMixin';
import { HorizontalRuleMixin } from './HorizontalRule.js';
import { VerticalRuleMixin } from './VerticalRule.js';

export class CrossRule extends mix(PixiTrack).with(RuleMixin, HorizontalRuleMixin, VerticalRuleMixin) {
  constructor(stage, xPosition, yPosition, options, animate) {
    super(stage, options, animate);

    this.xPosition = xPosition;
    this.yPosition = yPosition;
  }

  draw() {
    const graphics = this.pMain;
    graphics.clear();

    this.drawHorizontalRule(graphics);
    this.drawVerticalRule(graphics);
  }

  mouseMoveHandler(mousePos) {
    if (this.isWithin(mousePos.x, mousePos.y) &&
      this.isMouseOverHorizontalLine(mousePos) || this.isMouseOverVerticalLine(mousePos)) {
        this.highlighted = true;
        this.draw();
        return;
    }

    this.highlighted = false;
    this.draw();
  }
}

export default CrossRule;

--- 
+++ 
@@ -1,11 +1,10 @@
-import { mix, Mixin } from 'mixwith';
+import { mix } from 'mixwith';
 
-import PixiTrack from './PixiTrack.js';
-import { colorToHex } from './utils';
+import PixiTrack from './PixiTrack';
 
 import { RuleMixin } from './RuleMixin';
-import { HorizontalRuleMixin } from './HorizontalRule.js';
-import { VerticalRuleMixin } from './VerticalRule.js';
+import { HorizontalRuleMixin } from './HorizontalRule';
+import { VerticalRuleMixin } from './VerticalRule';
 
 export class CrossRule extends mix(PixiTrack).with(RuleMixin, HorizontalRuleMixin, VerticalRuleMixin) {
   constructor(stage, xPosition, yPosition, options, animate) {
@@ -24,14 +23,14 @@
   }
 
   mouseMoveHandler(mousePos) {
-    if (this.isWithin(mousePos.x, mousePos.y) &&
-      this.isMouseOverHorizontalLine(mousePos) || this.isMouseOverVerticalLine(mousePos)) {
-        this.highlighted = true;
-        this.draw();
-        return;
-    }
+    this.highlighted = (
+      this.isWithin(mousePos.x, mousePos.y)
+      && (
+        this.isMouseOverHorizontalLine(mousePos)
+        || this.isMouseOverVerticalLine(mousePos)
+      )
+    );
 
-    this.highlighted = false;
     this.draw();
   }
 }
Simplify and remove unused imports
