feat(core): 新增可扩展多主题接口

src/components/base/Flyout/flyout.tsx

@@ -2,6 +2,8 @@ import React, {useEffect} from 'react';
 import Style from './flyout.module.css'
 import {IBlock} from "../../../core/block/block.class";
 import renderFlyout from "../../../core/view/flyout/flyout";
+import {RhineBlock} from "../../../core/RhineBlock";
+import MellowRender from "../../../core/render/mellow/mellow-render";
 
 let initialised = false;
 
@@ -57,6 +59,7 @@ export default function Flyout(props: FlyoutProps) {
     ]
     if (ref.current) {
       if (!initialised) {
+        RhineBlock.setRender(MellowRender);
         renderFlyout(ref.current, flyoutBlocks);
         initialised = true;
       }

src/components/base/Graph/graph.tsx

@@ -2,6 +2,8 @@ import React, {useEffect} from 'react';
 import Style from './graph.module.css'
 import renderGraph from "../../../core/view/graph/graph";
 import {easyTestData, testData} from "./test-data";
+import {RhineBlock} from "../../../core/RhineBlock";
+import MellowRender from "../../../core/render/mellow/mellow-render";
 
 let initialized = false;
 
@@ -10,6 +12,7 @@ export default function Graph(props: any) {
 
   useEffect(() => {
     if (ref.current && !initialized) {
+      RhineBlock.setRender(MellowRender);
       const graph = renderGraph(ref.current, testData);
       initialized = true;
     }

src/core/RhineBlock.ts

@@ -1,7 +1,15 @@
 import Block, {IBlock, Item, ItemValue} from "./block/block.class";
 import {Graph} from "./view/graph/graph";
+import BaseRender from "./render/base/base-render";
 
 export class RhineBlock {
+  static Render: typeof BaseRender = BaseRender;
+
+  static setRender(render: typeof BaseRender) {
+    this.Render = render;
+  }
+
+
   static blocksData: IBlock[] = [];
 
   static registerBlocksData(blocks: IBlock[]) {
@@ -16,6 +24,7 @@ export class RhineBlock {
     return this.getBlockData(name)?.toolbox
   }
 
+
   static graphs: Graph[] = [];
 
   static registerGraph(graph: Graph) {

src/core/block/block.class.ts

@@ -1,6 +1,5 @@
 import Arg, {ArgType, IArg} from "./arg.class";
 import {RhineBlock} from "../RhineBlock";
-import BaseRender from "../render/base/base-render";
 import DragManager from "../drag/drag-manager";
 import {Graph} from "../view/graph/graph";
 
@@ -211,7 +210,7 @@ export default class Block {
     }
     if (rerender) {
       // console.log('ReRender', this)
-      BaseRender.rerender(this)
+      RhineBlock.Render.rerender(this)
     }
   }
 
@@ -229,7 +228,7 @@ export default class Block {
       }
     }
     if (rerender) {
-      BaseRender.rerender(this)
+      RhineBlock.Render.rerender(this)
     }
   }
 

src/core/drag/drag-manager.ts

@@ -1,13 +1,13 @@
 import Block, {Item, OpacityType} from "../block/block.class";
 import SvgElCreator from "../utils/svg-el-creator";
-import BaseRender from "../render/base/base-render";
 import Arg, {ArgType} from "../block/arg.class";
 import {RhineBlock} from "../RhineBlock";
 import {deepCopy} from "../utils/normal";
 import './drag-view.css';
 
 
 export default class DragManager {
+
   static DRAG_VIEW_ID = 'rb-drag-view'
   static NEAR_DIS = 16
 
@@ -32,7 +32,7 @@ export default class DragManager {
     this.dragItem = block.getItem()
 
     const svg = this.newDragView()
-    BaseRender.render(block.clone(), svg)
+    RhineBlock.Render.render(block.clone(), svg)
     const rect = (e.target as SVGPathElement).getBoundingClientRect()
     this.offset = [e.clientX - rect.x, e.clientY - rect.y]
 
@@ -180,7 +180,7 @@ export default class DragManager {
 
     const rect = graph.svg.getBoundingClientRect()
     if (this.current) {
-      BaseRender.clearOpacity(this.current)
+      RhineBlock.Render.clearOpacity(this.current)
       if (this.throwBlock) {
         const throwItem = this.throwBlock.getItem()
         const cr = this.current.view!.getBoundingClientRect()

src/core/render/base/base-render.ts

@@ -10,6 +10,7 @@ import FieldProvider from "./field-provider";
 export default class BaseRender {
   // 细节形状提供器
   static provider = new ShapeProvider()
+  static fieldProvider = new FieldProvider()
 
   // 整图形块参数
   static MIN_WIDTH = 36; // 最小宽度
@@ -117,7 +118,7 @@ export default class BaseRender {
       } else if (arg.type === ArgType.Field) {
         if (arg.fieldType === FieldType.Text) {
           if (!arg.content) arg.content = arg.default
-          el = FieldProvider.makeTextInput(
+          el = this.fieldProvider.makeTextInput(
             arg.content as string,
             parentEl,
             (text) => {

src/core/render/base/field-provider.ts

@@ -2,13 +2,13 @@ import SvgElCreator from "../../utils/svg-el-creator";
 
 export default class FieldProvider {
 
-  static FIELD_RADIUS = 4;
-  static FIELD_BACKGROUND = '#ffffffaa' // 背景颜色
+  FIELD_RADIUS = 4;
+  FIELD_BACKGROUND = '#ffffffaa' // 背景颜色
 
-  static FIELD_PADDING_HORIZONTAL = 5
-  static FIELD_PADDING_VERTICAL = 0
+  FIELD_PADDING_HORIZONTAL = 5
+  FIELD_PADDING_VERTICAL = 0
 
-  static makeTextInput(
+  makeTextInput(
     text: string,
     parent: SVGElement,
     onChange: (text: string) => void

src/core/render/mellow/mellow-render.ts

@@ -0,0 +1,6 @@
+import BaseRender from "../base/base-render";
+import {MellowShapeProvider} from "./mellow-shape-provider";
+
+export default class MellowRender extends BaseRender{
+  static provider = new MellowShapeProvider();
+}

src/core/render/mellow/mellow-shape-provider.ts

@@ -0,0 +1,74 @@
+import Block from "../../block/block.class";
+import PathBuilder, {PLine} from "../../utils/path-builder";
+
+export class MellowShapeProvider {
+
+  CORNER_SIZE = 4 // 边角大小
+
+  SEAT_HEIGHT = 8 // 占位行高度
+
+  PUZZLE_LEFT = 14 // 上下拼图距左侧距离(相对图形块)
+  PUZZLE_WIDTH = 20 // 上下拼图宽度
+  PUZZLE_HEIGHT = 4 // 上下拼图高度
+
+  TAB_TOP = 4 // 左右拼图距顶部距离(相对图形块)
+  TAB_WIDTH = 6 // 左右拼图宽度
+  TAB_HEIGHT = 15 // 左右拼图高度
+
+  HAT_WIDTH = 56 // 帽子宽度
+  HAT_HEIGHT = 10 // 帽子高度
+
+  makeTopLeftCorner(reverse: boolean = false, isRect: boolean = false): PLine[]{
+    if(isRect){
+      return new PathBuilder()
+        .verticalTo(-this.CORNER_SIZE)
+        .horizontalTo(this.CORNER_SIZE)
+        .getPath(reverse)
+    }else{
+      return new PathBuilder()
+        .lineTo(this.CORNER_SIZE, -this.CORNER_SIZE)
+        .getPath(reverse)
+    }
+  }
+
+  makeBottomLeftCorner(reverse: boolean = false, isRect: boolean = false): PLine[]{
+    if(isRect){
+      return new PathBuilder()
+        .verticalTo(this.CORNER_SIZE)
+        .horizontalTo(this.CORNER_SIZE)
+        .getPath(reverse)
+    }else{
+      return new PathBuilder()
+        .lineTo(this.CORNER_SIZE, this.CORNER_SIZE)
+        .getPath(reverse)
+    }
+  }
+
+  makeTab(reverse: boolean = false): PLine[]{
+    const MR = 3
+    return new PathBuilder()
+      .verticalTo(MR)
+      .lineTo(-this.TAB_WIDTH, -MR)
+      .verticalTo(this.TAB_HEIGHT)
+      .lineTo(this.TAB_WIDTH, -MR)
+      .verticalTo(MR)
+      .getPath(reverse)
+  }
+
+  makePuzzle(reverse: boolean = false): PLine[]{
+    return new PathBuilder()
+      .lineTo(this.PUZZLE_HEIGHT, this.PUZZLE_HEIGHT)
+      .horizontalTo(this.PUZZLE_WIDTH - this.PUZZLE_HEIGHT * 2)
+      .lineTo(this.PUZZLE_HEIGHT, -this.PUZZLE_HEIGHT)
+      .getPath(reverse)
+  }
+
+  makeHat(reverse: boolean = false): PLine[]{
+    return new PathBuilder()
+      .lineTo(this.HAT_HEIGHT, -this.HAT_HEIGHT)
+      .horizontalTo(this.HAT_WIDTH - this.HAT_HEIGHT * 2)
+      .lineTo(this.HAT_HEIGHT, this.HAT_HEIGHT)
+      .getPath(reverse)
+  }
+
+}

src/core/view/graph/graph.ts

@@ -1,6 +1,5 @@
 import SvgElCreator, {transformEl} from "../../utils/svg-el-creator";
 import Block, {Item} from "../../block/block.class";
-import BaseRender from "../../render/base/base-render";
 import {RhineBlock} from "../../RhineBlock";
 
 
@@ -26,7 +25,7 @@ export class Graph {
     if (clear) this.clear()
     for (const item of items) {
       const block = Block.fromItem(item)
-      BaseRender.render(block, this.svg)
+      RhineBlock.Render.render(block, this.svg)
       block.setPosition(item.x || 100, item.y || 100)
       block.graph = this
       this.blocks.push(block)