<!--
 Copyright (C) 2019 Toshiba Corporation
 SPDX-License-Identifier: Apache-2.0
-->

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Connector</title>
	<style>
	html, body {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		background-color: #eeeeee;
	}
	</style>
</head>
<body>
	<script src="../../js/pixi/5.2.5/pixi.min.js"></script>
	<script src="../../js/wcardinal-ui/0.148.0/wcardinal-ui.min.js"></script>
	<script src="../../js/wcardinal-ui/0.148.0/wcardinal-ui-theme-white.min.js"></script>
	<script>
	(function(){
		"use strict";

		var application = new wcardinal.ui.DApplication();

		var diagram = new wcardinal.ui.DDiagramEditor({
			parent: application.stage,
			x: 0, y: 0,
			width: "100%", height: "100%",
			on: {
				ready: function() {
					var circleA = diagram.layer.children[0];
					var update = function () {
						var t = (Date.now()) / 3000 * Math.PI;
						circleA.transform.position.y = 250 + 100 * Math.cos(t);
						application.update();
						setTimeout(update, 16);
					};
					update();
				}
			}
		});

		fetch( "../../resource/diagram/connector.json" ).then(function( response ) {
			response.json().then(function( json ) {
				diagram.set( json );
				diagram.view.fit();
			});
		});
	}());
	</script>
</body>
</html>

{'avg_line_length': 23.262295081967213, 'max_line_length': 86, 'alphanum_fraction': 0.6088794926004228, 'licenses': ['Apache-2.0'], 'repository_name': 'winter-cardinal/winter-cardinal-ui', 'path': 'docs/sample/white/diagram/connector.html', 'size': 1419, 'lang': 'HTML'}