idrawjs / idraw Goto Github PK

你好，我是一个初学者，我想用您的这个整体框架就是想预览的那种改如何使用呢，还是只能引入模块自己写，如果可以想直接用已经写好的预览框架改如何获取呢，有偿

When running the build command in the next ts application. I am getting following error.

using version - "idraw": "0.4.0-beta.10",

左边是未进行拖动的圆形元素 右边是拖动后的圆形元素
明显感觉两个元素看起来不一样

@idraw/kernal

• Render eveything width state data
  • Render element with state data
  • Render element controller with state data
• Listen for complete rendering
  • Render element with state data
  • Listen to fully load all asynchronous resources

文字的字号是动态的，如果字号过大，给的高度h过小，字直接显示不了了。就是怎么动态求出字体的高度，idraw有咩有相应的api啊，相应的更新元素。文字的高度不是自适应的吗？

是否有个属性可做配置？ @chenshenhai

import iDraw from 'idraw';
const data = {
  // bgColor: '#f0f0f0',
  elements: [
    {
      name: "rect-001",
      x: 160,
      y: 120,
      w: 200,
      h: 100,
      angle: 30,
      type: "rect",
      desc: {
        color: "#d5f5f9",
        borderRadius: 10,
        borderWidth: 2,
        borderColor: "#3f51b5",
      },
    },
  ],
}

const app = document.querySelector('#app');
const idraw = new iDraw(app, {
  width: 600,
  height: 400,
  contextWidth: 600,
  contextHeight: 400,
  devicePixelRatio: 1,
});
idraw.setData(data)
idraw.selectElementByIndex(0);

鼠标在长按时移出 canvas 外，再移入 canvas，此时鼠标在 canvas 中移动会导致图形缩放

Current Development Branch

https://github.com/idrawjs/idraw/tree/dev-0.4

Big Refactor

• Refactor: Use middleware mechanism to realize all functions
• Refactor: add scale method of @idraw/renderer
• Refactor: refactor the scale method and scroll action of @idraw/board
• Refactor controll event through the proxy event based on HTML root node #59
• Refactor @idraw/core and make it easier to extend new type elements.

Feature

• Middleware features that support Plugin extensions.
• The scaling state should be adjusted when rotating elements
• Internal optional middleware
  • Rules
  • Auxiliary line
• Custom drawing background content, such as a transparent background similar to PS.
• Support environment rendering results in Node.js #169
• #130
• Add on('dataResourceLoaded') in order to listen, all resources are loaded
• Add canvas size limit
• Scaled elements support pixel art rendering.
• ~~Add Shadow to context for distinguishing between content and background ~~

Test

• E2E Test for @idraw/core all methods
• E2E Test for idraw all methods

Documents

• Add API usage of function getElement(uuid: string) and getElementByIndex(i: number)
• Add Events there are screenClickElement, mouseOverElement and mouseLeaveElement
• To be improved English document

idraw.exportDataURL(...) can't export image completely when idraw scale canvas

1. 在API中, 没有看到相应的介绍, 能想到的是 canvas的 toDataURL 方法,
   但如果有托拽框的, 也会导出, 如保在导出前先取消选中?

2. bug? 选中后, 得点击画布上两次才能取消选中状态

1是否可以增加 旋转功能锁定的配置 true or false 来控制 元素是否可以被旋转
2只是点击元素并不移动元素也会触发changeData事件

比如不想让用户修改长或者宽， 只想让用户旋转角度， 希望能自定义禁用某些操作

文档是裁剪了一些吗？我记得之前看的时候都有screenSelectElement，screenChangeElement，screenMoveElementEnd事件说明。triggerChangeEvent这些参数说明，现在怎么没看到了呢，作者可以把这些参数说明放出来吗，感谢。

我看了一下源码.是无法取消文字元素的垂直居中,能否添加这个功能呢?

有了这个,功能就强大多了

请问一下Idraw中的Canvas的画布监听可以监听鼠标的位置吗？或者说自己添加新的监听事件，比如鼠标滑过或者鼠标单击，按下之类的

