freegroup / draw2d Goto Github PK

When a Text-shape contains a '$' in the text at any position I am only able to make this object wider. It is not possible to make it narrower on any of the two sides. Tested in Chrome and Firefox.

Hi. As title says, I'm using draw2d in my project and I realized that opening Chrome Dev Tools slows library a lot. Animations of moving, resizing shapes are just unusable then, very laggy. It does not matter if dev tools are docked to main window or opened in new one. On firefox there's no problem like that

Hi,
in this example http://www.draw2d.org/draw2d_touch/jsdoc_6/draw2d/examples/code_snippets/connection_locator/index.html there is a connection locator with custom label. If I use draw2d.io.json.Writer in this example to create json object, connection_locator is missing.
Is there a possible solution how to add connection locator with label ("I'm a label") with using json out-of-box?

Thanks for reply.

Dear freegroup,

is it possible to restrict the connection to the number of connection or to specific rects?

For Example:

I have three buttons with three different rects.
Button 1= rect1 =draw2d.shape.basic.Rectangle.extend()
Button 2= rect2 =draw2d.shape.basic.Rectangle.extend()
Button 3= rect3 =draw2d.shape.basic.Rectangle.extend()
I want rect1 to drag and drop multiple buttons into the canvas and want to be able to connect every rect1 to every rect2 but not to rect3. Rect2 can connect to only one rect3. Because re number of rect3s should also be restricted to one per canvas.

Please just link me the example if I have missed it.

Thank you for your help.

Hi
First of all, very cool project!
I found a problem while adding some stroke to a connection:

Then i noticed that the same thing happens in the example aswell.

(from the 'connection anchor fan' example but all with stroke show this behavior)
Didn't found the cause so would apprecate it if someone could look for a fix.
Thanks again for creating this project!

When selecting multiple objects and moving them, these objects no longer snap to grid. Is it possible to extend this policy to a group selection?

Hi guys.

found typo in Figure.js:
304: else if (typeof name[key] === "funktion") {

thanks

I cloned the draw2d project and I'm using it with Visual Studio Code.
I would like to know which code editor is recommended?

I also noted that the project uses Mocha as test framework, but I could not find any test files. How do I run the tests?

Dear Freegroup,

I'm trying to develop a application where I'm able to drop buttons from out of a canvas in a canvas and move them around and zoom in the canvas.
For convinience I don't want the size if that canvas to be to large in the beginning.

As I'm new in jquery and naturally also in draw2d for better understanding I'm trying to solve my porblems with the help of your example.

For the canvas I've placed following code:

 <div id="content">
  		<div id="canvas" class="" ></div>
  </div>

My CSS has canvas set on:

#canvas {
	padding: 0px;
	margin: 0px;
	margin-left: 5%;
	width: 70%;
	height:20vw;
	border: 1px solid gray;
	overflow:auto;
	resize: both;
}

As for the application.js, I did not want to use the 'jquery-ui-1.8.16.custom.css' that you have used, as I dont want to split my window. So I've reduced the application,js to this:

var app = {};

app.Application = Class.extend({
	NAME : "app.Application",

	init : function() {
		this.view = new app.View("canvas");
	}
});

As for the View.js its the same as in the example.

Now I'd like to state my problems:

1. I can't resize my canvas as long as the code "this.view = new app.View("canvas");" is activated. But if I deactivate this code then I can't drag and drop the buttons anymore.
   
   As you can see, I have this corner and also the arrows, but when I try to resize the canvas I'm starting a selection inside the canvas .

2. If I try to zoom with 'shift'+'Mouse' than it zooms the content out of the canvas.
   In the picture below you can see that the canvas's size should end where the border is, but when I zoom, they zoom out, like in that picure:

Before zoom:

After zoom:

Hopefully you can help me here as well!

Best regards

Everything works great on a desktop. But most of them doesn't work on touch devices. Like pinch zoom and panning. Is there a way to make them work?

Hi,

when I try to use draw2d inside my React application after installing it via yarn add, it complains that jQuery is missing at the moment i run application.

Steps to reproduce:

1. yarn add jquery
2. yarn add draw2d
3. yarn add jquery-ui

Create component with the following code:

import React, { Component } from "react";
import draw2d from "draw2d";

class Canvas extends Component {
  
  componentDidMount() {
    this.renderCanvas();
  }

