plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
117 lines (116 loc) • 4.46 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const fabric_1 = require("fabric");
const honeycomb_grid_1 = require("honeycomb-grid");
const uuid_1 = require("uuid");
const common_1 = require("../common");
const canvas_1 = require("../canvas");
const Hexagon = fabric_1.fabric.util.createClass(fabric_1.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 = (0, react_1.useRef)();
const handleLoad = (handler) => {
const size = 20;
const Hex = (0, honeycomb_grid_1.extendHex)({
size,
});
const Grid = (0, honeycomb_grid_1.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: (0, uuid_1.v4)(),
type: 'group',
objects: corners.map((cs) => new fabric_1.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_1.default.createElement(common_1.Container, null,
react_1.default.createElement(canvas_1.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',
} })));
};
exports.default = HexGrid;