@coddicat/vue-map-hexagon v3.3.0

vue-map-hexagon

Vue component for displaying a map/grid of hexagons. The component supports scrolling and scaling.

example:

https://vue-map-hexagon.coddicat.com/

Installation

npm i @coddicat/vue-map-hexagon

Dependencies

The component uses following external components:

• @coddicat/vue-pinch-scroll-zoom
• @coddicat/vue-hexagon

Usage without slot with cells prop

template:

  <MapHexagon
    :item-size="100"
    :items-gap="5"
    :center="[0, 0]"
    :cells="cells"
    style="border: 1px solid black"
    @click="onClick"
  >
  </MapHexagon>

type script:

  import { Component, Vue } from "vue-property-decorator";
  import MapHexagon, { HexagonCell } from "@coddicat/vue-map-hexagon";
  
  //get array of cells
  function generateCells(): HexagonCell[] {
    const cells = Array<HexagonCell>();
    let index = 0;
    for (let col = -5; col <= 5; col++)
      for (let row = -5; row <= 5; row++) {
        cells.push({
          row: row,
          col: col,
          index: index,
          borderSize: 1,
          text: `#${index} <br/> (${col}, ${row})`,
          textStyle: { "text-align": "center" },
          hexagonClass: undefined,
          borderColor: undefined,
          backgroundColor: undefined,
          backgroundImage: undefined,
        });
        index++;
      }
    return cells;
  }

  @Component({
    name: "MapHexagonExample",
    components: {
      MapHexagon
    },
  })
  export default class MapHexagonExample extends Vue {
    private cells: HexagonCell[] = generateCells();
    public onClick(cell: HexagonCell): void {
      alert(`Clicked #${cell.index}`);
    }
  }

Usage with a slot and with component @coddicat/vue-hexagon

(can be replaced with whatever you want) template:

  <HexagonMap
      :scale="scale"
      :center="center"
      :x-range="[-5, 10]"
      :y-range="[-10, 15]"
      :item-size="120"
      :items-gap="10"
      style="border: 1px solid black"
  >
      <template slot-scope="{ index, itemSize, col, row }">
        <Hexagon :size="itemSize" :border-size="1">
          <span>
            {{ index }} <br/> 
            ({{ col }}, {{ row }})
          </span>
        </Hexagon>
      </template>
  </HexagonMap>

type script:

  import { Component, Vue } from "vue-property-decorator";
  import MapHexagon from "@coddicat/vue-map-hexagon";
  import Hexagon from "@coddicat/vue-hexagon";
  
  @Component({
    name: "MapHexagonExample",
    components: {
      MapHexagon,
      Hexagon
    },
  })
  export default class MapHexagonExample extends Vue {
    private scale: number = 1;
    private center: number[] = [3, 3];
    
    public reset(): void {
      this.scale = 1;
      this.center = [3, 3];
      const map = this.$refs.map as MapHexagon;
      map.submitScale();
      map.submitCenter();
    }
  }

Props

the following properties don't support the ".async" modifier

Events

• dragging
• scaling
• click //click on hexagon when used cells prop
• ranging - on change visible range

Methods

.submitCenter(); //when changed center prop or goto centered cell
.submitSize(); //when changed width and height props
.submitScale(); //when changed scale prop or restore scale with the value