Starting Branch to simplify Build process
This commit is contained in:
JFH
BIN
src/.DS_Store
vendored
Normal file
BIN
src/.DS_Store
vendored
Normal file
Binary file not shown.
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"
|
||||
@@ -18,26 +18,19 @@ For default config and extensions (and available options) available to
|
||||
`setConfig()`, see the file `docs/tutorials/ConfigOptions.md`
|
||||
*/
|
||||
|
||||
import svgEditor from './editor/svg-editor.js';
|
||||
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:
|
||||
*/
|
||||
/* 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:
|
||||
*/
|
||||
/* 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):
|
||||
*/
|
||||
/* 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,
|
||||
});
|
||||
|
||||
@@ -58,12 +51,7 @@ svgEditor.setConfig({
|
||||
],
|
||||
// noDefaultExtensions can only be meaningfully used in
|
||||
// `svgedit-config-es.js` or in the URL
|
||||
noDefaultExtensions: false,
|
||||
});
|
||||
|
||||
// STYLESHEET CONFIG
|
||||
svgEditor.setConfig({
|
||||
stylesheets: ['@default', '../svgedit-custom.css']
|
||||
noDefaultExtensions: false
|
||||
});
|
||||
|
||||
// OTHER CONFIG
|
||||
@@ -123,7 +111,7 @@ svgEditor.setConfig({
|
||||
});
|
||||
|
||||
// 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
|
||||
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>
|
||||
BIN
src/external/.DS_Store
vendored
Normal file
BIN
src/external/.DS_Store
vendored
Normal file
Binary file not shown.
File diff suppressed because one or more lines are too long
@@ -1,6 +0,0 @@
|
||||
import svgEditor from './editor/svg-editor.js';
|
||||
|
||||
svgEditor.setConfig({
|
||||
canvasName: 'xdomain', // Namespace this
|
||||
allowedOrigins: ['*']
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user