  renderCanvas() {
    const canvas = new draw2d.canvas(this.idCanvas);
    canvas.installEditPolicy(
      new draw2d.policy.connection.DragConnectionCreatePolicy({
        createConnection: function() {
          let c = new draw2d.Connection();
          c.setOutlineColor("#00A8F0");
          c.setOutlineStroke(1);
          c.setRadius(5);
          c.setStroke(3);
          c.setRouter(
            new draw2d.layout.connection.ManhattanBridgedConnectionRouter()
          );
          return c;
        }
      })
    );
  }
  render() {
    return (
      <div>
        <div id={this.idCanvas} style={{ height: 1500, width: 1500 }}></div>
      </div>
    );
  }
}
export default Canvas;

And when i tried to run the app, it throws a jQuery error:

Hi
We are trying to find a javascript digram framework for our application. And we find Draw2D touch, it is so great. But we are not clear about the license of Draw2D. In our survey, we find there are two licenses of Draw2D. One is GPL2 license(http://www.draw2d.org/draw2d/community.html), the other is MIT license in GitHub(https://github.com/freegroup/draw2d). And our questions are:
1) why are there two license versions?
2) what's the difference of draw2d under these two licenses? such as: source code, features, document and service.
3) Are both licenses available in reality?
Hope for your reply, thank you very much!

I have a horizontal layout defined with a basic.Image with a bonding box of a rectangle.
The image is a png image.
In Firefox and Opera the image shows correctly but in Chrome (73.0.3683.86 (Official Build) (64-bit)) it does not.

Inspecting the element in chrome shows me that the image path is correct. This is proven by viewing the image tag in the Chrome console and the image there is visible. Also it shows in FireFox and Opera.

This is my code specifying the image:

        this.activityIcon = new draw2d.shape.basic.Image({
            path: '../static/img/tba/activity-script.png',
            width:32,
            height:32,
            minWidth:32,
            minHeight:32,
            boundingBox:new draw2d.geo.Rectangle( 0, 0, 32, 32 ),
            className:'activity-image'
        });

        this.activityBlock = new draw2d.shape.basic.Rectangle({
            bgColor:"#ffffff",
            color:'#'+this.COLOR,
            width:40,
            height:40,
            minWidth:40,
            minHeight:40,
            stroke:1,
            dasharray: ["."]
        });
        this.activityBlock.add(this.activityIcon, new draw2d.layout.locator.CenterLocator());

This is a link to a screen shot detailing the issue in chrome

https://drive.google.com/open?id=1APTY525Ai-NdqxrDlwvpUL5jkNyI1LMM

Hello, I am using draw2d to create an editor inside existing interface. I am creating canvas inside a block with fixed width and height and later canvas can increase in size if more space is needed for diagram. The problem is that when canvas is larger than its container and container is scrolled, selection on canvas is not aligned to cursor anymore. Difference seems to be exactly same as scrolled distance. scrollArea of canvas is set to the container element on which scroll appears. If I am not setting scrollArea then there is no offset on canvas coordinates, but canvas.getScrollTop() is always returning 0, which breaks other things.
I have attached an archive with simple example demonstrating this problem, could you please take a look and tell me what am I doing wrong.
scroll.zip

Hello.

I have been using draw2d for some years now. The recent version I am using was bought from the website draw2d.org. I have version 6.1.52. Now I have been directed to this git repository but the version in the package.json reads 1.0.14.

So have version numbers started over or is this a really old version here on git hub?
If this is a new version are there any breaking changes from 6.1.52 to 1.0.14.

I notice that the dist files are different. Before there were many separate files and now just the one. Can I switch out the libs for the single file? Or will my code just explode after this.

thanks

Say you would like to deselect some items and you call canvas.getSelection().each(), supplying it with a function that will remove the passed item from the selection if it meets some criteria. The result would likely be that some of the items which should have been removed from the selection stay selected.

The reason behind this is the way each() iterates over the elements. It uses a standard for loop, which means that an array index is used, which is incremented at each step. But when the item at the current index (say data[2]) is removed from the list, the next item (data[3]) will replace it (becoming data[2]), as the list is automatically shifted left to fill the gap. On the next cycle the index will increase and the item accessed will be data[3], which is what used to be data[4] and we've missed the original data[3], which can now be found at data[2].

This issue is remedied within the source code by using canvas.getSelection().getAll().each(), which creates a copy of the list and iterates over it. That way even if the order of the list is modified, because the copy stays the same all of the items will be accessed.

