Draw2d文本类型未在ui-bootstrap手风琴angularjs应用中正确显示

Question

I am trying to use draw2d javascript library inside an ui-bootstrap-tpls accordion inside an angularjs application. 我正在尝试在angularjs应用程序内的ui-bootstrap-tpls手风琴内使用draw2d javascript库。

A simple example: (I would build a plunker, but I am unable to include the required libraries. In this example, draw2d-canvas is implemented as an angularjs directive. 一个简单的示例：（我将构建一个插件，但无法包含所需的库。在此示例中， draw2d-canvas被实现为angularjs指令。

index.html: index.html：

<body id="myBody" ng-controller="MyDrawCtlr">
<div class="col-xs-12 panel panel-default row">
    <div id="canvas1" draw2d-canvas></div>
        <uib-accordion close-others="true" class="col-xs-8">
           <uib-accordion-group heading="The Chart" is-open="true">
               <div id="canvas2" draw2d-canvas></div>
           </uib-accordion-group>
        </uib-accordion>
    </div>
</body>

app.js: (Taken from the angularjs template delivered as part of the draw2d package) app.js ：（取自作为draw2d软件包一部分提供的angularjs模板）

var app = angular.module('test2dApp', ['draw2d', 'ui.bootstrap']);

app.controller('MyDrawCtlr', function ($scope) {
    $scope.jsonDocument1 =
        [
            {
                "type": "draw2d.shape.basic.Rectangle",
                "id": "rec1",
                "x": 50,
                "y": 100,
                "width": 201,
                "height": 82,
                "radius": 5,
                "resizeable": true,
                "selectable": true
            },
            {
                "type": "draw2d.shape.basic.Label",
                "text": "This is a label.",
                "id": "myLabel1",
                "x": 50,
                "y": 50,
                "minWidth": 100,
                "fontSize": 30,
                "padding": 200,
                "resizeable": true,
                "selectable": true,
                "cssClass": "draw2d_shape_basic_Label"
            }
        ];
});

var d2 = angular.module('draw2d', []);

d2.directive("draw2dCanvas", ["$window", "$parse", "$timeout", function ($window, $parse, $timeout) {
    return {
        restrict: 'E,A',
        link: function (scope, element, attrs, controller) {
            scope.editor = $.extend(true, {
                canvas: {
                    width: 1000,
                    height: 1000
                },
                palette: {
                    figures: []
                },
                selection: {
                    className: null,
                    figure: null,
                    attr: null
                }
            }, scope.editor);
            var canvas = new draw2d.Canvas(element.attr("id"), scope.editor.canvas.width, scope.editor.canvas.height);
            canvas.setScrollArea("#" + element.attr("id"));
            canvas.onDrop = $.proxy(scope.editor.canvas.onDrop, canvas);

            var reader = new draw2d.io.json.Reader();
            reader.unmarshal(canvas, scope.jsonDocument1);
        }
    };
}]);

Here is a graphic showing the result: The top graphic is the expected result. 这是显示结果的图形：顶部图形是预期结果。 Notice that the box around the text is incorrectly sized and in the wrong place. 请注意，文本周围的框的大小和位置不正确。

In addition to the formatting issues (text not correctly located and the box not sized correctly), the label cannot be selected and moved like the same label outside the accordion. 除了格式问题（文本位置不正确，框尺寸不正确）之外，还无法像在风琴外一样选择和移动标签一样选择和移动标签。

I am guessing that the draw2d library and the ui-bootstrap-tpls for the according (and perhaps other templates) conflict in someway either in attribute naming and/or css. 我猜想，相应的（也许还有其他模板）的draw2d库和ui-bootstrap-tpls在属性命名和/或css中以某种方式发生冲突。

Thank you for your help. 谢谢您的帮助。

Answer 1

After much searching, it seems that the issue revolves around SVG's function getBBox (Get Bound Box). 经过大量搜索之后，问题似乎与SVG的功能getBBox （获取绑定框）有关。 The object is being created to fast. 正在快速创建对象。 Thus an injection of a short timeout, in this case 20ms, did the trick. 因此，注入一个短超时（在这种情况下为20ms）就可以解决问题。

Changing 改变中

reader.unmarshal(canvas, scope.jsonDocument1);

to 至

setTimeout(function(){reader.unmarshal(canvas, scope.jsonDocument1);}, 0 );

did the trick. 做到了。

WELL ---- WRONG (Or not completely right) 好吧----错误（或者不完全正确）

After getting some sleep, it turns out the setTimeout (or the angularjs $timeout ) function only 'fixes' this issue IF is-open="true" is set on the accordion. 得到一些睡眠后，原来的setTimeout （或angularjs $timeout ）函数只“修正”这个问题，如果 is-open="true"被设置在手风琴。 If not set or if it is on another accordion, then the fix fails. 如果未设置或在其他手风琴上，则修复失败。

It seems that the Accordion must be open AND the timeout used for the text label to be correctly rendered. 似乎手风琴必须打开，并且用于正确显示文本标签的超时。

More research to come....... 将会有更多的研究......

Well the answer (from the Draw2d Developer http://www.draw2d.org/draw2d/ ) is that getBBox will not function correctly on a text element until the element is in the DOM and visible. 很好的答案（来自Draw2d Developer http://www.draw2d.org/draw2d/ ）是，直到文本元素在DOM中并且可见， getBBox才能在文本元素上正常运行。

So I added the modified the <uib-accoridion-group> header to: 因此，我将修改后的<uib-accoridion-group>标头添加到：

<uib-accordion-group heading="The Chart" 
    ng-init="status = {isOpen: false}" is-open="status.isOpen">

I also added an ng-if to the inner div creating the graphic. 我还向内部div添加了ng-if来创建图形。 This causes the DOM to create the div when the accordion is opened. 这会导致在打开手风琴时DOM创建div。

<div ng-if="status.isOpen" id="canvas2" draw2d-canvas></div>

Like magic. 像魔术。

Draw2d文本类型未在ui-bootstrap手风琴angularjs应用中正确显示

问题描述

1 个解决方案

解决方案1
1 2016-03-23 22:44:12

Draw2d文本类型未在ui-bootstrap手风琴angularjs应用中正确显示

问题描述

1 个解决方案

解决方案1 1 2016-03-23 22:44:12

解决方案1
1 2016-03-23 22:44:12