v3.1.0

Expose more methods

More methods are now exposed to allow for a custom items menu.

type GridPlanExpose = {
    deleteItem(item: GridPlanItem): void
    focusItem(item: GridPlanItem): void
    getActiveItem(): GridPlanItem
    getFocusState(item: GridPlanItem): boolean
    getItems(): GridPlanItem[]
    selectItem(item: GridPlanItem): void
    setActiveType(t: GridPlanItemType): void
    unselect(): void
}

Usage example:

// Set a ref for the GridPlan component
const plan = ref(null);

const exposed = computed(() => {
    const ready = !!plan.value;
    return {
        deleteItem: ready ? plan.value.deleteItem : null,
        focusItem: ready ? plan.value.focusItem : null,
        getActiveItem: ready ? plan.value.getActiveItem : null,
        getFocusState: ready ? plan.value.getFocusState : null,
        getItems: ready ? plan.value.getItems : null,
        selectItem: ready ? plan.value.selectItem : null,
        setActiveType: ready ? plan.value.setActiveType : null,
        unselect: ready ? plan.value.unselect : null
    }
});

function doSomething() {
    const items = exposed.value.getItems ? exposed.value.getItems() : []
}

Docs are up to date

v3.0.0

Version 3

• Three.js is now a peer dependency. Depending on your package manager, you might need to install it. This might be a breaking change, hence the major.

• New items config options to set the depth of items (visible on the 3d rendering)

const items = ref([
  {
    color: "#71a4a8",
    description: "monitor",
    icon: 'deviceLaptop',
    typeId: 5,
    iconColor: '#1A1A1A',
    depth: 2, // New. If not provided, defaults to 1 (cell size)
  }, 
  ...
])

• New config optional 'wall' around the 3d grid:

const config = ref({
  showBox: true,
  boxThickness: 0.3,
  boxHeight: 1,
  boxColor: '#5A5A5A'
});

v2.0.16

Minor improvements

• Trigger unselect when leaving the 3d map
• Expose the component's unselect method

v2.0.14

New release: 3d rendering of your blueprint

Enregistrement.de.l.ecran.2025-02-08.a.11.09.06.mp4

New props:

showGrid3d: boolean; // default: true
grid3dPosition: "top" | "bottom"; // default: "top"

New slots to add customized content before and after the component:

#before and #after (both work the same).

<template #before="{ items, deleteItem, focusItem, getFocusState, activeEntity }">
  <div>ACTIVE ENTITY: {{ activeEntity }}</div>
  <div v-for="item in items">
    {{ item.description }}
    <button @click="deleteItem(item)">DELETE</button>
    <button @click="focusItem(item)">DELETE</button>
    FOCUS STATE: {{ getFocusState(item) }}
  </div>
</template>

v1.1.3

Technical release : remove local package

v1.1.2

Technical release, fixing build & package.json inaccuracies.

v1.1.1

This release adds the #inventory scoped slot.

Display the inventory of placed components inside a details HTML element.
The slot exposes:

item : GridPlanItem
deleteItem: void
focusItem: void
isFocused: boolean

Usage:

<template #inventory="{ item, deleteItem, focusItem, isFocused }">
  <div :style="`display: flex; flex-direction:row; flex-wrap: wrap; border: 1px solid ${item.color};width: fit-content; padding: 6px 12px; gap:6px; ${isFocused ? 'background: #FFFFFF20' : ''}`">
    <span>{{ item.description }}</span>
    <span>x:{{ item.x }}</span>
    <span>y:{{ item.y }}</span>
    <span>h:{{ item.h }}</span>
    <span>w:{{ item.w }}</span>
    <button @click="deleteItem" class="bg-red-300 text-red-800 px-2 rounded">DELETE</button>
    <button @click="focusItem" class="bg-gray-300 text-[#1A1A1A] px-2 rounded">{{ isFocused ? 'UNFOCUS' : 'FOCUS' }}</button>
  </div>
</template>

v1.1.0

This release adds more configuration options:

1. Menu options: the following config attributes are added:

useAccordionMenu: boolean; // default: true
accordionMenuTitle: string; // default: "Menu" 

When useAccordionMenu is set to true, the menu is displayed with a details HTML element, which can be styled by targeting the following css classes:

.grid-plan-menu__summary{}
.grid-plan-menu__body{}

2. Opacity of non selected components, when a component is selected can now be managed through the following config attribute:

nonSelectedOpacity: number; // default: 0.3

v1.0.7

Improvements:

When selecting a placed component:

• other items appear with less opacity to gain in readability
• the description of the component is displayed under its coordinates

v1.0.6

Fixed some icons not showing.