@logicflow/dumi-theme-simple
Version:
Simple website theme based on dumi2.
405 lines (404 loc) • 15 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React, { useEffect, useRef } from 'react';
import LogicFlow from '@logicflow/core';
import { MiniMap, Control } from '@logicflow/extension';
import { register } from '@logicflow/react-node-registry';
import gh from 'parse-github-url';
import { useLocale } from 'dumi/dist/client/theme-api';
import { ConfigNode } from "./ConfigNode";
import { IntroNode } from "./IntroNode";
import { AdvantageNode } from "./AdvantageNode";
import { ic } from "../../hooks";
import { themeConfig, staticNodes, configNodes, staticEdges, controlConfig } from "./lfConfig";
import GitHubButton from 'react-github-button';
import '@logicflow/core/es/index.css';
import '@logicflow/extension/es/index.css';
import styles from "../index.module.less";
import { jsx as _jsx } from "react/jsx-runtime";
var ConfigComponent = function ConfigComponent(props) {
var node = props.node,
graph = props.graph;
node.text.editable = false;
var data = node.getData();
var isSilentMode = graph.editConfigModel.isSilentMode;
if (!data.properties) data.properties = {};
var _data$properties = data.properties,
_data$properties$type = _data$properties.type,
type = _data$properties$type === void 0 ? 'shape' : _data$properties$type,
defaultValue = _data$properties.defaultValue;
var setValue = function setValue(key, value) {
var IntroNode = graph.getNodeModelById('banner-demo-node');
switch (key) {
case 'nodeShape':
{
graph.nodes.forEach(function (node) {
if (['demo-node', 'config-node', 'github-node', 'advantage-node'].includes(node.type)) return;
graph.changeNodeType(node.id, value);
var newIntroNode = graph.getNodeModelById(node.id);
if (value === 'rect') {
newIntroNode.radius = newIntroNode.radius || 20;
}
});
break;
}
case 'edgeShape':
{
graph.edgeType = value;
graph.edges.forEach(function (edge) {
graph.changeEdgeType(edge.id, value);
});
break;
}
case 'fontColor':
{
graph.nodes.forEach(function (node) {
if (['demo-node', 'config-node', 'github-node', 'advantage-node'].includes(node.type)) return;
if (!node.properties.textStyle) {
node.properties.textStyle = {};
}
node.setProperty('textStyle', _objectSpread(_objectSpread({}, node.properties.textStyle), {}, {
color: value
}));
});
break;
}
case 'nodeBackground':
{
graph.nodes.forEach(function (node) {
if (['demo-node', 'config-node', 'github-node', 'advantage-node'].includes(node.type)) return;
if (!node.properties.style) {
node.properties.style = {};
}
node.setProperty('style', _objectSpread(_objectSpread({}, node.properties.style), {}, {
fill: value,
stroke: value
}));
});
break;
}
case 'edgeColor':
{
var _graph$theme = graph.theme,
line = _graph$theme.line,
polyline = _graph$theme.polyline,
bezier = _graph$theme.bezier;
graph.setTheme({
line: _objectSpread(_objectSpread({}, line), {}, {
stroke: value
}),
polyline: _objectSpread(_objectSpread({}, polyline), {}, {
stroke: value
}),
bezier: _objectSpread(_objectSpread({}, bezier), {}, {
stroke: value
})
});
graph.edges.forEach(function (edge) {
if (!edge.properties.style) {
edge.properties.style = {};
}
edge.setProperty('style', _objectSpread(_objectSpread({}, edge.properties.style), {}, {
stroke: value
}));
});
break;
}
case 'title':
{
IntroNode.setProperty(key, value);
break;
}
case 'description':
{
IntroNode.setProperty(key, value);
break;
}
default:
{
var editConfigModel = graph.editConfigModel;
var updateConfig = {};
updateConfig[key] = value;
editConfigModel.updateEditConfig(updateConfig);
break;
}
}
};
return /*#__PURE__*/_jsx(ConfigNode, {
type: type,
isSilentMode: isSilentMode,
value: defaultValue,
setValue: setValue
});
};
var DemoComponent = function DemoComponent(_ref) {
var node = _ref.node;
var data = node.getData();
node.text.editable = false;
if (!data.properties) data.properties = {};
var _data$properties2 = data.properties,
title = _data$properties2.title,
description = _data$properties2.description,
buttons = _data$properties2.buttons;
return /*#__PURE__*/_jsx(IntroNode, {
title: title,
description: description,
buttons: buttons
});
};
var GithubComponent = function GithubComponent(_ref2) {
var node = _ref2.node;
var githubObj = node.properties.githubObj;
return /*#__PURE__*/_jsx("div", {
className: styles.githubWrapper,
children: /*#__PURE__*/_jsx(GitHubButton, {
type: "stargazers",
namespace: githubObj.owner,
repo: githubObj.name
})
}, "github");
};
var AdvantageComponent = function AdvantageComponent(_ref3) {
var node = _ref3.node;
var data = node.getData();
node.text.editable = false;
if (!data.properties) data.properties = {};
var _data$properties3 = data.properties,
icon = _data$properties3.icon,
advantageStyle = _data$properties3.advantageStyle,
iconStyle = _data$properties3.iconStyle,
title = _data$properties3.title;
return /*#__PURE__*/_jsx(AdvantageNode, {
icon: icon,
advantageStyle: advantageStyle,
iconStyle: iconStyle,
title: title
});
};
export var LfContainer = function LfContainer(props) {
var title = props.title,
description = props.description,
githubUrl = props.githubUrl,
showGithubStars = props.showGithubStars,
buttons = props.buttons,
advantages = props.advantages;
var lang = useLocale().id;
var githubObj = gh(githubUrl);
var showGitHubStarsButton = showGithubStars && githubObj && githubObj.owner && githubObj.name;
var titleInfo = ic(title);
var desc = ic(description);
var buttonList = buttons.map(function (item) {
return _objectSpread(_objectSpread({}, item), {}, {
text: ic(item.text),
link: item.link[lang] || item.link
});
});
var advantagesList = advantages.map(function (item) {
return _objectSpread(_objectSpread({}, item), {}, {
title: ic(item.title)
});
});
var containerRef = useRef();
useEffect(function () {
var lf = new LogicFlow({
container: containerRef.current,
stopZoomGraph: true,
stopScrollGraph: true,
stopMoveGraph: false,
nodeTextEdit: true,
nodeTextDraggable: false,
adjustEdge: true,
allowResize: true,
allowRotate: true,
hoverOutline: false,
keyboard: {
enabled: true
},
grid: {
size: 20,
visible: true,
type: 'dot',
config: {
color: '#f3f7fd',
thickness: 4
}
},
background: {
background: 'radial-gradient(circle at left, #C9D2FF3F, #F8FAFF7F), radial-gradient(circle at center, #F8FAFF7F, #D6ECFE0F), radial-gradient(circle at right, #A5DBFDFF, #F8FAFFFF)'
},
plugins: [Control, MiniMap],
pluginsOptions: {
miniMap: {
showEdge: true,
width: 200,
height: 120,
isShowHeader: false
}
},
style: themeConfig,
edgeType: 'bezier'
});
register({
type: 'config-node',
component: ConfigComponent
}, lf);
register({
type: 'demo-node',
component: DemoComponent
}, lf);
register({
type: 'github-node',
component: GithubComponent
}, lf);
register({
type: 'advantage-node',
component: AdvantageComponent
}, lf);
var _lf$getEditConfig = lf.getEditConfig(),
stopZoomGraph = _lf$getEditConfig.stopZoomGraph,
stopMoveGraph = _lf$getEditConfig.stopMoveGraph,
adjustNodePosition = _lf$getEditConfig.adjustNodePosition,
adjustEdge = _lf$getEditConfig.adjustEdge,
allowRotate = _lf$getEditConfig.allowRotate,
allowResize = _lf$getEditConfig.allowResize,
hideAnchors = _lf$getEditConfig.hideAnchors;
if (showGitHubStarsButton) {
lf.addNode({
id: 'github-node',
type: 'github-node',
x: 1420,
y: 380,
rotate: 0.45,
properties: {
githubObj: githubObj,
width: 100,
height: 100
}
});
}
var body = document.querySelector('body');
var clientWidth = body.clientWidth;
var focusCenter = {
x: 980,
y: 460
};
var zoomSize = +(clientWidth / 1680).toFixed(1);
controlConfig(lf, {
focusCenter: focusCenter,
defaultZoomSize: zoomSize
}).forEach(function (item) {
var key = item.key;
lf.extension.control.removeItem(key);
lf.extension.control.addItem(item);
});
lf.render({
nodes: [].concat(_toConsumableArray(staticNodes), _toConsumableArray(configNodes), [{
id: 'config-node-graph',
type: 'config-node',
x: 1660,
y: 480,
rotate: -0.1,
properties: {
width: 220,
height: 300,
type: 'graph',
defaultValue: {
stopZoomGraph: stopZoomGraph,
stopMoveGraph: stopMoveGraph,
adjustNodePosition: adjustNodePosition,
adjustEdge: adjustEdge,
allowRotate: allowRotate,
allowResize: allowResize,
hideAnchors: hideAnchors
}
}
}, {
id: 'config-node-content',
type: 'config-node',
x: 680,
y: 190,
rotate: -0.3,
properties: {
width: 260,
height: 170,
type: 'content',
defaultValue: {
title: titleInfo,
description: desc
}
}
}, {
id: 'banner-demo-node',
type: 'demo-node',
x: 1000,
y: 660,
resizable: false,
properties: {
width: 800,
height: 500,
title: titleInfo,
lang: lang,
description: desc,
buttons: buttonList
}
}]),
edges: staticEdges
});
advantagesList.forEach(function (advantage, index) {
var icon = advantage.icon,
advantageStyle = advantage.advantageStyle,
iconStyle = advantage.iconStyle,
title = advantage.title,
position = advantage.position;
lf.addNode(_objectSpread(_objectSpread({
id: "advantage-node-".concat(index),
type: 'advantage-node',
x: 100 + index * 300,
y: 600
}, position), {}, {
resizable: false,
rotate: index % 2 === 0 ? -0.3 : 0.3,
properties: {
width: 130,
height: 130,
icon: icon,
advantageStyle: advantageStyle,
iconStyle: iconStyle,
title: title
}
}));
});
lf.zoom(zoomSize);
lf.focusOn(focusCenter);
var miniMap = lf.extension.miniMap;
miniMap.show();
// eslint-disable-next-line @typescript-eslint/no-unused-vars
var openEdgeAnimation = function openEdgeAnimation() {
var _lf$getGraphRawData = lf.getGraphRawData(),
edges = _lf$getGraphRawData.edges;
edges.forEach(function (_ref4) {
var id = _ref4.id;
lf.openEdgeAnimation(id);
});
};
// openEdgeAnimation()
});
return /*#__PURE__*/_jsx("div", {
className: styles.lfContainer,
children: /*#__PURE__*/_jsx("div", {
ref: containerRef,
id: "graph",
className: styles.viewport
})
});
};