There is an exception though - Canvas' function setCurrentSelection() uses an each() without calling getAll() first to deselect all of the currently selected elements. This results in only half of the items being deselected, the rest remaining selected. Because of this, setCurrentSelection() is pretty much unusable and there is no alternative (other than copying the source code) for setting the selection manually.

An obvious solution would be to have each iterate over the result of getAll instead of the original array. Using the built-in data.slice() with no arguments would create a copy just as well.

I'm drawing a tree recursively with connections. it takes about 7 seconds to draw 15 node in chrome. Is the paid version better in performance?

Hi,
setPadding method of Label ect dont extend padding's correctly.
The reason is "extend" function in "extend(this.padding, padding);" not extend the first argument as $.extend do.
Solution is "this.padding = extend(this.padding, padding);"

Whenever a connection that uses one of the pathfinding routers (Maze or Sketch) touches the edge of the canvas, the pathfinding logic is unable to handle the situation, resulting in a long stream of exceptions that eventually leads to bad state in the rest of the library.

The workaround I am using in my project right now is to apply a RegionEditPolicy to all of my draggable elements that prevents them from reaching the very edge. However, this should not be needed.

To reproduce, visit https://freegroup.github.io/draw2d/connection_router/index.html, select the Maze/Sketch connection router, and drag the square with two ports on the top along the top of the canvas. In the developer console, a lot of exceptions will be printed out and eventually the library seems to get into a bad state.

Hello, and thank you for this wonderful library! Following the instructions in README.md;
I clone the repository and run npm install and yarn dev only to find that yarn gets stuck on 95%.

Have you ever seen this type of behavior before?

Do you need any more screenshots or logs?

I'm using yarn v1.19 (stable) on Powershell 2 in Windows 10.

Hey!

I want to use draw2d with an angular application, is there anyway to bind eq. the ports, position of elements, etc?

Maybe you could provide an example?

Thanks,
Patrik

Hi, I'm so glad that this project is still alive. and I want to migrate to this new version, but when I use npm i draw2d to install the lib, there is no dist folder, and I can not run any demos.

So I change to node_modules/draw2d folder, and install everything with npm i, then npm build gives a lot of errors.

old documentation at http://www.draw2d.org/draw2d_touch/jsdoc_6/#!/ mentioned nothing about how to use.

so please add some more documentation.

Dear Andreas, guys.
First of all, really appreciate you decision to give MIT license to this project!!!

here is issue:
if i create canvas this way:
canvas = new draw2d.Canvas("canvas", 2000,2000);
canvas.setScrollArea("#canvas");

it became impossible to move shapes outside initial viewport, however canvas is 2000x2000 by rights.
you can see this behaviour in "composite group" example.

thanks
Alex

Where's the docs?

I noticed that draw2d uses jQuery throughout its code yet doesn't declare it as a dependency in the package.json. All the examples load jQuery though the use of a script tag in the head of the document. What is the reason for not packaging jQuery with draw2d?

here is the code;

var canvas = new draw2d.Canvas("gfx_holder");
var figure1 = new draw2d.shape.basic.Oval({
	onDragEnter : function(a) {
		console.info("1-1");
	},
	onClick : function(e) {
		console.info("1-2");
	}
});
var figure2 = new draw2d.shape.basic.Rectangle({
	onDragEnter : function(a) {
		console.info("2-1");
	},
	onClick : function(e) {
		console.info("2-2");
	}
});
canvas.add(figure1, 100, 100);
canvas.add(figure2, 400, 100);	

when opened in browser,mouse click or drag over both can not be executed.

is there any wrong with my code?? or other reasons;

please help, thanks;

Hi,

I'd like to make a single rect zoomable so that only the rect, but not the whole svg/canvas zooms.

I dont want to zoom all the rects, only the one I have focus on.

Is that possible? If yes, can you tell me how? (or do you have an exercise?)

Thanks!

Hi, found a few problems with zoom policy:

Hi,

I found info that 5.1.1 version includes boilerplate example for angularjs application, but I can't find it in actual verison of Draw2d.
Is it possible to use latest Draw2d Touch in angularjs app and where can I find some examples?

Thanks in advance
Tom

When setting attributes like bgColor, cssClass, stroke, etc. on a draw2d.shape.basic.Arc, they are applied to the containing rect instead of the path. So if I define an arc with bgColor = "#000000", instead of a black arc I get an arc with the default background color, inside of a black rectangle. There seems to be no way to control the attributes of the svg path, only the rect.

Create a not resizable figure

