Render cases when the boundary crosses the viewport

[rbdr/canvas] / src / lib / components / hud.svelte

<script>
  import { coordinateLength } from '$lib/config';
  import { canvas } from '$lib/stores/canvas';

  const kSeparatorRegex = /([0-9a-z]{2})/g;

  const formatCoordinate = function formatCoordinate(coordinate) {
    return coordinate
      .toString(16)
      .padStart(coordinateLength, 0)
      .replace(kSeparatorRegex, '$1 ');
  }
</script>

<div class="hud">
  { formatCoordinate($canvas.x) } × { formatCoordinate($canvas.y) }
</div>

<style>
  .hud {
    background-color: #fff;
    padding: 4px;
    position: fixed;
    bottom: 2px;
    right: 2px;
    font-smooth: never;
    -webkit-font-smoothing : none;
  }
</style>