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;
|
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
|
// Crosshair options
|
||||||
this.size = options.size || 16;
|
this.size = crosshair.size;
|
||||||
this.thickness = options.thickness || 2;
|
this.thickness = crosshair.thickness;
|
||||||
this.color = options.color || '#000';
|
this.color = crosshair.color;
|
||||||
this.gapSize = options.gapSize || 8;
|
this.gapSize = crosshair.gapSize;
|
||||||
this.style = options.style || 'cross';
|
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
|
// Line options
|
||||||
this.lineColor = options.lineColor || '#fff';
|
this.lineColor = line.color || '#fff';
|
||||||
this.lineWidth = options.lineWidth || 1;
|
this.lineWidth = line.width || 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.mouseX = canvas.width / 2;
|
this.mouseX = canvas.width / 2;
|
||||||
this.mouseY = canvas.height / 2;
|
this.mouseY = canvas.height / 2;
|
||||||
|
|
@ -35,6 +59,22 @@ class HippieCrosshair {
|
||||||
this.animate();
|
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() {
|
setupEventListeners() {
|
||||||
document.addEventListener('mousemove', (event) => {
|
document.addEventListener('mousemove', (event) => {
|
||||||
this.mouseX = event.clientX;
|
this.mouseX = event.clientX;
|
||||||
|
|
@ -50,7 +90,7 @@ class HippieCrosshair {
|
||||||
|
|
||||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||||
|
|
||||||
if (this.showConnector) {
|
if (this.connectorShow) {
|
||||||
if (this.debug) this.drawLine();
|
if (this.debug) this.drawLine();
|
||||||
this.drawConnector();
|
this.drawConnector();
|
||||||
}
|
}
|
||||||
|
|
@ -80,40 +120,38 @@ class HippieCrosshair {
|
||||||
|
|
||||||
const dx = this.mouseX - centerX;
|
const dx = this.mouseX - centerX;
|
||||||
const dy = this.mouseY - centerY;
|
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
|
// Only draw connectors if cursor is far enough from center
|
||||||
if (distance < this.symbolDistance) {
|
if (delta < this.distance) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const angle = Math.atan2(dy, dx);
|
const angle = Math.atan2(dy, dx);
|
||||||
|
const count = Math.floor((delta - this.distance) / this.spacing);
|
||||||
|
|
||||||
// Calculate how many symbols to draw
|
for (let i = 0; i < count; i++) {
|
||||||
const symbolCount = Math.floor((distance - this.symbolDistance) / this.symbolSpacing);
|
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++) {
|
this.drawSymbol(x, y, angle);
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
drawSymbol(x, y, angle = 0) {
|
drawSymbol(x, y, angle = 0) {
|
||||||
this.ctx.fillStyle = this.symbolColor;
|
this.ctx.fillStyle = this.connectorColor;
|
||||||
this.ctx.strokeStyle = this.symbolColor;
|
this.ctx.strokeStyle = this.connectorColor;
|
||||||
this.ctx.lineWidth = 1;
|
this.ctx.lineWidth = 1;
|
||||||
|
|
||||||
switch (this.symbolStyle) {
|
switch (this.connectorStyle) {
|
||||||
case 'circle':
|
case 'circle':
|
||||||
this.ctx.beginPath();
|
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();
|
this.ctx.fill();
|
||||||
break;
|
break;
|
||||||
case 'diamond':
|
case 'diamond':
|
||||||
const size = this.symbolSize - (this.symbolSize / 4);
|
const size = this.connectorSize - (this.connectorSize / 4);
|
||||||
this.ctx.beginPath();
|
this.ctx.beginPath();
|
||||||
this.ctx.moveTo(x, y - size);
|
this.ctx.moveTo(x, y - size);
|
||||||
this.ctx.lineTo(x + size, y);
|
this.ctx.lineTo(x + size, y);
|
||||||
|
|
@ -124,10 +162,10 @@ class HippieCrosshair {
|
||||||
break;
|
break;
|
||||||
case 'square':
|
case 'square':
|
||||||
this.ctx.fillRect(
|
this.ctx.fillRect(
|
||||||
x - this.symbolSize / 2,
|
x - this.connectorSize / 2,
|
||||||
y - this.symbolSize / 2,
|
y - this.connectorSize / 2,
|
||||||
this.symbolSize,
|
this.connectorSize,
|
||||||
this.symbolSize
|
this.connectorSize
|
||||||
);
|
);
|
||||||
break;
|
break;
|
||||||
case 'arrow':
|
case 'arrow':
|
||||||
|
|
@ -137,7 +175,7 @@ class HippieCrosshair {
|
||||||
}
|
}
|
||||||
|
|
||||||
arrow(x, y, angle) {
|
arrow(x, y, angle) {
|
||||||
const size = this.symbolSize - (this.symbolSize / 4);
|
const size = this.connectorSize - (this.connectorSize / 4);
|
||||||
|
|
||||||
this.ctx.save();
|
this.ctx.save();
|
||||||
this.ctx.translate(x, y);
|
this.ctx.translate(x, y);
|
||||||
|
|
@ -221,20 +259,20 @@ class HippieCrosshair {
|
||||||
this.style = style;
|
this.style = style;
|
||||||
}
|
}
|
||||||
|
|
||||||
setColor(color) {
|
setCrosshairColor(color) {
|
||||||
this.color = color;
|
this.color = color;
|
||||||
}
|
}
|
||||||
|
|
||||||
setSymbolStyle(style) {
|
setConnectorStyle(style) {
|
||||||
this.symbolStyle = style;
|
this.connectorStyle = style;
|
||||||
}
|
}
|
||||||
|
|
||||||
setSymbolColor(color) {
|
setConnectorColor(color) {
|
||||||
this.symbolColor = color;
|
this.connectorColor = color;
|
||||||
}
|
}
|
||||||
|
|
||||||
setLineVisible(visible) {
|
setConnectorVisibility(visible) {
|
||||||
this.showConnector = visible;
|
this.connectorShow = visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
startAnimation() {
|
startAnimation() {
|
||||||
|
|
|
||||||
|
|
@ -33,12 +33,12 @@ tags:
|
||||||
</nav>
|
</nav>
|
||||||
<nav>
|
<nav>
|
||||||
<span>Connector</span>
|
<span>Connector</span>
|
||||||
<button onclick="toggleLine()">Toggle</button>
|
<button onclick="toggleConnector()">Toggle</button>
|
||||||
<hr class="vertical">
|
<hr class="vertical">
|
||||||
<button onclick="changeSymbolStyle('arrow')"><i class="bi bi-caret-up-fill"></i></button>
|
<button onclick="changeConnectorStyle('arrow')"><i class="bi bi-caret-up-fill"></i></button>
|
||||||
<button onclick="changeSymbolStyle('square')"><i class="bi bi-square-fill"></i></button>
|
<button onclick="changeConnectorStyle('square')"><i class="bi bi-square-fill"></i></button>
|
||||||
<button onclick="changeSymbolStyle('circle')"><i class="bi bi-circle-fill"></i></button>
|
<button onclick="changeConnectorStyle('circle')"><i class="bi bi-circle-fill"></i></button>
|
||||||
<button onclick="changeSymbolStyle('diamond')"><i class="bi bi-diamond-fill"></i></button>
|
<button onclick="changeConnectorStyle('diamond')"><i class="bi bi-diamond-fill"></i></button>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
@ -59,18 +59,18 @@ tags:
|
||||||
crosshair.setCrosshairStyle(style);
|
crosshair.setCrosshairStyle(style);
|
||||||
}
|
}
|
||||||
|
|
||||||
function changeSymbolStyle(style) {
|
function changeConnectorStyle(style) {
|
||||||
crosshair.setSymbolStyle(style);
|
crosshair.setConnectorStyle(style);
|
||||||
}
|
}
|
||||||
|
|
||||||
function changeColor(color) {
|
function changeColor(color) {
|
||||||
crosshair.setColor(color);
|
crosshair.setCrosshairColor(color);
|
||||||
crosshair.setSymbolColor(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)`;
|
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() {
|
function toggleConnector() {
|
||||||
crosshair.setLineVisible(!crosshair.showConnector);
|
crosshair.setConnectorVisibility(!crosshair.connectorShow);
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleAnimation() {
|
function toggleAnimation() {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue