le5le-com / meta2d.js Goto Github PK

两个节点进行组合，然后选中其中一个节点，通过topology.changePenId方法修改选中节点的id，报错了

目前是根据设定的大小，拖拽出组件，生成组件之后一定是需要调整长宽，没有上下左右单独方向的调整，容易出现偏差

水平翻转，垂直翻转

原 shift 切换连线类型，即曲线变折线，折线变直线。
考虑使用 ctrl + shift 来切换连线类型

背景图片使用在线图片也不行 应该是保存出错了 控制台没有显示错误

现有：alt 水平移动，shift 垂直移动！

19url.0afeddfa.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'slice')
at ft (url.0afeddfa.js:1:8648)
at dt (url.0afeddfa.js:1:7443)
at Xi.dirtyPenRect (url.0afeddfa.js:1:144366)
at url.0afeddfa.js:1:148325
at Array.forEach ()
at Xi.resizePens (url.0afeddfa.js:1:147863)
at Xi.onMouseMove (url.0afeddfa.js:1:104839)
at HTMLDivElement.xt.externalElements.onmousemove (url.0afeddfa.js:1:125669)

画笔的颜色可以通过 options.color来设定，组件的填充色好像没找到可以属性来设定

1. 背景图片是采用截取还是缩小或放大？

禁用后，再移动下就变成这样

了

svg本身含有动画，导入时是否支持

默认是上面的，我想要下面这样的

在一些添加操作中可能会出现这样的需求；判断当前的pen类型同时向pen注入一个自定义信息

版本： 1.1.4
在以下两处没有使用调用定义好的生命周期；导致生命周期声明了也无法正确触发；

只有点击边框部分才能选择，较长的时候文字也无法选中（也可以通过调整长宽来，如果自动设置好，是不是更方便）

描述

topology.js 文件中快速执行相关demo

原本效果

组合旋转放大后效果

版本

v1.1.1

复现地址

http://t.le5le.com/

复现步骤

空白图纸,先点开缩略图,在缩略图点击一下,再添加图形,直接报错

两个节点进行组合，然后通过topology.addPens(pens)方法插入组合后的新节点报错了

个人感觉，背景图片的优先级应该高于背景图片
demo测试如下
onMounted(() => { var topology = new Topology("topology",{background:'red'}); topology.setBackgroundImage("http://localhost:3000/src/assets/images/favicon.ico") });

1. 考虑使用可编辑的 div。
2. 依旧使用 textarea 。
3. 获取当前画笔样式，设置 对应 dom 样式。

问题描述：

根据快速上手示例安装依赖运行时报以下错误: Failed to resolve entry for package "@topology/sequence-diagram"

可复现代码（其实就是根据示例复制粘贴了一份）：

code.zip

Failed to resolve entry for package "@topology/sequence-diagram". The pac
kage may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "@topology/sequence-diagram". The package may have incorrect main/module/exports specified in its package.json.

运行环境：

node v16.13.1, on windows 11

问题引发原因：

https://nodejs.org/api/deprecations.html#dep0128-modules-with-an-invalid-main-entry-and-an-indexjs-file

简单来说，原来在 package.json 中配置的 main 指向路径在构建产物中是不存在的，但是因为构建产物中存在 index.js，所以会使用 index.js 而不报错。

在 16 及以后的版本，这种情况会报错。

解决方案：

去掉 package.json 中的 main 字段（或者指向正确的 index.js 而不是 index.ts）。

复现步骤：
1、拖拽3个相同元素：

2、组合其中两个元素：

3、整个画布放大：

4、执行撤回：

5、效果如下，未计算缩放比，导致大小与原元素大小不同：

url.7700b673.js:1 Uncaught TypeError: Cannot set properties of undefined (setting 'x')
at zi.onMouseUp (url.7700b673.js:1:108784)
at HTMLDivElement.mt.externalElements.onmouseup (url.7700b673.js:1:126949)
onMouseUp @ url.7700b673.js:1
mt.externalElements.onmouseup @ url.7700b673.js:1
25url.7700b673.js:1 Uncaught TypeError: Cannot set properties of undefined (setting 'x')
at zi.onMouseUp (url.7700b673.js:1:108784)
at zi.onMouseMove (url.7700b673.js:1:107653)
at HTMLDivElement.mt.externalElements.onmousemove (url.7700b673.js:1:126797)

目前 引入 core 1.1.4版本

