cut view
The following example demonstrates how to draw the cut view and how to get the roll cut list
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>about the cut view</title>
<script src="https://diagram.measuresquare.com/scripts/m2diag.js"></script>
</head>
<body>
<div style="text-align:center;margin-top:20px;">
<div id="canvas" style="width:750px;height:450px;border:1px solid #333;"></div>
</div>
<div id='cut-view' style="width:750px;height:150px;border:1px solid #333;margin-top:2px;"></div>
<button type="button" onclick="printInfo();">Click to print the roll cut info</button>
<div id='info'></div>
<script src="https://diagram.measuresquare.com/scripts/m2diag.js"></script>
<script>
let prodId = '';
let options = {
apiKey: 'YOUR_PUBLISHABLE_API_KEY',
eventState: {
onSelectShape: function (event, shape, point) {
if (shape) {
let prod = diag.products.find((p) => p.id == shape.surfaceProd);
if (prod && prod.isRoll) {
prodId = prod.id;
cutCtx.draw(prodId); // draw the cut view
} else {
cutCtx.clearup();
}
}
}
}
};
let diag = new m2Diag.Engine('canvas', options);
let projectId = 'YOUR_PROJECT_ID';
diag.loadCloudData(projectId);
let cutCtx = diag.getCutContext('cut-view');
let info = document.getElementById('info');
function printInfo(){
let infoList = cutCtx.getRollCutList(prodId); // get the roll cut list
info.innerText = JSON.stringify(infoList);
}
</script>
</body>
</html>
Click one room with carpet product to see the cut view