1 <!DOCTYPE html> |
1 <!DOCTYPE html> |
2 <html lang="en"> |
2 <html lang="en"> |
3 <head> |
3 <head> |
4 <meta charset="utf-8"> |
4 <meta charset="utf-8"> |
5 <title>iconolab-bundle</title> |
5 <title>iconolab-bundle</title> |
|
6 <link rel="stylesheet" href="/static/iconolab/css/iconolab.css"> |
|
7 <style> |
|
8 body { |
|
9 margin-top: 40px; |
|
10 } |
|
11 </style> |
6 </head> |
12 </head> |
7 <body> |
13 <body> |
8 <div id="AppContainer"> |
14 <div class="container"> |
9 <cutout></cutout> |
15 <div id="drawing-zone" class="row"> |
10 <typeahead></typeahead> |
16 <div v-show='!formView' style="display:none" class="editor-wrapper col-md-12"> |
11 </div> |
17 <div class="col-md-12 no-padding"> |
12 <script src="dist/iconolab.js"></script> |
18 <p @click="cancel" class="pull-right btn btn-default btn-sm"><i class="fa fa-close"></i> Annuler</p> |
|
19 </div> |
|
20 <div class='col-md-2'> |
|
21 <ul class="form-drawing-wrapper list-inline"> |
|
22 <p class='form-drawing pullright'><strong>Type de dessin</strong></p> |
|
23 <li @click="setDrawingMode('RECT')" v-bind:class="{ 'selected': isRect }" class='pull-md-right drawingModeBtn'>Rect.</li> |
|
24 <li @click="setDrawingMode('FREE')" v-bind:class="{ 'selected': !isRect }" class='pull-md-right drawingModeBtn'>Libre</li> |
|
25 </ul> |
|
26 |
|
27 <zoomview ref="zoomview" :image-url="'img/small-image.jpg'" :image-width="100" :image-height="100"> |
|
28 </zoomview> |
|
29 |
|
30 <ul class='form-drawing-wrapper list-inline'> |
|
31 <p class='form-drawing pullright'><strong>Actions</strong></p> |
|
32 <li @click="clear" class='pull-md-right drawingModeBtn'><i class='fa fa-trash'></i> Effacer</li> |
|
33 <li id="confirm-fragment-button" @click="showForm" class='pull-md-right drawingModeBtn infos info'><i class='fa fa-plus'></i> Valider</li> |
|
34 </ul> |
|
35 </div> |
|
36 <div class="col-md-10"> |
|
37 <div ref="image" id="iconolab-image-wrapper"> |
|
38 <svg class="cut-canvas" width="850" height="850"> |
|
39 <image class="main-image" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/main-image.jpg" x="0" y="0" |
|
40 width="6208" height="4688"></image> |
|
41 <path class="image-path" d=""></path> |
|
42 </svg> |
|
43 </div> |
|
44 </div> |
|
45 </div> |
|
46 <div v-show="formView" class="col-md-12"> |
|
47 <div class="col-md-6"> |
|
48 <div class="small-image-wrapper" style="position: relative"> |
|
49 <svg ref="smallSvgWrapper" width="477" height="360" version="1.1"> |
|
50 <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> |
|
51 <defs> |
|
52 <mask id="smallImage"> |
|
53 <rect x="0" y="0" width="477" height="360" fill="white"/> |
|
54 <g v-bind:transform="transformMatrix"> |
|
55 <path ref="currentPath" v-bind:d="fragmentPath"></path> |
|
56 </g> |
|
57 </mask> |
|
58 </defs> |
|
59 <g v-show="!displayMask" v-bind:transform="transformMatrix"> |
|
60 <path v-bind:d="fragmentPath" opacity="0.7" fill="orange"></path> |
|
61 </g> |
|
62 <rect v-show="displayMask" ref="smallMask" x="0" y="0" mask="url(#smallImage)" opacity="0.7" fill="white" width="477" height="360"></rect> |
|
63 </svg> |
|
64 <svg style="display:none" ref="zoomSvg" width="477" height="360" version="1.1"> |
|
65 <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> |
|
66 <g v-bind:transform="transformMatrix"> |
|
67 <path v-bind:d="fragmentPath" opacity="0.7" fill="orange"></path> |
|
68 </g> |
|
69 </svg> |
|
70 </div> |
|
71 <ul class="list-inline list-unstyled"> |
|
72 <li @click="showEditor" class="showPointer btn btn-default btn-sm"> <i class='fa fa-edit'></i> Sélectionner le détail</li> |
|
73 <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> |
|
74 <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> |
|
75 <li class="zoom-link btn btn-default btn-sm" v-if="canZoom" @click="zoom('in')"><i class="fa fa-zoom-in"></i>Zoomer</li> |
|
76 <li class="zoom-link btn btn-default btn-sm" v-if="!canZoom" @click="zoom('out')"><i class="fa fa-zoom-out"></i>Dezoomer</li> |
|
77 </ul> |
|
78 </div> |
|
79 </div> |
|
80 </div> |
|
81 </div> |
|
82 |
|
83 <script src="/static/iconolab/js/iconolab.js"></script> |
|
84 <script> |
|
85 iconolab.Cutout.init(); |
|
86 </script> |
13 </body> |
87 </body> |
14 </html> |
88 </html> |