Configure Webpack dev server for standalone JS development.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>iconolab-bundle</title>
<link rel="stylesheet" href="/static/iconolab/css/iconolab.css">
<style>
body {
margin-top: 40px;
}
</style>
</head>
<body>
<div class="container">
<div id="drawing-zone" class="row">
<div v-show='!formView' style="display:none" class="editor-wrapper col-md-12">
<div class="col-md-12 no-padding">
<p @click="cancel" class="pull-right btn btn-default btn-sm"><i class="fa fa-close"></i> Annuler</p>
</div>
<div class='col-md-2'>
<ul class="form-drawing-wrapper list-inline">
<p class='form-drawing pullright'><strong>Type de dessin</strong></p>
<li @click="setDrawingMode('RECT')" v-bind:class="{ 'selected': isRect }" class='pull-md-right drawingModeBtn'>Rect.</li>
<li @click="setDrawingMode('FREE')" v-bind:class="{ 'selected': !isRect }" class='pull-md-right drawingModeBtn'>Libre</li>
</ul>
<zoomview ref="zoomview" :image-url="'img/small-image.jpg'" :image-width="100" :image-height="100">
</zoomview>
<ul class='form-drawing-wrapper list-inline'>
<p class='form-drawing pullright'><strong>Actions</strong></p>
<li @click="clear" class='pull-md-right drawingModeBtn'><i class='fa fa-trash'></i> Effacer</li>
<li id="confirm-fragment-button" @click="showForm" class='pull-md-right drawingModeBtn infos info'><i class='fa fa-plus'></i> Valider</li>
</ul>
</div>
<div class="col-md-10">
<div ref="image" id="iconolab-image-wrapper">
<svg class="cut-canvas" width="850" height="850">
<image class="main-image" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/main-image.jpg" x="0" y="0"
width="6208" height="4688"></image>
<path class="image-path" d=""></path>
</svg>
</div>
</div>
</div>
<div v-show="formView" class="col-md-12">
<div class="col-md-6">
<div class="small-image-wrapper" style="position: relative">
<svg ref="smallSvgWrapper" width="477" height="360" version="1.1">
<image ref="smallImage" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/image.jpg" x="0" y="0" width="477" height="360"></image>
<defs>
<mask id="smallImage">
<rect x="0" y="0" width="477" height="360" fill="white"/>
<g v-bind:transform="transformMatrix">
<path ref="currentPath" v-bind:d="fragmentPath"></path>
</g>
</mask>
</defs>
<g v-show="!displayMask" v-bind:transform="transformMatrix">
<path v-bind:d="fragmentPath" opacity="0.7" fill="orange"></path>
</g>
<rect v-show="displayMask" ref="smallMask" x="0" y="0" mask="url(#smallImage)" opacity="0.7" fill="white" width="477" height="360"></rect>
</svg>
<svg style="display:none" ref="zoomSvg" width="477" height="360" version="1.1">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/image.jpg" x="0" y="0" preserveAspectRatio="none" width="477" height="360"></image>
<g v-bind:transform="transformMatrix">
<path v-bind:d="fragmentPath" opacity="0.7" fill="orange"></path>
</g>
</svg>
</div>
<ul class="list-inline list-unstyled">
<li @click="showEditor" class="showPointer btn btn-default btn-sm"> <i class='fa fa-edit'></i> Sélectionner le détail</li>
<li v-show="!displayMask" @click="highLightZone" class="showPointer show-zone btn btn-default btn-sm"> <i class='fa fa-eye-slash'></i> Afficher la zone</li>
<li v-show="displayMask" @click="highLightZone" class="showPointer hide-zone btn btn-default btn-sm"> <i class='fa fa-eye-slash'></i> Masquer la zone</li>
<li class="zoom-link btn btn-default btn-sm" v-if="canZoom" @click="zoom('in')"><i class="fa fa-zoom-in"></i>Zoomer</li>
<li class="zoom-link btn btn-default btn-sm" v-if="!canZoom" @click="zoom('out')"><i class="fa fa-zoom-out"></i>Dezoomer</li>
</ul>
</div>
</div>
</div>
</div>
<script src="/static/iconolab/js/iconolab.js"></script>
<script>
iconolab.Cutout.init();
</script>
</body>
</html>