chamilo
/
chamilo-lms
mirror of https://github.com/chamilo/chamilo-lms/tree/1.11.x
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

svg-edit modifications see #7138

Browse Source
1.9.x
Julio Montoya 11 years ago
parent 6590715410
commit 4c06db63a3
12 changed files with 1449 additions and 833 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 24
      main/document/create_draw.php
  2. 21
      main/inc/lib/svg-edit/config.js
  3. 6
      main/inc/lib/svg-edit/custom.css
  4. 34
      main/inc/lib/svg-edit/extensions/ext-php_savefile_chamilo.js
  5. 1
      main/inc/lib/svg-edit/extensions/fileopen.php
  6. 2
      main/inc/lib/svg-edit/extensions/filesave.php
  7. 141
      main/inc/lib/svg-edit/extensions/imagelib/groups.php
  8. 131
      main/inc/lib/svg-edit/extensions/imagelib/index.php
  9. 121
      main/inc/lib/svg-edit/extensions/imagelib/users.php
  10. 165
      main/inc/lib/svg-edit/extensions/savefile_config.php
  11. 795
      main/inc/lib/svg-edit/svg-editor.html
  12. 811
      main/inc/lib/svg-edit/svg-editor.php

24
main/document/create_draw.php
Unescape View File

@ -143,27 +143,25 @@ echo '<div class="actions">';
echo '<a href="document.php?id='.$document_id.'">'.Display::return_icon('back.png',get_lang('BackTo').' '.get_lang('DocumentsOverview'),'',ICON_SIZE_MEDIUM).'</a>';
echo '</div>';
if (api_browser_support('svg')){
if (api_browser_support('svg')) {
//automatic loading the course language
$svgedit_code_translation_table = array('' => 'en', 'pt' => 'pt-Pt', 'sr' => 'sr_latn');
$langsvgedit = api_get_language_isocode();
$langsvgedit = isset($svgedit_code_translation_table[$langsvgedit]) ? $svgedit_code_translation_table[$langsvgedit] : $langsvgedit;
$langsvgedit = file_exists(api_get_path(LIBRARY_PATH).'svg-edit/locale/lang.'.$langsvgedit.'.js') ? $langsvgedit : 'en';
$svg_url= api_get_path(WEB_LIBRARY_PATH).'svg-edit/svg-editor.php?lang='.$langsvgedit ;
$svg_url= api_get_path(WEB_LIBRARY_PATH).'svg-edit/svg-editor.php?lang='.$langsvgedit;
?>
<script type="text/javascript">
<script>
document.write ('<iframe id="frame" frameborder="0" scrolling="no" src="<?php echo $svg_url; ?>" width="100%" height="100%"><noframes><p>Sorry, your browser does not handle frames</p></noframes></iframe>');
function resizeIframe() {
var height = window.innerHeight -50;
//max lower size
if (height<550) {
height=550;
}
document.getElementById('frame').style.height = height +"px";
};
function resizeIframe() {
var height = window.innerHeight -50;
//max lower size
if (height<550) {
height=550;
}
document.getElementById('frame').style.height = height +"px";
}
document.getElementById('frame').onload = resizeIframe;
window.onresize = resizeIframe;

21
main/inc/lib/svg-edit/config.js
Unescape View File

@ -1,12 +1,17 @@
/*globals svgEditor*/
/* see https://code.google.com/p/svg-edit/wiki/ConfigOptions */
svgEditor.setConfig({
// extensions: [
// 'ext-eyedropper.js',
// 'ext-shapes.js',
// 'ext-polygon.js',
// 'ext-star.js'
//],
//emptyStorageOnDecline: true
extensions: [
'ext-php_savefile_chamilo.js',
'ext-eyedropper.js',
'ext-shapes.js',
'ext-polygon.js',
'ext-star.js'
],
noStorageOnLoad: 'true',
selectNew: true,
no_save_warning: true,
emptyStorageOnDecline: true,
iconsize: 'm',
allowedOrigins: [window.location.origin] // May be 'null' (as a string) when used as a file:// URL
});

6
main/inc/lib/svg-edit/custom.css
Unescape View File

@ -0,0 +1,6 @@
#main_icon {
width:38px !important;
}
#tools_top {
left: 55px !important;
}

34
main/inc/lib/svg-edit/extensions/ext-php_savefile_chamilo.js
Unescape View File

@ -0,0 +1,34 @@
/*globals $, svgCanvas, svgEditor*/
/*jslint regexp:true*/
// TODO: Might add support for "exportImage" custom
// handler as in "ext-server_opensave.js" (and in savefile.php)
svgEditor.addExtension("php_savefile_chamilo", {
callback: function() {
'use strict';
function getFileNameFromTitle () {
var title = svgCanvas.getDocumentTitle();
return $.trim(title);
}
var save_svg_action = svgEditor.curConfig.extPath + 'savefile.php';
svgEditor.setCustomHandlers({
save: function(win, data) {
var svg = '<?xml version="1.0" encoding="UTF-8"?>\n' + data,
filename = getFileNameFromTitle();
$.post(
save_svg_action,
{output_svg: svg, filename: filename}
).done(function(data) {
var response = jQuery.parseJSON(data);
console.log(response.message);
alert(response.message);
if (response.url != '') {
window.top.location.href = response.url;
}
}
);
}
});
}
});

1
main/inc/lib/svg-edit/extensions/fileopen.php
Unescape View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<?php
exit;
/*
* fileopen.php
* To be used with ext-server_opensave.js for SVG-edit

2
main/inc/lib/svg-edit/extensions/filesave.php
Unescape View File

@ -8,7 +8,7 @@
* Copyright(c) 2010 Alexis Deveria
*
*/
exit;
function encodeRFC5987ValueChars ($str) {
// See http://tools.ietf.org/html/rfc5987#section-3.2.1
// For better readability within headers, add back the characters escaped by rawurlencode but still allowable

141
main/inc/lib/svg-edit/extensions/imagelib/groups.php
Unescape View File

@ -0,0 +1,141 @@
<?php
/* Integrate svg-edit libraries with Chamilo default documents
* @author Juan Carlos Raña Trabado
* @since 25/september/2010
*/
//Chamilo load libraries
require_once '../../../../../inc/global.inc.php';
require_once api_get_path(LIBRARY_PATH).'document.lib.php';
require_once api_get_path(LIBRARY_PATH).'groupmanager.lib.php';
//Add security from Chamilo
api_protect_course_script();
api_block_anonymous_users();
$is_allowed_to_edit = api_is_allowed_to_edit(null, true);
$course_info = api_get_course_info();
$group_properties = GroupManager::get_group_properties(api_get_group_id());
$groupdirpath = $group_properties['directory'];
$group_disk_path = api_get_path(SYS_COURSE_PATH).$course_info['path'].'/document'.$groupdirpath.'/';
$group_web_path = api_get_path(WEB_COURSE_PATH).$course_info['path'].'/document'.$groupdirpath.'/';
//get all group files and folders
$docs_and_folders = DocumentManager::get_all_document_data($course_info, $groupdirpath, api_get_group_id(), null, $is_allowed_to_edit, false);
//get all group filenames
$array_to_search = is_array($docs_and_folders) ? $docs_and_folders : array();
if (count($array_to_search) > 0) {
while (list($key) = each($array_to_search)) {
$all_files[] = basename($array_to_search[$key]['path']);
}
}
//get all svg and png group files
$accepted_extensions = array('.svg', '.png');
if (is_array($all_files) && count($all_files) > 0) {
foreach ($all_files as & $file) {
$slideshow_extension = strrchr($file, '.');
$slideshow_extension = strtolower($slideshow_extension);
if (in_array($slideshow_extension, $accepted_extensions)) {
$png_svg_files[] =$file;
}
}
}
$style = '<style>';
$style .= '@import "'.api_get_path(WEB_CSS_PATH).'base.css";';
$style .= '@import "'.api_get_path(WEB_CSS_PATH).api_get_visual_theme().'/default.css";';
$style .='</style>';
?>
<!doctype html>
<?php echo api_get_js('jquery.min.js'); ?>
<?php echo $style ?>
<body>
<?php
echo '<h2>'.get_lang('GroupSingle').': '.$group_properties['name'].'</h2>';
if (($group_properties['doc_state'] == 2 && ($is_allowed_to_edit || GroupManager :: is_user_in_group($_user['user_id'], $_SESSION['_gid']))) || $group_properties['doc_state'] == 1){
if (!empty($png_svg_files)) {
echo '<h3>'.get_lang('SelectSVGEditImage').'</h3>';
echo '<ul>';
foreach($png_svg_files as $filename) {
$image = $group_disk_path.$filename;
if (strpos($filename, "svg")){
$new_sizes['width'] = 60;
$new_sizes['height'] = 60;
}
else {
$new_sizes = api_resize_image($image, 60, 60);
}
echo '<li style="display:inline; padding:8px;">';
echo '<a href = "'.$group_web_path.$filename.'" alt="'.$filename.'" title="'.$filename.'">';
echo '<img src = "'.$group_web_path.$filename.'" width = "'.$new_sizes['width'].'" height="'.$new_sizes['height'].'" border="0"></a></li>';
}
echo '</ul>';
}
} else {
echo Display::display_warning_message(get_lang('OnlyAccessFromYourGroup'));
}
?>
</body>
<script>
$('a').click(function() {
var href = this.href;
// Convert Non-SVG images to data URL first
// (this could also have been done server-side by the library)
if(this.href.indexOf('.svg') === -1) {
var meta_str = JSON.stringify({
name: $(this).text(),
id: href
});
window.top.postMessage(meta_str, "*");
var img = new Image();
img.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = this.width;
canvas.height = this.height;
// load the raster image into the canvas
canvas.getContext("2d").drawImage(this,0,0);
// retrieve the data: URL
try {
var dataurl = canvas.toDataURL();
} catch(err) {
// This fails in Firefox with file:// URLs :(
alert("Data URL conversion failed: " + err);
var dataurl = "";
}
window.top.postMessage('|' + href + '|' + dataurl, "*");
}
img.src = href;
} else {
// Send metadata (also indicates file is about to be sent)
var meta_str = JSON.stringify({
name: $(this).text(),
id: href
});
window.top.postMessage(meta_str, "*");
// Do ajax request for image's href value
$.get(href, function(data) {
data = '|' + href + '|' + data;
// This is where the magic happens!
window.top.postMessage(data, "*");
}, 'html'); // 'html' is necessary to keep returned data as a string
}
return false;
});
</script>

