 
   # PB This is not returning anything but 0, 0 for me; Seems like @refs.sizeRect is empty when evaluated (though nonempty later)
   getScale: ->
-    console.log "getScale()"
+    console.log "getScale() is being called"
     rect = @refs.sizeRect?.getDOMNode().getBoundingClientRect()
     return {horizontal: 1, vertical: 1} if ! rect? || ! rect.width?
     rect ?= width: 0, height: 0
-    horizontal = rect.width / @state.imageWidth
-    vertical = rect.height / @state.imageHeight
+    horizontal = rect.width / @props.subject.width
+    vertical = rect.height / @props.subject.height
     # TODO hack fallback:
     return {horizontal, vertical}
 

        <ActionButton onClick={@nextSubject} text="Next Page" />

    if @state.loading
      # console.log "loading..."
      markingSurfaceContent = <LoadingIndicator />
    else
      markingSurfaceContent =
        <svg
          className = "subject-viewer-svg"
          width = {@state.imageWidth}
          height = {@state.imageHeight}
          viewBox = {viewBox}
          data-tool = {@props.selectedDrawingTool?.type} >
          <rect
            ref = "sizeRect"
            width = {@state.imageWidth}
            height = {@state.imageHeight} />
          <MouseHandler
            onStart = {@handleInitStart}
            onDrag  = {@handleInitDrag}

            inst    = "marking surface">
            <SVGImage
              src = {@props.subject.location.standard}
              width = {@props.subject.width}
              height = {@props.subject.height} />
          </MouseHandler>

          { # HIGHLIGHT SUBJECT FOR TRANSCRIPTION
