yiskang/SimpleAggreatedView-diff.html

## SimpleAggreatedView-diff.html
<!DOCTYPE html>
<html>

<head>
    <title>Multiple 3D Viewer - Autodesk Forge AggregatedView</title>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">

    <!-- The Viewer CSS -->
    <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css"
        type="text/css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #viewer {
            width: 100%;
            height: 100%;
            margin: 0;
            background-color: #F0F8FF;
        }
    </style>
</head>

<body>
    <div id="viewer"></div>

    <!-- The Viewer JS -->
    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>

    <!-- Developer JS -->
    <script>
        function fetchForgeToken(callback) {
            fetch('http://localhost:8090/api/oauth/token', {
                method: 'get',
                headers: new Headers({ 'Content-Type': 'application/json' })
            })
                .then((response) => {
                    if (response.status === 200) {
                        return response.json();
                    } else {
                        return Promise.reject(
                            new Error(`Failed to fetch token from server (status: ${response.status}, message: ${response.statusText})`)
                        );
                    }
                })
                .then((data) => {
                    if (!data) return Promise.reject(new Error('Empty token response'));

                    callback(data.access_token, data.expires_in);
                })
                .catch((error) => console.error(error));
        }

        function launchViewer(models) {
            if (!models || models.length <= 0)
                return console.error('Empty model input');

            const options = {
                env: 'AutodeskProduction2',
                api: 'streamingV2',
                getAccessToken: fetchForgeToken
            };

            const options3d = {
                viewerConfig: {
                    disableBimWalkInfoIcon: true
                }
            };

            function loadManifest(documentId) {
                return new Promise((resolve, reject) => {
                    const onDocumentLoadSuccess = (doc) => {
                        doc.downloadAecModelData(() => resolve(doc));
                    };
                    Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, reject);
                });
            }

            Autodesk.Viewing.Initializer(options, function () {
                //get the viewer div
                const viewerDiv = document.getElementById('viewer');

                //initialize the viewer object
                const view = new Autodesk.Viewing.AggregatedView();
                view.init(viewerDiv, options3d);
                view.diff.progressCallback = (percent, message) => console.log(percent, message);
                view.diff.onInitialized = () => {
                    let diffExt = view.viewer.getExtension('Autodesk.DiffTool');
                    if (!diffExt.changesPanel)
                        return;

                    let diffFacetBtns = document.querySelectorAll('.diffFacetOperations input[type="checkbox"]');

                    diffFacetBtns.forEach(btn => btn.addEventListener('change', event => {
                        let computedDiff = diffExt.computedDiffs[0];
                        let diffResults = {
                            added: computedDiff.added.concat(),
                            modified: computedDiff.matched.concat(),
                            removed: computedDiff.removed.concat()
                        }

                        for (let i = 0; i < diffFacetBtns.length; i++) {
                            let btn = diffFacetBtns[i];
                            if (!btn.checked) {
                                // console.log( `${btn.id} unchecked` );
                                if (btn.id.includes('Added'))
                                    diffResults.added.length = 0;

                                if (btn.id.includes('Modified'))
                                    diffResults.removed.length = 0;

                                if (btn.id.includes('Removed'))
                                    diffResults.modified.length = 0;
                            }
                        }

                        console.log(diffResults);
                    }));
                }

                window.view = view;

                const viewer = view.viewer;

                const tasks = [];
                models.forEach(md => tasks.push(loadManifest(md.urn)));


                Promise.all(tasks)
                    .then(docs => Promise.resolve(docs.map(doc => {
                        // const bubbles = doc.getRoot().search({ type: 'geometry', role: '3d' });
                        // const bubble = bubbles[0];
                        // if (!bubble) return null;

                        return doc.getRoot().getDefaultGeometry();
                    })))
                    .then(bubbles => {
                        let diffConfig = null;
                        diffConfig = {
                            primaryBubbles: [bubbles[0]],
                            diffBubbles: [bubbles[1]],
                            // supportBubbles: {
                            //     diff: bubbles[1],
                            //     primary: bubbles[0]
                            // }
                        };
                        view.setNodes(bubbles, diffConfig)
                    });
            });
        }

        const models = [
            { name: 'v1.rvt', urn: 'urn:dXJuO..0x' },
            { name: 'v2.rvt', urn: 'urn:dXJuO..0x' }
        ];

        launchViewer(models.concat());
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Multiple 3D Viewer - Autodesk Forge AggregatedView</title>
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8">

	<!-- The Viewer CSS -->
	<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css"
	type="text/css">
	<style>
	* {
	margin: 0;
	padding: 0;
	}

	#viewer {
	width: 100%;
	height: 100%;
	margin: 0;
	background-color: #F0F8FF;
	}
	</style>
	</head>

	<body>
	<div id="viewer"></div>

	<!-- The Viewer JS -->
	<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>

	<!-- Developer JS -->
	<script>
	function fetchForgeToken(callback) {
	fetch('http://localhost:8090/api/oauth/token', {
	method: 'get',
	headers: new Headers({ 'Content-Type': 'application/json' })
	})
	.then((response) => {
	if (response.status === 200) {
	return response.json();
	} else {
	return Promise.reject(
	new Error(`Failed to fetch token from server (status: ${response.status}, message: ${response.statusText})`)
	);
	}
	})
	.then((data) => {
	if (!data) return Promise.reject(new Error('Empty token response'));

	callback(data.access_token, data.expires_in);
	})
	.catch((error) => console.error(error));
	}

	function launchViewer(models) {
	if (!models \|\| models.length <= 0)
	return console.error('Empty model input');

	const options = {
	env: 'AutodeskProduction2',
	api: 'streamingV2',
	getAccessToken: fetchForgeToken
	};

	const options3d = {
	viewerConfig: {
	disableBimWalkInfoIcon: true
	}
	};

	function loadManifest(documentId) {
	return new Promise((resolve, reject) => {
	const onDocumentLoadSuccess = (doc) => {
	doc.downloadAecModelData(() => resolve(doc));
	};
	Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, reject);
	});
	}

	Autodesk.Viewing.Initializer(options, function () {
	//get the viewer div
	const viewerDiv = document.getElementById('viewer');

	//initialize the viewer object
	const view = new Autodesk.Viewing.AggregatedView();
	view.init(viewerDiv, options3d);
	view.diff.progressCallback = (percent, message) => console.log(percent, message);
	view.diff.onInitialized = () => {
	let diffExt = view.viewer.getExtension('Autodesk.DiffTool');
	if (!diffExt.changesPanel)
	return;

	let diffFacetBtns = document.querySelectorAll('.diffFacetOperations input[type="checkbox"]');

	diffFacetBtns.forEach(btn => btn.addEventListener('change', event => {
	let computedDiff = diffExt.computedDiffs[0];
	let diffResults = {
	added: computedDiff.added.concat(),
	modified: computedDiff.matched.concat(),
	removed: computedDiff.removed.concat()
	}

	for (let i = 0; i < diffFacetBtns.length; i++) {
	let btn = diffFacetBtns[i];
	if (!btn.checked) {
	// console.log( `${btn.id} unchecked` );
	if (btn.id.includes('Added'))
	diffResults.added.length = 0;

	if (btn.id.includes('Modified'))
	diffResults.removed.length = 0;

	if (btn.id.includes('Removed'))
	diffResults.modified.length = 0;
	}
	}

	console.log(diffResults);
	}));
	}

	window.view = view;

	const viewer = view.viewer;

	const tasks = [];
	models.forEach(md => tasks.push(loadManifest(md.urn)));


	Promise.all(tasks)
	.then(docs => Promise.resolve(docs.map(doc => {
	// const bubbles = doc.getRoot().search({ type: 'geometry', role: '3d' });
	// const bubble = bubbles[0];
	// if (!bubble) return null;

	return doc.getRoot().getDefaultGeometry();
	})))
	.then(bubbles => {
	let diffConfig = null;
	diffConfig = {
	primaryBubbles: [bubbles[0]],
	diffBubbles: [bubbles[1]],
	// supportBubbles: {
	// diff: bubbles[1],
	// primary: bubbles[0]
	// }
	};
	view.setNodes(bubbles, diffConfig)
	});
	});
	}

	const models = [
	{ name: 'v1.rvt', urn: 'urn:dXJuO..0x' },
	{ name: 'v2.rvt', urn: 'urn:dXJuO..0x' }
	];

	launchViewer(models.concat());
	</script>
	</body>

	</html>