131
main/inc/lib/svg-edit/extensions/imagelib/index.php
Unescape View File

@ -0,0 +1,131 @@
<?php
/* Integrate svg-edit libraries with Chamilo default documents
* @author Juan Carlos Raña Trabado
* @since 25/september/2010
*/
//Chamilo load libraries
require_once '../../../../../inc/global.inc.php';
require_once api_get_path(LIBRARY_PATH).'document.lib.php';
//Add security from Chamilo
api_protect_course_script();
api_block_anonymous_users();
$is_allowed_to_edit = api_is_allowed_to_edit(null, true);
$curdirpath='/images/gallery'; //path of library directory
$course_info = api_get_course_info();
//get all files and folders
$docs_and_folders = DocumentManager::get_all_document_data($course_info, $curdirpath, 0, null, $is_allowed_to_edit, false);
//get all filenames
$array_to_search = is_array($docs_and_folders) ? $docs_and_folders : array();
if (count($array_to_search) > 0) {
while (list($key) = each($array_to_search)) {
$all_files[] = basename($array_to_search[$key]['path']);
}
}
//get all svg and png files
$accepted_extensions = array('.svg', '.png');
if (is_array($all_files) && count($all_files) > 0) {
foreach ($all_files as & $file) {
$slideshow_extension = strrchr($file, '.');
$slideshow_extension = strtolower($slideshow_extension);
if (in_array($slideshow_extension, $accepted_extensions)) {
$png_svg_files[] =$file;
}
}
}
$disk_path = api_get_path(SYS_COURSE_PATH).$course_info['path'].'/document/images/gallery/';
$web_path = api_get_path(WEB_COURSE_PATH).$course_info['path'].'/document/images/gallery/';
$style = '<style>';
$style .= '@import "'.api_get_path(WEB_CSS_PATH).'base.css";';
$style .= '@import "'.api_get_path(WEB_CSS_PATH).api_get_visual_theme().'/default.css";';
$style .='</style>';
?>
<!doctype html>
<?php echo api_get_js('jquery.min.js'); ?>
<?php echo $style ?>
<body>
<?php
echo '<h2>'.get_lang('Course').': '.$course_info['name'].'</h2>';
if (!empty($png_svg_files)) {
echo '<h3>'.get_lang('SelectSVGEditImage').'</h3>';
echo '<ul>';
foreach($png_svg_files as $filename) {
$image=$disk_path.$filename;
if (strpos($filename, "svg")){
$new_sizes['width'] = 60;
$new_sizes['height'] = 60;
}
else {
$new_sizes = api_resize_image($image, 60, 60);
}
echo '<li style="display:inline; padding:8px;"><a href="'.$web_path.$filename.'" alt "'.$filename.'" title="'.$filename.'"><img src="'.$web_path.$filename.'" width="'.$new_sizes['width'].'" height="'.$new_sizes['height'].'" border="0"></a></li>';
}
echo '</ul>';
} else {
Display::display_warning_message(get_lang('NoSVGImagesInImagesGalleryPath'));
}
?>
</body>
<script>
$('a').click(function() {
var href = this.href;
// Convert Non-SVG images to data URL first
// (this could also have been done server-side by the library)
if(this.href.indexOf('.svg') === -1) {
var meta_str = JSON.stringify({
name: $(this).text(),
id: href
});
window.top.postMessage(meta_str, "*");
var img = new Image();
img.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = this.width;
canvas.height = this.height;
// load the raster image into the canvas
canvas.getContext("2d").drawImage(this,0,0);
// retrieve the data: URL
try {
var dataurl = canvas.toDataURL();
} catch(err) {
// This fails in Firefox with file:// URLs :(
alert("Data URL conversion failed: " + err);
var dataurl = "";
}
window.top.postMessage('|' + href + '|' + dataurl, "*");
}
img.src = href;
} else {
// Send metadata (also indicates file is about to be sent)
var meta_str = JSON.stringify({
name: $(this).text(),
id: href
});
window.top.postMessage(meta_str, "*");
// Do ajax request for image's href value
$.get(href, function(data) {
data = '|' + href + '|' + data;
// This is where the magic happens!
window.top.postMessage(data, "*");
}, 'html'); // 'html' is necessary to keep returned data as a string
}
return false;
});
</script>

121
main/inc/lib/svg-edit/extensions/imagelib/users.php
Unescape View File

@ -0,0 +1,121 @@
<?php
/* Integrate svg-edit libraries with Chamilo default documents
* @author Juan Carlos Raña Trabado
* @since 25/september/2010
*/
$language_file = array('userInfo');
//Chamilo load libraries
require_once '../../../../../inc/global.inc.php';
//Add security from Chamilo
api_protect_course_script();
api_block_anonymous_users();
$my_path = UserManager::get_user_picture_path_by_id(api_get_user_id(), 'system');
$user_disk_path = $my_path['dir'].'my_files/';
$my_path = UserManager::get_user_picture_path_by_id(api_get_user_id(),'web');
$user_web_path = $my_path['dir'].'my_files/';
//get all files and folders
$scan_files = scandir($user_disk_path);
//get all svg and png files
$accepted_extensions = array('.svg', '.png');
if (is_array($scan_files) && count($scan_files) > 0) {
foreach ($scan_files as & $file) {
$slideshow_extension = strrchr($file, '.');
$slideshow_extension = strtolower($slideshow_extension);
if (in_array($slideshow_extension, $accepted_extensions)) {
$png_svg_files[] =$file;
}
}
}
$style = '<style>';
$style .= '@import "'.api_get_path(WEB_CSS_PATH).'base.css";';
$style .= '@import "'.api_get_path(WEB_CSS_PATH).api_get_visual_theme().'/default.css";';
$style .='</style>';
?>
<!doctype html>
<?php echo api_get_js('jquery.min.js'); ?>
<?php echo $style ?>
<body>
<?php
echo '<h2>'.get_lang('SocialNetwork').': '.get_lang('MyFiles').'</h2>';
if (!empty($png_svg_files)) {
echo '<h3>'.get_lang('SelectSVGEditImage').'</h3>';
echo '<ul>';
foreach($png_svg_files as $filename) {
$image = $user_disk_path.$filename;
if (strpos($filename, "svg")){
$new_sizes['width'] = 60;
$new_sizes['height'] = 60;
} else {
$new_sizes = api_resize_image($image, 60, 60);
}
echo '<li style="display:inline; padding:8px;"><a href="'.$user_web_path.$filename.'" alt "'.$filename.'" title="'.$filename.'"><img src="'.$user_web_path.$filename.'" width="'.$new_sizes['width'].'" height="'.$new_sizes['height'].'" border="0"></a></li>';
}
echo '</ul>';
} else {
Display::display_warning_message(get_lang('NoSVGImages'));
}
?>
</body>
<script>
$('a').click(function() {
var href = this.href;
// Convert Non-SVG images to data URL first
// (this could also have been done server-side by the library)
if(this.href.indexOf('.svg') === -1) {
var meta_str = JSON.stringify({
name: $(this).text(),
id: href
});
window.top.postMessage(meta_str, "*");
var img = new Image();
img.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = this.width;
canvas.height = this.height;
// load the raster image into the canvas
canvas.getContext("2d").drawImage(this,0,0);
// retrieve the data: URL
try {
var dataurl = canvas.toDataURL();
} catch(err) {
// This fails in Firefox with file:// URLs :(
alert("Data URL conversion failed: " + err);
var dataurl = "";
}
window.top.postMessage('|' + href + '|' + dataurl, "*");
}
img.src = href;
} else {
// Send metadata (also indicates file is about to be sent)
var meta_str = JSON.stringify({
name: $(this).text(),
id: href
});
window.top.postMessage(meta_str, "*");
// Do ajax request for image's href value
$.get(href, function(data) {
data = '|' + href + '|' + data;
// This is where the magic happens!
window.top.postMessage(data, "*");
}, 'html'); // 'html' is necessary to keep returned data as a string
}
return false;
});
</script>

165
main/inc/lib/svg-edit/extensions/savefile_config.php
Unescape View File