let node = new draw2d.shape.basic.Rectangle({
    width: 60,
    height: 60,
    resizeable: false,
  });

Figure's UI is changed to indicate it is not resizable but actually we can still resize it (with mouse). Add selectable: false will hide selection box then we can temporarily disable resizing :)

Hi.
First I'd like to thank you for your great work.
Your library is the best IMO from functional POV.

I hit however wall with loading drawing via json/Reader.js
It takes 30 sec to load a meaningfully complicated drawing.

Profiler complains about node.getBBox() forcing reflow.

I profiled it in Chrome and 99% most of the time is spent in canvas.add (line 105 in json/Reader.js in my version - 101)

I tried throwing fastdom.mutate/measure around and around whole unmarshal method to now avail.

So I come here begging for help :)

Cheers
Nick

Dear freegroup,

is it possible to restrict connections?

For example, a connection should be able between two rects and two diamonds, but not between a rect and a diamond.

Maybe I've missed the example?

Best regards

Information

I am using draw2d with npm at the moment (was a bit tricky) and altered/fixed much in the source code to make it fit right to my requirements. So I am curious if it could be usefull in my case to switch to this version of draw2d in the future.

Question

Has draw2d just made compatible with npm/yarn or will it get more updates/fixes in the future?

Im using the shape_db example, and i created some Shapes from a json.

They all have x and y set to 0.

Is there some autospace-function to spread out the Shapes over the canvas?

Thanks!

Hi @freegroup . I have to say that draw2d is the best js library to draw flow chart I ever met. Thank you very much for your great work 👍

Additionally, I wonder where is the detailed tutorials or API docs ?

Windows system, the selected Figure,
when the I pressed 'delete' key will remove the Figure, but I did not listen to this event.
How can I avoid it?

is there any plan to make rotate feature?

Hi,

can anyone point me in the right direction to integrate draw2d into an esisting VueJS application?

Thanks in advance
Roberto

The setColor method in draw2d.decoration.connection.ArrowDecorator doesn't work at all. The stroke color is taken from the line color of the connection.

The issue is in draw2.Connection.repaint method

	    if(this.sourceDecoratorNode!==null){
	    	var start = this.getVertices().first();
	  	    this.sourceDecoratorNode.transform("r"+this.getStartAngle()+"," + start.x + "," + start.y +" t" + start.x + "," + start.y);
	  	    // propagate the color and the opacity to the decoration as well
	  	    this.sourceDecoratorNode.attr({"stroke":"#"+this.lineColor.hex(), opacity:this.alpha});
            this.sourceDecoratorNode.forEach(function(shape){
                shape.node.setAttribute("class",_this.cssClass!==null?_this.cssClass:"");
            });
	    }
	    
        if(this.targetDecoratorNode!==null){
	    	var end = this.getVertices().last();
            this.targetDecoratorNode.transform("r"+this.getEndAngle()+"," + end.x + "," + end.y+" t" + end.x + "," + end.y);
            this.targetDecoratorNode.attr({"stroke":"#"+this.lineColor.hex(), opacity:this.alpha});
            this.targetDecoratorNode.forEach(function(shape){
                shape.node.setAttribute("class",_this.cssClass!==null?_this.cssClass:"");
            });
        }

this.targetDecoratorNode.attr and this.sourceDecoratorNode.attr set the 'stroke' attribute with the lineColor instead

Dears.

this issue is related to issue #7 opened by me previously.
problem is: in cases when canvas is instantiated by calling
canvas = new draw2d.Canvas("canvas", 4000, 4000) - without directly mentioning css {width: 4000px; height: 4000px} in container;
will cause figures not be able to be moved outside initial area (viewport) of the container.

this behaviour is caused by line 121 of Canvas.js:

// installed to all added figures to avoid that a figure can be placed outside the canvas area
// during a drag&drop operation
this.regionDragDropConstraint = new draw2d.policy.figure.RegionEditPolicy(0, 0, this.getWidth(), this.getHeight())

where this.getWidth() and this.getHeight() will return initial viewport dimensions.

change this to:

   this.regionDragDropConstraint = new draw2d.policy.figure.RegionEditPolicy(0, 0, this.initialWidth, this.initialWidth)

will do proper job, if you agree.

thanks
Alex

We would like to use draw2d in one of our projects but we would like to be sure we are allowed to. Do you plan to pick a license for the project?

Hi,

when I try to use draw2d inside my Angular application after installing it via npm, it complains that jQuery is missing.

Steps to reproduce:

