javascript/samples/javascript.controls/CaseZoomWithCSSScaleTransform.html at master · wangscript007/javascript

69 lines (61 loc) · 1.9 KB

﻿<!DOCTYPE html> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Zoom using CSS Scale Transform</title>
	<script type="text/javascript" src="../../primitives.js"></script>
	<link href="../../css/primitives.css" media="screen" rel="stylesheet" type="text/css" />
	<script type="text/javascript">
		var control;
		document.addEventListener('DOMContentLoaded', function () {
			var options = new primitives.OrgConfig();
			var items = [
				new primitives.OrgItemConfig({
					id: 0,
					parent: null,
					title: "Title 0",
					description: "Description",
					image: "../images/photos/a.png"
			var id = 1;
			for (var index = 0; index < 2; index++) {
				items.push(new primitives.OrgItemConfig({
					id: ++id,
					parent: 0,
					title: id.toString() + " Title",
					description: id.toString() + " Description",
					image: "../images/photos/c.png"
				var parent = id;
				for (var index2 = 0; index2 < 2; index2++) {
					items.push(new primitives.OrgItemConfig({
						id: ++id,
						parent: parent,
						title: id.toString() + " Title",
						description: id.toString() + " Description",
						image: "../images/photos/c.png"
			options.pageFitMode = primitives.PageFitMode.None;
			options.items = items;
			options.cursorItem = 0;
			options.hasSelectorCheckbox = primitives.Enabled.True;
			control = primitives.OrgDiagram(document.getElementById("basicdiagram"), options);
		function onScale(scale) {
			if (scale != null) {
				control.setOption("scale", scale);
			control.update(primitives.UpdateMode.Refresh);
	<button onclick="onScale(0.5)">50%</button>
	<button onclick="onScale(1)">100%</button>
	<button onclick="onScale(1.5)">150%</button>
	<div id="basicdiagram" style="width: 640px; height: 480px; overflow: hidden; border-style: dotted; border-width: 1px;"></div>

FilesExpand file tree

CaseZoomWithCSSScaleTransform.html

Latest commit

History

CaseZoomWithCSSScaleTransform.html

File metadata and controls