@logicflow/core
Version:
LogicFlow, help you quickly create flowcharts
105 lines (104 loc) • 5.67 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
import { Component } from 'preact/compat';
import { cloneDeep, assign } from 'lodash-es';
import { observer } from '../..';
import { createUuid } from '../../util';
import { DEFAULT_GRID_SIZE } from '../../constant';
var Grid = /** @class */ (function (_super) {
__extends(Grid, _super);
function Grid(props) {
var _this = _super.call(this, props) || this;
_this.id = createUuid();
_this.gridOptions = _this.props.graphModel.grid;
return _this;
}
// 网格类型为点状
Grid.prototype.renderDot = function () {
var _a = this.gridOptions, config = _a.config, _b = _a.size, size = _b === void 0 ? 1 : _b, visible = _a.visible;
var _c = config !== null && config !== void 0 ? config : {}, color = _c.color, _d = _c.thickness, thickness = _d === void 0 ? 2 : _d;
// 对于点状网格，点的半径不能大于网格大小的四分之一
var radius = Math.min(Math.max(2, thickness), size / 4);
var opacity = visible ? 1 : 0;
return (_jsxs("g", { fill: color, opacity: opacity, children: [_jsx("circle", { cx: 0, cy: 0, r: radius / 2 }), _jsx("circle", { cx: 0, cy: size, r: radius / 2 }), _jsx("circle", { cx: size, cy: 0, r: radius / 2 }), _jsx("circle", { cx: size, cy: size, r: radius / 2 })] }));
};
// 网格类型为交叉线
// todo: 采用背景缩放的方式，实现更好的体验
Grid.prototype.renderMesh = function () {
var _a = this.gridOptions, config = _a.config, _b = _a.size, size = _b === void 0 ? 1 : _b, visible = _a.visible;
var _c = config !== null && config !== void 0 ? config : {}, color = _c.color, _d = _c.thickness, thickness = _d === void 0 ? 1 : _d;
// 对于交叉线网格，线的宽度不能大于网格大小的一半
var strokeWidth = Math.min(Math.max(1, thickness), size / 2);
var d = "M 0 0 H ".concat(size, " V ").concat(size, " H 0 Z");
var opacity = visible ? 1 : 0;
return (_jsx("path", { d: d, stroke: color, strokeWidth: strokeWidth / 2, opacity: opacity, fill: "transparent" }));
};
Grid.prototype.render = function () {
var _a = this.props.graphModel, transformModel = _a.transformModel, grid = _a.grid;
this.gridOptions = grid;
var _b = this.gridOptions, type = _b.type, _c = _b.size, size = _c === void 0 ? 1 : _c;
var SCALE_X = transformModel.SCALE_X, SKEW_Y = transformModel.SKEW_Y, SKEW_X = transformModel.SKEW_X, SCALE_Y = transformModel.SCALE_Y, TRANSLATE_X = transformModel.TRANSLATE_X, TRANSLATE_Y = transformModel.TRANSLATE_Y;
var matrixString = [
SCALE_X,
SKEW_Y,
SKEW_X,
SCALE_Y,
TRANSLATE_X,
TRANSLATE_Y,
].join(',');
var transform = "matrix(".concat(matrixString, ")");
// const transitionStyle = {
// transition: 'all 0.1s ease',
// };
return (_jsx("div", { className: "lf-grid", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", children: [_jsx("defs", { children: _jsxs("pattern", { id: this.id, patternUnits: "userSpaceOnUse", patternTransform: transform, x: "0", y: "0", width: size, height: size, children: [type === 'dot' && this.renderDot(), type === 'mesh' && this.renderMesh()] }) }), _jsx("rect", { width: "100%", height: "100%", fill: "url(#".concat(this.id, ")") })] }) }));
};
Grid = __decorate([
observer
], Grid);
return Grid;
}(Component));
export { Grid };
(function (Grid) {
Grid.defaultProps = {
size: DEFAULT_GRID_SIZE,
visible: true,
type: 'dot',
config: {
color: '#ababab',
thickness: 1,
},
};
function getGridOptions(options) {
var defaultOptions = cloneDeep(Grid.defaultProps);
if (typeof options === 'number') {
return assign(defaultOptions, { size: options });
}
else if (typeof options === 'boolean') {
return assign(defaultOptions, { visible: options });
}
else {
return assign(defaultOptions, options);
}
}
Grid.getGridOptions = getGridOptions;
})(Grid || (Grid = {}));