homemanager-fe/src/components/house-planner/HousePlanner.vue

<template>
  <div class="relative h-full w-full bg-white">
    <div class="relative h-full w-full overflow-hidden bg-gray-100">
      <canvas
        ref="canvas"
        class="border-none bg-white"
        :style="{
          width: `${canvasDim[0] * canvasZoom}px`,
          height: `${canvasDim[1] * canvasZoom}px`,
          transformOrigin: 'top left',
          transform: `translate(${canvasPos[0]}px, ${canvasPos[1]}px)`,
        }"
      />
    </div>
    <PlannerToolbar>
      <PlannerTool
        v-for="toolItem of toolbar"
        :title="toolItem.title"
        :icon="toolItem.icon"
        :multiple="!!toolItem.children?.length"
        :selected="tool === toolItem.tool"
        @click="selectTool(toolItem.tool, toolItem.subTool)"
      >
        <template v-if="toolItem.children?.length">
          <PlannerTool
            v-for="subItem of toolItem.children"
            :title="subItem.title"
            :icon="subItem.icon"
            :selected="
              tool === subItem.tool &&
              (!subItem.subTool || subItem.subTool === subTool)
            "
            @click.stop="selectTool(subItem.tool, subItem.subTool)"
          />
        </template>
      </PlannerTool>
    </PlannerToolbar>

    <PlannerSidebars>
      <PlannerLayerPanel
        :layers="serializedLayers"
        @layer-name="commitLayerName"
        @object-name="commitObjectName"
        @select-object="clickedOnObject"
        @select-layer="clickedOnLayer"
      />
      <PlannerPropertyPanel
        :layers="serializedLayers"
        @update="updateObjectProperty"
      />
    </PlannerSidebars>
  </div>
</template>

<script setup lang="ts">
import {
  PencilSquareIcon,
  PencilIcon,
  HomeIcon,
  ArrowsPointingOutIcon,
  ArrowDownOnSquareIcon,
  ScissorsIcon,
  XMarkIcon,
} from '@heroicons/vue/24/outline';
import { useSessionStorage } from '@vueuse/core';
import { onMounted, ref, shallowRef } from 'vue';
import { HousePlanner } from '../../modules/house-planner';
import {
  Layer,
  RepositionEvent,
  ToolEvent,
  Vec2,
} from '../../modules/house-planner/interfaces';
import deepUnref from '../../utils/deep-unref';
import { ToolbarTool } from './interfaces/toolbar.interfaces';
import PlannerLayerPanel from './PlannerLayerPanel.vue';
import PlannerPropertyPanel from './PlannerPropertyPanel.vue';
import PlannerSidebars from './PlannerSidebars.vue';
import PlannerTool from './PlannerTool.vue';
import PlannerToolbar from './PlannerToolbar.vue';

const canvas = ref();
const module = shallowRef(new HousePlanner());
const tool = ref<string | undefined>('move');
const subTool = ref<string | undefined>(undefined);
const canvasDim = ref<Vec2>([1920, 1080]);
const canvasPos = ref<Vec2>([0, 0]);
const canvasZoom = ref<number>(1);
const serializedLayers = useSessionStorage<Layer[]>(
  'roomData',
  [
    {
      id: 1,
      name: 'Rooms',
      color: '#00ddff',
      contents: [],
      visible: true,
      active: false,
    },
    {
      id: 0,
      name: 'Base',
      color: '#00ddff',
      contents: [],
      visible: true,
      active: true,
    },
  ],
  { writeDefaults: false }
);

const toolbar: ToolbarTool[] = [
  {
    title: 'Move',
    icon: ArrowsPointingOutIcon,
    tool: 'move',
  },
  {
    title: 'Draw',
    icon: PencilSquareIcon,
    tool: 'line',
    subTool: 'line',
    children: [
      {
        title: 'Outlines',
        icon: PencilIcon,
        tool: 'line',
        subTool: 'line',
      },
      {
        title: 'Rooms',
        icon: HomeIcon,
        tool: 'line',
        subTool: 'room',
      },
      {
        title: 'Curves',
        icon: ArrowDownOnSquareIcon,
        tool: 'line',
        subTool: 'curve',
      },
    ],
  },
  {
    title: 'Cut',
    icon: ScissorsIcon,
    tool: 'cut',
    subTool: 'cut',
    children: [
      {
        title: 'Cut Segment',
        icon: XMarkIcon,
        tool: 'cut',
        subTool: 'remove-segment',
      },
    ],
  },
];

const selectTool = (newTool?: string, newSubTool?: string) => {
  if (newTool === tool.value && !newSubTool) {
    newTool = undefined;
  }
  module.value.manager?.tools?.setTool(newTool, newSubTool);
};

const commitObjectName = (layerId: number, objectId: number, name: string) => {
  module.value.manager?.updateObjectProperties(layerId, objectId, { name });
};

const commitLayerName = (layerId: number, name: string) => {
  module.value.manager?.updateLayerProperties(layerId, { name });
};

const clickedOnObject = (layerId: number, objectId: number, add?: boolean) => {
  const object = module.value.manager?.getLayerObjectById(layerId, objectId);
  if (!object) return;
  module.value.manager?.tools?.selectObject(object, add);
};

const clickedOnLayer = (layerId: number) => {
  const layer = module.value.manager?.getLayerById(layerId);
  if (!layer) return;
  module.value.manager?.tools?.selectLayer(layer);
};

const updateObjectProperty = (
  layerId: number,
  objectId: number,
  key: string,
  value: unknown
) => {
  module.value.manager?.updateObjectProperties(layerId, objectId, {
    [key]: value,
  });
};

onMounted(() => {
  const cleanUp = module.value.initialize(
    canvas.value,
    deepUnref(serializedLayers.value),
    [1920, 1080],
    canvasPos.value,
    canvasZoom.value
  );

  const events: Record<string, (e: CustomEvent) => void> = {
    'hpc:update': (e: CustomEvent) => {
      serializedLayers.value = deepUnref(module.value.manager!.layers);
    },
    'hpc:selectionchange': (e: CustomEvent) => {
      serializedLayers.value = deepUnref(module.value.manager!.layers);
    },
    'hpc:tool': (e: CustomEvent<ToolEvent>) => {
      tool.value = e.detail.primary;
      subTool.value = e.detail.secondary as string;
    },
    'hpc:position': (e: CustomEvent<RepositionEvent>) => {
      canvasPos.value = e.detail.position;
      canvasZoom.value = e.detail.zoom;
    },
  };

  Object.keys(events).forEach((event) =>
    canvas.value.addEventListener(event, events[event])
  );

  return () => {
    Object.keys(events).forEach((event) =>
      canvas.value.removeEventListener(event, events[event])
    );
    cleanUp();
  };
});
</script>