我看了在Oct 24, 2021 文件packages/core/src/lib/helper.ts的提交更改 您把disableScale拼写成了disbaleScale ，导致disableScale和disableRotate不生效，以下是您的更改：
topLeft: {
x: elem.x - controllerSize - bw,
y: elem.y - controllerSize - bw,
invisible: hideObliqueDirection,
invisible: hideObliqueDirection || elem?.operation?.disbaleScale === true,
},

你好，在创建HTML元素内容时，文本内容中存在 &nbsp 这种空格符号的时候，无法正常加载元素，下面的信息是在谷歌浏览器中，HTML元素Demo中 Button 改为 &nbspButton 出现的

你好，我有两个问题想请教一下，在VS2019+Vue中引用idraw生成画布后，鼠标在画布中移动等就会一直不断弹出这个异常，请问是什么问题呢，顺带想问一下双击编辑文本框内容是怎么实现的呢

Add plugins to idraw for auxiliary drawing.

For example:

import iDraw  from 'idraw';

const idraw = new iDraw({...});

idraw.addPlugin(new iDraw.RulerPlugin());
idraw.addPlugin(new iDraw.AuxiliaryPlugin());

有一个小小的建议，既然有选中元素的方法，那么建议可以加上取消元素选中的方法。

请问一下，Idraw对 IE10 / IE11 这类浏览器支持吗，因为我在谷歌浏览器能正常运行，但在IE11上提示错误

Realize the gradient of text and background

为扩展输入便捷性，希望通过键盘控制主面板。

触发时机：focus到面板即开始监听。

• Command+Z 实现撤销本次操作
• Delete 实现删除选中的层，然后自动聚焦到下一层
• 光标没有focus到输入型控件，上下移动位置/如果同时按住Shift更快的移动。
• 拖拽层的时候，如果按下shift键盘，可以实现固定方向移动

😄

类似 antv x6 中的 graph.centerContent() // 将画布中元素居中展示
https://x6.antv.antgroup.com/tutorial/basic/graph#%E5%B8%B8%E7%94%A8-api

1. 尺寸拖拽修改后, 是否可以增加 reset 按钮(感觉这个按钮位置不太好放哈...).
2. 如果元素数据是Image 图片的话, w元素宽度, h元素高度, 是否可以不写呢, 默认图片的宽度和高度?
3. 是否可以增加元素是否需要旋转的选项, 来控制旋转按钮的显示呢? reset 按钮如果能加上的话, 也可以增加是否显示的配置.

1、文本元素目前支持换行，但是遇到多个换行符，会忽略中间的空白行，原因在于：处理各段落文本时，只处理了"非空"段落：

/**
 * idraw/packages/renderer/src/lib/draw/text.ts
 */ 

const descTextList = descText.split('\n');
// ...
descTextList.forEach((tempText) => {
  // 当tempText为空字符串时，就不会进行下面的处理了
  for (let i = 0; i < tempText.length; i++) {
    // ...
    if(xxx){
      // 空白段落未能加入 lines 数组中，就不会渲染
      lines.push({xxx})
    }
  })
})

不知道是否能将空白行考虑进去，如下：

descTextList.forEach((tempText) => {
  // 当前段落为空白行，直接推入 lines 数组，结束当前段落的处理流程
  if (tempText.length === 0) {
    lines.push({
      text: '',
      width: 0
    });
    lineNum++;
    return true;
  }

  for (let i = 0; i < tempText.length; i++) {
    // ...
  })
})

增加以上代码，亲测有效

Tip: 在处理第二个问题时以上写法会导致 空白行不会被超出隐藏的bug，需要改为：

descTextList.forEach((tempText) => {
  // 当前段落为空白行时，将tempText设置为' '，进而可以继续后续的处理流程
  if (!tempText) {
    tempText = ' ';
  }

  for (let i = 0; i < tempText.length; i++) {
    // ...
  })
})

