https://github.com/graphieros/grid-plan
A lightweight Vue3 component to create dynamic blueprints for rooms, datacenters, racks, etc. Ships with TS types
https://github.com/graphieros/grid-plan
blueprint datacenter plan rack room vue3 vuejs
Last synced: 8 months ago
JSON representation
A lightweight Vue3 component to create dynamic blueprints for rooms, datacenters, racks, etc. Ships with TS types
- Host: GitHub
- URL: https://github.com/graphieros/grid-plan
- Owner: graphieros
- License: mit
- Created: 2024-06-22T10:11:52.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-08T09:51:51.000Z (8 months ago)
- Last Synced: 2025-02-08T09:52:39.089Z (8 months ago)
- Topics: blueprint, datacenter, plan, rack, room, vue3, vuejs
- Language: JavaScript
- Homepage: https://grid-plan.graphieros.com
- Size: 230 KB
- Stars: 28
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# grid-plan
grid-plan is a Vue3 component to create blueprints for rooms, datacenters, racks, etc.
Create available component types, and place, resize or delete them from the blueprint.
grid-plan ships with:
- config options to customize the looks of your blueprint
- slots to customize icons related to component types
- slots to create your available components menu and your inventory
## Installation
```
npm i grid-plan
```
You can declare the component globally in your main.js:
```js
import { createApp } from "vue";
import App from "./App.vue";
import { GridPlan } from "grid-plan";
const app = createApp(App);
app.component("GridPlan", GridPlan);
app.mount("#app");
```
Or you can import it directly in your Vue file:
```html
import { GridPlan } from "grid-plan";
```
## Props
| Prop name | TS type | Required | Description |
| -------------- | ------------------ | ----------------------------------- | ----------------------------------------------------------- |
| availableTypes | GridPlanItemType[] | YES | The types of components that can be placed on the blueprint |
| placedItems | GridPlanItem[] | YES (can be empty) | Components already placed on the blueprint |
| radonly | boolean | NO (default: false) | Blueprint will be readonly if true |
| config | GridPlanConfig | NO (default config will be applied) | Configuration object to customize looks |
## Example
- Script:
```js
import { ref } from "vue";
import { GridPlan } from "grid-plan";
const availableTypes = ref([
{
typeId: 1,
color: "#3366DD",
description: "server",
icon: "server",
iconColor: "#FFFFFF",
},
{
typeId: 2,
color: "#DD6633",
description: "power",
icon: "bolt",
iconColor: "#FFFFFF",
},
{
typeId: 3,
color: "#71a4a8",
description: "monitor",
icon: "deviceLaptop",
iconColor: "#1A1A1A",
},
]);
const placedItems = ref([
{ x: 0, y: 0, h: 1, w: 12, typeId: 1 }, // it's a server component
{ x: 0, y: 1, h: 4, w: 12, typeId: 3 }, // it's a monitor component
]);
// Config is optional
// You can provide a partial config, as missing attributes will use defaults
const config = ref({
abscissaType: "alphabetic",
accordionMenuTitle: "Menu",
coordinatesBackground: "#2A2A2A",
coordinatesColor: "#8A8A8A",
crosshairBackground: "#4A4A4A",
fontFamily: "Arial",
grid3dPosition: "top",
gridFill: "#3A3A3A",
gridHeight: 42,
gridHighlightColor: "#00FF00",
gridStroke: "#1A1A1A",
gridStrokeWidth: 0.02,
gridWidth: 12,
handleFill: "#FFFFFF",
handleSize: 0.3,
iconColor: "#1A1A1A",
nonSelectedOpacity: 0.3
ordinatesType: "numeric",
showCrosshair: true,
showGrid3d: true,
tooltipColor: "#FFFFFF",
useAccordionMenu: true,
useGradient: true,
useShadow: true,
});
// Events
function selectType(menuItem) {
// Triggered when a menu item is selected
console.log("SELECT TYPE", menuItem);
}
function change(item) {
// Triggered whenever an item is changed
console.log("CHANGED", item);
}
function deleteItem(item) {
// Triggered whenever an item is deleted
console.log("DELETED", item);
}
function selectItem(item) {
// Triggered whenever an item is selected
console.log("SELECTED", item);
}
function createdItem(item) {
// Triggered whenever an item is created
console.log("CREATED", item);
}
function unselected() {
// Triggered when an item is unselected
// Pressing ESC will treigger unselect
// Selecting an already selected item will trigger unselect
console.log("BLUEPRINT IS NOW UNSELECTED");
}
```
- Template:
```html
ACTIVE ENTITY: {{ activeEntity }}
{{ item.description }}
DELETE
DELETE
FOCUS STATE: {{ getFocusState(item) }}
{{ availableType.description }}
{{ item.description }}
x:{{ item.x }}
y:{{ item.y }}
h:{{ item.h }}
w:{{ item.w }}
DELETE
{{ isFocused ? 'UNFOCUS' : 'FOCUS' }}
{{ placedItem.icon }}
ACTIVE ENTITY: {{ activeEntity }}
{{ item.description }}
DELETE
DELETE
FOCUS STATE: {{ getFocusState(item) }}
```
## Config details
| Attribute | TS type | Default | Description |
| --------------------- | ------------------------- | ------------ | ------------------------------------------------------------------- |
| abscissaType | "alphabetic" OR "numeric" | "alphabetic" | Display abscissa coordinates as letters or numbers |
| accordionMenuTitle | string | "Menu" | Text content of detail summary |
| coordinatesBackground | string | "#2A2A2A" | Background color of the coordinates cells |
| coordinatesColor | string | "#8A8A8A" | Text color of the coordinates cells |
| crosshairBackground | string | "#4A4A4A" | Background color of the crosshair |
| fontFamily | string | "Arial" | Font used for all elements in the component |
| grid3dPosition | "top" OR "bottom" | "top" | Display 3d blueprint on top or below |
| gridFill | string | "#3A3A3A" | Background color of unused blueprint cells |
| gridHeight | number | 20 | The height of the blueprint in cell units |
| gridHighlightColor | string | "#FFFFFF" | The contour of available cells on hover |
| gridStroke | string | "#1A1A1A" | The color of grid lines |
| gridWidth | number | 20 | The width of the blueprint in cell units |
| handleFill | string | "#FFFFFF" | The color of resize handles |
| handleSize | number | 0.3 | The handle size |
| iconColor | string | "#1A1A1A" | The text color when using the #componentText slot |
| inventoryTitle | string | "Inventory" | The text content of the inventory details summary element |
| nonSelectedOpacity | number | 0.3 | The opacity of non selected components when a component is selected |
| ordinatesType | "alphabetic" OR "numeric" | "numeric" | Display ordinate coordinates as letters or numbers |
| showCrosshair | boolean | true | Show crosshair when hovering available cells |
| showGrid3d | boolean | true | Show the 3d blueprint |
| showInventory | boolean | true | Show inventory of placed components inside a details HTML element |
| tooltipColor | string | "#FFFFFF" | The tooltip text color |
| useAccordionMenu | boolean | true | Display the menu inside a details HTML element |
| useGradient | boolean | true | Shows components with a subtle gradient |
| useShadow | boolean | true | Show selected item with a drop shadow |
## CSS classes
Grid Plan does not ship css.
To customize the styling of the menu and inventory, target the following css classes:
```css
.grid-plan-main {
}
.grid-plan-menu {
}
.grid-plan-menu__summary {
} /* If useAccordionMenu is true */
.grid-plan-menu__body {
} /* If useAccordionMenu is true */
.grid-plan-inventory {
}
.grid-plan-inventory__summary {
}
.grid-plan-inventory__body {
}
.grid-plan-grid {
}
.grid-plan-grid-3d {
}
.grid-plan-grid-3d-label {
}
```
## Icons
A set of icons is provided by grid-plan. These icons are adapted from the great [Tabler icons](https://tablericons.com/) open source icon library.
Icons are used in availableTypes:
```js
const availableTypes = ref([
{
color: '#6376DD',
description: 'router',
icon: 'router',
typeId: 1,
iconColor: '#FFFFFF'
},
{...}
])
```
| Icon name |
| ------------------- |
| airConditioning |
| alertTriangle |
| analyze |
| archive |
| armchair |
| award |
| bath |
| battery |
| bed |
| bell |
| bellSchool |
| bolt |
| boltOff |
| books |
| bulb |
| bulfOff |
| burger |
| calculator |
| camera |
| cctv |
| chefHat |
| circleKey |
| circuitCapacitor |
| circuitCell |
| circuitGround |
| circuitSwitchClosed |
| circuitSwitchOpen |
| clock |
| cloud |
| cloudComputing |
| coffee |
| cpu |
| cricuitLoop |
| database |
| deviceDesktop |
| deviceDesktopOff |
| deviceDualScreen |
| deviceImac |
| deviceImacOff |
| deviceLaptop |
| deviceLaptopOff |
| deviceTablet |
| deviceTabletOff |
| deviceTv |
| deviceTvOff |
| deviceUsb |
| devicesPc |
| devicesPcOff |
| disabled |
| door |
| doorEnter |
| doorExit |
| elevator |
| elevatorOff |
| escalator |
| escalatorDown |
| escalatorUp |
| fingerprint |
| firstAidKit |
| folder |
| folders |
| headphones |
| headset |
| hexagon |
| home |
| key |
| keyboard |
| leaf |
| lock |
| lockAccess |
| man |
| microphone |
| microscope |
| network |
| networkOff |
| package |
| packages |
| paperclip |
| phone |
| plant |
| plugConnected |
| power |
| printer |
| printerOff |
| prism |
| propeller |
| propellerOff |
| reportAnalytics |
| robot |
| router |
| salad |
| server |
| serverBolt |
| serverCog |
| serverOff |
| shredder |
| sofa |
| solarPanel |
| soup |
| squareKey |
| stack |
| toilet |
| toiletPaper |
| toolsKitchen |
| trafficCone |
| trash |
| trolley |
| volume |
| wall |
| washMachine |
| wave |
| wifi |
| windMill |
| windmillOff |
| window |
| world |