xziino/ff14-mitigator
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better moving of skills on the timeline

Browse Source
This commit is contained in:
Akurosia Kamo 2026-05-23 21:10:19 +02:00
parent 3276e3bfb3
commit fb6d50961a
2 changed files with 152 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
css/planner.css
View File

@ -838,6 +838,14 @@
border-top: 1px solid var(--border);
}
.timeline-player-row--drop-ok .timeline-track {
background-color: rgba(88,180,116,.08);
}
.timeline-player-row--drop-bad .timeline-track {
background-color: rgba(224,92,92,.08);
}
.timeline-boss-action {
position: absolute;
top: 8px;
@ -931,6 +939,77 @@
background: linear-gradient(to right, rgba(74,158,255,.30) 0%, rgba(74,158,255,.30) var(--active-width), rgba(74,158,255,.06) var(--active-width), rgba(74,158,255,.06) 100%);
}
.timeline-drag-preview {
position: absolute;
top: 6px;
width: var(--cd-width);
min-width: 28px;
height: 26px;
display: flex;
align-items: center;
gap: 4px;
padding: 0 6px;
border: 1px solid rgba(200,168,75,.85);
border-radius: var(--r);
background: linear-gradient(to right, rgba(200,168,75,.42) 0%, rgba(200,168,75,.42) var(--active-width), rgba(200,168,75,.14) var(--active-width), rgba(200,168,75,.14) 100%);
color: var(--gold);
font-size: 11px;
pointer-events: none;
z-index: 6;
box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 0 16px rgba(200,168,75,.18);
overflow: hidden;
}
.timeline-drag-preview::before {
content: "";
position: absolute;
left: 0;
top: -6px;
bottom: -6px;
width: 1px;
background: var(--gold);
box-shadow: 0 0 10px rgba(200,168,75,.55);
}
.timeline-drag-preview--bad {
border-color: rgba(224,92,92,.85);
background: rgba(224,92,92,.18);
color: var(--red);
}
.timeline-drag-preview--bad::before {
background: var(--red);
box-shadow: 0 0 10px rgba(224,92,92,.55);
}
.timeline-drag-preview img {
width: 18px;
height: 18px;
object-fit: contain;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.timeline-drag-preview span {
position: relative;
z-index: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.timeline-drag-preview-active {
position: absolute !important;
left: 0;
top: 0;
bottom: 0;
width: var(--active-width);
background: currentColor;
opacity: .20;
z-index: 0 !important;
}
.timeline-axis {
min-height: 28px;
}

74
js/planner.js
View File

@ -1004,6 +1004,50 @@ function initTimeline(planId) {
let timelinePan = null;
let suppressNextTimelineClick = false;
let timelineDrag = null;
function removeDragPreview() {
document.getElementById('timeline-drag-preview')?.remove();
timeline.querySelectorAll('.timeline-player-row--drop-ok, .timeline-player-row--drop-bad')
.forEach(row => row.classList.remove('timeline-player-row--drop-ok', 'timeline-player-row--drop-bad'));
}
function updateDragPreview(event) {
if (!timelineDrag) return;
removeDragPreview();
const track = event.target.closest('.timeline-player-row .timeline-track');
const row = event.target.closest('.timeline-player-row');
if (!track || !row) return;
const plan = getPlan(planId);
if (!plan) return;
const rect = track.getBoundingClientRect();
const duration = planDurationMs(plan);
const deltaPx = event.clientX - timelineDrag.startClientX;
const timestamp = Math.max(0, timelineDrag.startTimestamp + (deltaPx / rect.width) * duration);
const left = Math.max(0, Math.min(100, (timestamp / duration) * 100));
const durationPct = Math.max(1.2, Math.min(100 - left, (timelineDrag.durationSec * 1000 / duration) * 100));
const cooldownPct = Math.max(durationPct, Math.min(100 - left, (timelineDrag.cooldownSec * 1000 / duration) * 100));
const activePct = Math.min(100, (durationPct / cooldownPct) * 100);
const valid = row.dataset.ability === timelineDrag.ability
&& jobCanUseAbility(row.dataset.job, timelineDrag.ability);
row.classList.add(valid ? 'timeline-player-row--drop-ok' : 'timeline-player-row--drop-bad');
const preview = document.createElement('div');
preview.id = 'timeline-drag-preview';
preview.className = `timeline-drag-preview ${valid ? '' : 'timeline-drag-preview--bad'}`;
preview.style.left = `${left}%`;
preview.style.setProperty('--cd-width', `${cooldownPct}%`);
preview.style.setProperty('--active-width', `${activePct}%`);
preview.innerHTML = `
<span class="timeline-drag-preview-active"></span>
${timelineDrag.icon ? `<img src="${escHtml(timelineDrag.icon)}" alt="">` : ''}
<span>${escHtml(timelineDrag.label)}</span>
`;
track.appendChild(preview);
}
timeline.addEventListener('pointerdown', e => {
if (e.button !== 0) return;
@ -1122,6 +1166,20 @@ function initTimeline(planId) {
job: block.dataset.job,
});
if (!plan || !found) return;
const transparent = document.createElement('canvas');
transparent.width = 1;
transparent.height = 1;
e.dataTransfer.setDragImage(transparent, 0, 0);
timelineDrag = {
ability: block.dataset.ability,
job: block.dataset.job,
label: block.querySelector('span:last-child')?.textContent ?? block.dataset.ability,
icon: block.querySelector('img')?.getAttribute('src') ?? '',
startClientX: e.clientX,
startTimestamp: assignmentStartMs(found.mechanic, found.assignment),
durationSec: assignmentDurationSeconds(found.assignment),
cooldownSec: assignmentCooldownSeconds(found.assignment),
};
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/plain', JSON.stringify({
mechanicId: block.dataset.mechanicId,
@ -1133,10 +1191,18 @@ function initTimeline(planId) {
});
timeline.addEventListener('dragover', e => {
if (e.target.closest('.timeline-player-row .timeline-track')) e.preventDefault();
if (e.target.closest('.timeline-player-row .timeline-track')) {
e.preventDefault();
updateDragPreview(e);
}
});
timeline.addEventListener('dragleave', e => {
if (!timeline.contains(e.relatedTarget)) removeDragPreview();
});
timeline.addEventListener('drop', e => {
removeDragPreview();
const track = e.target.closest('.timeline-player-row .timeline-track');
const row = e.target.closest('.timeline-player-row');
if (!track || !row) return;
@ -1152,6 +1218,12 @@ function initTimeline(planId) {
const timestamp = (Number(data.startTimestamp) || 0) + timestampDelta;
if (row.dataset.ability && data.ability !== row.dataset.ability) return;
updateTimelineAssignmentPosition(planId, data.mechanicId, data.ability, data.job, row.dataset.job, timestamp);
timelineDrag = null;
});
timeline.addEventListener('dragend', () => {
timelineDrag = null;
removeDragPreview();
});
settings.addEventListener('change', e => {