1. 官网能打开之前的配置好的json
2. vue-demo那个也能打开(core 0.2.30)
3. 自己搭建的基于 core1.1.4 就打不开了
   发现line.js报错 （worldAnchors 是 空的 undefined ）
   export function line(pen, path) {
   if (!path) {
   path = new Path2D();
   }
   if (pen.calculative.worldAnchors.length > 1) {

版本

v1.1.5

复现地址

http://t.le5le.com/

复现步骤

添加图形,缩放画布,手动设置图形的x/y 为0

存在一个问题，对于图形而言，是可以设置图片的，那么只用一个 imageRatio 属性，是存在冲突的。考虑增加一个画笔的 保持比例属性！

吸附功能就是每个anchor的实际坐标位置都在网格点上，就是在绘制过程中计算鼠标点击过程中最近的网格点；
在绘制水平线垂直线，以及个性化图形的时候有很大帮助，减少偏移，减少多余一丢丢线条的情况

toComponent 一个组件好像没问题 两个及以上报错 但是在控制台直接调用这个方法却不报错

自动连接锚点确实很方便，但是在一些场景，比如圆的内部绘制就无法进行；建议从可以是钢笔节点从外部进入内部一定范围，就不自动连接到锚点

试了下Vue版本的事件触发，不支持通过js脚本修改节点的背景颜色，这个后续版本会不会更新，还是只能购买企业版

if (pen.width > 1 && !isEqual(pen.height, 1)) {
rect.width = pen.width;
}
if (pen.height > 1 && !isEqual(pen.height, 1)) {
rect.height = pen.height;
}
没明白calcWorldRects方法中这段的作用，这个会导致宽大于高的图形旋转90度后参与组合必定出问题；

设置描绘图片后 鼠标悬浮或选择图元 应该还是显示描绘图片

选择两个组件调用toComponent 收藏起来 清空画布 方便测试 拖拽收藏的组件到画布 在拖拽一次到画布 现在画布有两个一样的收藏组件 然后全选 再调用 toComponent 生成的新的组件 拖拽到画布后 不显示组件

// toComponent   生成的新的组件 
[
    {
        "id": "e633899",
        "name": "combine",
        "x": 44.5,
        "y": 83.5,
        "ex": 520.5,
        "ey": 204.5,
        "width": 476,
        "height": 121,
        "center": {
            "x": 282.5,
            "y": 144
        },
        "children": [
            "fb35658",
            "669def0"
        ]
        
    },
    {
        "id": "fb35658",
        "name": "combine",
        "x": 0,
        "y": 0.24793388429752067,
        "ex": 0.7331932773109243,
        "ey": 1,
        "width": 0.7331932773109243,
        "height": 0.7520661157024794,
        "center": {
            "x": 454.5,
            "y": 192.5
        },
        "children": [
            "7c352c28",
            "1631dd95"
        ],
       
        "parentId": "e633899",
        "lineWidth": 1,
        "fontSize": 12,
        "lineHeight": 1.5,
        "anchors": [],
        "rotate": 0,
        "locked": 2
    },
    {
        "id": "669def0",
        "name": "combine",
        "x": 0.2668067226890756,
        "y": 0,
        "ex": 1,
        "ey": 0.7520661157024794,
        "width": 0.7331932773109243,
        "height": 0.7520661157024794,
        "center": {
            "x": 454.5,
            "y": 192.5
        },
        "children": [
            "20a03fd",
            "0991647"
        ],
        
        "parentId": "e633899",
        "lineWidth": 1,
        "fontSize": 12,
        "lineHeight": 1.5,
        "anchors": [],
        "rotate": 0,
        "locked": 2
    }
]

//拖拽到画布后  新组件的子组件的children为空 
const onDragStart = (e, data) => {

  e.dataTransfer.setData('Topology', JSON.stringify(deepClone(data)))
}

Originally posted by @Blizzard-liu in #46 (comment)

正常创建一个实例，添加一个图形，滚动后无法在图形位置上选中图形，更新canvas.bounding之后图形选中恢复正常，但是放大缩小的位置又变得不正常。
复现demo：https://codesandbox.io/s/ecstatic-firefly-dd021l?file=/src/App.js

调用这个api会报错：如下
react-dom.development.js:4091 Uncaught TypeError: Cannot set properties of undefined (setting 'active')
at eval (canvas.ts:2505)
at Array.forEach ()
at Canvas.active (canvas.ts:2504)
at Topology.active (core.ts:861)
at handleSelectedNode (CanvasNodes.tsx:36)
at onClick (CanvasNodes.tsx:49)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)

源码：
this.store.active = [];
pens.forEach(function (pen) {
pen.calculative.active = true;
(0,pen__WEBPACK_IMPORTED_MODULE_22_.setChildrenActive)(pen);
});

作为节点拖入画布的时候会显示跨域