@meta2d/core 1.0.95 → 1.0.97

package/package.json

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

package/src/canvas/canvas.d.ts

@@ -234,6 +234,7 @@ export declare class Canvas {
     calibrateMouse: (pt: Point) => Point;
     clearHover(): void;
     private getContainerHover;
+    lastHoverType: HoverType;
     private getHover;
     private inPens;
     private dockInAnchor;
@@ -277,6 +278,8 @@ export declare class Canvas {
     private renderPenContainChild;
     renderBorder: () => void;
     renderHoverPoint: () => void;
+    renderPensAnchors: () => void;
+    renderAnchors: (pen: Pen) => void;
     transTimeout: any;
     translate(x?: number, y?: number): void;
     onMovePens(): void;

package/src/canvas/canvas.js

@@ -2811,6 +2811,7 @@ export class Canvas {
             }
         }
     };
+    lastHoverType = HoverType.None;
     getHover = (pt) => {
         if (this.dragRect) {
             return;
@@ -2897,7 +2898,9 @@ export class Canvas {
             if (this.store.lastHover) {
                 this.store.lastHover.calculative.hover = false;
                 setHover(getParent(this.store.lastHover, true) || this.store.lastHover, false);
-                this.store.emitter.emit('leave', this.store.lastHover);
+                if (this.store.pens[this.store.lastHover.id]) {
+                    this.store.emitter.emit('leave', this.store.lastHover);
+                }
                 this.tooltip.hide();
             }
             if (this.store.hover) {
@@ -2908,6 +2911,14 @@ export class Canvas {
             }
             this.store.lastHover = this.store.hover;
         }
+        if ([HoverType.LineAnchor, HoverType.NodeAnchor].includes(hoverType) &&
+            ![HoverType.LineAnchor, HoverType.NodeAnchor].includes(this.lastHoverType)) {
+            this.store.emitter.emit("enterAnchor", {
+                pen: this.store.hover,
+                anchor: this.store.hoverAnchor,
+            });
+        }
+        this.lastHoverType = hoverType;
         this.store.hover?.onMouseMove?.(this.store.hover, this.mousePos);
     };
     inPens = (pt, pens) => {
@@ -4197,6 +4208,7 @@ export class Canvas {
         globalThis.debugRender && console.timeEnd('renderPens');
         this.renderBorder();
         this.renderHoverPoint();
+        this.renderPensAnchors();
         offscreenCtx.restore();
         if (this.magnifierCanvas.magnifier) {
             this.magnifierCanvas.render();
@@ -4217,7 +4229,9 @@ export class Canvas {
                 continue;
             }
             // if (pen.template) {
-            if (pen.canvasLayer === CanvasLayer.CanvasTemplate) {
+            if (pen.canvasLayer === CanvasLayer.CanvasTemplate
+                || pen.canvasLayer === CanvasLayer.CanvasImageBottom
+                || pen.canvasLayer === CanvasLayer.CanvasImage) {
                 continue;
             }
             // if (pen.name === 'combine' && !pen.draw){
@@ -4478,6 +4492,106 @@ export class Canvas {
         }
         ctx.restore();
     };
+    renderPensAnchors = () => {
+        // 总是显示锚点 不受locked影响
+        for (const pen of this.store.data.pens) {
+            if (!isFinite(pen.x)) {
+                continue;
+            }
+            if (pen.anchorVisible === true) {
+                this.renderAnchors(pen);
+            }
+        }
+    };
+    renderAnchors = (pen) => {
+        const ctx = this.offscreen.getContext("2d");
+        ctx.save();
+        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) => {
+            if (anchor.hidden || anchor.locked > LockState.DisableEdit) {
+                return;
+            }
+            if (anchor === this.store.hoverAnchor) {
+                ctx.save();
+                const hoverAnchorColor = pen.hoverAnchorColor || this.store.options.hoverAnchorColor;
+                ctx.strokeStyle = hoverAnchorColor;
+                ctx.fillStyle = hoverAnchorColor;
+            }
+            ctx.beginPath();
+            let size = anchor.radius || pen.anchorRadius || this.store.options.anchorRadius;
+            if (pen.type && !anchor.radius && !pen.anchorRadius) {
+                size = 3;
+                if (pen.calculative.lineWidth > 3) {
+                    size = pen.calculative.lineWidth;
+                }
+            }
+            if (anchor.type === PointType.Line) {
+                //旋转的情况
+                let _rotate = this.store.pens[anchor.penId].rotate || 0;
+                if (this.store.pens[anchor.penId].calculative.flipX) {
+                    _rotate *= -1;
+                }
+                if (this.store.pens[anchor.penId].calculative.flipY) {
+                    _rotate *= -1;
+                }
+                let rotate = anchor.rotate + _rotate;
+                if (this.store.pens[anchor.penId].calculative.flipX) {
+                    rotate *= -1;
+                }
+                if (this.store.pens[anchor.penId].calculative.flipY) {
+                    rotate *= -1;
+                }
+                ctx.save();
+                ctx.translate(anchor.x, anchor.y);
+                ctx.rotate((rotate * Math.PI) / 180);
+                ctx.translate(-anchor.x, -anchor.y);
+                ctx.rect(anchor.x - (anchor.length * this.store.data.scale) / 2, anchor.y - size, anchor.length * this.store.data.scale, size * 2);
+                ctx.restore();
+            }
+            else {
+                ctx.arc(anchor.x, anchor.y, size, 0, Math.PI * 2);
+            }
+            if (pen.type && this.store.hoverAnchor === anchor) {
+                ctx.save();
+                ctx.strokeStyle = pen.activeColor || this.store.styles.activeColor;
+                ctx.fillStyle = ctx.strokeStyle;
+            }
+            else if (anchor.color || anchor.background) {
+                ctx.save();
+                ctx.strokeStyle = anchor.color;
+                ctx.fillStyle = anchor.background;
+            }
+            ctx.fill();
+            ctx.stroke();
+            if (anchor === this.store.hoverAnchor) {
+                ctx.restore();
+            }
+            if (pen.type && this.store.hoverAnchor === anchor) {
+                ctx.restore();
+            }
+            else if (anchor.color || anchor.background) {
+                ctx.restore();
+            }
+            //根父节点
+            if (!pen.parentId && pen.children && pen.children.length > 0) {
+                if (anchor === this.store.hoverAnchor) {
+                    ctx.save();
+                    ctx.beginPath();
+                    ctx.lineWidth = 3;
+                    const hoverAnchorColor = pen.hoverAnchorColor || this.store.options.hoverAnchorColor;
+                    if (globalThis.pSBC) {
+                        ctx.strokeStyle = globalThis.pSBC(0.5, hoverAnchorColor);
+                    }
+                    ctx.arc(anchor.x, anchor.y, size + 1.5, 0, Math.PI * 2);
+                    ctx.stroke();
+                    ctx.restore();
+                }
+            }
+        });
+        ctx.restore();
+    };
     transTimeout;
     translate(x = 0, y = 0) {
         this.store.data.x += x * this.store.data.scale;
@@ -6404,6 +6518,10 @@ export class Canvas {
             this.dropdown.style.color = pen.dropdownColor || '#bdc7db';
             this.dropdown.style.width = this.inputParent.style.width;
             this.dropdown.style.fontSize = (pen.fontSize || 12) + 'px';
+            const inputRect = this.inputDiv.getBoundingClientRect();
+            let maxH = window.innerHeight - inputRect.top - inputRect.height;
+            maxH = maxH > 200 ? 200 : maxH;
+            this.dropdown.style.maxHeight = maxH + 'px';
             this.setDropdownList();
             this.externalElements.style.zIndex = '9999';
         }