@marcus-rise/room-scheme NPM

room-scheme

Demo

https://unpkg.com/@marcus-rise/room-scheme/dist/demo.html

<head>
    <script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
</head>

<body>
<room-scheme data-scheme='{"id":1,"restaurantId":1,"xCount":500,"yCount":500,"characters":[{"id":1,"typeId":1,"type":{"id":1,"name":"simple"},"x":1000,"y":100,"schemeId":1,"angle":0},{"id":22,"typeId":1,"type":{"id":1,"name":"simple"},"x":100,"y":100,"schemeId":1,"angle":0},{"id":2,"typeId":1,"type":{"id":1,"name":"simple"},"x":100,"y":150,"schemeId":1,"angle":0},{"id":3,"typeId":1,"type":{"id":1,"name":"simple"},"x":100,"y":200,"schemeId":1,"angle":0},{"id":4,"typeId":1,"type":{"id":1,"name":"simple"},"x":150,"y":100,"schemeId":1,"angle":0},{"id":5,"typeId":1,"type":{"id":1,"name":"simple"},"x":150,"y":150,"schemeId":1,"angle":0},{"id":6,"typeId":1,"type":{"id":1,"name":"simple"},"x":150,"y":200,"schemeId":1,"angle":0},{"id":7,"typeId":2,"type":{"id":2,"name":"chair"},"x":50,"y":100,"schemeId":1,"angle":0},{"id":8,"typeId":2,"type":{"id":2,"name":"chair"},"x":200,"y":100,"schemeId":1,"angle":0},{"id":9,"typeId":2,"type":{"id":2,"name":"chair"},"x":50,"y":200,"schemeId":1,"angle":0},{"id":10,"typeId":2,"type":{"id":2,"name":"chair"},"x":200,"y":200,"schemeId":1,"angle":0}]}' editor></room-scheme>

<script src="https://unpkg.com/@marcus-rise/room-scheme"></script>
</body>