0

アプリケーション内のアコーディオン内でdraw2dJavaScript ライブラリを使用しようとしています。ui-bootstrap-tplsangularjs

簡単な例: (プランカーを作成しますが、必要なライブラリを含めることができません。この例でdraw2d-canvasは、angularjs ディレクティブとして実装されています。

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: (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);
        }
    };
}]);

結果を示す図を次に示します。 上の図は予想される結果です。テキストの周りのボックスのサイズと位置が正しくないことに注意してください。

ここに画像の説明を入力

フォーマットの問題 (テキストが正しく配置されておらず、ボックスのサイズが正しくない) に加えて、ラベルを選択して、アコーディオンの外側の同じラベルのように移動することができません。

draw2d ライブラリとそれに応じた (およびおそらく他のテンプレート) の ui-bootstrap-tpls は、属性の命名および/または css で何らかの形で競合していると推測しています。

ご協力ありがとうございました。

4

1 に答える 1