Merge pull request #1418 from placeAtlas/staging/code

web/_js/main/draw.js

@@ -69,7 +69,7 @@ const periodClipboard = {
 const drawBackButton = document.createElement("a")
 drawBackButton.className = "btn btn-outline-primary"
 drawBackButton.id = "drawBackButton"
-drawBackButton.textContent = "Exit Draw Mode"
+drawBackButton.textContent = "Exit Drawing"
 
 const baseInputAddon = document.createElement("span")
 baseInputAddon.className = "input-group-text"
@@ -106,12 +106,13 @@ function initDraw() {
  showListButton.insertAdjacentHTML("afterend", '<button class="btn btn-outline-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDraw" aria-controls="offcanvasDraw">Menu</button>')
  showListButton.parentElement.appendChild(drawBackButton)
  showListButton.remove()
-
+ drawButton.remove()
+
  // Opens draw menu
  wrapper.classList.remove('listHidden')
  bsOffcanvasDraw.show()
 
- window.render = render
+ window.renderHighlight = renderHighlight
  window.renderBackground = renderBackground
  window.updateHovering = updateHovering
 
@@ -125,12 +126,12 @@ function initDraw() {
 
  let highlightUncharted = highlightUnchartedEl.checked
 
- renderBackground(atlas)
+ renderBackground(atlasDisplay)
  applyView()
 
  container.style.cursor = "crosshair"
 
- render(path)
+ renderHighlight(path)
 
  container.addEventListener("mousedown", e => {
  lastPos = [
@@ -168,7 +169,7 @@ function initDraw() {
  const coords = getCanvasCoords(e.clientX, e.clientY)
 
  path.push(coords)
- render(path)
+ renderHighlight(path)
 
  undoHistory = []
  redoButton.disabled = true
@@ -185,13 +186,13 @@ function initDraw() {
  container.addEventListener("mousemove", e => {
  if (!dragging && drawing && path.length > 0) {
  const coords = getCanvasCoords(e.clientX, e.clientY)
- render([...path, coords])
+ renderHighlight([...path, coords])
  }
  })
 
  container.addEventListener("mouseout", function () {
  if (!dragging && drawing && path.length > 0) {
- render(path)
+ renderHighlight(path)
  }
  })
 
@@ -228,19 +229,19 @@ function initDraw() {
  undoButton.addEventListener("click", e => {
  undo()
  const coords = getCanvasCoords(e.clientX, e.clientY)
- render([...path, coords])
+ renderHighlight([...path, coords])
  })
 
  redoButton.addEventListener("click", e => {
  redo()
  const coords = getCanvasCoords(e.clientX, e.clientY)
- render([...path, coords])
+ renderHighlight([...path, coords])
  })
 
  resetButton.addEventListener("click", e => {
  reset()
  const coords = getCanvasCoords(e.clientX, e.clientY)
- render([...path, coords])
+ renderHighlight([...path, coords])
  })
 
  resetButton.addEventListener("blur", function () {
@@ -269,7 +270,7 @@ function initDraw() {
 
  highlightUnchartedEl.addEventListener("click", function () {
  highlightUncharted = this.checked
- render(path)
+ renderHighlight(path)
  })
 
  function generateExportObject() {
@@ -385,13 +386,11 @@ function initDraw() {
  }
  githubPostButton.href = githubPostUrl
 
- console.log(githubPostUrl)
-
  exportModal.show()
  }
 
  function preview() {
- let infoElement = createInfoBlock(generateExportObject(), true)
+ let infoElement = createInfoBlock(generateExportObject(), 2)
  objectsContainer.replaceChildren()
  objectsContainer.appendChild(infoElement)
  closeObjectsListButton.classList.remove("d-none")
@@ -488,17 +487,17 @@ function initDraw() {
  closeObjectsListButton.classList.add("d-none")
  }
 
- function renderBackground() {
+ function renderBackground(atlas) {
 
  backgroundContext.clearRect(0, 0, highlightCanvas.width, highlightCanvas.height)
 
  backgroundContext.fillStyle = "rgba(0, 0, 0, 1)"
- //backgroundContext.fillRect(0, 0, canvas.width, canvas.height)
+ //backgroundContext.fillRect(0, 0, canvas.width, renderBackgroundcanvas.height)
 
- for (let i = 0; i < atlas.length; i++) {
-
- const path = atlas[i].path
+ for (const entry of Object.values(atlas)) {
 
+ const path = entry.path
+
  backgroundContext.beginPath()
 
  if (path[0]) {
@@ -515,7 +514,7 @@ function initDraw() {
  }
  }
 
- function render(path) {
+ function renderHighlight(path) {
 
  if (!Array.isArray(path)) return
 
@@ -560,8 +559,7 @@ function initDraw() {
 
  const getEntry = id => {
  if (!id) return
- const entries = atlasAll.filter(entry => entry.id.toString() === id.toString())
- if (entries.length === 1) return entries[0]
+ return atlasAll[id]
  }
 
  function addFieldButton(inputButton, inputGroup, array, index, name) {
@@ -795,7 +793,7 @@ function initDraw() {
 
  } else {
  document.getElementById("offcanvasDrawLabel").textContent = "New Entry"
- pathWithPeriods.push([formatPeriod(currentPeriod, currentPeriod, currentVariation), []])
+ pathWithPeriods.push([formatPeriod(currentPeriod, null, currentVariation), []])
 
  // Builds multi-input list
  addWebsiteFields("", 0, [0])
@@ -821,14 +819,14 @@ function initDraw() {
  })
 
  periodsAdd.addEventListener('click', () => {
- pathWithPeriods.push([formatPeriod(currentPeriod, currentPeriod, currentVariation), []])
+ pathWithPeriods.push([formatPeriod(currentPeriod, null, currentVariation), []])
  initPeriodGroups()
  })
 
  drawBackButton.href = "./" + formatHash(entry?.id)
 
  document.addEventListener('timeupdate', event => {
- drawBackButton.href = "./" + formatHash(entry?.id, event.detail.period, event.detail.period, event.detail.variation)
+ drawBackButton.href = "./" + formatHash(entry?.id, event.detail.period, event.detail.variation)
  })
 
 }
@@ -1229,7 +1227,7 @@ function updatePeriodGroups() {
 function updatePath(newPath, newUndoHistory) {
  path = newPath || path
  if (path.length > 3) center = calculateCenter(path)
- render(path)
+ renderHighlight(path)
  undoButton.disabled = path.length === 0; // Maybe make it undo the cancel action in the future
  undoHistory = newUndoHistory || []
  redoButton.disabled = (!undoHistory.length)

web/_js/main/infoblock.js

@@ -31,7 +31,10 @@ function createInfoListItem(name, value) {
  return entryInfoListElement
 }
 
-function createInfoBlock(entry, isPreview) {
+// mode 0 = normal
+// mode 1 = entry list but none on atlas
+// mode 2 = preview
+function createInfoBlock(entry, mode = 0) {
  const element = document.createElement("div")
  element.className = "card mb-2 overflow-hidden shadow"
 
@@ -40,21 +43,31 @@ function createInfoBlock(entry, isPreview) {
 
  const linkElement = document.createElement("a")
  linkElement.className = "text-decoration-none d-flex justify-content-between text-body"
- if (isPreview) linkElement.href = "#"
- else {
- linkElement.href = formatHash(entry.id, null, null, null, false, false, false)
- linkElement.addEventListener('click', e => {
+
+ let nearestPeriod = currentPeriod
+ let nearestVariation = currentVariation
+ if (!atlasDisplay[entry.id]) {
+ [nearestPeriod, nearestVariation] = getNearestPeriod(entry, currentPeriod, currentVariation)
+ }
+
+ if (mode === 2) {
+ linkElement.href = "#" 
+ } else { 
+ const hash = formatHash(entry.id, nearestPeriod, nearestVariation, false, false, false)
+ linkElement.href = hash
+ if (mode === 0) linkElement.addEventListener('click', e => {
  e.preventDefault()
- location.hash = formatHash(entry.id, null, null, null, false, false, false)
+ location.hash = hash
  window.dispatchEvent(new HashChangeEvent("hashchange"))
  })
  }
+
  const linkNameElement = document.createElement("span")
  linkNameElement.className = "flex-grow-1 text-break"
  linkNameElement.textContent = entry.name
  headerElement.appendChild(linkElement)
  linkElement.appendChild(linkNameElement)
- linkElement.insertAdjacentHTML("beforeend", '<i class="bi bi-link-45deg align-self-center link-primary" aria-hidden="true"></i>')
+ linkElement.insertAdjacentHTML("beforeend", '<i class="bi bi-link-45deg align-self-center link-primary" aria-hidden="true" title="Copy direct link"></i>')
  element.appendChild(headerElement)
 
  const bodyElement = document.createElement("div")
@@ -92,7 +105,7 @@ function createInfoBlock(entry, isPreview) {
  }
 
  // Entry data submitted to preview does not include center or path
- if (!isPreview) {
+ if (mode === 0) {
  const [x, y] = entry?.center
  listElement.appendChild(createInfoListItem("Position: ", `${Math.floor(x)}, ${Math.floor(y)}`))
 
@@ -170,11 +183,11 @@ function createInfoBlock(entry, isPreview) {
  element.appendChild(idElementContainer)
 
  // Adds edit button only if element is not deleted
- if (!isPreview && (!entry.diff || entry.diff !== "delete")) {
+ if (mode < 2 && (!entry.diff || entry.diff !== "delete")) {
  const editElement = document.createElement("a")
- editElement.textContent = "Edit"
+ editElement.innerHTML = '<i class="bi bi-pencil-fill" aria-hidden="true"></i> Edit'
  editElement.className = "btn btn-sm btn-outline-primary"
- editElement.href = "./?mode=draw&id=" + entry.id + formatHash(false)
+ editElement.href = "./?mode=draw&id=" + entry.id + formatHash(false, nearestPeriod, nearestVariation, false, false, false)
  editElement.title = "Edit " + entry.name
  idElementContainer.appendChild(editElement)
  }