@ -1,3 +1,166 @@
<?php
/*
* filesave.php
* To be used with ext-server_opensave.js for SVG-edit
*
* Licensed under the Apache License, Version 2
*
* Copyright(c) 2010 Alexis Deveria
*
* Integrate svg-edit with Chamilo
* @author Juan Carlos Raña Trabado
* @since 25/september/2010
*/
?>
$language_file = array('document');//Chamilo load lang var
//Chamilo load libraries
require_once '../../../../inc/global.inc.php';
require_once api_get_path(LIBRARY_PATH).'fileUpload.lib.php';
require_once api_get_path(LIBRARY_PATH).'document.lib.php';
//Add security from Chamilo
api_protect_course_script();
api_block_anonymous_users();
if(!isset($_POST['output_svg']) && !isset($_POST['output_png'])) {
api_not_allowed();//from Chamilo
die();
}
$file = '';
$suffix = isset($_POST['output_svg'])?'svg':'png';
if(isset($_POST['filename']) && strlen($_POST['filename']) > 0) {
$file = $_POST['filename'];
} else {
$file = 'image';
}
if($suffix == 'svg') {
$mime = 'image/svg+xml';
$contents = rawurldecode($_POST['output_svg']);
} else {
$mime = 'image/png';
$contents = $_POST['output_png'];
$pos = (strpos($contents, 'base64,') + 7);
$contents = base64_decode(substr($contents, $pos));
}
//get SVG-Edit values
$filename=$file;//from svg-edit
$extension=$suffix;// from svg-edit
$content=$contents;//from svg-edit
$title = Database::escape_string(str_replace('_',' ',$filename));
//get Chamilo variables
if(!isset($_SESSION['draw_dir']) && !isset($_SESSION['whereami'])) {
api_not_allowed();//from Chamilo
die();
}
$current_session_id = api_get_session_id();
$groupId = api_get_group_id();
$relativeUrlPath=$_SESSION['draw_dir'];
$currentTool=$_SESSION['whereami'];
$dirBaseDocuments = api_get_path(SYS_COURSE_PATH).$_course['path'].'/document';
$saveDir=$dirBaseDocuments.$_SESSION['draw_dir'];
//a bit title security
$filename = addslashes(trim($filename));
$filename = Security::remove_XSS($filename);
$filename = replace_dangerous_char($filename, 'strict');
$filename = disable_dangerous_file($filename);
// a bit extension
if ($suffix != 'svg' && $suffix != 'png') {
die();
}
//a bit mime security
//comment because finfo seems stopping the save process files in some php vers.
/*
if (phpversion() >= '5.3' && extension_loaded('fileinfo')) {
$finfo = new finfo(FILEINFO_MIME);
$current_mime=$finfo->buffer($contents);
finfo_close($finfo);
$mime_png='image/png';//svg-edit return image/png; charset=binary
$mime_svg='image/svg+xml';
$mime_xml='application/xml';//hack for svg-edit because original code return application/xml; charset=us-ascii. See
if(strpos($current_mime, $mime_png)===false && $extension=='png') {
die();//File extension does not match its content
} elseif(strpos($current_mime, $mime_svg)===false && strpos($current_mime, $mime_xml)===false && $extension=='svg') {
die();//File extension does not match its content
}
}
*/
//checks if the file exists, then rename the new
if (file_exists($saveDir.'/'.$filename.$i.'.'.$extension) && $currentTool=='document/createdraw') {
$message = get_lang('FileExistsChangeToSave');
$params = array(
'message' => $message,
'url' => ''
);
echo json_encode($params);
exit;
} else {
$drawFileName = $filename.'.'.$extension;
$title = $title.'.'.$extension;
}
$documentPath = $saveDir.'/'.$drawFileName;
//add new document to disk
file_put_contents( $documentPath, $contents );
if ($currentTool=='document/createdraw') {
//add document to database
$doc_id = add_document($_course, $relativeUrlPath.'/'.$drawFileName, 'file', filesize($documentPath), $title);
api_item_property_update($_course, TOOL_DOCUMENT, $doc_id, 'DocumentAdded', $_user['user_id'], $groupId, null, null, null, $current_session_id);
} elseif($currentTool=='document/editdraw') {
//check path
if (!isset($_SESSION['draw_file'])){
api_not_allowed();//from Chamilo
die();
}
if ($_SESSION['draw_file'] == $drawFileName ){
$document_id = DocumentManager::get_document_id($_course, $relativeUrlPath.'/'.$drawFileName);
update_existing_document($_course, $document_id, filesize($documentPath), null);
api_item_property_update($_course, TOOL_DOCUMENT, $document_id, 'DocumentUpdated', $_user['user_id'], $groupId, null, null, null, $current_session_id);
} else {
//add a new document
$doc_id = add_document($_course, $relativeUrlPath.'/'.$drawFileName, 'file', filesize($documentPath), $title);
api_item_property_update($_course, TOOL_DOCUMENT, $doc_id, 'DocumentAdded', $_user['user_id'], $groupId, null, null, null, $current_session_id);
}
}
//clean sessions and add messages and return to current document list
unset($_SESSION['draw_dir']);
unset($_SESSION['draw_file']);
unset($_SESSION['whereami']);
if ($suffix != 'png') {
if ($relativeUrlPath == '') {
$relativeUrlPath = '/';
};
$url = api_get_path(WEB_CODE_PATH).'document/document.php?'.api_get_cidreq().'&curdirpath='.urlencode($relativeUrlPath);
$message = get_lang('FileSavedAs').': '.$title;
//echo 'alert("'.get_lang('FileSavedAs').': '.$title.'");';
//echo 'window.top.location.href="'.$interbreadcrumb.'";';//return to current document list
} else {
$url = '';
$message = get_lang('FileExportAs').': '.$title;
}
$params = array(
'message' => $message,
'url' => $url
);
echo json_encode($params);
exit;

795
main/inc/lib/svg-edit/svg-editor.html
Unescape View File

@ -1,795 +0,0 @@
<!DOCTYPE html>
<html>
<!-- removed for now, causes problems in Firefox: manifest="svg-editor.manifest" -->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link rel="icon" type="image/png" href="images/logo.png"/>
<link rel="stylesheet" href="jgraduate/css/jPicker.css" type="text/css"/>
<link rel="stylesheet" href="jgraduate/css/jgraduate.css" type="text/css"/>
<link rel="stylesheet" href="svg-editor.css" type="text/css"/>
<link rel="stylesheet" href="spinbtn/JQuerySpinBtn.css" type="text/css"/>
<!--{if jquery_release}>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!{else}-->
<script src="jquery.js"></script>
<!--{endif}-->
<script src="js-hotkeys/jquery.hotkeys.min.js"></script>
<script src="jquerybbq/jquery.bbq.min.js"></script>
<script src="svgicons/jquery.svgicons.js"></script>
<script src="jgraduate/jquery.jgraduate.min.js"></script>
<script src="spinbtn/JQuerySpinBtn.min.js"></script>
<script src="touch.js"></script>
<!--{if svg_edit_release}-->
<script src="svgedit.compiled.js"></script>
<!--{else}>
<script src="svgedit.js"></script>
<script src="jquery-svg.js"></script>
<script src="contextmenu/jquery.contextMenu.js"></script>
<script src="browser.js"></script>
<script src="svgtransformlist.js"></script>
<script src="math.js"></script>
<script src="units.js"></script>
<script src="svgutils.js"></script>
<script src="sanitize.js"></script>
<script src="history.js"></script>
<script src="coords.js"></script>
<script src="recalculate.js"></script>
<script src="select.js"></script>
<script src="draw.js"></script>
<script src="path.js"></script>
<script src="svgcanvas.js"></script>
<script src="svg-editor.js"></script>
<script src="locale/locale.js"></script>
<script src="contextmenu.js"></script>
<!{endif}-->
<!-- If you do not wish to add extensions by URL, you can load them
by creating the following file and adding by calls to svgEditor.setConfig -->
<script src="config.js"></script>
<!-- always minified scripts -->
<script src="jquery-ui/jquery-ui-1.8.17.custom.min.js"></script>
<script src="jgraduate/jpicker.js"></script>
<!-- feeds -->
<link rel="alternate" type="application/atom+xml" title="SVG-edit General Discussion" href="http://groups.google.com/group/svg-edit/feed/atom_v1_0_msgs.xml" />
<link rel="alternate" type="application/atom+xml" title="SVG-edit Updates (Issues/Fixes/Commits)" href="http://code.google.com/feeds/p/svg-edit/updates/basic" />
<!-- Add script with custom handlers here -->
<title>SVG-edit</title>
</head>
<body>
<div id="svg_editor">
<div id="rulers">
<div id="ruler_corner"></div>
<div id="ruler_x">
<div>
<canvas height="15"></canvas>
</div>
</div>
<div id="ruler_y">
<div>
<canvas width="15"></canvas>
</div>
</div>
</div>
<div id="workarea">
<style id="styleoverrides" type="text/css" media="screen" scoped="scoped"></style>
<div id="svgcanvas" style="position:relative">
</div>
</div>
<div id="sidepanels">
<div id="layerpanel">
<h3 id="layersLabel">Layers</h3>
<fieldset id="layerbuttons">
<div id="layer_new" class="layer_button" title="New Layer"></div>
<div id="layer_delete" class="layer_button" title="Delete Layer"></div>
<div id="layer_rename" class="layer_button" title="Rename Layer"></div>
<div id="layer_up" class="layer_button" title="Move Layer Up"></div>
<div id="layer_down" class="layer_button" title="Move Layer Down"></div>
<div id="layer_moreopts" class="layer_button" title="More Options"></div>
</fieldset>
<table id="layerlist">
<tr class="layer">
<td class="layervis"></td>
<td class="layername">Layer 1</td>
</tr>
</table>
<span id="selLayerLabel">Move elements to:</span>
<select id="selLayerNames" title="Move selected elements to a different layer" disabled="disabled">
<option selected="selected" value="layer1">Layer 1</option>
</select>
</div>
<div id="sidepanel_handle" title="Drag left/right to resize side panel [X]">L a y e r s</div>
</div>
<div id="main_button">
<div id="main_icon" class="tool_button" title="Main Menu">
<span>SVG-Edit</span>
<div id="logo"></div>
<div class="dropdown"></div>
</div>
<div id="main_menu">
<!-- File-like buttons: New, Save, Source -->
<ul>
<li id="tool_clear">
<div></div>
New Image (N)
</li>
<li id="tool_open" style="display:none;">
<div id="fileinputs">
<div></div>
</div>
Open Image
</li>
<li id="tool_import" style="display:none;">
<div id="fileinputs_import">
<div></div>
</div>
Import Image
</li>
<li id="tool_save">
<div></div>
Save Image (S)
</li>
<li id="tool_export">
<div></div>
Export
</li>
<li id="tool_docprops">
<div></div>
Document Properties (D)
</li>
</ul>
<p>
<a href="http://svg-edit.googlecode.com/" target="_blank">
SVG-edit Home Page
</a>
</p>
<button id="tool_prefs_option">
Editor Options
</button>
</div>
</div>
<div id="tools_top" class="tools_panel">
<div id="editor_panel">
<div class="tool_sep"></div>
<div class="push_button" id="tool_source" title="Edit Source [U]"></div>
<div class="tool_button" id="tool_wireframe" title="Wireframe Mode [F]"></div>
</div>
<!-- History buttons -->
<div id="history_panel">
<div class="tool_sep"></div>
<div class="push_button tool_button_disabled" id="tool_undo" title="Undo [Z]"></div>
<div class="push_button tool_button_disabled" id="tool_redo" title="Redo [Y]"></div>
</div>
<!-- Buttons when a single element is selected -->
<div id="selected_panel">
<div class="toolset">
<div class="tool_sep"></div>
<div class="push_button" id="tool_clone" title="Duplicate Element [D]"></div>
<div class="push_button" id="tool_delete" title="Delete Element [Delete/Backspace]"></div>
<div class="tool_sep"></div>
<div class="push_button" id="tool_move_top" title="Bring to Front [ Ctrl+Shift+] ]"></div>
<div class="push_button" id="tool_move_bottom" title="Send to Back [ Ctrl+Shift+[ ]"></div>
<div class="push_button" id="tool_topath" title="Convert to Path"></div>
<div class="push_button" id="tool_reorient" title="Reorient path"></div>
<div class="push_button" id="tool_make_link" title="Make (hyper)link"></div>
<div class="tool_sep"></div>
<label id="idLabel" title="Identify the element">
<span>id:</span>
<input id="elem_id" class="attr_changer" data-attr="id" size="10" type="text"/>
</label>
</div>
<label id="tool_angle" title="Change rotation angle" class="toolset">
<span id="angleLabel" class="icon_label"></span>
<input id="angle" size="2" value="0" type="text"/>
</label>
<div class="toolset" id="tool_blur" title="Change gaussian blur value">
<label>
<span id="blurLabel" class="icon_label"></span>
<input id="blur" size="2" value="0" type="text"/>
</label>
<div id="blur_dropdown" class="dropdown">
<button></button>
<ul>
<li class="special"><div id="blur_slider"></div></li>
</ul>
</div>
</div>
<div class="dropdown toolset" id="tool_position" title="Align Element to Page">
<div id="cur_position" class="icon_label"></div>
<button></button>
</div>
<div id="xy_panel" class="toolset">
<label>
x: <input id="selected_x" class="attr_changer" title="Change X coordinate" size="3" data-attr="x"/>
</label>
<label>
y: <input id="selected_y" class="attr_changer" title="Change Y coordinate" size="3" data-attr="y"/>
</label>
</div>
</div>
<!-- Buttons when multiple elements are selected -->
<div id="multiselected_panel">
<div class="tool_sep"></div>
<div class="push_button" id="tool_clone_multi" title="Clone Elements [C]"></div>
<div class="push_button" id="tool_delete_multi" title="Delete Selected Elements [Delete/Backspace]"></div>
<div class="tool_sep"></div>
<div class="push_button" id="tool_group_elements" title="Group Elements [G]"></div>
<div class="push_button" id="tool_make_link_multi" title="Make (hyper)link"></div>
<div class="push_button" id="tool_alignleft" title="Align Left"></div>
<div class="push_button" id="tool_aligncenter" title="Align Center"></div>
<div class="push_button" id="tool_alignright" title="Align Right"></div>
<div class="push_button" id="tool_aligntop" title="Align Top"></div>
<div class="push_button" id="tool_alignmiddle" title="Align Middle"></div>
<div class="push_button" id="tool_alignbottom" title="Align Bottom"></div>
<label id="tool_align_relative">
<span id="relativeToLabel">relative to:</span>
<select id="align_relative_to" title="Align relative to ...">
<option id="selected_objects" value="selected">selected objects</option>
<option id="largest_object" value="largest">largest object</option>
<option id="smallest_object" value="smallest">smallest object</option>
<option id="page" value="page">page</option>
</select>
</label>
<div class="tool_sep"></div>
</div>
<div id="rect_panel">
<div class="toolset">
<label id="rect_width_tool" title="Change rectangle width">
<span id="rwidthLabel" class="icon_label"></span>
<input id="rect_width" class="attr_changer" size="3" data-attr="width"/>
</label>
<label id="rect_height_tool" title="Change rectangle height">
<span id="rheightLabel" class="icon_label"></span>
<input id="rect_height" class="attr_changer" size="3" data-attr="height"/>
</label>
</div>
<label id="cornerRadiusLabel" title="Change Rectangle Corner Radius" class="toolset">
<span class="icon_label"></span>
<input id="rect_rx" size="3" value="0" type="text" data-attr="Corner Radius"/>
</label>
</div>
<div id="image_panel">
<div class="toolset">
<label><span id="iwidthLabel" class="icon_label"></span>
<input id="image_width" class="attr_changer" title="Change image width" size="3" data-attr="width"/>
</label>
<label><span id="iheightLabel" class="icon_label"></span>
<input id="image_height" class="attr_changer" title="Change image height" size="3" data-attr="height"/>
</label>
</div>
<div class="toolset">
<label id="tool_image_url">url:
<input id="image_url" type="text" title="Change URL" size="35"/>
</label>
<label id="tool_change_image">
<button id="change_image_url" style="display:none;">Change Image</button>
<span id="url_notice" title="NOTE: This image cannot be embedded. It will depend on this path to be displayed"></span>
</label>
</div>
</div>
<div id="circle_panel">
<div class="toolset">
<label id="tool_circle_cx">cx:
<input id="circle_cx" class="attr_changer" title="Change circle's cx coordinate" size="3" data-attr="cx"/>
</label>
<label id="tool_circle_cy">cy:
<input id="circle_cy" class="attr_changer" title="Change circle's cy coordinate" size="3" data-attr="cy"/>
</label>
</div>
<div class="toolset">
<label id="tool_circle_r">r:
<input id="circle_r" class="attr_changer" title="Change circle's radius" size="3" data-attr="r"/>
</label>
</div>
</div>
<div id="ellipse_panel">
<div class="toolset">
<label id="tool_ellipse_cx">cx:
<input id="ellipse_cx" class="attr_changer" title="Change ellipse's cx coordinate" size="3" data-attr="cx"/>
</label>
<label id="tool_ellipse_cy">cy:
<input id="ellipse_cy" class="attr_changer" title="Change ellipse's cy coordinate" size="3" data-attr="cy"/>
</label>
</div>
<div class="toolset">
<label id="tool_ellipse_rx">rx:
<input id="ellipse_rx" class="attr_changer" title="Change ellipse's x radius" size="3" data-attr="rx"/>
</label>
<label id="tool_ellipse_ry">ry:
<input id="ellipse_ry" class="attr_changer" title="Change ellipse's y radius" size="3" data-attr="ry"/>
</label>
</div>
</div>
<div id="line_panel">
<div class="toolset">
<label id="tool_line_x1">x1:
<input id="line_x1" class="attr_changer" title="Change line's starting x coordinate" size="3" data-attr="x1"/>
</label>
<label id="tool_line_y1">y1:
<input id="line_y1" class="attr_changer" title="Change line's starting y coordinate" size="3" data-attr="y1"/>
</label>
</div>
<div class="toolset">
<label id="tool_line_x2">x2:
<input id="line_x2" class="attr_changer" title="Change line's ending x coordinate" size="3" data-attr="x2"/>
</label>
<label id="tool_line_y2">y2:
<input id="line_y2" class="attr_changer" title="Change line's ending y coordinate" size="3" data-attr="y2"/>
</label>
</div>
</div>
<div id="text_panel">
<div class="toolset">
<div class="tool_button" id="tool_bold" title="Bold Text [B]"><span></span>B</div>
<div class="tool_button" id="tool_italic" title="Italic Text [I]"><span></span>i</div>
</div>
<div class="toolset" id="tool_font_family">
<label>
<!-- Font family -->
<input id="font_family" type="text" title="Change Font Family" size="12"/>
</label>
<div id="font_family_dropdown" class="dropdown">
<button></button>
<ul>
<li style="font-family:serif">Serif</li>
<li style="font-family:sans-serif">Sans-serif</li>
<li style="font-family:cursive">Cursive</li>
<li style="font-family:fantasy">Fantasy</li>
<li style="font-family:monospace">Monospace</li>
</ul>
</div>
</div>
<label id="tool_font_size" title="Change Font Size">
<span id="font_sizeLabel" class="icon_label"></span>
<input id="font_size" size="3" value="0" type="text"/>
</label>
<!-- Not visible, but still used -->
<input id="text" type="text" size="35"/>
</div>
<!-- formerly gsvg_panel -->
<div id="container_panel">
<div class="tool_sep"></div>
<!-- Add viewBox field here? -->
<label id="group_title" title="Group identification label">
<span>label:</span>
<input id="g_title" data-attr="title" size="10" type="text"/>
</label>
</div>
<div id="use_panel">
<div class="push_button" id="tool_unlink_use" title="Break link to reference element (make unique)"></div>
</div>
<div id="g_panel">
<div class="push_button" id="tool_ungroup" title="Ungroup Elements [G]"></div>
</div>
<!-- For anchor elements -->
<div id="a_panel">
<label id="tool_link_url" title="Set link URL (leave empty to remove)">
<span id="linkLabel" class="icon_label"></span>
<input id="link_url" type="text" size="35"/>
</label>
</div>
<div id="path_node_panel">
<div class="tool_sep"></div>
<div class="tool_button push_button_pressed" id="tool_node_link" title="Link Control Points"></div>
<div class="tool_sep"></div>
<label id="tool_node_x">x:
<input id="path_node_x" class="attr_changer" title="Change node's x coordinate" size="3" data-attr="x"/>
</label>
<label id="tool_node_y">y:
<input id="path_node_y" class="attr_changer" title="Change node's y coordinate" size="3" data-attr="y"/>
</label>
<select id="seg_type" title="Change Segment type">
<option id="straight_segments" selected="selected" value="4">Straight</option>
<option id="curve_segments" value="6">Curve</option>
</select>
<div class="tool_button" id="tool_node_clone" title="Clone Node"></div>
<div class="tool_button" id="tool_node_delete" title="Delete Node"></div>
<div class="tool_button" id="tool_openclose_path" title="Open/close sub-path"></div>
<div class="tool_button" id="tool_add_subpath" title="Add sub-path"></div>
</div>
</div> <!-- tools_top -->
<div id="cur_context_panel">
</div>
<div id="tools_left" class="tools_panel">
<div class="tool_button" id="tool_select" title="Select Tool"></div>
<div class="tool_button" id="tool_fhpath" title="Pencil Tool"></div>
<div class="tool_button" id="tool_line" title="Line Tool"></div>
<div class="tool_button flyout_current" id="tools_rect_show" title="Square/Rect Tool">
<div class="flyout_arrow_horiz"></div>
</div>
<div class="tool_button flyout_current" id="tools_ellipse_show" title="Ellipse/Circle Tool">
<div class="flyout_arrow_horiz"></div>
</div>
<div class="tool_button" id="tool_path" title="Path Tool"></div>
<div class="tool_button" id="tool_text" title="Text Tool"></div>
<div class="tool_button" id="tool_image" title="Image Tool"></div>
<div class="tool_button" id="tool_zoom" title="Zoom Tool [Ctrl+Up/Down]"></div>
<div style="display: none">
<div id="tool_rect" title="Rectangle"></div>
<div id="tool_square" title="Square"></div>
<div id="tool_fhrect" title="Free-Hand Rectangle"></div>
<div id="tool_ellipse" title="Ellipse"></div>
<div id="tool_circle" title="Circle"></div>
<div id="tool_fhellipse" title="Free-Hand Ellipse"></div>
</div>
</div> <!-- tools_left -->
<div id="tools_bottom" class="tools_panel">
<!-- Zoom buttons -->
<div id="zoom_panel" class="toolset" title="Change zoom level">
<label>
<span id="zoomLabel" class="zoom_tool icon_label"></span>
<input id="zoom" size="3" value="100" type="text" />
</label>
<div id="zoom_dropdown" class="dropdown">
<button></button>
<ul>
<li>1000%</li>
<li>400%</li>
<li>200%</li>
<li>100%</li>
<li>50%</li>
<li>25%</li>
<li id="fit_to_canvas" data-val="canvas">Fit to canvas</li>
<li id="fit_to_sel" data-val="selection">Fit to selection</li>
<li id="fit_to_layer_content" data-val="layer">Fit to layer content</li>
<li id="fit_to_all" data-val="content">Fit to all content</li>
<li>100%</li>
</ul>
</div>
<div class="tool_sep"></div>
</div>
<div id="tools_bottom_2">
<div id="color_tools">
<div class="color_tool" id="tool_fill">
<label class="icon_label" for="fill_color" title="Change fill color"></label>
<div class="color_block">
<div id="fill_bg"></div>
<div id="fill_color" class="color_block"></div>
</div>
</div>
<div class="color_tool" id="tool_stroke">
<label class="icon_label" title="Change stroke color"></label>
<div class="color_block">
<div id="stroke_bg"></div>
<div id="stroke_color" class="color_block" title="Change stroke color"></div>
</div>
<label class="stroke_label">
<input id="stroke_width" title="Change stroke width by 1, shift-click to change by 0.1" size="2" value="5" type="text" data-attr="Stroke Width"/>
</label>
<div id="toggle_stroke_tools" title="Show/hide more stroke tools"></div>
<label class="stroke_tool">
<select id="stroke_style" title="Change stroke dash style">
<option selected="selected" value="none">&#8212;</option>
<option value="2,2">...</option>
<option value="5,5">- -</option>
<option value="5,2,2,2">- .</option>
<option value="5,2,2,2,2,2">- ..</option>
</select>
</label>
<div class="stroke_tool dropdown" id="stroke_linejoin">
<div id="cur_linejoin" title="Linejoin: Miter"></div>
<button></button>
</div>
<div class="stroke_tool dropdown" id="stroke_linecap">
<div id="cur_linecap" title="Linecap: Butt"></div>
<button></button>
</div>
</div>
<div class="color_tool" id="tool_opacity" title="Change selected item opacity">
<label>
<span id="group_opacityLabel" class="icon_label"></span>
<input id="group_opacity" size="3" value="100" type="text"/>
</label>
<div id="opacity_dropdown" class="dropdown">
<button></button>
<ul>
<li>0%</li>
<li>25%</li>
<li>50%</li>
<li>75%</li>
<li>100%</li>
<li class="special"><div id="opac_slider"></div></li>
</ul>
</div>
</div>
</div>
</div>
<div id="tools_bottom_3">
<div id="palette_holder"><div id="palette" title="Click to change fill color, shift-click to change stroke color"></div></div>
</div>
<!-- <div id="copyright"><span id="copyrightLabel">Powered by</span> <a href="http://svg-edit.googlecode.com/" target="_blank">SVG-edit v2.6-beta</a></div> -->
</div>
<div id="option_lists" class="dropdown">
<ul id="linejoin_opts">
<li class="tool_button current" id="linejoin_miter" title="Linejoin: Miter"></li>
<li class="tool_button" id="linejoin_round" title="Linejoin: Round"></li>
<li class="tool_button" id="linejoin_bevel" title="Linejoin: Bevel"></li>
</ul>
<ul id="linecap_opts">
<li class="tool_button current" id="linecap_butt" title="Linecap: Butt"></li>
<li class="tool_button" id="linecap_square" title="Linecap: Square"></li>
<li class="tool_button" id="linecap_round" title="Linecap: Round"></li>
</ul>
<ul id="position_opts" class="optcols3">
<li class="push_button" id="tool_posleft" title="Align Left"></li>
<li class="push_button" id="tool_poscenter" title="Align Center"></li>
<li class="push_button" id="tool_posright" title="Align Right"></li>
<li class="push_button" id="tool_postop" title="Align Top"></li>
<li class="push_button" id="tool_posmiddle" title="Align Middle"></li>
<li class="push_button" id="tool_posbottom" title="Align Bottom"></li>
</ul>
</div>
<!-- hidden divs -->
<div id="color_picker"></div>
</div> <!-- svg_editor -->
<div id="svg_source_editor">
<div class="overlay"></div>
<div id="svg_source_container">
<div id="tool_source_back" class="toolbar_button">
<button id="tool_source_save">Apply Changes</button>
<button id="tool_source_cancel">Cancel</button>
</div>
<div id="save_output_btns">
<p id="copy_save_note">Copy the contents of this box into a text editor, then save the file with a .svg extension.</p>
<button id="copy_save_done">Done</button>
</div>
<form>
<textarea id="svg_source_textarea" spellcheck="false"></textarea>
</form>
</div>
</div>
<div id="svg_docprops">
<div class="overlay"></div>
<div id="svg_docprops_container">
<div id="tool_docprops_back" class="toolbar_button">
<button id="tool_docprops_save">OK</button>
<button id="tool_docprops_cancel">Cancel</button>
</div>
<fieldset id="svg_docprops_docprops">
<legend id="svginfo_image_props">Image Properties</legend>
<label>
<span id="svginfo_title">Title:</span>
<input type="text" id="canvas_title"/>
</label>
<fieldset id="change_resolution">
<legend id="svginfo_dim">Canvas Dimensions</legend>
<label><span id="svginfo_width">width:</span> <input type="text" id="canvas_width" size="6"/></label>
<label><span id="svginfo_height">height:</span> <input type="text" id="canvas_height" size="6"/></label>
<label>
<select id="resolution">
<option id="selectedPredefined" selected="selected">Select predefined:</option>
<option>640x480</option>
<option>800x600</option>
<option>1024x768</option>
<option>1280x960</option>
<option>1600x1200</option>
<option id="fitToContent" value="content">Fit to Content</option>
</select>
</label>
</fieldset>
<fieldset id="image_save_opts">
<legend id="includedImages">Included Images</legend>
<label><input type="radio" name="image_opt" value="embed" checked="checked"/> <span id="image_opt_embed">Embed data (local files)</span> </label>
<label><input type="radio" name="image_opt" value="ref"/> <span id="image_opt_ref">Use file reference</span> </label>
</fieldset>
</fieldset>
</div>
</div>
<div id="svg_prefs">
<div class="overlay"></div>
<div id="svg_prefs_container">
<div id="tool_prefs_back" class="toolbar_button">
<button id="tool_prefs_save">OK</button>
<button id="tool_prefs_cancel">Cancel</button>
</div>
<fieldset>
<legend id="svginfo_editor_prefs">Editor Preferences</legend>
<label><span id="svginfo_lang">Language:</span>
<!-- Source: http://en.wikipedia.org/wiki/Language_names -->
<select id="lang_select">
<option id="lang_ar" value="ar">العربية</option>
<option id="lang_cs" value="cs">Čeština</option>
<option id="lang_de" value="de">Deutsch</option>
<option id="lang_en" value="en" selected="selected">English</option>
<option id="lang_es" value="es">Español</option>
<option id="lang_fa" value="fa">فارسی</option>
<option id="lang_fr" value="fr">Français</option>
<option id="lang_fy" value="fy">Frysk</option>
<option id="lang_hi" value="hi">&#2361;&#2367;&#2344;&#2381;&#2342;&#2368;, &#2361;&#2367;&#2306;&#2342;&#2368;</option>
<option id="lang_it" value="it">Italiano</option>
<option id="lang_ja" value="ja">日本語</option>
<option id="lang_nl" value="nl">Nederlands</option>
<option id="lang_pl" value="pl">Polski</option>
<option id="lang_pt-BR" value="pt-BR">Português (BR)</option>
<option id="lang_ro" value="ro">Română</option>
<option id="lang_ru" value="ru">Русский</option>
<option id="lang_sk" value="sk">Slovenčina</option>
<option id="lang_zh-TW" value="zh-TW">繁體中文</option>
</select>
</label>
<label><span id="svginfo_icons">Icon size:</span>
<select id="iconsize">
<option id="icon_small" value="s">Small</option>
<option id="icon_medium" value="m" selected="selected">Medium</option>
<option id="icon_large" value="l">Large</option>
<option id="icon_xlarge" value="xl">Extra Large</option>
</select>
</label>
<fieldset id="change_background">
<legend id="svginfo_change_background">Editor Background</legend>
<div id="bg_blocks"></div>
<label><span id="svginfo_bg_url">URL:</span> <input type="text" id="canvas_bg_url"/></label>
<p id="svginfo_bg_note">Note: Background will not be saved with image.</p>
</fieldset>
<fieldset id="change_grid">
<legend id="svginfo_grid_settings">Grid</legend>
<label><span id="svginfo_snap_onoff">Snapping on/off</span><input type="checkbox" value="snapping_on" id="grid_snapping_on"/></label>
<label><span id="svginfo_snap_step">Snapping Step-Size:</span> <input type="text" id="grid_snapping_step" size="3" value="10"/></label>
<label><span id="svginfo_grid_color">Grid color:</span> <input type="text" id="grid_color" size="3" value="#000"/></label>
</fieldset>
<fieldset id="units_rulers">
<legend id="svginfo_units_rulers">Units &amp; Rulers</legend>
<label><span id="svginfo_rulers_onoff">Show rulers</span><input type="checkbox" value="show_rulers" id="show_rulers" checked="checked"/></label>
<label>
<span id="svginfo_unit">Base Unit:</span>
<select id="base_unit">
<option value="px">Pixels</option>
<option value="cm">Centimeters</option>
<option value="mm">Millimeters</option>
<option value="in">Inches</option>
<option value="pt">Points</option>
<option value="pc">Picas</option>
<option value="em">Ems</option>
<option value="ex">Exs</option>
</select>
</label>
<!-- Should this be an export option instead? -->
<!--
<span id="svginfo_unit_system">Unit System:</span>
<label>
<input type="radio" name="unit_system" value="single" checked="checked"/>
<span id="svginfo_single_type_unit">Single type unit</span>
<small id="svginfo_single_type_unit_sub">CSS unit type is set on root element. If a different unit type is entered in a text field, it is converted back to user units on export.</small>
</label>
<label>
<input type="radio" name="unit_system" value="multi"/>
<span id="svginfo_multi_units">Multiple CSS units</span>
<small id="svginfo_single_type_unit_sub">Attributes can be given different CSS units, which may lead to inconsistant results among viewers.</small>
</label>
-->
</fieldset>
</fieldset>
</div>
</div>
<div id="dialog_box">
<div class="overlay"></div>
<div id="dialog_container">
<div id="dialog_content"></div>
<div id="dialog_buttons"></div>
</div>
</div>
<ul id="cmenu_canvas" class="contextMenu">
<li><a href="#cut">Cut</a></li>
<li><a href="#copy">Copy</a></li>
<li><a href="#paste">Paste</a></li>
<li><a href="#paste_in_place">Paste in Place</a></li>
<li class="separator"><a href="#delete">Delete</a></li>
<li class="separator"><a href="#group">Group<span class="shortcut">G</span></a></li>
<li><a href="#ungroup">Ungroup<span class="shortcut">G</span></a></li>
<li class="separator"><a href="#move_front">Bring to Front<span class="shortcut">SHFT+CTRL+]</span></a></li>
<li><a href="#move_up">Bring Forward<span class="shortcut">CTRL+]</span></a></li>
<li><a href="#move_down">Send Backward<span class="shortcut">CTRL+[</span></a></li>
<li><a href="#move_back">Send to Back<span class="shortcut">SHFT+CTRL+[</span></a></li>
</ul>
<ul id="cmenu_layers" class="contextMenu">
<li><a href="#dupe">Duplicate Layer...</a></li>
<li><a href="#delete">Delete Layer</a></li>
<li><a href="#merge_down">Merge Down</a></li>
<li><a href="#merge_all">Merge All</a></li>
</ul>
</body>
</html>

811
main/inc/lib/svg-edit/svg-editor.php
Unescape View File

@ -0,0 +1,811 @@
<?php
/**
* Integrate svg-edit with Chamilo
* @author Juan Carlos Raña Trabado
* @since 25/september/2010
*/
require_once '../../../inc/global.inc.php';//hack for Chamilo
api_protect_course_script();
api_block_anonymous_users();
if (!isset($_SESSION['draw_dir'])) {
die();
}
?>
<!DOCTYPE html>
<html>
<!-- removed for now, causes problems in Firefox: manifest="svg-editor.manifest" -->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link rel="icon" type="image/png" href="images/logo.png"/>
<link rel="stylesheet" href="jgraduate/css/jPicker.css" type="text/css"/>
<link rel="stylesheet" href="jgraduate/css/jgraduate.css" type="text/css"/>
<link rel="stylesheet" href="svg-editor.css" type="text/css"/>
<link rel="stylesheet" href="custom.css" type="text/css"/>
<link rel="stylesheet" href="spinbtn/JQuerySpinBtn.css" type="text/css"/>
<?php echo api_get_js('jquery.min.js'); ?>
<script src="js-hotkeys/jquery.hotkeys.min.js"></script>
<script src="jquerybbq/jquery.bbq.min.js"></script>
<script src="svgicons/jquery.svgicons.js"></script>
<script src="jgraduate/jquery.jgraduate.min.js"></script>
<script src="spinbtn/JQuerySpinBtn.min.js"></script>
<script src="touch.js"></script>
<!--{if svg_edit_release}-->
<script src="svgedit.compiled.js"></script>
<!--{else}>
<script src="svgedit.js"></script>
<script src="jquery-svg.js"></script>
<script src="contextmenu/jquery.contextMenu.js"></script>
<script src="browser.js"></script>
<script src="svgtransformlist.js"></script>
<script src="math.js"></script>
<script src="units.js"></script>
<script src="svgutils.js"></script>
<script src="sanitize.js"></script>
<script src="history.js"></script>
<script src="coords.js"></script>
<script src="recalculate.js"></script>
<script src="select.js"></script>
<script src="draw.js"></script>
<script src="path.js"></script>
<script src="svgcanvas.js"></script>
<script src="svg-editor.js"></script>
<script src="locale/locale.js"></script>
<script src="contextmenu.js"></script>
<!{endif}-->
<!-- If you do not wish to add extensions by URL, you can load them
by creating the following file and adding by calls to svgEditor.setConfig -->
<script src="config.js"></script>
<!-- always minified scripts -->
<script src="jquery-ui/jquery-ui-1.8.17.custom.min.js"></script>
<script src="jgraduate/jpicker.js"></script>
<!-- feeds -->
<link rel="alternate" type="application/atom+xml" title="SVG-edit General Discussion" href="http://groups.google.com/group/svg-edit/feed/atom_v1_0_msgs.xml" />
<link rel="alternate" type="application/atom+xml" title="SVG-edit Updates (Issues/Fixes/Commits)" href="http://code.google.com/feeds/p/svg-edit/updates/basic" />
<!-- Add script with custom handlers here -->
<title>SVG-edit</title>
</head>
<body>
<div id="svg_editor">
<div id="rulers">
<div id="ruler_corner"></div>
<div id="ruler_x">
<div>
<canvas height="15"></canvas>
</div>
</div>
<div id="ruler_y">
<div>
<canvas width="15"></canvas>
</div>
</div>
</div>
<div id="workarea">
<style id="styleoverrides" type="text/css" media="screen" scoped="scoped"></style>
<div id="svgcanvas" style="position:relative">
</div>
</div>
<div id="sidepanels">
<div id="layerpanel">
<h3 id="layersLabel">Layers</h3>
<fieldset id="layerbuttons">
<div id="layer_new" class="layer_button" title="New Layer"></div>
<div id="layer_delete" class="layer_button" title="Delete Layer"></div>
<div id="layer_rename" class="layer_button" title="Rename Layer"></div>
<div id="layer_up" class="layer_button" title="Move Layer Up"></div>
<div id="layer_down" class="layer_button" title="Move Layer Down"></div>
<div id="layer_moreopts" class="layer_button" title="More Options"></div>
</fieldset>
<table id="layerlist">
<tr class="layer">
<td class="layervis"></td>
<td class="layername">Layer 1</td>
</tr>
</table>
<span id="selLayerLabel">Move elements to:</span>
<select id="selLayerNames" title="Move selected elements to a different layer" disabled="disabled">
<option selected="selected" value="layer1">Layer 1</option>
</select>
</div>
<div id="sidepanel_handle" title="Drag left/right to resize side panel [X]">L a y e r s</div>
</div>
<div id="main_button">
<div id="main_icon" class="tool_button" title="Main Menu">
<span></span>
<div id="logo"></div>
<div class="dropdown"></div>
</div>
<div id="main_menu">
<!-- File-like buttons: New, Save, Source -->
<ul>
<li id="tool_clear">
<div></div>
New Image (N)
</li>
<li id="tool_open" style="display:none;">
<div id="fileinputs">
<div></div>
</div>
Open Image
</li>
<li id="tool_import" style="display:none;">
<div id="fileinputs_import">
<div></div>
</div>
Import Image
</li>
<li id="tool_save">
<div></div>
Save Image (S)
</li>
<li id="tool_export">
<div></div>
Export
</li>
<li id="tool_docprops">
<div></div>
Document Properties (D)
</li>
</ul>
<p>
<!-- <a href="http://svg-edit.googlecode.com/" target="_blank">
SVG-edit Home Page
</a> --><!-- Comment for Chamilo -->
</p>
<button id="tool_prefs_option">
Editor Options
</button>
</div>
</div>
<div id="tools_top" class="tools_panel">
<div id="editor_panel">
<div class="tool_sep"></div>
<div class="push_button" id="tool_source" title="Edit Source [U]"></div>
<div class="tool_button" id="tool_wireframe" title="Wireframe Mode [F]"></div>
</div>
<!-- History buttons -->
<div id="history_panel">
<div class="tool_sep"></div>
<div class="push_button tool_button_disabled" id="tool_undo" title="Undo [Z]"></div>
<div class="push_button tool_button_disabled" id="tool_redo" title="Redo [Y]"></div>
</div>
<!-- Buttons when a single element is selected -->
<div id="selected_panel">
<div class="toolset">
<div class="tool_sep"></div>
<div class="push_button" id="tool_clone" title="Duplicate Element [D]"></div>
<div class="push_button" id="tool_delete" title="Delete Element [Delete/Backspace]"></div>
<div class="tool_sep"></div>
<div class="push_button" id="tool_move_top" title="Bring to Front [ Ctrl+Shift+] ]"></div>
<div class="push_button" id="tool_move_bottom" title="Send to Back [ Ctrl+Shift+[ ]"></div>
<div class="push_button" id="tool_topath" title="Convert to Path"></div>
<div class="push_button" id="tool_reorient" title="Reorient path"></div>
<div class="push_button" id="tool_make_link" title="Make (hyper)link"></div>
<div class="tool_sep"></div>
<label id="idLabel" title="Identify the element">
<span>id:</span>
<input id="elem_id" class="attr_changer" data-attr="id" size="10" type="text"/>
</label>
</div>
<label id="tool_angle" title="Change rotation angle" class="toolset">
<span id="angleLabel" class="icon_label"></span>
<input id="angle" size="2" value="0" type="text"/>
</label>
<div class="toolset" id="tool_blur" title="Change gaussian blur value">
<label>
<span id="blurLabel" class="icon_label"></span>
<input id="blur" size="2" value="0" type="text"/>
</label>
<div id="blur_dropdown" class="dropdown">
<button></button>
<ul>
<li class="special"><div id="blur_slider"></div></li>
</ul>
</div>
</div>
<div class="dropdown toolset" id="tool_position" title="Align Element to Page">
<div id="cur_position" class="icon_label"></div>
<button></button>
</div>
<div id="xy_panel" class="toolset">
<label>
x: <input id="selected_x" class="attr_changer" title="Change X coordinate" size="3" data-attr="x"/>
</label>
<label>
y: <input id="selected_y" class="attr_changer" title="Change Y coordinate" size="3" data-attr="y"/>
</label>
</div>
</div>
<!-- Buttons when multiple elements are selected -->
<div id="multiselected_panel">
<div class="tool_sep"></div>
<div class="push_button" id="tool_clone_multi" title="Clone Elements [C]"></div>
<div class="push_button" id="tool_delete_multi" title="Delete Selected Elements [Delete/Backspace]"></div>
<div class="tool_sep"></div>
<div class="push_button" id="tool_group_elements" title="Group Elements [G]"></div>
<div class="push_button" id="tool_make_link_multi" title="Make (hyper)link"></div>
<div class="push_button" id="tool_alignleft" title="Align Left"></div>
<div class="push_button" id="tool_aligncenter" title="Align Center"></div>
<div class="push_button" id="tool_alignright" title="Align Right"></div>
<div class="push_button" id="tool_aligntop" title="Align Top"></div>
<div class="push_button" id="tool_alignmiddle" title="Align Middle"></div>
<div class="push_button" id="tool_alignbottom" title="Align Bottom"></div>
<label id="tool_align_relative">
<span id="relativeToLabel">relative to:</span>
<select id="align_relative_to" title="Align relative to ...">
<option id="selected_objects" value="selected">selected objects</option>
<option id="largest_object" value="largest">largest object</option>
<option id="smallest_object" value="smallest">smallest object</option>
<option id="page" value="page">page</option>
</select>
</label>
<div class="tool_sep"></div>
</div>
<div id="rect_panel">
<div class="toolset">
<label id="rect_width_tool" title="Change rectangle width">
<span id="rwidthLabel" class="icon_label"></span>
<input id="rect_width" class="attr_changer" size="3" data-attr="width"/>
</label>
<label id="rect_height_tool" title="Change rectangle height">
<span id="rheightLabel" class="icon_label"></span>
<input id="rect_height" class="attr_changer" size="3" data-attr="height"/>
</label>
</div>
<label id="cornerRadiusLabel" title="Change Rectangle Corner Radius" class="toolset">
<span class="icon_label"></span>
<input id="rect_rx" size="3" value="0" type="text" data-attr="Corner Radius"/>
</label>
</div>
<div id="image_panel">
<div class="toolset">
<label><span id="iwidthLabel" class="icon_label"></span>
<input id="image_width" class="attr_changer" title="Change image width" size="3" data-attr="width"/>
</label>
<label><span id="iheightLabel" class="icon_label"></span>
<input id="image_height" class="attr_changer" title="Change image height" size="3" data-attr="height"/>
</label>
</div>
<div class="toolset">
<label id="tool_image_url">url:
<input id="image_url" type="text" title="Change URL" size="35"/>
</label>
<label id="tool_change_image">
<button id="change_image_url" style="display:none;">Change Image</button>
<span id="url_notice" title="NOTE: This image cannot be embedded. It will depend on this path to be displayed"></span>
</label>
</div>
</div>
<div id="circle_panel">
<div class="toolset">
<label id="tool_circle_cx">cx:
<input id="circle_cx" class="attr_changer" title="Change circle's cx coordinate" size="3" data-attr="cx"/>
</label>
<label id="tool_circle_cy">cy:
<input id="circle_cy" class="attr_changer" title="Change circle's cy coordinate" size="3" data-attr="cy"/>
</label>
</div>
<div class="toolset">
<label id="tool_circle_r">r:
<input id="circle_r" class="attr_changer" title="Change circle's radius" size="3" data-attr="r"/>
</label>
</div>
</div>
<div id="ellipse_panel">
<div class="toolset">
<label id="tool_ellipse_cx">cx:
<input id="ellipse_cx" class="attr_changer" title="Change ellipse's cx coordinate" size="3" data-attr="cx"/>
</label>
<label id="tool_ellipse_cy">cy:
<input id="ellipse_cy" class="attr_changer" title="Change ellipse's cy coordinate" size="3" data-attr="cy"/>
</label>
</div>
<div class="toolset">
<label id="tool_ellipse_rx">rx:
<input id="ellipse_rx" class="attr_changer" title="Change ellipse's x radius" size="3" data-attr="rx"/>
</label>
<label id="tool_ellipse_ry">ry:
<input id="ellipse_ry" class="attr_changer" title="Change ellipse's y radius" size="3" data-attr="ry"/>
</label>
</div>
</div>
<div id="line_panel">
<div class="toolset">
<label id="tool_line_x1">x1:
<input id="line_x1" class="attr_changer" title="Change line's starting x coordinate" size="3" data-attr="x1"/>
</label>
<label id="tool_line_y1">y1:
<input id="line_y1" class="attr_changer" title="Change line's starting y coordinate" size="3" data-attr="y1"/>
</label>
</div>
<div class="toolset">
<label id="tool_line_x2">x2:
<input id="line_x2" class="attr_changer" title="Change line's ending x coordinate" size="3" data-attr="x2"/>
</label>
<label id="tool_line_y2">y2:
<input id="line_y2" class="attr_changer" title="Change line's ending y coordinate" size="3" data-attr="y2"/>
</label>
</div>
</div>
<div id="text_panel">
<div class="toolset">
<div class="tool_button" id="tool_bold" title="Bold Text [B]"><span></span>B</div>
<div class="tool_button" id="tool_italic" title="Italic Text [I]"><span></span>i</div>
</div>
<div class="toolset" id="tool_font_family">
<label>
<!-- Font family -->
<input id="font_family" type="text" title="Change Font Family" size="12"/>
</label>
<div id="font_family_dropdown" class="dropdown">
<button></button>
<ul>
<li style="font-family:serif">Serif</li>
<li style="font-family:sans-serif">Sans-serif</li>
<li style="font-family:cursive">Cursive</li>
<li style="font-family:fantasy">Fantasy</li>
<li style="font-family:monospace">Monospace</li>
</ul>
</div>
</div>
<label id="tool_font_size" title="Change Font Size">
<span id="font_sizeLabel" class="icon_label"></span>
<input id="font_size" size="3" value="0" type="text"/>
</label>
<!-- Not visible, but still used -->
<input id="text" type="text" size="35"/>
</div>
<!-- formerly gsvg_panel -->
<div id="container_panel">
<div class="tool_sep"></div>
<!-- Add viewBox field here? -->
<label id="group_title" title="Group identification label">
<span>label:</span>
<input id="g_title" data-attr="title" size="10" type="text"/>
</label>
</div>
<div id="use_panel">
<div class="push_button" id="tool_unlink_use" title="Break link to reference element (make unique)"></div>
</div>
<div id="g_panel">
<div class="push_button" id="tool_ungroup" title="Ungroup Elements [G]"></div>
</div>
<!-- For anchor elements -->
<div id="a_panel">
<label id="tool_link_url" title="Set link URL (leave empty to remove)">
<span id="linkLabel" class="icon_label"></span>
<input id="link_url" type="text" size="35"/>
</label>
</div>
<div id="path_node_panel">
<div class="tool_sep"></div>
<div class="tool_button push_button_pressed" id="tool_node_link" title="Link Control Points"></div>
<div class="tool_sep"></div>
<label id="tool_node_x">x:
<input id="path_node_x" class="attr_changer" title="Change node's x coordinate" size="3" data-attr="x"/>
</label>
<label id="tool_node_y">y:
<input id="path_node_y" class="attr_changer" title="Change node's y coordinate" size="3" data-attr="y"/>
</label>
<select id="seg_type" title="Change Segment type">
<option id="straight_segments" selected="selected" value="4">Straight</option>
<option id="curve_segments" value="6">Curve</option>
</select>
<div class="tool_button" id="tool_node_clone" title="Clone Node"></div>
<div class="tool_button" id="tool_node_delete" title="Delete Node"></div>
<div class="tool_button" id="tool_openclose_path" title="Open/close sub-path"></div>
<div class="tool_button" id="tool_add_subpath" title="Add sub-path"></div>
</div>
</div> <!-- tools_top -->
<div id="cur_context_panel">
</div>
<div id="tools_left" class="tools_panel">
<div class="tool_button" id="tool_select" title="Select Tool"></div>
<div class="tool_button" id="tool_fhpath" title="Pencil Tool"></div>
<div class="tool_button" id="tool_line" title="Line Tool"></div>
<div class="tool_button flyout_current" id="tools_rect_show" title="Square/Rect Tool">
<div class="flyout_arrow_horiz"></div>
</div>
<div class="tool_button flyout_current" id="tools_ellipse_show" title="Ellipse/Circle Tool">
<div class="flyout_arrow_horiz"></div>
</div>
<div class="tool_button" id="tool_path" title="Path Tool"></div>
<div class="tool_button" id="tool_text" title="Text Tool"></div>
<div class="tool_button" id="tool_image" title="Image Tool"></div>
<div class="tool_button" id="tool_zoom" title="Zoom Tool [Ctrl+Up/Down]"></div>
<div style="display: none">
<div id="tool_rect" title="Rectangle"></div>
<div id="tool_square" title="Square"></div>
<div id="tool_fhrect" title="Free-Hand Rectangle"></div>
<div id="tool_ellipse" title="Ellipse"></div>
<div id="tool_circle" title="Circle"></div>
<div id="tool_fhellipse" title="Free-Hand Ellipse"></div>
</div>
</div> <!-- tools_left -->
<div id="tools_bottom" class="tools_panel">
<!-- Zoom buttons -->
<div id="zoom_panel" class="toolset" title="Change zoom level">
<label>
<span id="zoomLabel" class="zoom_tool icon_label"></span>
<input id="zoom" size="3" value="100" type="text" />
</label>
<div id="zoom_dropdown" class="dropdown">
<button></button>
<ul>
<li>1000%</li>
<li>400%</li>
<li>200%</li>
<li>100%</li>
<li>50%</li>
<li>25%</li>
<li id="fit_to_canvas" data-val="canvas">Fit to canvas</li>
<li id="fit_to_sel" data-val="selection">Fit to selection</li>
<li id="fit_to_layer_content" data-val="layer">Fit to layer content</li>
<li id="fit_to_all" data-val="content">Fit to all content</li>
<li>100%</li>
</ul>
</div>
<div class="tool_sep"></div>
</div>
<div id="tools_bottom_2">
<div id="color_tools">
<div class="color_tool" id="tool_fill">
<label class="icon_label" for="fill_color" title="Change fill color"></label>
<div class="color_block">
<div id="fill_bg"></div>
<div id="fill_color" class="color_block"></div>
</div>
</div>
<div class="color_tool" id="tool_stroke">
<label class="icon_label" title="Change stroke color"></label>
<div class="color_block">
<div id="stroke_bg"></div>
<div id="stroke_color" class="color_block" title="Change stroke color"></div>
</div>
<label class="stroke_label">
<input id="stroke_width" title="Change stroke width by 1, shift-click to change by 0.1" size="2" value="5" type="text" data-attr="Stroke Width"/>
</label>
<div id="toggle_stroke_tools" title="Show/hide more stroke tools"></div>
<label class="stroke_tool">
<select id="stroke_style" title="Change stroke dash style">
<option selected="selected" value="none">&#8212;</option>
<option value="2,2">...</option>
<option value="5,5">- -</option>
<option value="5,2,2,2">- .</option>
<option value="5,2,2,2,2,2">- ..</option>
</select>
</label>
<div class="stroke_tool dropdown" id="stroke_linejoin">
<div id="cur_linejoin" title="Linejoin: Miter"></div>
<button></button>
</div>
<div class="stroke_tool dropdown" id="stroke_linecap">
<div id="cur_linecap" title="Linecap: Butt"></div>
<button></button>
</div>
</div>
<div class="color_tool" id="tool_opacity" title="Change selected item opacity">
<label>
<span id="group_opacityLabel" class="icon_label"></span>
<input id="group_opacity" size="3" value="100" type="text"/>
</label>
<div id="opacity_dropdown" class="dropdown">
<button></button>
<ul>
<li>0%</li>
<li>25%</li>
<li>50%</li>
<li>75%</li>
<li>100%</li>
<li class="special"><div id="opac_slider"></div></li>
</ul>
</div>
</div>
</div>
</div>
<div id="tools_bottom_3">
<div id="palette_holder"><div id="palette" title="Click to change fill color, shift-click to change stroke color"></div></div>
</div>
<!-- <div id="copyright"><span id="copyrightLabel">Powered by</span> <a href="http://svg-edit.googlecode.com/" target="_blank">SVG-edit v2.6-alpha</a></div> --><!-- Comment for Chamilo -->
</div>
<div id="option_lists" class="dropdown">
<ul id="linejoin_opts">
<li class="tool_button current" id="linejoin_miter" title="Linejoin: Miter"></li>
<li class="tool_button" id="linejoin_round" title="Linejoin: Round"></li>
<li class="tool_button" id="linejoin_bevel" title="Linejoin: Bevel"></li>
</ul>
<ul id="linecap_opts">
<li class="tool_button current" id="linecap_butt" title="Linecap: Butt"></li>
<li class="tool_button" id="linecap_square" title="Linecap: Square"></li>
<li class="tool_button" id="linecap_round" title="Linecap: Round"></li>
</ul>
<ul id="position_opts" class="optcols3">
<li class="push_button" id="tool_posleft" title="Align Left"></li>
<li class="push_button" id="tool_poscenter" title="Align Center"></li>
<li class="push_button" id="tool_posright" title="Align Right"></li>
<li class="push_button" id="tool_postop" title="Align Top"></li>
<li class="push_button" id="tool_posmiddle" title="Align Middle"></li>
<li class="push_button" id="tool_posbottom" title="Align Bottom"></li>
</ul>
</div>
<!-- hidden divs -->
<div id="color_picker"></div>
</div> <!-- svg_editor -->
<div id="svg_source_editor">
<div class="overlay"></div>
<div id="svg_source_container">
<div id="tool_source_back" class="toolbar_button">
<button id="tool_source_save">Apply Changes</button>
<button id="tool_source_cancel">Cancel</button>
</div>
<div id="save_output_btns">
<p id="copy_save_note">Copy the contents of this box into a text editor, then save the file with a .svg extension.</p>
<button id="copy_save_done">Done</button>
</div>
<form>
<textarea id="svg_source_textarea" spellcheck="false"></textarea>
</form>
</div>
</div>
<div id="svg_docprops">
<div class="overlay"></div>
<div id="svg_docprops_container">
<div id="tool_docprops_back" class="toolbar_button">
<button id="tool_docprops_save">OK</button>
<button id="tool_docprops_cancel">Cancel</button>
</div>
<fieldset id="svg_docprops_docprops">
<legend id="svginfo_image_props">Image Properties</legend>
<label>
<span id="svginfo_title">Title:</span>
<input type="text" id="canvas_title"/>
</label>
<fieldset id="change_resolution">
<legend id="svginfo_dim">Canvas Dimensions</legend>
<label><span id="svginfo_width">width:</span> <input type="text" id="canvas_width" size="6"/></label>
<label><span id="svginfo_height">height:</span> <input type="text" id="canvas_height" size="6"/></label>
<label>
<select id="resolution">
<option id="selectedPredefined" selected="selected">Select predefined:</option>
<option>640x480</option>
<option>800x600</option>
<option>1024x768</option>
<option>1280x960</option>
<option>1600x1200</option>
<option id="fitToContent" value="content">Fit to Content</option>
</select>
</label>
</fieldset>
<fieldset id="image_save_opts">
<legend id="includedImages">Included Images</legend>
<label><input type="radio" name="image_opt" value="embed" checked="checked"/> <span id="image_opt_embed">Embed data (local files)</span> </label>
<label><input type="radio" name="image_opt" value="ref"/> <span id="image_opt_ref">Use file reference</span> </label>
</fieldset>
</fieldset>
</div>
</div>
<div id="svg_prefs">
<div class="overlay"></div>
<div id="svg_prefs_container">
<div id="tool_prefs_back" class="toolbar_button">
<button id="tool_prefs_save">OK</button>
<button id="tool_prefs_cancel">Cancel</button>
</div>
<fieldset>
<legend id="svginfo_editor_prefs">Editor Preferences</legend>
<label><span id="svginfo_lang">Language:</span>
<!-- Source: http://en.wikipedia.org/wiki/Language_names --><!-- Add for Chamilo bulgarian, (Български), hungarian (Magyar), indonesian (Bahasa Indonesia), italian (Italiano), latvian (Latviešu) -->
<select id="lang_select">
<option id="lang_ar" value="ar">العربية</option>
<option id="lang_bg" value="bg">Български</option>
<option id="lang_cs" value="cs">Čeština</option>
<option id="lang_de" value="de">Deutsch</option>
<option id="lang_en" value="en" selected="selected">English</option>
<option id="lang_es" value="es">Español</option>
<option id="lang_fa" value="fa">فارسی</option>
<option id="lang_fr" value="fr">Français</option>
<option id="lang_fy" value="fy">Frysk</option>
<option id="lang_hi" value="hi">&#2361;&#2367;&#2344;&#2381;&#2342;&#2368;, &#2361;&#2367;&#2306;&#2342;&#2368;</option>
<option id="lang_id" value="id">Bahasa Indonesia</option>
<option id="lang_it" value="it">Italiano</option>
<option id="lang_ja" value="ja">日本語</option>
<option id="lang_lv" value="lv">Latviešu</option>
<option id="lang_nl" value="nl">Nederlands</option>
<option id="lang_pl" value="pl">Polski</option>
<option id="lang_hu" value="hu">Magyar</option>
<option id="lang_pt-BR" value="pt-BR">Português (BR)</option>
<option id="lang_ro" value="ro">Română</option>
<option id="lang_ru" value="ru">Русский</option>
<option id="lang_sk" value="sk">Slovenčina</option>
<option id="lang_zh-TW" value="zh-TW">繁體中文</option>
</select>
</label>
<label><span id="svginfo_icons">Icon size:</span>
<select id="iconsize">
<option id="icon_small" value="s">Small</option>
<option id="icon_medium" value="m" selected="selected">Medium</option>
<option id="icon_large" value="l">Large</option>
<option id="icon_xlarge" value="xl">Extra Large</option>
</select>
</label>
<fieldset id="change_background">
<legend id="svginfo_change_background">Editor Background</legend>
<div id="bg_blocks"></div>
<label><span id="svginfo_bg_url">URL:</span> <input type="text" id="canvas_bg_url"/></label>
<p id="svginfo_bg_note">Note: Background will not be saved with image.</p>
</fieldset>
<fieldset id="change_grid">
<legend id="svginfo_grid_settings">Grid</legend>
<label><span id="svginfo_snap_onoff">Snapping on/off</span><input type="checkbox" value="snapping_on" id="grid_snapping_on"/></label>
<label><span id="svginfo_snap_step">Snapping Step-Size:</span> <input type="text" id="grid_snapping_step" size="3" value="10"/></label>
<label><span id="svginfo_grid_color">Grid color:</span> <input type="text" id="grid_color" size="3" value="#000"/></label>
</fieldset>
<fieldset id="units_rulers">
<legend id="svginfo_units_rulers">Units &amp; Rulers</legend>
<label><span id="svginfo_rulers_onoff">Show rulers</span><input type="checkbox" value="show_rulers" id="show_rulers" checked="checked"/></label>
<label>
<span id="svginfo_unit">Base Unit:</span>
<select id="base_unit">
<option value="px">Pixels</option>
<option value="cm">Centimeters</option>
<option value="mm">Millimeters</option>
<option value="in">Inches</option>
<option value="pt">Points</option>
<option value="pc">Picas</option>
<option value="em">Ems</option>
<option value="ex">Exs</option>
</select>
</label>
<!-- Should this be an export option instead? -->
<!--
<span id="svginfo_unit_system">Unit System:</span>
<label>
<input type="radio" name="unit_system" value="single" checked="checked"/>
<span id="svginfo_single_type_unit">Single type unit</span>
<small id="svginfo_single_type_unit_sub">CSS unit type is set on root element. If a different unit type is entered in a text field, it is converted back to user units on export.</small>
</label>
<label>
<input type="radio" name="unit_system" value="multi"/>
<span id="svginfo_multi_units">Multiple CSS units</span>
<small id="svginfo_single_type_unit_sub">Attributes can be given different CSS units, which may lead to inconsistant results among viewers.</small>
</label>
-->
</fieldset>
</fieldset>
</div>
</div>
<div id="dialog_box">
<div class="overlay"></div>
<div id="dialog_container">
<div id="dialog_content"></div>
<div id="dialog_buttons"></div>
</div>
</div>
<ul id="cmenu_canvas" class="contextMenu">
<li><a href="#cut">Cut</a></li>
<li><a href="#copy">Copy</a></li>
<li><a href="#paste">Paste</a></li>
<li><a href="#paste_in_place">Paste in Place</a></li>
<li class="separator"><a href="#delete">Delete</a></li>
<li class="separator"><a href="#group">Group<span class="shortcut">G</span></a></li>
<li><a href="#ungroup">Ungroup<span class="shortcut">G</span></a></li>
<li class="separator"><a href="#move_front">Bring to Front<span class="shortcut">SHFT+CTRL+]</span></a></li>
<li><a href="#move_up">Bring Forward<span class="shortcut">CTRL+]</span></a></li>
<li><a href="#move_down">Send Backward<span class="shortcut">CTRL+[</span></a></li>
<li><a href="#move_back">Send to Back<span class="shortcut">SHFT+CTRL+[</span></a></li>
</ul>
<ul id="cmenu_layers" class="contextMenu">
<li><a href="#dupe">Duplicate Layer...</a></li>
<li><a href="#delete">Delete Layer</a></li>
<li><a href="#merge_down">Merge Down</a></li>
<li><a href="#merge_all">Merge All</a></li>
</ul>
</body>
</html>
Write Preview
Loading…
Cancel
Save