1. npm install jquery
2. npm install draw2d
3. create component with the following code:

import {Component, OnInit} from '@angular/core';
import draw2d from 'draw2d';

@Component({
    selector: 'app-canvas',
    templateUrl: './canvas.component.html',
    styleUrls: ['./canvas.component.css']
})
export class CanvasComponent implements OnInit {

    ngOnInit() {
        const canvas = new draw2d.Canvas('canvas');
        const test = new draw2d.shape.basic.Circle({x: 40, y: 10, stroke: 3, color: '#3d3d3d', bgColor: '#3dff3d'});
        canvas.add(test);
    }
}

Compilation succeeds without a problem, however when accessing the page with chrome, I get the following error:

draw2d.js:28593 Uncaught ReferenceError: jQuery is not defined
    at Object../src/lib/jquery.contextmenu.js (draw2d.js:28593)
    at __webpack_require__ (draw2d.js:30)
    at Object../src/policy/line/OrthogonalSelectionFeedbackPolicy.js (draw2d.js:37081)
    at __webpack_require__ (draw2d.js:30)
    at Object../src/index.js (draw2d.js:20140)
    at __webpack_require__ (draw2d.js:30)
    at draw2d.js:94
    at draw2d.js:97
    at webpackUniversalModuleDefinition (draw2d.js:3)
    at Object../node_modules/draw2d/dist/draw2d.js (draw2d.js:10)

There is an issue with connectiondrop

your example

If you create more then one 'BetweenFigure' and drop it in the right connection, than more often than not the connection will be connected wrong.
The connection connects the input port with an input port and an output port with an output port.

The same happens when the connection sting is smaller than the object of the BetweenFigure.

I'm not sure where to fix this. Please help :)

Hello freegroup,

I've read that every rect should have its own uinque id.
But how (where) can I get or set this id?

I've tried setting this id here:

 init: function (attr, setter, getter) {
    this._super(extend({
      bgColor: this.DEFAULT_COLOR,
      color: this.DEFAULT_COLOR.darker(),
      width: 50,
      height: 50,
      id="thisIsMyID"
    }, attr), setter, getter)
    this.createPort("output")
    this.installEditPolicy(new draw2d.policy.figure.RectangleSelectionFeedbackPolicy())
  },

Or also here

onDrop : function(dropTarget, x, y, shiftKey, ctrlKey) {
	    if(dropTarget instanceof draw2d.Connection){
	    	dropTarget.setId("thisIsMyID");
		}
	}

But it does not seem to work

when I try to get the ID I only see this:

I had developed a drag and drop exercise only with jquery and it was quite easy to change the id dynamically:

$(".droppable").droppable({
		drop : function(event, ui) {
			droppable = true;
			if (original) {
				ui.helper.removeClass('ui-draggable-dragging');
				var newDiv = $(ui.helper).clone();
				newDiv.draggable({
					stop : function(event, ui) {
						if (!droppable)
							ui.helper.remove();
					},
					start : function(event, ui) {
						droppable = false;
					}
				});
				$(this).append(newDiv);
				let newIDNumber=$("#droppable")[0].childElementCount; 
				let oldIDName=$(ui.helper).context.id;
				newDiv.attr("onkeydown","removeDragable(this)"); 
				//SetID
newDiv.attr("id",oldIDName+newIDNumber);$('#'+oldIDName+newIDNumber).draggable();
				newDiv.attr("onkeydown","removeDragable(this)");
			} else
				$(this).append(ui.helper);
		}
	});

Therefore I'm really confused that nothing works what I try.

Guys.

here is small issue

due to strict mode in compiled library
// "./src/util/JSONUtil.js":
/!!
! ./src/util/JSONUtil.js !
**/
/! no static exports found /
// (function(module, exports, webpack_require) {

"use strict";
...

this is not working without declaration (for (key in obj1) {...):

/**
   * @method
   * calculates the diff between the given json objects
   *
   */
  diff: function diff(obj1, obj2) {
    var result = {};
    for (key in obj1) {
      var v1 = obj1[key];
      var v2 = obj2[key];
      if (v1 !== v2) {
        if (v1.equals) {
          if (!v1.equals(v2)) {
            result[key] = obj1[key];
          }
        } else {
          result[key] = obj1[key];
        }
      }
    }
    return result;
  },

ReferenceError: key is not defined

thanks
Alex

Dear freegroup

I need to set specific ID's to the rects, how else would i know to data I want for that specific rect.

How can I do that?