feat: Change HippieCrosshair
- Change structure for options - Add mergeOptions method to combine defaults with options - Rename stuff
This commit is contained in:
parent
45b0aef67d
commit
4f029a1a73
2 changed files with 93 additions and 55 deletions
|
|
@ -5,24 +5,48 @@ class HippieCrosshair {
|
|||
|
||||
this.debug = options.debug || false;
|
||||
|
||||
const defaults = {
|
||||
crosshair: {
|
||||
size: 16,
|
||||
thickness: 2,
|
||||
color: '#000',
|
||||
gapSize: 8,
|
||||
style: 'cross'
|
||||
},
|
||||
connector: {
|
||||
distance: 128, // Distance to draw next symbol
|
||||
spacing: 64, // Space between symbols
|
||||
size: 8,
|
||||
color: '#000',
|
||||
style: 'arrow',
|
||||
visibility: true
|
||||
},
|
||||
line: {
|
||||
color: 'rgba(0, 0, 0, 0.1)',
|
||||
width: 1
|
||||
}
|
||||
};
|
||||
const merged = this.mergeOptions(defaults, options);
|
||||
const { crosshair, connector, line } = merged;
|
||||
|
||||
// Crosshair options
|
||||
this.size = options.size || 16;
|
||||
this.thickness = options.thickness || 2;
|
||||
this.color = options.color || '#000';
|
||||
this.gapSize = options.gapSize || 8;
|
||||
this.style = options.style || 'cross';
|
||||
this.size = crosshair.size;
|
||||
this.thickness = crosshair.thickness;
|
||||
this.color = crosshair.color;
|
||||
this.gapSize = crosshair.gapSize;
|
||||
this.style = crosshair.style;
|
||||
|
||||
// Connector options
|
||||
this.distance = connector.distance;
|
||||
this.spacing = connector.spacing;
|
||||
this.connectorSize = connector.size;
|
||||
this.connectorColor = connector.color;
|
||||
this.connectorStyle = connector.style;
|
||||
this.connectorShow = connector.visibility;
|
||||
|
||||
// Line options
|
||||
this.lineColor = options.lineColor || '#fff';
|
||||
this.lineWidth = options.lineWidth || 1;
|
||||
this.showConnector = options.showConnector !== false;
|
||||
|
||||
// Symbol options
|
||||
this.symbolDistance = options.symbolDistance || 128; // Distance to draw next symbol
|
||||
this.symbolSpacing = options.symbolSpacing || 64; // Space between symbols
|
||||
this.symbolSize = options.symbolSize || 8;
|
||||
this.symbolColor = options.symbolColor || '#000';
|
||||
this.symbolStyle = options.symbolStyle || 'arrow';
|
||||
this.lineColor = line.color || '#fff';
|
||||
this.lineWidth = line.width || 1;
|
||||
|
||||
this.mouseX = canvas.width / 2;
|
||||
this.mouseY = canvas.height / 2;
|
||||
|
|
@ -35,6 +59,22 @@ class HippieCrosshair {
|
|||
this.animate();
|
||||
}
|
||||
|
||||
mergeOptions(defaults, options) {
|
||||
const merged = JSON.parse(JSON.stringify(defaults));
|
||||
|
||||
if (options.crosshair) {
|
||||
Object.assign(merged.crosshair, options.crosshair);
|
||||
}
|
||||
if (options.connector) {
|
||||
Object.assign(merged.connector, options.connector);
|
||||
}
|
||||
if (options.line) {
|
||||
Object.assign(merged.line, options.line);
|
||||
}
|
||||
|
||||
return merged;
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
document.addEventListener('mousemove', (event) => {
|
||||
this.mouseX = event.clientX;
|
||||
|
|
@ -50,7 +90,7 @@ class HippieCrosshair {
|
|||
|
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
|
||||
if (this.showConnector) {
|
||||
if (this.connectorShow) {
|
||||
if (this.debug) this.drawLine();
|
||||
this.drawConnector();
|
||||
}
|
||||
|
|
@ -80,40 +120,38 @@ class HippieCrosshair {
|
|||
|
||||
const dx = this.mouseX - centerX;
|
||||
const dy = this.mouseY - centerY;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
const delta = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
// Only draw symbols if cursor is far enough from center
|
||||
if (distance < this.symbolDistance) {
|
||||
// Only draw connectors if cursor is far enough from center
|
||||
if (delta < this.distance) {
|
||||
return;
|
||||
}
|
||||
|
||||
const angle = Math.atan2(dy, dx);
|
||||
const count = Math.floor((delta - this.distance) / this.spacing);
|
||||
|
||||
// Calculate how many symbols to draw
|
||||
const symbolCount = Math.floor((distance - this.symbolDistance) / this.symbolSpacing);
|
||||
for (let i = 0; i < count; i++) {
|
||||
const distance = this.distance + (i * this.spacing);
|
||||
const x = centerX + Math.cos(angle) * distance;
|
||||
const y = centerY + Math.sin(angle) * distance;
|
||||
|
||||
for (let i = 0; i < symbolCount; i++) {
|
||||
const symbolDistance = this.symbolDistance + (i * this.symbolSpacing);
|
||||
const symbolX = centerX + Math.cos(angle) * symbolDistance;
|
||||
const symbolY = centerY + Math.sin(angle) * symbolDistance;
|
||||
|
||||
this.drawSymbol(symbolX, symbolY, angle);
|
||||
this.drawSymbol(x, y, angle);
|
||||
}
|
||||
}
|
||||
|
||||
drawSymbol(x, y, angle = 0) {
|
||||
this.ctx.fillStyle = this.symbolColor;
|
||||
this.ctx.strokeStyle = this.symbolColor;
|
||||
this.ctx.fillStyle = this.connectorColor;
|
||||
this.ctx.strokeStyle = this.connectorColor;
|
||||
this.ctx.lineWidth = 1;
|
||||
|
||||
switch (this.symbolStyle) {
|
||||
switch (this.connectorStyle) {
|
||||
case 'circle':
|
||||
this.ctx.beginPath();
|
||||
this.ctx.arc(x, y, this.symbolSize / 2, 0, Math.PI * 2);
|
||||
this.ctx.arc(x, y, this.connectorSize / 2, 0, Math.PI * 2);
|
||||
this.ctx.fill();
|
||||
break;
|
||||
case 'diamond':
|
||||
const size = this.symbolSize - (this.symbolSize / 4);
|
||||
const size = this.connectorSize - (this.connectorSize / 4);
|
||||
this.ctx.beginPath();
|
||||
this.ctx.moveTo(x, y - size);
|
||||
this.ctx.lineTo(x + size, y);
|
||||
|
|
@ -124,10 +162,10 @@ class HippieCrosshair {
|
|||
break;
|
||||
case 'square':
|
||||
this.ctx.fillRect(
|
||||
x - this.symbolSize / 2,
|
||||
y - this.symbolSize / 2,
|
||||
this.symbolSize,
|
||||
this.symbolSize
|
||||
x - this.connectorSize / 2,
|
||||
y - this.connectorSize / 2,
|
||||
this.connectorSize,
|
||||
this.connectorSize
|
||||
);
|
||||
break;
|
||||
case 'arrow':
|
||||
|
|
@ -137,7 +175,7 @@ class HippieCrosshair {
|
|||
}
|
||||
|
||||
arrow(x, y, angle) {
|
||||
const size = this.symbolSize - (this.symbolSize / 4);
|
||||
const size = this.connectorSize - (this.connectorSize / 4);
|
||||
|
||||
this.ctx.save();
|
||||
this.ctx.translate(x, y);
|
||||
|
|
@ -221,20 +259,20 @@ class HippieCrosshair {
|
|||
this.style = style;
|
||||
}
|
||||
|
||||
setColor(color) {
|
||||
setCrosshairColor(color) {
|
||||
this.color = color;
|
||||
}
|
||||
|
||||
setSymbolStyle(style) {
|
||||
this.symbolStyle = style;
|
||||
setConnectorStyle(style) {
|
||||
this.connectorStyle = style;
|
||||
}
|
||||
|
||||
setSymbolColor(color) {
|
||||
this.symbolColor = color;
|
||||
setConnectorColor(color) {
|
||||
this.connectorColor = color;
|
||||
}
|
||||
|
||||
setLineVisible(visible) {
|
||||
this.showConnector = visible;
|
||||
setConnectorVisibility(visible) {
|
||||
this.connectorShow = visible;
|
||||
}
|
||||
|
||||
startAnimation() {
|
||||
|
|
|
|||
|
|
@ -33,12 +33,12 @@ tags:
|
|||
</nav>
|
||||
<nav>
|
||||
<span>Connector</span>
|
||||
<button onclick="toggleLine()">Toggle</button>
|
||||
<button onclick="toggleConnector()">Toggle</button>
|
||||
<hr class="vertical">
|
||||
<button onclick="changeSymbolStyle('arrow')"><i class="bi bi-caret-up-fill"></i></button>
|
||||
<button onclick="changeSymbolStyle('square')"><i class="bi bi-square-fill"></i></button>
|
||||
<button onclick="changeSymbolStyle('circle')"><i class="bi bi-circle-fill"></i></button>
|
||||
<button onclick="changeSymbolStyle('diamond')"><i class="bi bi-diamond-fill"></i></button>
|
||||
<button onclick="changeConnectorStyle('arrow')"><i class="bi bi-caret-up-fill"></i></button>
|
||||
<button onclick="changeConnectorStyle('square')"><i class="bi bi-square-fill"></i></button>
|
||||
<button onclick="changeConnectorStyle('circle')"><i class="bi bi-circle-fill"></i></button>
|
||||
<button onclick="changeConnectorStyle('diamond')"><i class="bi bi-diamond-fill"></i></button>
|
||||
</nav>
|
||||
</header>
|
||||
{% endblock %}
|
||||
|
|
@ -59,18 +59,18 @@ tags:
|
|||
crosshair.setCrosshairStyle(style);
|
||||
}
|
||||
|
||||
function changeSymbolStyle(style) {
|
||||
crosshair.setSymbolStyle(style);
|
||||
function changeConnectorStyle(style) {
|
||||
crosshair.setConnectorStyle(style);
|
||||
}
|
||||
|
||||
function changeColor(color) {
|
||||
crosshair.setColor(color);
|
||||
crosshair.setSymbolColor(color);
|
||||
crosshair.setCrosshairColor(color);
|
||||
crosshair.setConnectorColor(color);
|
||||
crosshair.lineColor = `rgba(${parseInt(color.slice(1, 3), 16)}, ${parseInt(color.slice(3, 5), 16)}, ${parseInt(color.slice(5, 7), 16)}, 0.3)`;
|
||||
}
|
||||
|
||||
function toggleLine() {
|
||||
crosshair.setLineVisible(!crosshair.showConnector);
|
||||
function toggleConnector() {
|
||||
crosshair.setConnectorVisibility(!crosshair.connectorShow);
|
||||
}
|
||||
|
||||
function toggleAnimation() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue