Starting Branch to simplify Build process
This commit is contained in:
JFH
BIN
src/editor/.DS_Store
vendored
Normal file
BIN
src/editor/.DS_Store
vendored
Normal file
Binary file not shown.
@@ -12,6 +12,7 @@
|
||||
|
||||
<!-- STYLESHEETS (others loaded dynamically) -->
|
||||
<style id="styleoverrides" media="screen"></style>
|
||||
<link href="svgedit.css" rel="stylesheet" media="all"></link>
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
|
||||
@@ -38,7 +39,7 @@
|
||||
|
||||
<!-- If you do not wish to add extensions by URL, you can add calls
|
||||
within the following file to svgEditor.setConfig -->
|
||||
<script type="module" src="../svgedit-config-es.js"></script>
|
||||
<script type="module" src="index.js"></script>
|
||||
|
||||
<!-- FEEDS -->
|
||||
<link rel="alternate" type="application/atom+xml"
|
||||
155
src/editor/index.js
Normal file
155
src/editor/index.js
Normal file
@@ -0,0 +1,155 @@
|
||||
// TO BUILD AN IIFE VERSION OF THIS FILE (AS CAN WORK ON OLDER BROWSERS),
|
||||
// RUN THE FOLLOWING ON THE COMMAND LINE FROM THE PROJECT ROOT:
|
||||
// `npm run build-by-config`. REPEAT AFTER ANY MODIFICATIONS
|
||||
// TO svgedit-config-es.js.
|
||||
|
||||
/*
|
||||
The svgedit-config-es.js file is intended for the setting of configuration
|
||||
or preferences which must run early on; if this is not needed, it is
|
||||
recommended that you create an extension instead (for greater
|
||||
reusability and modularity). This file needs to be in the parent
|
||||
folder of the editor folder. It is referenced in the code as
|
||||
'../svgedit-config-es.js'.
|
||||
*/
|
||||
|
||||
// CONFIG AND EXTENSION SETTING
|
||||
/*
|
||||
For default config and extensions (and available options) available to
|
||||
`setConfig()`, see the file `docs/tutorials/ConfigOptions.md`
|
||||
*/
|
||||
|
||||
import svgEditor from './svgedit.js';
|
||||
|
||||
// URL OVERRIDE CONFIG
|
||||
svgEditor.setConfig({
|
||||
/* To override the ability for URLs to set URL-based SVG content,
|
||||
uncomment the following: */
|
||||
// preventURLContentLoading: true,
|
||||
/* To override the ability for URLs to set other configuration (including
|
||||
extension config), uncomment the following: */
|
||||
// preventAllURLConfig: true,
|
||||
/* To override the ability for URLs to set their own extensions, uncomment the
|
||||
following (note that if `setConfig()` is used in extension code, it will still
|
||||
be additive to extensions, however): */
|
||||
// lockExtensions: true,
|
||||
});
|
||||
|
||||
svgEditor.setConfig({
|
||||
/*
|
||||
Provide default values here which differ from that of the editor but
|
||||
which the URL can override
|
||||
*/
|
||||
}, {allowInitialUserOverride: true});
|
||||
|
||||
// EXTENSION CONFIG
|
||||
svgEditor.setConfig({
|
||||
extensions: [
|
||||
// 'ext-overview_window.js', 'ext-markers.js', 'ext-connector.js',
|
||||
// 'ext-eyedropper.js', 'ext-shapes.js', 'ext-imagelib.js',
|
||||
// 'ext-grid.js', 'ext-polygon.js', 'ext-star.js', 'ext-panning.js',
|
||||
// 'ext-storage.js'
|
||||
],
|
||||
// noDefaultExtensions can only be meaningfully used in
|
||||
// `svgedit-config-es.js` or in the URL
|
||||
noDefaultExtensions: false
|
||||
});
|
||||
|
||||
// OTHER CONFIG
|
||||
svgEditor.setConfig({
|
||||
// canvasName: 'default',
|
||||
// canvas_expansion: 3,
|
||||
// initFill: {
|
||||
// color: 'FF0000', // solid red
|
||||
// opacity: 1
|
||||
// },
|
||||
// initStroke: {
|
||||
// width: 5,
|
||||
// color: '000000', // solid black
|
||||
// opacity: 1
|
||||
// },
|
||||
// initOpacity: 1,
|
||||
// colorPickerCSS: null,
|
||||
// initTool: 'select',
|
||||
// exportWindowType: 'new', // 'same'
|
||||
// wireframe: false,
|
||||
// showlayers: false,
|
||||
// no_save_warning: false,
|
||||
// PATH CONFIGURATION
|
||||
// imgPath: 'images/',
|
||||
// langPath: 'locale/',
|
||||
// extPath: 'extensions/',
|
||||
// jGraduatePath: 'jgraduate/images/',
|
||||
/*
|
||||
Uncomment the following to allow at least same domain (embedded) access,
|
||||
including `file:///` access.
|
||||
Setting as `['*']` would allow any domain to access but would be unsafe to
|
||||
data privacy and integrity.
|
||||
*/
|
||||
// May be 'null' (as a string) when used as a `file:///` URL
|
||||
// allowedOrigins: [location.origin || 'null'],
|
||||
// DOCUMENT PROPERTIES
|
||||
// dimensions: [640, 480],
|
||||
// EDITOR OPTIONS
|
||||
// gridSnapping: false,
|
||||
// gridColor: '#000',
|
||||
// baseUnit: 'px',
|
||||
// snappingStep: 10,
|
||||
// showRulers: true,
|
||||
// EXTENSION-RELATED (GRID)
|
||||
// showGrid: false, // Set by ext-grid.js
|
||||
// EXTENSION-RELATED (STORAGE)
|
||||
// Some interaction with `ext-storage.js`; prevent even the loading of
|
||||
// previously saved local storage
|
||||
// noStorageOnLoad: false,
|
||||
// Some interaction with `ext-storage.js`; strongly discouraged from
|
||||
// modification as it bypasses user privacy by preventing them from
|
||||
// choosing whether to keep local storage or not
|
||||
// forceStorage: false,
|
||||
// Used by `ext-storage.js`; empty any prior storage if the user
|
||||
// declines to store
|
||||
// emptyStorageOnDecline: true,
|
||||
});
|
||||
|
||||
// PREF CHANGES
|
||||
/*
|
||||
setConfig() can also be used to set preferences in addition to
|
||||
configuration (see defaultPrefs in svg-editor.js for a list of
|
||||
possible settings), but at least if you are using ext-storage.js
|
||||
to store preferences, it will probably be better to let your
|
||||
users control these.
|
||||
As with configuration, one may use allowInitialUserOverride, but
|
||||
in the case of preferences, any previously stored preferences
|
||||
will also thereby be enabled to override this setting (and at a
|
||||
higher priority than any URL preference setting overrides).
|
||||
Failing to use allowInitialUserOverride will ensure preferences
|
||||
are hard-coded here regardless of URL or prior user storage setting.
|
||||
*/
|
||||
svgEditor.setConfig({
|
||||
// Set dynamically within locale.js if not previously set
|
||||
// lang: '',
|
||||
// Will default to 's' if the window height is smaller than the minimum
|
||||
// height and 'm' otherwise
|
||||
// iconsize: '',
|
||||
/**
|
||||
* When showing the preferences dialog, svg-editor.js currently relies
|
||||
* on `curPrefs` instead of `svgEditor.pref`, so allowing an override for
|
||||
* `bkgd_color` means that this value won't have priority over block
|
||||
* auto-detection as far as determining which color shows initially
|
||||
* in the preferences dialog (though it can be changed and saved).
|
||||
*/
|
||||
// bkgd_color: '#FFF',
|
||||
// bkgd_url: '',
|
||||
// img_save: 'embed',
|
||||
// Only shows in UI as far as alert notices
|
||||
// save_notice_done: false,
|
||||
// export_notice_done: false
|
||||
});
|
||||
svgEditor.setConfig(
|
||||
{
|
||||
// Indicate pref settings here if you wish to allow user storage or URL
|
||||
// settings to be able to override your default preferences (unless
|
||||
// other config options have already explicitly prevented one or the
|
||||
// other)
|
||||
},
|
||||
{allowInitialUserOverride: true}
|
||||
);
|
||||
BIN
src/editor/jgraduate/.DS_Store
vendored
Normal file
BIN
src/editor/jgraduate/.DS_Store
vendored
Normal file
Binary file not shown.
@@ -51,14 +51,6 @@ if (!window.console) {
|
||||
* @returns {external:jQuery}
|
||||
*/
|
||||
export default function jQueryPluginJGraduate ($) {
|
||||
if (!$.loadingStylesheets) {
|
||||
$.loadingStylesheets = [];
|
||||
}
|
||||
const stylesheet = 'jgraduate/css/jGraduate.css';
|
||||
if (!$.loadingStylesheets.includes(stylesheet)) {
|
||||
$.loadingStylesheets.push(stylesheet);
|
||||
}
|
||||
|
||||
/**
|
||||
* @typedef {PlainObject} module:jGraduate.jGraduatePaintOptions
|
||||
* @property {Float} [alpha]
|
||||
|
||||
@@ -41,22 +41,10 @@ const isNullish = (val) => {
|
||||
|
||||
/**
|
||||
* @function module:jPicker.jPicker
|
||||
* @param {external:jQuery} $ The jQuery object to wrap (with {@link external:jQuery.loadingStylesheets}, {@link external:jQuery.fn.$.fn.jPicker}, {@link external:jQuery.fn.$.fn.jPicker.defaults})
|
||||
* @param {external:jQuery} $ The jQuery object, {@link external:jQuery.fn.$.fn.jPicker}, {@link external:jQuery.fn.$.fn.jPicker.defaults})
|
||||
* @returns {external:jQuery}
|
||||
*/
|
||||
const jPicker = function ($) {
|
||||
if (!$.loadingStylesheets) {
|
||||
/**
|
||||
* @name loadingStylesheets
|
||||
* @type {string[]}
|
||||
* @memberof external:jQuery
|
||||
*/
|
||||
$.loadingStylesheets = [];
|
||||
}
|
||||
const stylesheet = 'jgraduate/css/jPicker.css';
|
||||
if (!$.loadingStylesheets.includes(stylesheet)) {
|
||||
$.loadingStylesheets.push(stylesheet);
|
||||
}
|
||||
/**
|
||||
* @typedef {PlainObject} module:jPicker.SliderOptions
|
||||
* @property {external:jQuery|PlainObject} arrow
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
* Adds bells and whistles to any ordinary textbox to
|
||||
* make it look and feel like a SpinButton Control.
|
||||
*
|
||||
* Supplies {@link external:jQuery.fn.SpinButton} (and also {@link external:jQuery.loadingStylesheets}).
|
||||
* Supplies {@link external:jQuery.fn.SpinButton}).
|
||||
*
|
||||
* Originally written by George Adamson, Software Unity (george.jquery@softwareunity.com) August 2006:
|
||||
* - Added min/max options.
|
||||
@@ -75,13 +75,6 @@
|
||||
* @returns {external:jQuery}
|
||||
*/
|
||||
export default function jQueryPluginSpinButton ($) {
|
||||
if (!$.loadingStylesheets) {
|
||||
$.loadingStylesheets = [];
|
||||
}
|
||||
const stylesheet = 'spinbtn/jQuery.SpinButton.css';
|
||||
if (!$.loadingStylesheets.includes(stylesheet)) {
|
||||
$.loadingStylesheets.push(stylesheet);
|
||||
}
|
||||
/**
|
||||
* @callback module:jQuerySpinButton.StepCallback
|
||||
* @param {external:jQuery} thisArg Value of `this`
|
||||
|
||||
@@ -1,783 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- AUTO-GENERATED FROM svg-editor-es.html; DO NOT EDIT; use build/build-html.js to build -->
|
||||
<html>
|
||||
<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" />
|
||||
|
||||
<!-- No-op until loaded dynamically (could make configurable) -->
|
||||
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
|
||||
|
||||
<!-- STYLESHEETS (others loaded dynamically) -->
|
||||
<style id="styleoverrides" media="screen"></style>
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
|
||||
<!-- As yet no ES6 Module support -->
|
||||
<!--{if jquery_release}>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
||||
<!{else}-->
|
||||
<script src="jquery.min.js"></script>
|
||||
<!--{endif}-->
|
||||
|
||||
<!-- Lacking browser support -->
|
||||
|
||||
<script defer="defer" src="../../dist/redirect-on-lacking-support.js"></script>
|
||||
|
||||
<!-- As yet no ES6 Module support -->
|
||||
<script src="jquery-ui/jquery-ui-1.8.17.custom.min.js"></script>
|
||||
|
||||
<!-- Browser polyfills -->
|
||||
<script src="../../dist/dom-polyfill.js"></script>
|
||||
|
||||
<!-- ES6+ polyfills (Babel) -->
|
||||
<script src="../external/core-js-bundle/minified.js"></script>
|
||||
<script src="../external/regenerator-runtime/runtime.js"></script>
|
||||
|
||||
<!-- If you do not wish to add extensions by URL, you can add calls
|
||||
within the following file to svgEditor.setConfig -->
|
||||
<script defer="defer" src="../svgedit-config-iife.js"></script>
|
||||
|
||||
<!-- FEEDS -->
|
||||
<link rel="alternate" type="application/atom+xml"
|
||||
title="SVG-edit General Discussion"
|
||||
href="https://groups.google.com/group/svg-edit/feed/atom_v1_0_msgs.xml"/>
|
||||
<link rel="alternate" type="application/atom+xml"
|
||||
title="SVG-edit Updates (Commits)"
|
||||
href="https://github.com/SVG-Edit/svgedit/commits/master.atom"/>
|
||||
|
||||
<title>SVG-edit</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="svg_container" style="visibility: hidden;">
|
||||
<div id="svg_editor" role="main">
|
||||
<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">
|
||||
<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></div>
|
||||
Open SVG
|
||||
</li>
|
||||
<li id="tool_import" style="display:none;">
|
||||
<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>
|
||||
<li id="tool_editor_prefs">
|
||||
<div></div>
|
||||
Editor Preferences
|
||||
</li>
|
||||
<li id="tool_editor_homepage">
|
||||
<div></div>
|
||||
SVG-Edit Home Page
|
||||
</li>
|
||||
</ul>
|
||||
</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>
|
||||
<label id="classLabel" title="Element class">
|
||||
<span>class:</span>
|
||||
<input id="elem_class" class="attr_changer"
|
||||
data-attr="class" 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" class="toolset"
|
||||
title="Change Rectangle Corner Radius">
|
||||
<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>
|
||||
<li style="font-family:courier">Courier</li>
|
||||
<li style="font-family:helvetica">Helvetica</li>
|
||||
<li style="font-family:times">Times</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 id="tool_node_link" class="tool_button push_button_pressed"
|
||||
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 id="tools_rect_show" class="tool_button flyout_current"
|
||||
title="Square/Rect Tool">
|
||||
<div class="flyout_arrow_horiz"></div>
|
||||
</div>
|
||||
<div id="tools_ellipse_show" class="tool_button flyout_current"
|
||||
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">—</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="https://github.com/SVG-Edit/svgedit" 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: https://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">हिन्दी, हिंदी</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_sl" value="sl">Slovenščina</option>
|
||||
<option id="lang_zh-CN" value="zh-CN">简体中文</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 & Rulers</legend>
|
||||
<label>
|
||||
<span id="svginfo_rulers_onoff">Show rulers</span>
|
||||
<input id="show_rulers" type="checkbox"
|
||||
value="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<span class="shortcut">META+X</span></a></li>
|
||||
<li><a href="#copy">Copy<span class="shortcut">META+C</span></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<span class="shortcut">BACKSPACE</span></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">CTRL+SHFT+]</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">CTRL+SHFT+[</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>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,156 +0,0 @@
|
||||
# To-do: Change to a sample service-worker
|
||||
|
||||
CACHE MANIFEST
|
||||
svg-editor.html
|
||||
images/logo.png
|
||||
jgraduate/css/jPicker.css
|
||||
jgraduate/css/jGraduate.css
|
||||
svg-editor.css
|
||||
spinbtn/jQuery.SpinButton.css
|
||||
jquery.min.js
|
||||
svgedit-config-es.js
|
||||
svgedit-config-iife.js
|
||||
svgedit-custom.css
|
||||
editor/xdomain-svgedit-config-iife.js
|
||||
js-hotkeys/jquery.hotkeys.min.js
|
||||
jquery-ui/jquery-ui-1.8.17.custom.min.js
|
||||
jgraduate/jQuery.jPicker.js
|
||||
jgraduate/jQuery.jGraduate.js
|
||||
spinbtn/jQuery.SpinButton.js
|
||||
svgcanvas.js
|
||||
svg-editor.js
|
||||
images/align-bottom.png
|
||||
images/align-center.png
|
||||
images/align-left.png
|
||||
images/align-middle.png
|
||||
images/align-right.png
|
||||
images/align-top.png
|
||||
images/bold.png
|
||||
images/cancel.png
|
||||
images/circle.png
|
||||
images/clear.png
|
||||
images/clone.png
|
||||
images/copy.png
|
||||
images/cut.png
|
||||
images/delete.png
|
||||
images/document-properties.png
|
||||
images/dropdown.gif
|
||||
images/ellipse.png
|
||||
images/eye.png
|
||||
images/flyouth.png
|
||||
images/flyup.gif
|
||||
images/freehand-circle.png
|
||||
images/freehand-square.png
|
||||
images/go-down.png
|
||||
images/go-up.png
|
||||
images/image.png
|
||||
images/italic.png
|
||||
images/line.png
|
||||
images/logo.png
|
||||
images/logo.svg
|
||||
images/move_bottom.png
|
||||
images/move_top.png
|
||||
images/none.png
|
||||
images/open.png
|
||||
images/paste.png
|
||||
images/path.png
|
||||
images/polygon.png
|
||||
images/rect.png
|
||||
images/redo.png
|
||||
images/save.png
|
||||
images/select.png
|
||||
images/sep.png
|
||||
images/shape_group_elements.png
|
||||
images/shape_ungroup.png
|
||||
images/source.png
|
||||
images/square.png
|
||||
images/text.png
|
||||
images/undo.png
|
||||
images/view-refresh.png
|
||||
images/zoom.png
|
||||
locale/locale.js
|
||||
locale/lang.af.js
|
||||
locale/lang.ar.js
|
||||
locale/lang.az.js
|
||||
locale/lang.be.js
|
||||
locale/lang.bg.js
|
||||
locale/lang.ca.js
|
||||
locale/lang.cs.js
|
||||
locale/lang.cy.js
|
||||
locale/lang.da.js
|
||||
locale/lang.de.js
|
||||
locale/lang.el.js
|
||||
locale/lang.en.js
|
||||
locale/lang.es.js
|
||||
locale/lang.et.js
|
||||
locale/lang.fa.js
|
||||
locale/lang.fi.js
|
||||
locale/lang.fr.js
|
||||
locale/lang.ga.js
|
||||
locale/lang.gl.js
|
||||
locale/lang.hi.js
|
||||
locale/lang.hr.js
|
||||
locale/lang.hu.js
|
||||
locale/lang.hy.js
|
||||
locale/lang.id.js
|
||||
locale/lang.is.js
|
||||
locale/lang.it.js
|
||||
locale/lang.iw.js
|
||||
locale/lang.ja.js
|
||||
locale/lang.ko.js
|
||||
locale/lang.lt.js
|
||||
locale/lang.lv.js
|
||||
locale/lang.mk.js
|
||||
locale/lang.ms.js
|
||||
locale/lang.mt.js
|
||||
locale/lang.nl.js
|
||||
locale/lang.no.js
|
||||
locale/lang.pl.js
|
||||
locale/lang.pt-PT.js
|
||||
locale/lang.ro.js
|
||||
locale/lang.ru.js
|
||||
locale/lang.sk.js
|
||||
locale/lang.sl.js
|
||||
locale/lang.sq.js
|
||||
locale/lang.sr.js
|
||||
locale/lang.sv.js
|
||||
locale/lang.sw.js
|
||||
locale/lang.th.js
|
||||
locale/lang.tl.js
|
||||
locale/lang.tr.js
|
||||
locale/lang.uk.js
|
||||
locale/lang.vi.js
|
||||
locale/lang.yi.js
|
||||
locale/lang.zh-CN.js
|
||||
locale/lang.zh-TW.js
|
||||
locale/lang.zh.js
|
||||
|
||||
# Dynamic loads
|
||||
canvg/canvg.js
|
||||
canvg/rgbcolor.js
|
||||
jspdf/underscore-min.js
|
||||
jspdf/jspdf.min.js
|
||||
jspdf/jspdf.plugin.svgToPdf.js
|
||||
|
||||
# Extensions (todo: add other dependency files)
|
||||
extensions/ext-arrows.js
|
||||
extensions/ext-closepath.js
|
||||
extensions/ext-connector.js
|
||||
extensions/ext-eyedropper.js
|
||||
extensions/ext-foreignobject.js
|
||||
extensions/ext-grid.js
|
||||
extensions/ext-helloworld.js
|
||||
extensions/ext-imagelib.js
|
||||
extensions/ext-markers.js
|
||||
extensions/ext-mathjax.js
|
||||
extensions/ext-overview_window.js
|
||||
extensions/ext-panning.js
|
||||
extensions/ext-php_savefile.js
|
||||
extensions/ext-polygon.js
|
||||
extensions/ext-server_moinsave.js
|
||||
extensions/ext-server_opensave.js
|
||||
extensions/ext-shapes.js
|
||||
extensions/ext-star.js
|
||||
extensions/ext-storage.js
|
||||
extensions/ext-webappfind.js
|
||||
extensions/ext-xdomain-messaging.js
|
||||
@@ -46,7 +46,6 @@ import {
|
||||
setStrings,
|
||||
init as localeInit
|
||||
} from './locale/locale.js';
|
||||
import loadStylesheets from '../external/load-stylesheets/index-es.js';
|
||||
|
||||
const {$q} = Utils;
|
||||
|
||||
@@ -57,25 +56,8 @@ const $ = [
|
||||
jQueryPluginSpinButton, jQueryPluginSVG, jQueryPluginContextMenu, jQueryPluginJPicker
|
||||
].reduce((jq, func) => func(jq), jQuery);
|
||||
|
||||
/*
|
||||
if (!$.loadingStylesheets) {
|
||||
$.loadingStylesheets = [];
|
||||
}
|
||||
*/
|
||||
|
||||
const homePage = 'https://github.com/SVG-Edit/svgedit';
|
||||
|
||||
const stylesheet = 'svg-editor.css';
|
||||
if (!$.loadingStylesheets.includes(stylesheet)) {
|
||||
$.loadingStylesheets.push(stylesheet);
|
||||
}
|
||||
const favicon = 'images/logo.png';
|
||||
if ($.loadingStylesheets.some((item) => {
|
||||
return !Array.isArray(item) || item[0] !== favicon;
|
||||
})) {
|
||||
$.loadingStylesheets.push([favicon, {favicon: true}]);
|
||||
}
|
||||
|
||||
// EDITOR PROPERTIES: (defined below)
|
||||
// curPrefs, curConfig, canvas, storage, uiStrings
|
||||
//
|
||||
@@ -193,7 +175,6 @@ const callbacks = [],
|
||||
* @property {boolean} [avoidClientSideDownload=false] Used by `ext-server_opensave.js`; set to `true` if you wish to always save to server and not only as fallback when client support is lacking
|
||||
* @property {boolean} [avoidClientSideOpen=false] Used by `ext-server_opensave.js`; set to `true` if you wish to always open from the server and not only as fallback when FileReader client support is lacking
|
||||
* @property {string[]} [extensions=module:SVGEditor~defaultExtensions] Extensions to load on startup. Use an array in `setConfig` and comma separated file names in the URL. Extension names must begin with "ext-". Note that as of version 2.7, paths containing "/", "\", or ":", are disallowed for security reasons. Although previous versions of this list would entirely override the default list, as of version 2.7, the defaults will always be added to this explicit list unless the configuration `noDefaultExtensions` is included.
|
||||
* @property {module:SVGEditor.Stylesheet[]} [stylesheets=["@default"]] An array of required stylesheets to load in parallel; include the value `"@default"` within this array to ensure all default stylesheets are loaded.
|
||||
* @property {string[]} [allowedOrigins=[]] Used by `ext-xdomain-messaging.js` to indicate which origins are permitted for cross-domain messaging (e.g., between the embedded editor and main editor code). Besides explicit domains, one might add '*' to allow all domains (not recommended for privacy/data integrity of your user's content!), `window.location.origin` for allowing the same origin (should be safe if you trust all apps on your domain), 'null' to allow `file:///` URL usage
|
||||
* @property {null|PlainObject} [colorPickerCSS=null] Object of CSS properties mapped to values (for jQuery) to apply to the color picker. See {@link http://api.jquery.com/css/#css-properties}. A `null` value (the default) will cause the CSS to default to `left` with a position equal to that of the `fill_color` or `stroke_color` element minus 140, and a `bottom` equal to 40
|
||||
* @property {string} [paramurl] This was available via URL only. Allowed an un-encoded URL within the query string (use "url" or "source" with a data: URI instead)
|
||||
@@ -309,7 +290,6 @@ let svgCanvas, urldata = {},
|
||||
// We do not put on defaultConfig to simplify object copying
|
||||
// procedures (we obtain instead from defaultExtensions)
|
||||
extensions: [],
|
||||
stylesheets: [],
|
||||
/**
|
||||
* Can use `location.origin` to indicate the current
|
||||
* origin. Can contain a '*' to allow all domains or 'null' (as
|
||||
@@ -537,11 +517,11 @@ editor.setConfig = function (opts, cfgCfg) {
|
||||
} else {
|
||||
editor.pref(key, val);
|
||||
}
|
||||
} else if (['extensions', 'stylesheets', 'allowedOrigins'].includes(key)) {
|
||||
} else if (['extensions', 'allowedOrigins'].includes(key)) {
|
||||
if (cfgCfg.overwrite === false &&
|
||||
(
|
||||
curConfig.preventAllURLConfig ||
|
||||
['allowedOrigins', 'stylesheets'].includes(key) ||
|
||||
['allowedOrigins'].includes(key) ||
|
||||
(key === 'extensions' && curConfig.lockExtensions)
|
||||
)
|
||||
) {
|
||||
@@ -728,7 +708,7 @@ editor.init = function () {
|
||||
curConfig.extensions = curConfig.extensions.concat(defaultExtensions);
|
||||
}
|
||||
// ...and remove any dupes
|
||||
['extensions', 'stylesheets', 'allowedOrigins'].forEach(function (cfg) {
|
||||
['extensions', 'allowedOrigins'].forEach(function (cfg) {
|
||||
curConfig[cfg] = $.grep(curConfig[cfg], function (n, i) { // Supposedly faster than filter per http://amandeep1986.blogspot.hk/2015/02/jquery-grep-vs-js-filter.html
|
||||
return i === curConfig[cfg].indexOf(n);
|
||||
});
|
||||
@@ -1045,43 +1025,8 @@ editor.init = function () {
|
||||
editor.pref('iconsize', size);
|
||||
$('#iconsize').val(size);
|
||||
|
||||
// Change icon size
|
||||
// $('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open')
|
||||
// .find('> svg, > img').each(function () {
|
||||
// this.setAttribute('width',size_num);
|
||||
// this.setAttribute('height',size_num);
|
||||
// });
|
||||
//
|
||||
// $.resizeSvgIcons({
|
||||
// '.flyout_arrow_horiz > svg, .flyout_arrow_horiz > img': size_num / 5,
|
||||
// '#logo > svg, #logo > img': size_num * 1.3,
|
||||
// '#tools_bottom .icon_label > *': (size_num === 16 ? 18 : size_num * .75)
|
||||
// });
|
||||
// if (size != 's') {
|
||||
// $.resizeSvgIcons({'#layerbuttons svg, #layerbuttons img': size_num * .6});
|
||||
// }
|
||||
|
||||
// Note that all rules will be prefixed with '#svg_editor' when parsed
|
||||
const cssResizeRules = {
|
||||
// '.tool_button,\
|
||||
// .push_button,\
|
||||
// .tool_button_current,\
|
||||
// .push_button_pressed,\
|
||||
// .disabled,\
|
||||
// .icon_label,\
|
||||
// .tools_flyout .tool_button': {
|
||||
// width: {s: '16px', l: '32px', xl: '48px'},
|
||||
// height: {s: '16px', l: '32px', xl: '48px'},
|
||||
// padding: {s: '1px', l: '2px', xl: '3px'}
|
||||
// },
|
||||
// '.tool_sep': {
|
||||
// height: {s: '16px', l: '32px', xl: '48px'},
|
||||
// margin: {s: '2px 2px', l: '2px 5px', xl: '2px 8px'}
|
||||
// },
|
||||
// '#main_icon': {
|
||||
// width: {s: '31px', l: '53px', xl: '75px'},
|
||||
// height: {s: '22px', l: '42px', xl: '64px'}
|
||||
// },
|
||||
'#tools_top': {
|
||||
left: 50 + $('#main_button').width(),
|
||||
height: 72
|
||||
@@ -1094,88 +1039,6 @@ editor.init = function () {
|
||||
left: 38,
|
||||
top: 74
|
||||
}
|
||||
// '#tools_bottom': {
|
||||
// left: {s: '27px', l: '46px', xl: '65px'},
|
||||
// height: {s: '58px', l: '98px', xl: '145px'}
|
||||
// },
|
||||
// '#color_tools': {
|
||||
// 'border-spacing': {s: '0 1px'},
|
||||
// 'margin-top': {s: '-1px'}
|
||||
// },
|
||||
// '#color_tools .icon_label': {
|
||||
// width: {l:'43px', xl: '60px'}
|
||||
// },
|
||||
// '.color_tool': {
|
||||
// height: {s: '20px'}
|
||||
// },
|
||||
// '#tool_opacity': {
|
||||
// top: {s: '1px'},
|
||||
// height: {s: 'auto', l:'auto', xl:'auto'}
|
||||
// },
|
||||
// '#tools_top input, #tools_bottom input': {
|
||||
// 'margin-top': {s: '2px', l: '4px', xl: '5px'},
|
||||
// height: {s: 'auto', l: 'auto', xl: 'auto'},
|
||||
// border: {s: '1px solid #555', l: 'auto', xl: 'auto'},
|
||||
// 'font-size': {s: '.9em', l: '1.2em', xl: '1.4em'}
|
||||
// },
|
||||
// '#zoom_panel': {
|
||||
// 'margin-top': {s: '3px', l: '4px', xl: '5px'}
|
||||
// },
|
||||
// '#copyright, #tools_bottom .label': {
|
||||
// 'font-size': {l: '1.5em', xl: '2em'},
|
||||
// 'line-height': {s: '15px'}
|
||||
// },
|
||||
// '#tools_bottom_2': {
|
||||
// width: {l: '295px', xl: '355px'},
|
||||
// top: {s: '4px'}
|
||||
// },
|
||||
// '#tools_top > div, #tools_top': {
|
||||
// 'line-height': {s: '17px', l: '34px', xl: '50px'}
|
||||
// },
|
||||
// '.dropdown button': {
|
||||
// height: {s: '18px', l: '34px', xl: '40px'},
|
||||
// 'line-height': {s: '18px', l: '34px', xl: '40px'},
|
||||
// 'margin-top': {s: '3px'}
|
||||
// },
|
||||
// '#tools_top label, #tools_bottom label': {
|
||||
// 'font-size': {s: '1em', l: '1.5em', xl: '2em'},
|
||||
// height: {s: '25px', l: '42px', xl: '64px'}
|
||||
// },
|
||||
// 'div.toolset': {
|
||||
// height: {s: '25px', l: '42px', xl: '64px'}
|
||||
// },
|
||||
// '#tool_bold, #tool_italic': {
|
||||
// 'font-size': {s: '1.5em', l: '3em', xl: '4.5em'}
|
||||
// },
|
||||
// '#sidepanels': {
|
||||
// top: {s: '50px', l: '88px', xl: '125px'},
|
||||
// bottom: {s: '51px', l: '68px', xl: '65px'}
|
||||
// },
|
||||
// '#layerbuttons': {
|
||||
// width: {l: '130px', xl: '175px'},
|
||||
// height: {l: '24px', xl: '30px'}
|
||||
// },
|
||||
// '#layerlist': {
|
||||
// width: {l: '128px', xl: '150px'}
|
||||
// },
|
||||
// '.layer_button': {
|
||||
// width: {l: '19px', xl: '28px'},
|
||||
// height: {l: '19px', xl: '28px'}
|
||||
// },
|
||||
// 'input.spin-button': {
|
||||
// 'background-image': {l: 'url('images/spinbtn_updn_big.png')', xl: 'url('images/spinbtn_updn_big.png')'},
|
||||
// 'background-position': {l: '100% -5px', xl: '100% -2px'},
|
||||
// 'padding-right': {l: '24px', xl: '24px' }
|
||||
// },
|
||||
// 'input.spin-button.up': {
|
||||
// 'background-position': {l: '100% -45px', xl: '100% -42px'}
|
||||
// },
|
||||
// 'input.spin-button.down': {
|
||||
// 'background-position': {l: '100% -85px', xl: '100% -82px'}
|
||||
// },
|
||||
// '#position_opts': {
|
||||
// width: {all: (size_num*4) +'px'}
|
||||
// }
|
||||
};
|
||||
|
||||
let ruleElem = $('#tool_size_rules');
|
||||
@@ -1443,52 +1306,6 @@ editor.init = function () {
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Since stylesheets may be added out of order, we indicate the desired order
|
||||
* for defaults and others after them (in an indeterminate order).
|
||||
* @param {string} stylesheetFile
|
||||
* @returns {Integer|PositiveInfinity}
|
||||
*/
|
||||
function getStylesheetPriority (stylesheetFile) {
|
||||
switch (stylesheetFile) {
|
||||
case 'jgraduate/css/jPicker.css':
|
||||
return 1;
|
||||
case 'jgraduate/css/jGraduate.css':
|
||||
return 2;
|
||||
case 'svg-editor.css':
|
||||
return 3;
|
||||
case 'spinbtn/jQuery.SpinButton.css':
|
||||
return 4;
|
||||
default:
|
||||
return Infinity;
|
||||
}
|
||||
}
|
||||
let stylesheets = $.loadingStylesheets.sort((a, b) => {
|
||||
const priorityA = getStylesheetPriority(a);
|
||||
const priorityB = getStylesheetPriority(b);
|
||||
if (priorityA === priorityB) {
|
||||
return 0;
|
||||
}
|
||||
return priorityA > priorityB;
|
||||
});
|
||||
if (curConfig.stylesheets.length) {
|
||||
// Ensure a copy with unique items
|
||||
stylesheets = [...new Set(curConfig.stylesheets)];
|
||||
const idx = stylesheets.indexOf('@default');
|
||||
if (idx > -1) {
|
||||
stylesheets.splice(idx, 1, ...$.loadingStylesheets);
|
||||
}
|
||||
}
|
||||
await loadStylesheets(stylesheets, {
|
||||
acceptErrors ({stylesheetURL, reject, resolve}) {
|
||||
if ($.loadingStylesheets.includes(stylesheetURL)) {
|
||||
reject(new Error(`Missing expected stylesheet: ${stylesheetURL}`));
|
||||
return;
|
||||
}
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
$('#svg_container')[0].style.visibility = 'visible';
|
||||
await editor.runCallbacks();
|
||||
}
|
||||
@@ -1,783 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- AUTO-GENERATED FROM svg-editor-es.html; DO NOT EDIT; use build/build-html.js to build -->
|
||||
<html>
|
||||
<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" />
|
||||
|
||||
<!-- No-op until loaded dynamically (could make configurable) -->
|
||||
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
|
||||
|
||||
<!-- STYLESHEETS (others loaded dynamically) -->
|
||||
<style id="styleoverrides" media="screen"></style>
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
|
||||
<!-- As yet no ES6 Module support -->
|
||||
<!--{if jquery_release}>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
||||
<!{else}-->
|
||||
<script src="jquery.min.js"></script>
|
||||
<!--{endif}-->
|
||||
|
||||
<!-- Lacking browser support -->
|
||||
<script nomodule="" src="redirect-on-no-module-support.js"></script>
|
||||
<script type="module" src="redirect-on-lacking-support.js"></script>
|
||||
|
||||
<!-- As yet no ES6 Module support -->
|
||||
<script src="jquery-ui/jquery-ui-1.8.17.custom.min.js"></script>
|
||||
|
||||
<!-- Browser polyfills -->
|
||||
<script src="../external/dom-polyfill/dom-polyfill.js"></script>
|
||||
|
||||
<!-- ES6+ polyfills (Babel) -->
|
||||
<script src="../external/core-js-bundle/minified.js"></script>
|
||||
<script src="../external/regenerator-runtime/runtime.js"></script>
|
||||
|
||||
<!-- If you do not wish to add extensions by URL, you can add calls
|
||||
within the following file to svgEditor.setConfig -->
|
||||
<script type="module" src="xdomain-svgedit-config-es.js"></script>
|
||||
|
||||
<!-- FEEDS -->
|
||||
<link rel="alternate" type="application/atom+xml"
|
||||
title="SVG-edit General Discussion"
|
||||
href="https://groups.google.com/group/svg-edit/feed/atom_v1_0_msgs.xml"/>
|
||||
<link rel="alternate" type="application/atom+xml"
|
||||
title="SVG-edit Updates (Commits)"
|
||||
href="https://github.com/SVG-Edit/svgedit/commits/master.atom"/>
|
||||
|
||||
<title>SVG-edit</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="svg_container" style="visibility: hidden;">
|
||||
<div id="svg_editor" role="main">
|
||||
<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">
|
||||
<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></div>
|
||||
Open SVG
|
||||
</li>
|
||||
<li id="tool_import" style="display:none;">
|
||||
<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>
|
||||
<li id="tool_editor_prefs">
|
||||
<div></div>
|
||||
Editor Preferences
|
||||
</li>
|
||||
<li id="tool_editor_homepage">
|
||||
<div></div>
|
||||
SVG-Edit Home Page
|
||||
</li>
|
||||
</ul>
|
||||
</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>
|
||||
<label id="classLabel" title="Element class">
|
||||
<span>class:</span>
|
||||
<input id="elem_class" class="attr_changer"
|
||||
data-attr="class" 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" class="toolset"
|
||||
title="Change Rectangle Corner Radius">
|
||||
<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>
|
||||
<li style="font-family:courier">Courier</li>
|
||||
<li style="font-family:helvetica">Helvetica</li>
|
||||
<li style="font-family:times">Times</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 id="tool_node_link" class="tool_button push_button_pressed"
|
||||
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 id="tools_rect_show" class="tool_button flyout_current"
|
||||
title="Square/Rect Tool">
|
||||
<div class="flyout_arrow_horiz"></div>
|
||||
</div>
|
||||
<div id="tools_ellipse_show" class="tool_button flyout_current"
|
||||
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">—</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="https://github.com/SVG-Edit/svgedit" 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: https://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">हिन्दी, हिंदी</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_sl" value="sl">Slovenščina</option>
|
||||
<option id="lang_zh-CN" value="zh-CN">简体中文</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 & Rulers</legend>
|
||||
<label>
|
||||
<span id="svginfo_rulers_onoff">Show rulers</span>
|
||||
<input id="show_rulers" type="checkbox"
|
||||
value="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<span class="shortcut">META+X</span></a></li>
|
||||
<li><a href="#copy">Copy<span class="shortcut">META+C</span></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<span class="shortcut">BACKSPACE</span></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">CTRL+SHFT+]</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">CTRL+SHFT+[</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>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,783 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- AUTO-GENERATED FROM xdomain-svg-editor-es.html; DO NOT EDIT; use build/build-html.js to build -->
|
||||
<html>
|
||||
<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" />
|
||||
|
||||
<!-- No-op until loaded dynamically (could make configurable) -->
|
||||
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
|
||||
|
||||
<!-- STYLESHEETS (others loaded dynamically) -->
|
||||
<style id="styleoverrides" media="screen"></style>
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
|
||||
<!-- As yet no ES6 Module support -->
|
||||
<!--{if jquery_release}>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
||||
<!{else}-->
|
||||
<script src="jquery.min.js"></script>
|
||||
<!--{endif}-->
|
||||
|
||||
<!-- Lacking browser support -->
|
||||
|
||||
<script defer="defer" src="../../dist/redirect-on-lacking-support.js"></script>
|
||||
|
||||
<!-- As yet no ES6 Module support -->
|
||||
<script src="jquery-ui/jquery-ui-1.8.17.custom.min.js"></script>
|
||||
|
||||
<!-- Browser polyfills -->
|
||||
<script src="../../dist/dom-polyfill.js"></script>
|
||||
|
||||
<!-- ES6+ polyfills (Babel) -->
|
||||
<script src="../external/core-js-bundle/minified.js"></script>
|
||||
<script src="../external/regenerator-runtime/runtime.js"></script>
|
||||
|
||||
<!-- If you do not wish to add extensions by URL, you can add calls
|
||||
within the following file to svgEditor.setConfig -->
|
||||
<script defer="defer" src="xdomain-svgedit-config-iife.js"></script>
|
||||
|
||||
<!-- FEEDS -->
|
||||
<link rel="alternate" type="application/atom+xml"
|
||||
title="SVG-edit General Discussion"
|
||||
href="https://groups.google.com/group/svg-edit/feed/atom_v1_0_msgs.xml"/>
|
||||
<link rel="alternate" type="application/atom+xml"
|
||||
title="SVG-edit Updates (Commits)"
|
||||
href="https://github.com/SVG-Edit/svgedit/commits/master.atom"/>
|
||||
|
||||
<title>SVG-edit</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="svg_container" style="visibility: hidden;">
|
||||
<div id="svg_editor" role="main">
|
||||
<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">
|
||||
<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></div>
|
||||
Open SVG
|
||||
</li>
|
||||
<li id="tool_import" style="display:none;">
|
||||
<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>
|
||||
<li id="tool_editor_prefs">
|
||||
<div></div>
|
||||
Editor Preferences
|
||||
</li>
|
||||
<li id="tool_editor_homepage">
|
||||
<div></div>
|
||||
SVG-Edit Home Page
|
||||
</li>
|
||||
</ul>
|
||||
</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>
|
||||
<label id="classLabel" title="Element class">
|
||||
<span>class:</span>
|
||||
<input id="elem_class" class="attr_changer"
|
||||
data-attr="class" 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" class="toolset"
|
||||
title="Change Rectangle Corner Radius">
|
||||
<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>
|
||||
<li style="font-family:courier">Courier</li>
|
||||
<li style="font-family:helvetica">Helvetica</li>
|
||||
<li style="font-family:times">Times</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 id="tool_node_link" class="tool_button push_button_pressed"
|
||||
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 id="tools_rect_show" class="tool_button flyout_current"
|
||||
title="Square/Rect Tool">
|
||||
<div class="flyout_arrow_horiz"></div>
|
||||
</div>
|
||||
<div id="tools_ellipse_show" class="tool_button flyout_current"
|
||||
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">—</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="https://github.com/SVG-Edit/svgedit" 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: https://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">हिन्दी, हिंदी</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_sl" value="sl">Slovenščina</option>
|
||||
<option id="lang_zh-CN" value="zh-CN">简体中文</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 & Rulers</legend>
|
||||
<label>
|
||||
<span id="svginfo_rulers_onoff">Show rulers</span>
|
||||
<input id="show_rulers" type="checkbox"
|
||||
value="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<span class="shortcut">META+X</span></a></li>
|
||||
<li><a href="#copy">Copy<span class="shortcut">META+C</span></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<span class="shortcut">BACKSPACE</span></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">CTRL+SHFT+]</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">CTRL+SHFT+[</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>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user