0
draw2d javacriptライブラリをangularjsアコーディオン内のui-bootstrap-tplsアコーディオン内で使用しようとしています。ui-bootstrapアコーディオンanglejsアプリケーションでDraw2dテキストタイプが正しく表示されない
簡単な例：。。（私はplunkerを構築するだろうが、私は必要なライブラリを含めることができません。この例では、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);
}
};
}]);
ここでは結果を示すグラフである：上部graphicは期待される結果です。テキストの周りのボックスが間違ったサイズと間違った場所にあることを確認します。フォーマットの問題（テキストが正しく配置しないと、ボックスが正しく大きさではない）に加えて
、ラベルを選択し、アコーディオン外部同じラベルのように移動させることができません。
私は推測していると、おそらく他のテンプレートのdraw2dライブラリとui-bootstrap-tplsが、属性の名前付けやcssのいずれかで衝突していると思います。
ありがとうございました。
ブートストラップモーダルで同じ問題がありましたら、$（ '＃modal-container'）の中に描画コードを追加してください。 – Santiago