plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
82 lines (81 loc) • 2.87 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { useRef } from 'react';
import { fabric } from 'fabric';
import { defineGrid, extendHex } from 'honeycomb-grid';
import { v4 } from 'uuid';
import { Container } from '../common';
import { Canvas } from '../canvas';
const Hexagon = fabric.util.createClass(fabric.Polygon, {
type: 'polygon',
superType: 'shape',
editable: false,
initialize(points, option) {
this.callSuper('initialize', points, option);
},
_render(ctx) {
this.callSuper('_render', ctx);
},
});
const HexGrid = () => {
const canvasRef = useRef();
const handleLoad = (handler) => {
const size = 20;
const Hex = extendHex({
size,
});
const Grid = defineGrid(Hex);
const corners = Grid.rectangle({ width: 10, height: 10 }).map((hex) => {
const point = hex.toPoint();
return hex.corners().map((corner) => corner.add(point));
// handler.add(
// {
// type: 'hexagon',
// originX: 'center',
// originY: 'center',
// fill: 'rgba(153, 153, 153, 0.5)',
// borderColor: '#999999',
// points: corners,
// },
// false,
// false,
// false,
// );
});
const group = {
id: v4(),
type: 'group',
objects: corners.map((cs) => new fabric.Polygon(cs, {
type: 'polygon',
originX: 'center',
originY: 'center',
fill: 'rgba(153, 153, 153, 0.5)',
borderColor: '#999999',
})),
};
const createdObj = handler.add(group, false, false, false);
handler.centerObject(createdObj, true);
handler.toActiveSelection(createdObj);
};
return (React.createElement(Container, null,
React.createElement(Canvas, { ref: canvasRef, editable: false, onLoad: handleLoad, fabricObjects: {
hexagon: {
create: (_a) => {
var { points } = _a, other = __rest(_a, ["points"]);
return new Hexagon(points, other);
},
},
}, canvasOption: {
backgroundColor: '#434f5a',
} })));
};
export default HexGrid;