drawDNA Tool — Change History (2026-06-17)

mkwak

Summary of all modifications made to drawDNA3.php and index.php on 2026-06-17.

All edits were backed up under bak/ with timestamped filenames.

---

1. Single-stranded overhang support (morning)

Files: drawDNA3.php, index.php

• Added four overhang parameters, given in nucleotides (nt), one per strand-end:
• oh1L / oh1R — strand 1 (sin curve) left / right
• oh2L / oh2R — strand 2 (cos curve) left / right
• Each value is clamped to the range 0–50.
• Overhangs are a double-strand concept, so they are ignored (forced to 0) in single-strand modes.
• Drawing geometry updated:
• Canvas width now accounts for the widest left/right overhang plus the duplex region.
• Ladder marks are drawn only across the paired (duplex) region.
• In dsDNA mode each strand spans the duplex plus its own left/right overhangs, with the helix phase continuing seamlessly into the overhangs.
• index.php UI: added overhang input fields (strand 1/2, left/right, max 50 each), live updates on input, and the overhang parameters were threaded into the drawDNA3.php image URL.

2. Mutually exclusive overhang inputs per end

File: index.php

• Added mutual-exclusion logic inside reloadDrawing() so that only one strand can carry an overhang at each end:
• left pair: oh1L ↔ oh2L
• right pair: oh1R ↔ oh2R
• Entering a value ≥ 1 in one field disables the other strand's field at the same end.
• Resetting the value to 0 re-enables both fields.
• Added the guidance label "one strand per end".

3. Color swatches next to overhang inputs

File: index.php

• Added a filled-square symbol (◼, ◼) next to the strand 1 / strand 2 overhang labels, colored with the current strand 1 (col1) / strand 2 (col2) colors.
• Synced with the Appearance color pickers:
• getPickerColor(selectName) reads the swatch background color from the picker display.
• updateOverhangColorMarks() recolors oh1Mark → col1 color, oh2Mark → col2 color.
• Symbols update automatically when the Appearance strand colors are changed.
• A light text-shadow was added so the symbols stay visible on light colors.

4. PNG download button

File: index.php

• Added a ⬇ Download PNG button next to "Reload the drawing".
• Fetches the current image as a blob and downloads it (falls back to a direct same-origin download link on failure).
• File name reflects the conditions intuitively:
• dsDNA: e.g. dsDNA_20bp_L5s1_R3s2.png (length + left/right overhang, with s1/s2 marking which strand)
• ssDNA: e.g. ssDNA-A_15nt.png (unit nt, no overhang)

5. Save current conditions to cookie

File: index.php

• Added a button to save the current drawing conditions to a cookie, displayed below the bottom button.
• Stores up to 8 entries; when full, the oldest entry is pushed out.
• Saved entries are restored as clickable chips via renderSaved(); clicking a chip restores the conditions.

6. Hover preview for saved conditions

File: index.php

• Hovering over a saved-condition chip shows a resized drawing of that condition floating next to the mouse cursor.
• buildSrc(p) builds the drawDNA3.php image URL from the saved parameters (overhangs and colors included, debug=0).
• showPreview / movePreview / hidePreview manage a cursor-following floating <div> (position:fixed).
• pointer-events:none ensures the preview never blocks clicks or hover.
• Preview size: 320×200.

7. Title version

File: index.php

• Title version set to v2.0 (edited manually by the user).