@meta2d/core 1.1.20 → 1.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meta2d/core",
-  "version": "1.1.20",
+  "version": "1.1.22",
   "description": "@meta2d/core: Powerful, Beautiful, Simple, Open - Web-Based 2D At Its Best .",
   "main": "index.js",
   "types": "index.d.ts",

package/src/canvas/canvas.js

@@ -4,7 +4,7 @@ import { calcRotate, distance, getDistance, hitPoint, PointType, PrevNextType, r
 import { calcCenter, calcRightBottom, calcRelativePoint, getRect, getRectOfPoints, pointInRect, pointInSimpleRect, rectInRect, rectToPoints, resizeRect, translateRect, pointInPolygon } from '../rect';
 import { EditType, globalStore, } from '../store';
 import { deepClone, fileToBase64, uploadFile, formatPadding, rgba, s8, toNumber, } from '../utils';
-import { inheritanceProps, defaultCursors, defaultDrawLineFns, HotkeyType, HoverType, MouseRight, rotatedCursors, } from '../data';
+import { inheritanceProps, defaultCursors, defaultDrawLineFns, HotkeyType, HoverType, MouseRight, rotatedCursors, Direction, } from '../data';
 import { createOffscreen } from './offscreen';
 import { curve, mind, getLineLength, getLineRect, pointInLine, simplify, smoothLine, lineSegment, getLineR, lineInRect, } from '../diagrams';
 import { polyline, translatePolylineAnchor } from '../diagrams/line/polyline';
@@ -21,6 +21,7 @@ import { CanvasTemplate } from './canvasTemplate';
 import { getLinePoints } from '../diagrams/line';
 import { Popconfirm } from '../popconfirm';
 import { le5leTheme, themeKeys } from '../theme';
+import { getFont } from '../pen/render';
 export const movingSuffix = '-moving';
 export class Canvas {
     parent;
@@ -4368,20 +4369,22 @@ export class Canvas {
         if (!this.patchFlags) {
             return;
         }
-        if (now - this.lastRender < this.store.options.interval) {
-            if (this.store.options.interval > this.store.options.minFPSNumber && this.store.options.autoFPS) {
-                this.store.options.interval--;
-                this.store.options.animateInterval = this.store.options.interval;
+        if (patchFlags != null) {
+            if (now - this.lastRender < this.store.options.interval) {
+                if (this.store.options.interval > this.store.options.minFPSNumber && this.store.options.autoFPS) {
+                    this.store.options.interval--;
+                    this.store.options.animateInterval = this.store.options.interval;
+                }
+                if (this.renderTimer) {
+                    cancelAnimationFrame(this.renderTimer);
+                }
+                this.renderTimer = requestAnimationFrame(this.render);
+                return;
             }
-            if (this.renderTimer) {
-                cancelAnimationFrame(this.renderTimer);
+            else if (now - this.lastRender - this.store.options.interval > 10 && this.store.options.autoFPS && document.visibilityState === 'visible') {
+                this.store.options.interval++;
+                this.store.options.animateInterval = this.store.options.interval;
             }
-            this.renderTimer = requestAnimationFrame(this.render);
-            return;
-        }
-        else if (now - this.lastRender - this.store.options.interval > 10 && this.store.options.autoFPS && document.visibilityState === 'visible') {
-            this.store.options.interval++;
-            this.store.options.animateInterval = this.store.options.interval;
         }
         this.renderTimer = undefined;
         this.lastRender = now;
@@ -4693,7 +4696,9 @@ export class Canvas {
         ctx.translate(0.5, 0.5);
         ctx.strokeStyle = pen.anchorColor || this.store.styles.anchorColor;
         ctx.fillStyle = pen.anchorBackground || this.store.options.anchorBackground;
-        pen.calculative.worldAnchors.forEach((anchor) => {
+        const { fontStyle, fontWeight, fontSize, fontFamily, lineHeight } = pen.calculative;
+        const scale = this.store.data.scale;
+        pen.calculative.worldAnchors.forEach((anchor, index) => {
             if (anchor.hidden || anchor.locked > LockState.DisableEdit) {
                 return;
             }
@@ -4758,6 +4763,71 @@ export class Canvas {
             else if (anchor.color || anchor.background) {
                 ctx.restore();
             }
+            if (anchor.label) {
+                ctx.save();
+                ctx.font = getFont({
+                    fontStyle,
+                    fontWeight,
+                    fontFamily,
+                    fontSize,
+                    lineHeight,
+                });
+                const rX = pen.anchors[index].x;
+                const rY = pen.anchors[index].y;
+                let xGap = 0;
+                let yGap = 0;
+                if (anchor.labelDirection !== undefined) {
+                    if (anchor.labelDirection === Direction.Left) {
+                        ctx.textAlign = 'right';
+                        ctx.textBaseline = 'middle';
+                        xGap = -(anchor.labelGap || 10) * scale;
+                    }
+                    else if (anchor.labelDirection === Direction.Right) {
+                        ctx.textAlign = 'left';
+                        ctx.textBaseline = 'middle';
+                        xGap = (anchor.labelGap || 10) * scale;
+                    }
+                    else if (anchor.labelDirection === Direction.Up) {
+                        ctx.textAlign = 'center';
+                        ctx.textBaseline = 'bottom';
+                        yGap = -(anchor.labelGap || 5) * scale;
+                    }
+                    else if (anchor.labelDirection === Direction.Bottom) {
+                        ctx.textAlign = 'center';
+                        ctx.textBaseline = 'top';
+                        yGap = (anchor.labelGap || 5) * scale;
+                    }
+                }
+                else {
+                    if (rX < 0.1) {
+                        ctx.textAlign = 'left';
+                        ctx.textBaseline = 'middle';
+                        xGap = (anchor.labelGap || 10) * scale;
+                    }
+                    else if (rX > 0.9) {
+                        ctx.textAlign = 'right';
+                        ctx.textBaseline = 'middle';
+                        xGap = -(anchor.labelGap || 10) * scale;
+                    }
+                    else {
+                        ctx.textAlign = 'center';
+                        if (rY < 0.1) {
+                            ctx.textBaseline = 'top';
+                            yGap = (anchor.labelGap || 5) * scale;
+                        }
+                        else if (rY > 0.9) {
+                            ctx.textBaseline = 'bottom';
+                            yGap = -(anchor.labelGap || 5) * scale;
+                        }
+                        else {
+                            ctx.textBaseline = 'middle';
+                        }
+                    }
+                }
+                ctx.fillStyle = getTextColor(pen, this.store);
+                ctx.fillText(anchor.label, anchor.x + xGap, anchor.y + yGap);
+                ctx.restore();
+            }
             //根父节点
             if (!pen.parentId && pen.children && pen.children.length > 0) {
                 if (anchor === this.store.hoverAnchor) {
@@ -7017,7 +7087,9 @@ export class Canvas {
             sheet.insertRule('.meta2d-input ul{position:absolute;top:100%;margin-top:4px; width:calc(100% + 10px);min-height:30px;border-radius: 2px;box-shadow: 0 2px 8px #00000026;list-style-type: none;background-color: #fff;padding: 4px 0;max-height: 105px;overflow-y: auto;}');
             sheet.insertRule('.meta2d-input ul li{padding: 5px 12px;line-height: 22px;white-space: nowrap;cursor: pointer;}');
             sheet.insertRule('.meta2d-input ul li:hover{background: #eeeeee;}');
-            sheet.insertRule(`.input-div::-webkit-scrollbar {display:none}`);
+            if (CSS.supports?.('selector(.input-div::-webkit-scrollbar)')) {
+                sheet.insertRule(`.input-div::-webkit-scrollbar {display:none}`);
+            }
             sheet.insertRule(`.input-div{scrollbar-width: none;}`);
             sheet.insertRule('.meta2d-input .input-div{resize:none;border:none;outline:none;background:transparent;flex-grow:1;height:100%;width: 100%;left:0;top:0;display:flex;text-align: center;justify-content: center;flex-direction: column;}');
             sheet.insertRule(`.input-div div{}`);