CS 151 - Day 18

Cay S. Horstmann

Lab

• Work with a buddy
• One of you codes, the other types up the answers.
• One of you submits the code in the lab18 subdirectory of your personal repo, the other submits a file report.txt in the lab18 subdirectory of your personal repo.
• Put the name of the coding buddy into the report

Canvas

1. Continue with your graphed.html, graphed.js, graphed.css from the previous lab. Or if you couldn't get the previous lab to work, use this, this, and this.
2. Replace the SVG element with a Canvas element.
3. In the draw method of the circle node, draw on the canvas instead of generating SVG.

   const canvas = ...
   const ctx = ... // No need for "if (canvas.getContext)"
   ctx.beginPath()
   ctx.arc(...)
   ctx.fillStyle = ...
   ctx.fill()
   

4. Do the same in the drawGrabber function.
5. Now you should be able to drag a node. What happens?
6. What can you do to fix it? Hint:

   ctx.clearRect(0, 0, canvas.width, canvas.height)

Drawing Lines

• Time to add edges. Make functions

  function center(rect) {
    return { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 }
  }
  
  function createLineEdge() {
    let start = undefined
    let end = undefined
    return {
      connect: (s, e) => {
        start = s
        end = e
      },
      draw: () => {
        const canvas = document.getElementById('graphpanel')
        const ctx = canvas.getContext('2d')
        ctx.beginPath()
        const p = ... // Just pick the center of the bounds for now
        const q = ... // Not the "connection points" that graphed2 uses
        ctx.moveTo(p.x, p.y)
        ctx.lineTo(q.x, q.y)
        ctx.stroke()
      }
    }
  }
  

• Add this method (translated from Graph.java) to the Graph class:

    connect(e, p1, p2) {
      const n1 = this.findNode(p1)
      const n2 = this.findNode(p2)
      if (n1 !== undefined && n2 !== undefined) {
        e.connect(n1, n2)
        this.edges.push(e)
        return true
      }
      return false
    }
  

• Add an edge to the graph:

    const e = createLineEdge()
    graph.connect(e, { x: 20, y: 20 }, { x: 40, y: 40 })
  

• There is one more thing that you need to do to get the edge to actually show up. Hint: Graph.draw.
• Now you should be able to drag a node and see the edge redraw.

Boxes and Arrows

• Look at this fantastic activity.
• How do they do those boxes? Right-click on the "List" box and inspect it. What HTML element is it?
• Why do you think the designer used HTML instead of painting on a canvas?
• Where do the colors come from? How do the corners get rounded? Hint: Look at the CSS rules.
• How are the positions of the boxes set?
• How are the arrows drawn? (Hint: Not SVG)
• What makes the arrows show above the boxes? (Hint: z-order)

HTML Boxes in graphed

• Change the HTML to imitate what you saw in the object diagram:

       <div height="150">
          <div id="nodeContainer" style="position: absolute; width: 150; height: 150;">
          </div>
          <canvas id="graphpanel" style="position: absolute; z-index: 1" width="150" height="150"></canvas>
       </div>

• Change the draw method to:

        const container = document.getElementById('nodeContainer')
        const table = document.createElement('table')
        const tr = document.createElement('tr')
        const td = document.createElement('td')
        table.appendChild(tr)
        tr.appendChild(td)
        table.style.position = 'absolute'
        table.style.left = x + 'px'
        table.style.top = y + 'px'
        table.style.width = size + 'px'
        table.style.height = size + 'px'
        table.style.background = color
        container.appendChild(table)
  

• Ok, so the corners aren't round. One can fix that with CSS. Add this to graphed.css:

  table {
      border-radius: 10px;
  }
  

• Try dragging a node. What happens?
• How do you fix that?