mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
dc729ee80b
- new controller CursorCoordinatesController - added div in right column (bottom:0) - 3 new events : CURSOR_MOVED, DRAG_START, DRAG_END - modified tools to fire events when necessary The cursor coordinates are displayed when the mouse is hovering the drawing area. When the mouse leaves the area, the indication disappears. If the user is using a tool that involves dragging (selection, rectangle, circle), the indicator displays the original coordinates (captured during drag start) and the current coordinates.
76 lines
3.5 KiB
HTML
76 lines
3.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<title>Piskel</title>
|
|
<meta name="description" content="">
|
|
<meta name="author" content="Julian Descottes">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
</head>
|
|
<body>
|
|
<div
|
|
id="loading-mask"
|
|
style="
|
|
position:fixed;
|
|
top:0;right:0;bottom:0;left:0;
|
|
background:black;
|
|
opacity:1;
|
|
text-align:center;
|
|
z-index : 20000;
|
|
transition:opacity 0.5s;
|
|
color:white;">
|
|
<span style="top:45%">Loading Piskel ...</span>
|
|
</div>
|
|
<script type="text/javascript" src="js/lib/iframeLoader.js"></script>
|
|
<div id="main-wrapper" class="main-wrapper">
|
|
<iframe src="templates/drawing-tools.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
|
|
|
<div id="column-wrapper" class="column-wrapper">
|
|
<div class='column left-column'>
|
|
<iframe src="templates/frames-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
|
</div>
|
|
|
|
<div class='column main-column'>
|
|
<div id="drawing-canvas-container" class="drawing-canvas-container canvas-container">
|
|
<div class="canvas-background"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column right-column">
|
|
<iframe src="templates/preview.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
|
<iframe src="templates/layers-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
|
<iframe src="templates/palettes-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
|
<div class="pull-bottom cursor-coordinates"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="application-action-section" data-pskl-controller="settings" class="sticky-section right-sticky-section">
|
|
<div class="sticky-section-wrap">
|
|
<iframe src="templates/settings.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
|
<div class="drawer vertical-centerer">
|
|
<div class="drawer-content" id="drawer-container">
|
|
<iframe src="templates/settings/save.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
|
<iframe src="templates/settings/application.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
|
<iframe src="templates/settings/resize.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
|
<iframe src="templates/settings/import.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
|
<iframe src="templates/settings/localstorage.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
|
<iframe src="templates/settings/export-gif.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
|
<iframe src="templates/settings/export-png.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="dialog-container-wrapper">
|
|
<div id="dialog-container">
|
|
<iframe src="templates/dialogs/manage-palettes.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<iframe src="templates/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
|
<script type="text/javascript" src="piskel-boot.js"></script>
|
|
</body>
|
|
</html>
|