2、文本元素目前支持超出区域隐藏，但是仅支持单行文本（不存在换行符）的超出隐藏，遇到存在换行符的多行场景，高度超出隐藏存在bug：各段落自身内容高度与文本区域高度对比，然后隐藏段落各自的超出部分。
符合直觉的期望应该是将文本所有内容当做一个整体去做超出隐藏。
原因在于：用于比较文本高度和文本区域高度的 lineNum 仅在单个段落的处理逻辑中计算，所以有了以上bug现象：

/**
 * idraw/packages/renderer/src/lib/draw/text.ts
 */

descTextList.forEach((tempText) => {
  let lineText = '';
  // lineNum每处理一个新段落都会初始化为0
  let lineNum = 0;
  // ...

  for (let i = 0; i < tempText.length; i++) {
    // 结果是只判断当前段落是否超出
    if ((lineNum + 1) * fontHeight > elem.h) {
      break;
    }
   // ...
  }
});

如果期望将整个文本当做一个整体，则需要考虑整体文本的 lineNum：

// ... 

// 从整体文本考虑 lineNum，将其定义于遍历段落之前
let lineNum = 0;

// 引入idx用以判断当前文本是不是最后一段内容
descTextList.forEach((tempText,idx) => {
  let lineText = '';

  if (!tempText) {
    tempText = ' '
  }

  for (let i = 0; i < tempText.length; i++) {
    // ...

    if ((lineNum + 1) * fontHeight > elem.h) {
      break;
    }

    if (lineText && tempText.length - 1 === i) {
      // 条件改为 (lineNum + 1) * fontHeight <= elem.h、
      // 解决 (lineNum + 1) * fontHeight == elem.h 时当前段落未能存入lines 导致内容丢失的问题
      if ((lineNum + 1) * fontHeight <= elem.h) {
        lines.push({
          text: lineText,
          width: ctx.calcScreenNum(ctx.measureText(lineText).width),
        });

        // 如果不是最后一段...lineNum 也要自增... 否则存在换行场景时，超出隐藏依然有异常
        if(idx < descTextList.length - 1){
          lineNum ++
        }
        break;
      }
    }
  }

// ...

以上代码本地亲测有效，可以解决前文提及的疑似问题，仅供参考。

一、问题场景
1、子页面引用了idrawjs、内嵌到父页面中
2、父子页面域名不同
3、screen-watcher 内的 _initParentEvent 方法用到了 window.top、window.parent 等api，此时因为同源策略，操作被block，报错
二、建议
是否可以 catch _initParentEvent 中的错误，当发现内嵌在iframe中但是不同域导致报错时，不再向上寻找顶层页面，代码如下（本地亲测有效，但不知道有无其他疏漏）：
_initParentEvent() { let target = window; let targetOrigin = target.origin; try { while (target.self !== target.top) { // If in iframe if (target.self !== target.parent) { // If in same origin if (target.origin === targetOrigin) { target.parent.window.addEventListener( 'mousemove', this._listSameOriginParentWindow.bind(this), false); } } target = target.parent; if (!target) { break; } } } catch (error) { console.log(error) } }

以上。

Separate @idraw/renderer from @idraw/core

For example:

import  Renderer from '@idraw/renderer';

const canvas = document.createElement('canvas');
const renderer = new Renderer({
  width: 200,
  height: 100,
  devicePixelRadio: 2,
});

renderer.on('loadImage', function() {
  // ...
})

renderer.on('complete', function() {
  // ...
})


renderer.render(canvas, data);

大佬您好～刚升级了0.4.0-beta.6 版本，发现 operations.lock 不支持锁住元素了？

您好,在使用您的 exportDataURL 的时候,如果里面的image src 为网络图片,会报错 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

https://idraw.js.org/playground/?demo=api-updateElement，没更新，但是也没报错，是什么原因啊，最先开始用的时候都是可以的

Add operation.disableScale to Element that it can hide controller for scaling element.

Example:

{
  x: 140,
  y: 120,
  w: 200,
  h: 100,
  type: "rect",
  opetation: {
     disableScale: true,  //  To hide controller for scaling element
  }
  desc: {
     //...
  },
}

Maybe my expectations are misled: I understood that "onlyRender" kind-of should prevent any changes to the drawing (something like a "read-only mode"), but when I change it to true (for example in https://idraw.js.org/playground/?demo=options), I cannot see any change in behaviour.

If it is not related to a read-only mode, maybe this mode could be a nice new feature?

My use-case would be that I can define a fancy drawing (in the normal, drawing mode), for example a mind-map, and then, in a different mode, me or another user cannot change the mind-map, but click on its elements to open a new link (instead of changing the mind-map)

Add operation.disableRotate to Element that it can hide controller for rotating element.

Example:

{
  x: 140,
  y: 120,
  w: 200,
  h: 100,
  type: "rect",
  opetation: {
     disableRotate: true,  //  To hide controller for rotating element
  }
  desc: {
     //...
  },
}

考虑支持nuxtjs么

Feature

• Add @idraw/renderer to Deprecate opts.onlyRender
• #106
• #111
• Add method getElementByIndex(i: number) and getElement(uuid: string) to @idraw/core
• #84
• #111
• Add return uuid from insertElementBefore, insertElementAfter
• Add methods there areinsertElementBefore(uuid) and insertElementAfter(uuid)
• Add methods there areinsertElementBeforeIndex(index) and insertElementAfterIndex(index)
• Watch keyboard to implement copy, cut, paste, delete, undo and redo #74 #75 #81
• Trigger event when select element in onlyrender-status #54
• Add event named mouseOverElement and mouseLeaveElement #54
• Add Method named exportDataURL and saveAsImage for export Image
• Set curser default when select locked element
• Add public function getScreenTransform() to class iDraw #54
• Refactor: Synchronize scrollLeft and scrollTopwith scale
• Add attribute named invisible to element data
• Add doubleClickElement to idraw #66
• It wraps text when the text string has \r\n or \n
• Add clearOperation method to idraw for clear all select status #69
• Refactor: add attr operation: {[key: string]: any} to Element and replace lock #69
• Refactor: add attr extension: {[key: string]: any} to Element #69

BUG

• It can transform element'size when it was locked
• It can listen doubleClickElement when the element is invisible 151fe71
• It can move element when the element is locked
• The element does not scale as expected when it is rotated #93 #94
• #98 #97

Test

• E2E Test for @idraw/board all methods #58
• E2E Test for @idraw/util all methods

Documents

• Rename API usage of scrollX and scrollY to scrollLeft and scrollTop
• Add Element description
• Add API usage of function getScreenTranform

• support drawing Vue Component
• support drawing React Component
• support drawing Angular Component

是否考虑针对 文本元素 增加一个可配置参数 maxWidth。
有些场景下，文本元素 的文本长度是不确定的，需要让文字自适应文本渲染区域，因此有此需求。

Related API: ctx.fillText(text, x, y, [maxWidth]);
maxWidth (可选)：绘制的最大宽度。如果指定了值，并且经过计算字符串的值比最大宽度还要宽，字体为了适应会水平缩放（如果通过水平缩放当前字体，可以进行有效的或者合理可读的处理）或者使用小号的字体 --- from MDN

If it sets onlyReander options, it can trigger the event named selectElement or pointElement when select element.

For example:

idraw.on('pointElement', (e) => {
 // TODO
})

请问有没有计划支持箭头元素？
我想用idraw来画流程图。

谢谢

大量Node和edge下重新绘制卡顿，如何实习局部重新绘制，而不是整个页面都重新绘制，这样导致性能下降厉害。

Hello idraw team,
Thank you for quickly resolving the request in idraw studio, is it possible to make idraw(renderer) compatible with node using https://github.com/Automattic/node-canvas

konva seem to be working fine using it, what do you think is possibility of getting @idraw/renderer to work in node

Thanks in advance