github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

V7 preview (#480)

Browse Source 
* #issue-fix The new menu will ask if you want to erase the current content but it will ignore the answer

* #issue-fix  dialog needs to be closer than the original

* #issue-fix main menu alignment changes

* #issue_fix double click and opensvg issue fixed

* #issue-fix process_cancel change to seConfirm

* #issue-fix review how the top toolbar display when many buttons are displayed

* #issue-fix unwanted css reoved

* #issue-fix BOTTOM TOOLS Make sure all features of the bottom toolbar are working

* #issue-fix IMPORT IMAGE menu open issue fixed

* #issue-fix alert dialog overwrite style

* #issue-fix lint issue fixed

* npm update + associated fixes

* #36 look of opacity button should like the zoom button (without the dropdown button)

* #37 Clicking anywhere on the bottom bar (for example below the opacity button is displaying the “color popup”.)

* #38 The opacity button does not update with the current element

* #42 When you import an image, it works well but the dialog should disappear automatically

* Fixes #53: 4th option for the background display fixed

* Fixes #53: 4th option for the background fixed

* #49 the x button does not work

* Fixes #41: Alignment fixes in bottom bar

* fix test scenario

* #39 opacity button/stroke size/radius button don’t allow the 0 value

* #41 The look and alignment of stroke size and stroke style should be consistent with the rest of the bottom bar.

* #44 Text font dropdown is broken

* #52 Fix the export

* Fixes #44: Text font dropdown fixed

* Fixes #44: Text font dropdown fixed

* Fixes #44: Text font dropdown fixed

* Fixes #44: Text font dropdown fixed

* Update index.html

* update husky

* fixes

* moves from index.html to js

* fix #66

* fix #48 first set of new icons

* Reorganize tools in left panel to be more intuitive

* Update button styles to adapt to new icons

* Fix #48 new set of icons for alignments

* Variabilisation of icon bkgd colors
Update of color choice to fit new icons design

* Update canvas and rulers colors

* Improve layer handle design

* Modernize SVG Logo but keeping original spirit

* Fix #48 continue improve icons

* Continue to reorganise left panel

* Update right panel handle for layers

* Fix #48 new set of icons for main menu

* Improve main menu design

* Rework menu organisation

* Rework menu organisation

* Update input element design

* New icons

* Improve Zoom Module

* Improve Color Picker Module

* New icons

* New icons

* #65 restore the feature of start/end marker lines partially did

* #64 The export dialog needs to include the quality options (except for PDF)

* #39 opacity button/stroke size/radius button don’t allow the 0 value

* #39 eslint changes

* #69 menu button style overwrite

* #65 restore the feature of start/end marker lines

* #43 With a small window, the look of the top toolbar is broken

* #43 tool top alignment revert

* #46 Move this jQuery component to a web component  for graduate and picker components

* #46 Move this jQuery component to a web component

* remove some non standard lint rules

* #46 picker convert as pure javascript changes

* #46 jquery plugin convert to pure javascript

* #46 jquery plugin change to pure javascript

* #46 jquery remove and convert to pure javascript

* #46 slider issue fixed

* #46 ColorValuePicker and js convertion

* #46 globals $ remov from slider class

* #46 jquery convert pure javascript changes

* #46 jquery to js convertion changes

* #46 paintbox and current element color set issue fixed

* #46 unwanted files removed

* #46 $.extend modify changes

* #46 extend modifiey changes

* #46 $.extend change to pure javascript

* #46 extend and data changes

* #46 jquery removed

* #45 These buttons don't work and dropdown is broken

* #45 These buttons don't work and dropdown is broken

* #45 These buttons don't work and dropdown is broken commit reverted

* #43 With a small window, the look of the top toolbar is broken

* Update jQuery.jPicker.js

* #76 draggable modification changes

* #76 jquery-ui-1.8.17.custom.min.js removed from editor

* #76 jquery ui file removed

* npm update

* #77 console issue fixed

* #77 <SVG> button issue fixed

* #77 shortkey issue fixed

* #77 jquery hotkeys plugin changes

* #77 hotkey plugin related changes

* #78 hotkey related code comment.

* #78 js-hotkeys/jquery.hotkeys.min.js file removed from svgedit.js

* #51 Rewrite the color palette without elix

* #81 unwanted files removed

* #81 folder name renamed

* #81 folder rename changes

* #81 jquery-ui  folder renamed

* #81 jquery modify changes

* #81 globals $ removed

Co-authored-by: Agriya Dev5 <agriya.dev5@agriya.in>
Co-authored-by: mathieucura <mathieu@optimistik.fr>
This commit is contained in:
JFH
2021-03-05 12:45:07 +01:00
committed by GitHub
parent 974a4729ec
commit 1af0cd0572
419 changed files with 10798 additions and 11105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/common/browser.js
View File

@@ -49,7 +49,7 @@ const seg = path.createSVGPathSegLinetoAbs(5, 5);
try {
seglist.replaceItem(seg, 1);
return true;
} catch (err) {}
}catch (err) {/* empty */}
return false;
}());
@@ -61,7 +61,7 @@ const seg = path.createSVGPathSegLinetoAbs(5, 5);
try {
seglist.insertItemBefore(seg, 1);
return true;
} catch (err) {}
}catch (err) {/* empty */}
return false;
}());

4
src/common/units.js
View File

@@ -55,7 +55,6 @@ let typeMap_ = {};
* @returns {Integer} The number of digits number should be rounded to
*/
/* eslint-disable jsdoc/valid-types */
/**
* @typedef {PlainObject} module:units.TypeMap
* @property {Float} em
@@ -68,7 +67,6 @@ let typeMap_ = {};
* @property {Integer} px
* @property {0} %
*/
/* eslint-enable jsdoc/valid-types */
/**
* Initializes this module.
@@ -301,7 +299,7 @@ export const isValidUnit = function (attr, val, selectedElement) {
try {
const elem = elementContainer_.getElement(val);
result = (!elem || elem === selectedElement);
} catch (e) {}
} catch (e) {/* empty fn */}
return result;
}
return true;

15
src/editor/ConfigObj.js
View File

@@ -1,7 +1,6 @@
/* globals $ */
// eslint-disable-next-line node/no-unpublished-import
import deparam from 'deparam';
import {mergeDeep} from './components/jgraduate/Util.js';
/**
* Escapes special characters in a regular expression.
@@ -259,7 +258,7 @@ export default class ConfigObj {
if (this.urldata.extensions) {
// For security reasons, disallow cross-domain or cross-folder
// extensions via URL
this.urldata.extensions = this.urldata.extensions.match(/[:/\\]/)
this.urldata.extensions = (/[:/\\]/).test(this.urldata.extensions)
? ''
: this.urldata.extensions.split(',');
}
@@ -326,7 +325,7 @@ export default class ConfigObj {
loadContentAndPrefs () {
if (!this.curConfig.forceStorage &&
(this.curConfig.noStorageOnLoad ||
!document.cookie.match(/(?:^|;\s*)svgeditstore=(?:prefsAndContent|prefsOnly)/)
!(/(?:^|;\s*)svgeditstore=(?:prefsAndContent|prefsOnly)/).test(document.cookie)
)
) {
return;
@@ -336,7 +335,7 @@ export default class ConfigObj {
if (this.editor.storage && // Cookies do not have enough available memory to hold large documents
(this.curConfig.forceStorage ||
(!this.curConfig.noStorageOnLoad &&
document.cookie.match(/(?:^|;\s*)svgeditstore=prefsAndContent/))
(/(?:^|;\s*)svgeditstore=prefsAndContent/).test(document.cookie))
)
) {
const name = 'svgedit-' + this.curConfig.canvasName;
@@ -398,7 +397,8 @@ export default class ConfigObj {
*/
const extendOrAdd = (cfgObj, key, val) => {
if (cfgObj[key] && typeof cfgObj[key] === 'object') {
$.extend(true, cfgObj[key], val);
// $.extend(true, cfgObj[key], val);
cfgObj[key] = mergeDeep(cfgObj[key], val);
} else {
cfgObj[key] = val;
}
@@ -446,7 +446,8 @@ export default class ConfigObj {
extendOrAdd(this.defaultConfig, key, val);
} else if (this.defaultConfig[key] && typeof this.defaultConfig[key] === 'object') {
this.curConfig[key] = Array.isArray(this.defaultConfig[key]) ? [] : {};
$.extend(true, this.curConfig[key], val); // Merge properties recursively, e.g., on initFill, initStroke objects
this.curConfig[key] = mergeDeep(this.curConfig[key], val);
// $.extend(true, this.curConfig[key], val); // Merge properties recursively, e.g., on initFill, initStroke objects
} else {
this.curConfig[key] = val;
}

109
src/editor/EditorStartup.js
View File

@@ -4,7 +4,7 @@ import {convertUnit} from '../common/units.js';
import {
hasCustomHandler, getCustomHandler, injectExtendedContextMenuItemsIntoDom
} from './contextmenu.js';
import editorTemplate from './templates/editorTemplate.js';
import SvgCanvas from '../svgcanvas/svgcanvas.js';
import LayersPanel from './panels/LayersPanel.js';
import LeftPanelHandlers from './panels/LeftPanelHandlers.js';
@@ -38,7 +38,7 @@ const readySignal = () => {
cancelable: true
});
w.document.documentElement.dispatchEvent(svgEditorReadyEvent);
} catch (e) {}
} catch (e) {/* empty fn */}
}
};
@@ -61,8 +61,12 @@ class EditorStartup {
* @returns {void}
*/
async init () {
// allow to prepare the dom without display
$id('svg_editor').style.visibility = 'hidden';
try {
// Image props dialog added to DOM
// add editor components to the DOM
document.body.append(editorTemplate.content.cloneNode(true));
// Image props dialog added to DOM
const newSeImgPropDialog = document.createElement('se-img-prop-dialog');
newSeImgPropDialog.setAttribute('id', 'se-img-prop');
document.body.append(newSeImgPropDialog);
@@ -82,8 +86,11 @@ class EditorStartup {
const promptBox = document.createElement('se-prompt-dialog');
promptBox.setAttribute('id', 'se-prompt-dialog');
document.body.append(promptBox);
// Export dialog added to DOM
const exportDialog = document.createElement('se-export-dialog');
exportDialog.setAttribute('id', 'se-export-dialog');
document.body.append(exportDialog);
} catch (err) {
// eslint-disable-next-line no-console
console.error(err);
}
@@ -220,8 +227,8 @@ class EditorStartup {
}
});
$('#font_family').change((evt) => {
this.svgCanvas.setFontFamily(evt.currentTarget.value);
$('#tool_font_family').change((evt) => {
this.svgCanvas.setFontFamily(evt.originalEvent.detail.value);
});
$('#seg_type').change((evt) => {
@@ -278,21 +285,32 @@ class EditorStartup {
panning = false;
});
$(document).bind('keydown', 'space', function (evt) {
this.svgCanvas.spaceKey = keypan = true;
evt.preventDefault();
}.bind(this)).bind('keyup', 'space', function (evt) {
evt.preventDefault();
this.svgCanvas.spaceKey = keypan = false;
}.bind(this)).bind('keydown', 'shift', function (evt) {
if (this.svgCanvas.getMode() === 'zoom') {
document.addEventListener('keydown', (e) => {
if (e.target.nodeName !== 'BODY') return;
if(e.code.toLowerCase() === 'space'){
this.svgCanvas.spaceKey = keypan = true;
e.preventDefault();
} else if((e.key.toLowerCase() === 'shift') && (this.svgCanvas.getMode() === 'zoom')){
this.workarea.css('cursor', zoomOutIcon);
e.preventDefault();
} else {
return;
}
}.bind(this)).bind('keyup', 'shift', function (evt) {
if (this.svgCanvas.getMode() === 'zoom') {
});
document.addEventListener('keyup', (e) => {
if (e.target.nodeName !== 'BODY') return;
if(e.code.toLowerCase() === 'space'){
this.svgCanvas.spaceKey = keypan = false;
e.preventDefault();
} else if((e.key.toLowerCase() === 'shift') && (this.svgCanvas.getMode() === 'zoom')){
this.workarea.css('cursor', zoomInIcon);
e.preventDefault();
} else {
return;
}
}.bind(this));
});
/**
* @function module:SVGthis.setPanning
@@ -455,7 +473,7 @@ class EditorStartup {
});
$id('tool_import').addEventListener('click', (e) => {
this.clickImport();
window.dispatchEvent(new CustomEvent('importImage'));
window.dispatchEvent(new CustomEvent('importImages'));
});
$id('tool_save').addEventListener('click', function (e) {
const $editorDialog = document.getElementById('se-svg-editor-dialog');
@@ -466,7 +484,11 @@ class EditorStartup {
this.clickSave();
}
}.bind(this));
$id('tool_export').addEventListener('click', this.clickExport.bind(this));
// this.clickExport.bind(this)
$id('tool_export').addEventListener('click', function (e) {
document.getElementById('se-export-dialog').setAttribute('dialog', 'open');
});
$id('se-export-dialog').addEventListener('change', this.clickExport.bind(this));
$id('tool_docprops').addEventListener('click', this.showDocProperties.bind(this));
$id('tool_editor_prefs').addEventListener('click', this.showPreferences.bind(this));
$id('tool_editor_homepage').addEventListener('click', this.openHomePage.bind(this));
@@ -617,14 +639,15 @@ class EditorStartup {
* @param {Event} e
* @returns {void}
*/
const editorObj = this;
const importImage = function (e) {
$.process_cancel(this.uiStrings.notification.loadingImage);
document.getElementById('se-prompt-dialog').title = editorObj.uiStrings.notification.loadingImage;
e.stopPropagation();
e.preventDefault();
$('#main_menu').hide();
const file = (e.type === 'drop') ? e.dataTransfer.files[0] : this.files[0];
if (!file) {
$('#dialog_box').hide();
document.getElementById('se-prompt-dialog').setAttribute('close', true);
return;
}
@@ -637,15 +660,15 @@ class EditorStartup {
if (file.type.includes('svg')) {
reader = new FileReader();
reader.onloadend = function (ev) {
const newElement = this.svgCanvas.importSvgString(ev.target.result, true);
this.svgCanvas.ungroupSelectedElement();
this.svgCanvas.ungroupSelectedElement();
this.svgCanvas.groupSelectedElements();
this.svgCanvas.alignSelectedElements('m', 'page');
this.svgCanvas.alignSelectedElements('c', 'page');
const newElement = editorObj.svgCanvas.importSvgString(ev.target.result, true);
editorObj.svgCanvas.ungroupSelectedElement();
editorObj.svgCanvas.ungroupSelectedElement();
editorObj.svgCanvas.groupSelectedElements();
editorObj.svgCanvas.alignSelectedElements('m', 'page');
editorObj.svgCanvas.alignSelectedElements('c', 'page');
// highlight imported element, otherwise we get strange empty selectbox
this.svgCanvas.selectOnly([newElement]);
$('#dialog_box').hide();
editorObj.svgCanvas.selectOnly([newElement]);
document.getElementById('se-prompt-dialog').setAttribute('close', true);
};
reader.readAsText(file);
} else {
@@ -659,23 +682,23 @@ class EditorStartup {
* @returns {void}
*/
const insertNewImage = function (imageWidth, imageHeight) {
const newImage = this.svgCanvas.addSVGElementFromJson({
const newImage = editorObj.svgCanvas.addSVGElementFromJson({
element: 'image',
attr: {
x: 0,
y: 0,
width: imageWidth,
height: imageHeight,
id: this.svgCanvas.getNextId(),
id: editorObj.svgCanvas.getNextId(),
style: 'pointer-events:inherit'
}
});
this.svgCanvas.setHref(newImage, result);
this.svgCanvas.selectOnly([newImage]);
this.svgCanvas.alignSelectedElements('m', 'page');
this.svgCanvas.alignSelectedElements('c', 'page');
this.topPanelHandlers.updateContextPanel();
$('#dialog_box').hide();
editorObj.svgCanvas.setHref(newImage, result);
editorObj.svgCanvas.selectOnly([newImage]);
editorObj.svgCanvas.alignSelectedElements('m', 'page');
editorObj.svgCanvas.alignSelectedElements('c', 'page');
editorObj.topPanelHandlers.updateContextPanel();
document.getElementById('se-prompt-dialog').setAttribute('close', true);
};
// create dummy img so we know the default dimensions
let imgWidth = 100;
@@ -697,6 +720,8 @@ class EditorStartup {
this.workarea[0].addEventListener('dragover', this.onDragOver);
this.workarea[0].addEventListener('dragleave', this.onDragLeave);
this.workarea[0].addEventListener('drop', importImage);
const imgImport = $('<input type="file">').change(importImage);
$(window).on('importImages', () => imgImport.click());
}
this.updateCanvas(true);
@@ -722,7 +747,7 @@ class EditorStartup {
const {langParam, langData} = await this.putLocale(this.configObj.pref('lang'), this.goodLangs);
await this.setLang(langParam, langData);
$id('svg_container').style.visibility = 'visible';
$id('svg_editor').style.visibility = 'visible';
try {
// load standard extensions
@@ -743,7 +768,7 @@ class EditorStartup {
return this.addExtension(name, (initfn && initfn.bind(this)), {$, langParam});
} catch (err) {
// Todo: Add config to alert any errors
console.error('Extension failed to load: ' + extname + '; ', err); // eslint-disable-line no-console
console.error('Extension failed to load: ' + extname + '; ', err);
return undefined;
}
})
@@ -766,7 +791,7 @@ class EditorStartup {
return this.addExtension(name, (initfn && initfn.bind(this)), {$, langParam});
} catch (err) {
// Todo: Add config to alert any errors
console.error('Extension failed to load: ' + extPathName + '; ', err); // eslint-disable-line no-console
console.error('Extension failed to load: ' + extPathName + '; ', err);
return undefined;
}
})
@@ -802,7 +827,7 @@ class EditorStartup {
this.svgCanvas.call('extensions_added');
} catch (err) {
// Todo: Report errors through the UI
console.log(err); // eslint-disable-line no-console
console.log(err);
}
}
@@ -813,7 +838,7 @@ class EditorStartup {
* @fires module:svgcanvas.SvgCanvas#event:message
* @returns {void}
*/
messageListener ({data, origin}) { // eslint-disable-line no-shadow
messageListener ({data, origin}) {
// console.log('data, origin, extensionsAdded', data, origin, extensionsAdded);
const messageObj = {data, origin};
if (!this.extensionsAdded) {

4
src/editor/Rulers.js
View File

@@ -1,6 +1,6 @@
/* globals $ */
import {getTypeMap} from '../common/units.js';
import rulersTemplate from './templates/rulersTemplate.js';
/**
*
*/
@@ -18,6 +18,8 @@ class Rulers {
}
this.svgCanvas = editor.svgCanvas;
this.editor = editor;
// add rulers component to the DOM
document.body.append(rulersTemplate.content.cloneNode(true));
}
/**
* @type {Module}

16
src/editor/components/PaintBox.js
View File

@@ -1,4 +1,4 @@
/* globals $ */
import {jGraduate} from './jgraduate/jQuery.jGraduate.js';
/**
*
*/
@@ -10,16 +10,17 @@ class PaintBox {
constructor (container, type) {
// set up gradients to be used for the buttons
const svgdocbox = new DOMParser().parseFromString(
`<svg xmlns="http://www.w3.org/2000/svg">
`<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
<rect
fill="#000000" opacity="1" width="22" height="22"/>
fill="#000000" opacity="1" width="14" height="14"/>
<defs><linearGradient id="gradbox_${PaintBox.ctr++}"/></defs>
</svg>`,
'text/xml'
);
let docElem = svgdocbox.documentElement;
docElem = container.appendChild(document.importNode(docElem, true));
docElem = document.importNode(docElem, true);
container.appendChild(docElem);
this.rect = docElem.firstElementChild;
this.defs = docElem.getElementsByTagName('defs')[0];
@@ -46,7 +47,8 @@ class PaintBox {
case 'linearGradient':
case 'radialGradient': {
this.grad.remove();
this.grad = this.defs.appendChild(paint[ptype]);
this.grad = paint[ptype];
this.defs.appendChild(this.grad);
const id = this.grad.id = 'gradbox_' + this.type;
fillAttr = 'url(#' + id + ')';
break;
@@ -68,14 +70,14 @@ class PaintBox {
const opts = {alpha: opac};
if (color.startsWith('url(#')) {
let refElem = svgCanvas.getRefElem(color);
refElem = (refElem) ? refElem.cloneNode(true) : $('#' + type + '_color defs *')[0];
refElem = (refElem) ? refElem.cloneNode(true) : document.querySelectorAll('#' + type + '_color defs *')[0];
opts[refElem.tagName] = refElem;
} else if (color.startsWith('#')) {
opts.solidColor = color.substr(1);
} else {
opts.solidColor = 'none';
}
return new $.jGraduate.Paint(opts);
return new jGraduate.Paint(opts);
}
/**

391
src/editor/components/jgraduate/ColorValuePicker.js Normal file
View File

@@ -0,0 +1,391 @@
/* eslint-disable max-len */
/* eslint-disable no-bitwise */
/**
* @external Math
*/
/**
* @memberof external:Math
* @param {Float} value
* @param {Float} precision
* @returns {Float}
*/
function toFixedNumeric (value, precision) {
if (precision === undefined) precision = 0;
return Math.round(value * (10 ** precision)) / (10 ** precision);
}
/**
* Whether a value is `null` or `undefined`.
* @param {any} val
* @returns {boolean}
*/
const isNullish = (val) => {
return val === null || val === undefined;
};
/**
* Controls for all the input elements for the typing in color values.
*/
export default class ColorValuePicker {
/**
* @param {external:jQuery} picker
* @param {external:jQuery.jPicker.Color} color
* @param {external:jQuery.fn.$.fn.jPicker} bindedHex
* @param {Float} alphaPrecision
*/
constructor (picker, color, bindedHex, alphaPrecision) {
const that = this; // private properties and methods
const inputs = picker.querySelectorAll('td.Text input');
// input box key down - use arrows to alter color
/**
*
* @param {Event} e
* @returns {Event|false|void}
*/
function keyDown (e) {
if (e.target.value === '' && e.target !== hex && ((!isNullish(bindedHex) && e.target !== bindedHex) || isNullish(bindedHex))) return undefined;
if (!validateKey(e)) return e;
switch (e.target) {
case red:
switch (e.keyCode) {
case 38:
red.value = setValueInRange.call(that, (red.value << 0) + 1, 0, 255);
color.val('r', red.value, e.target);
return false;
case 40:
red.value = setValueInRange.call(that, (red.value << 0) - 1, 0, 255);
color.val('r', red.value, e.target);
return false;
}
break;
case green:
switch (e.keyCode) {
case 38:
green.value = setValueInRange.call(that, (green.value << 0) + 1, 0, 255);
color.val('g', green.value, e.target);
return false;
case 40:
green.value = setValueInRange.call(that, (green.value << 0) - 1, 0, 255);
color.val('g', green.value, e.target);
return false;
}
break;
case blue:
switch (e.keyCode) {
case 38:
blue.value = setValueInRange.call(that, (blue.value << 0) + 1, 0, 255);
color.val('b', blue.value, e.target);
return false;
case 40:
blue.value = setValueInRange.call(that, (blue.value << 0) - 1, 0, 255);
color.val('b', blue.value, e.target);
return false;
}
break;
case alpha:
switch (e.keyCode) {
case 38:
alpha.value = setValueInRange.call(that, Number.parseFloat(alpha.value) + 1, 0, 100);
color.val('a', toFixedNumeric((alpha.value * 255) / 100, alphaPrecision), e.target);
return false;
case 40:
alpha.value = setValueInRange.call(that, Number.parseFloat(alpha.value) - 1, 0, 100);
color.val('a', toFixedNumeric((alpha.value * 255) / 100, alphaPrecision), e.target);
return false;
}
break;
case hue:
switch (e.keyCode) {
case 38:
hue.value = setValueInRange.call(that, (hue.value << 0) + 1, 0, 360);
color.val('h', hue.value, e.target);
return false;
case 40:
hue.value =setValueInRange.call(that, (hue.value << 0) - 1, 0, 360);
color.val('h', hue.value, e.target);
return false;
}
break;
case saturation:
switch (e.keyCode) {
case 38:
saturation.value = setValueInRange.call(that, (saturation.value << 0) + 1, 0, 100);
color.val('s', saturation.value, e.target);
return false;
case 40:
saturation.value = setValueInRange.call(that, (saturation.value << 0) - 1, 0, 100);
color.val('s', saturation.value, e.target);
return false;
}
break;
case value:
switch (e.keyCode) {
case 38:
value.value = setValueInRange.call(that, (value.value << 0) + 1, 0, 100);
color.val('v', value.value, e.target);
return false;
case 40:
value.value = setValueInRange.call(that, (value.value << 0) - 1, 0, 100);
color.val('v', value.value, e.target);
return false;
}
break;
}
return undefined;
}
// input box key up - validate value and set color
/**
* @param {Event} e
* @returns {Event|void}
* @todo Why is this returning an event?
*/
function keyUp (e) {
if (e.target.value === '' && e.target !== hex &&
((!isNullish(bindedHex) && e.target !== bindedHex) ||
isNullish(bindedHex))) return undefined;
if (!validateKey(e)) return e;
switch (e.target) {
case red:
red.value = setValueInRange.call(that, red.value, 0, 255);
color.val('r', red.value, e.target);
break;
case green:
green.value = setValueInRange.call(that, green.value, 0, 255);
color.val('g', green.value, e.target);
break;
case blue:
blue.value = setValueInRange.call(that, blue.value, 0, 255);
color.val('b', blue.value, e.target);
break;
case alpha:
alpha.value = setValueInRange.call(that, alpha.value, 0, 100);
color.val('a', toFixedNumeric((alpha.value * 255) / 100, alphaPrecision), e.target);
break;
case hue:
hue.value = setValueInRange.call(that, hue.value, 0, 360);
color.val('h', hue.value, e.target);
break;
case saturation:
saturation.value = setValueInRange.call(that, saturation.value, 0, 100);
color.val('s', saturation.value, e.target);
break;
case value:
value.value = setValueInRange.call(that, value.value, 0, 100);
color.val('v', value.value, e.target);
break;
case hex:
hex.value = hex.value.replace(/[^a-fA-F\d]/g, '').toLowerCase().substring(0, 6);
bindedHex && bindedHex.val(hex.value);
color.val('hex', hex.value !== '' ? hex.value : null, e.target);
break;
case bindedHex:
bindedHex.value = bindedHex.value.replace(/[^a-fA-F\d]/g, '').toLowerCase().substring(0, 6);
hex.val(bindedHex.value);
color.val('hex', bindedHex.value !== '' ? bindedHex.value : null, e.target);
break;
case ahex:
ahex.value = ahex.value.replace(/[^a-fA-F\d]/g, '').toLowerCase().substring(0, 2);
color.val('a', !isNullish(ahex.value) ? Number.parseInt(ahex.value, 16) : null, e.target);
break;
}
return undefined;
}
// input box blur - reset to original if value empty
/**
* @param {Event} e
* @returns {void}
*/
function blur (e) {
if (!isNullish(color.value)) {
switch (e.target) {
case red:
color.value = 'r';
red.value = color.value;
break;
case green:
color.value = 'g';
green.value = color.value;
break;
case blue:
color.value = 'b';
blue.value = color.value;
break;
case alpha:
color.value = 'a';
alpha.value = toFixedNumeric((color.value * 100) / 255, alphaPrecision);
break;
case hue:
color.value = 'h';
hue.value = color.value;
break;
case saturation:
color.value = 's';
saturation.value = color.value;
break;
case value:
color.value = 'v';
value.value = color.value;
break;
case hex:
case bindedHex:
color.value = 'hex';
hex.value = color.value;
bindedHex.value = color.value;
break;
case ahex:
color.value = 'ahex';
ahex.value = color.value.substring(6);
break;
}
}
}
/**
* @param {Event} e
* @returns {boolean}
*/
function validateKey (e) {
switch (e.keyCode) {
case 9:
case 16:
case 29:
case 37:
case 39:
return false;
case 'c'.charCodeAt():
case 'v'.charCodeAt():
if (e.ctrlKey) return false;
}
return true;
}
/**
* Constrain value within range.
* @param {Float|string} value
* @param {Float} min
* @param {Float} max
* @returns {Float|string} Returns a number or numeric string
*/
function setValueInRange (value, min, max) {
if (value === '' || isNaN(value)) return min;
if (value > max) return max;
if (value < min) return min;
return value;
}
/**
* @param {external:jQuery} ui
* @param {Element} context
* @returns {void}
*/
function colorChanged (ui, context) {
const all = ui.val('all');
if (context !== red) red.value = (!isNullish(all) ? all.r : '');
if (context !== green) green.value = (!isNullish(all) ? all.g : '');
if (context !== blue) blue.value = (!isNullish(all) ? all.b : '');
if (alpha && context !== alpha) alpha.value = (!isNullish(all) ? toFixedNumeric((all.a * 100) / 255, alphaPrecision) : '');
if (context !== hue) hue.value = (!isNullish(all) ? all.h : '');
if (context !== saturation) saturation.value = (!isNullish(all) ? all.s : '');
if (context !== value) value.value = (!isNullish(all) ? all.v : '');
if (context !== hex && ((bindedHex && context !== bindedHex) || !bindedHex)) hex.value = (!isNullish(all) ? all.hex : '');
if (bindedHex && context !== bindedHex && context !== hex) bindedHex.value = (!isNullish(all) ? all.hex : '');
if (ahex && context !== ahex) ahex.value = (!isNullish(all) ? all.ahex.substring(6) : '');
}
/**
* Unbind all events and null objects.
* @returns {void}
*/
function destroy () {
red.removeEventListener('keyup', keyUp);
green.removeEventListener('keyup', keyUp);
blue.removeEventListener('keyup', keyUp);
hue.removeEventListener('keyup', keyUp);
saturation.removeEventListener('keyup', keyUp);
value.removeEventListener('keyup', keyUp);
hex.removeEventListener('keyup', keyUp);
red.removeEventListener('blur', blur);
green.removeEventListener('blur', blur);
blue.removeEventListener('blur', blur);
hue.removeEventListener('blur', blur);
saturation.removeEventListener('blur', blur);
value.removeEventListener('blur', blur);
hex.removeEventListener('blur', blur);
red.removeEventListener('keydown', keyDown);
green.removeEventListener('keydown', keyDown);
blue.removeEventListener('keydown', keyDown);
hue.removeEventListener('keydown', keyDown);
saturation.removeEventListener('keydown', keyDown);
value.removeEventListener('keydown', keyDown);
if (alpha !== null) {
alpha.removeEventListener('keyup', keyUp);
alpha.removeEventListener('blur', blur);
alpha.removeEventListener('keydown', keyDown);
}
if (ahex !== null) {
ahex.removeEventListener('keyup', keyUp);
ahex.removeEventListener('blur', blur);
}
if (bindedHex !== null) {
bindedHex.removeEventListener('keyup', keyUp);
bindedHex.removeEventListener('blur', blur);
}
color.unbind(colorChanged);
red = null;
green = null;
blue = null;
alpha = null;
hue = null;
saturation = null;
value = null;
hex = null;
ahex = null;
}
let
red = inputs[3],
green = inputs[4],
blue = inputs[5],
alpha = inputs.length > 7 ? inputs[6] : null,
hue = inputs[0],
saturation = inputs[1],
value = inputs[2],
hex = inputs[(inputs.length > 7) ? 7 : 6],
ahex = inputs.length > 7 ? inputs[8] : null;
Object.assign(that, {destroy});
red.addEventListener('keyup', keyUp);
green.addEventListener('keyup', keyUp);
blue.addEventListener('keyup', keyUp);
hue.addEventListener('keyup', keyUp);
saturation.addEventListener('keyup', keyUp);
value.addEventListener('keyup', keyUp);
hex.addEventListener('keyup', keyUp);
red.addEventListener('blur', blur);
green.addEventListener('blur', blur);
blue.addEventListener('blur', blur);
hue.addEventListener('blur', blur);
saturation.addEventListener('blur', blur);
value.addEventListener('blur', blur);
hex.addEventListener('blur', blur);
red.addEventListener('keydown', keyDown);
green.addEventListener('keydown', keyDown);
blue.addEventListener('keydown', keyDown);
hue.addEventListener('keydown', keyDown);
saturation.addEventListener('keydown', keyDown);
value.addEventListener('keydown', keyDown);
if (alpha !== null) {
alpha.addEventListener('keyup', keyUp);
alpha.addEventListener('blur', blur);
alpha.addEventListener('keydown', keyDown);
}
if (ahex !== null) {
ahex.addEventListener('keyup', keyUp);
ahex.addEventListener('blur', blur);
}
if (bindedHex !== null) {
bindedHex.addEventListener('keyup', keyUp);
bindedHex.addEventListener('blur', blur);
}
color.bind(colorChanged);
}
}

338
src/editor/components/jgraduate/Slider.js Normal file
View File

@@ -0,0 +1,338 @@
/* eslint-disable no-bitwise */
import {findPos} from './Util.js';
/**
* Whether a value is `null` or `undefined`.
* @param {any} val
* @returns {boolean}
*/
const isNullish = (val) => {
return val === null || val === undefined;
};
/**
* Encapsulate slider functionality for the ColorMap and ColorBar -
* could be useful to use a jQuery UI draggable for this with certain extensions.
* @memberof module:jPicker
*/
export default class Slider {
/**
* @param {external:jQuery} bar
* @param {module:jPicker.SliderOptions} options
*/
constructor (bar, options) {
const that = this;
/**
* Fire events on the supplied `context`
* @param {module:jPicker.JPickerInit} context
* @returns {void}
*/
function fireChangeEvents (context) {
changeEvents.forEach((changeEvent) => {
changeEvent.call(that, that, context);
});
}
/**
* Bind the mousedown to the bar not the arrow for quick snapping to the clicked location.
* @param {external:jQuery.Event} e
* @returns {void}
*/
function mouseDown (e) {
const off = findPos(bar);
offset = {l: off.left | 0, t: off.top | 0};
clearTimeout(timeout);
// using setTimeout for visual updates - once the style is updated the browser will re-render internally allowing the next Javascript to run
timeout = setTimeout(function () {
setValuesFromMousePosition.call(that, e);
}, 0);
// Bind mousemove and mouseup event to the document so it responds when dragged of of the bar - we will unbind these when on mouseup to save processing
document.addEventListener('mousemove', mouseMove);
document.addEventListener('mouseup', mouseUp);
e.preventDefault(); // don't try to select anything or drag the image to the desktop
}
/**
* Set the values as the mouse moves.
* @param {external:jQuery.Event} e
* @returns {false}
*/
function mouseMove (e) {
clearTimeout(timeout);
timeout = setTimeout(function () {
setValuesFromMousePosition.call(that, e);
}, 0);
e.stopPropagation();
e.preventDefault();
return false;
}
/**
* Unbind the document events - they aren't needed when not dragging.
* @param {external:jQuery.Event} e
* @returns {false}
*/
function mouseUp (e) {
document.removeEventListener('mousemove', mouseMove);
document.removeEventListener('mouseup', mouseUp);
e.stopPropagation();
e.preventDefault();
return false;
}
/**
* Calculate mouse position and set value within the current range.
* @param {Event} e
* @returns {void}
*/
function setValuesFromMousePosition (e) {
const barW = bar.w, // local copies for YUI compressor
barH = bar.h;
let locX = e.pageX - offset.l,
locY = e.pageY - offset.t;
// keep the arrow within the bounds of the bar
if (locX < 0) locX = 0;
else if (locX > barW) locX = barW;
if (locY < 0) locY = 0;
else if (locY > barH) locY = barH;
val.call(that, 'xy', {
x: ((locX / barW) * rangeX) + minX,
y: ((locY / barH) * rangeY) + minY
});
}
/**
*
* @returns {void}
*/
function draw () {
const
barW = bar.w,
barH = bar.h,
arrowW = arrow.w,
arrowH = arrow.h;
let arrowOffsetX = 0,
arrowOffsetY = 0;
setTimeout(function () {
if (rangeX > 0) { // range is greater than zero
// constrain to bounds
if (x === maxX) arrowOffsetX = barW;
else arrowOffsetX = ((x / rangeX) * barW) | 0;
}
if (rangeY > 0) { // range is greater than zero
// constrain to bounds
if (y === maxY) arrowOffsetY = barH;
else arrowOffsetY = ((y / rangeY) * barH) | 0;
}
// if arrow width is greater than bar width, center arrow and prevent horizontal dragging
if (arrowW >= barW) arrowOffsetX = (barW >> 1) - (arrowW >> 1); // number >> 1 - superfast bitwise divide by two and truncate (move bits over one bit discarding lowest)
else arrowOffsetX -= arrowW >> 1;
// if arrow height is greater than bar height, center arrow and prevent vertical dragging
if (arrowH >= barH) arrowOffsetY = (barH >> 1) - (arrowH >> 1);
else arrowOffsetY -= arrowH >> 1;
// set the arrow position based on these offsets
arrow.style.left = arrowOffsetX + 'px';
arrow.style.top = arrowOffsetY + 'px';
});
}
/**
* Get or set a value.
* @param {?("xy"|"x"|"y")} name
* @param {module:math.XYObject} value
* @param {module:jPicker.Slider} context
* @returns {module:math.XYObject|Float|void}
*/
function val (name, value, context) {
const set = value !== undefined;
if (!set) {
if (isNullish(name)) name = 'xy';
switch (name.toLowerCase()) {
case 'x': return x;
case 'y': return y;
case 'xy':
default: return {x, y};
}
}
if (!isNullish(context) && context === that) return undefined;
let changed = false;
let newX, newY;
if (isNullish(name)) name = 'xy';
switch (name.toLowerCase()) {
case 'x':
newX = (value && ((value.x && value.x | 0) || value | 0)) || 0;
break;
case 'y':
newY = (value && ((value.y && value.y | 0) || value | 0)) || 0;
break;
case 'xy':
default:
newX = (value && value.x && value.x | 0) || 0;
newY = (value && value.y && value.y | 0) || 0;
break;
}
if (!isNullish(newX)) {
if (newX < minX) newX = minX;
else if (newX > maxX) newX = maxX;
if (x !== newX) {
x = newX;
changed = true;
}
}
if (!isNullish(newY)) {
if (newY < minY) newY = minY;
else if (newY > maxY) newY = maxY;
if (y !== newY) {
y = newY;
changed = true;
}
}
changed && fireChangeEvents.call(that, context || that);
return undefined;
}
/**
* @typedef {PlainObject} module:jPicker.MinMaxRangeX
* @property {Float} minX
* @property {Float} maxX
* @property {Float} rangeX
*/
/**
* @typedef {PlainObject} module:jPicker.MinMaxRangeY
* @property {Float} minY
* @property {Float} maxY
* @property {Float} rangeY
*/
/**
* @typedef {module:jPicker.MinMaxRangeY|module:jPicker.MinMaxRangeX} module:jPicker.MinMaxRangeXY
*/
/**
*
* @param {"minx"|"maxx"|"rangex"|"miny"|"maxy"|"rangey"|"all"} name
* @param {module:jPicker.MinMaxRangeXY} value
* @returns {module:jPicker.MinMaxRangeXY|module:jPicker.MinMaxRangeX|module:jPicker.MinMaxRangeY|void}
*/
function range (name, value) {
const set = value !== undefined;
if (!set) {
if (isNullish(name)) name = 'all';
switch (name.toLowerCase()) {
case 'minx': return minX;
case 'maxx': return maxX;
case 'rangex': return {minX, maxX, rangeX};
case 'miny': return minY;
case 'maxy': return maxY;
case 'rangey': return {minY, maxY, rangeY};
case 'all':
default: return {minX, maxX, rangeX, minY, maxY, rangeY};
}
}
let // changed = false,
newMinX,
newMaxX,
newMinY,
newMaxY;
if (isNullish(name)) name = 'all';
switch (name.toLowerCase()) {
case 'minx':
newMinX = (value && ((value.minX && value.minX | 0) || value | 0)) || 0;
break;
case 'maxx':
newMaxX = (value && ((value.maxX && value.maxX | 0) || value | 0)) || 0;
break;
case 'rangex':
newMinX = (value && value.minX && value.minX | 0) || 0;
newMaxX = (value && value.maxX && value.maxX | 0) || 0;
break;
case 'miny':
newMinY = (value && ((value.minY && value.minY | 0) || value | 0)) || 0;
break;
case 'maxy':
newMaxY = (value && ((value.maxY && value.maxY | 0) || value | 0)) || 0;
break;
case 'rangey':
newMinY = (value && value.minY && value.minY | 0) || 0;
newMaxY = (value && value.maxY && value.maxY | 0) || 0;
break;
case 'all':
default:
newMinX = (value && value.minX && value.minX | 0) || 0;
newMaxX = (value && value.maxX && value.maxX | 0) || 0;
newMinY = (value && value.minY && value.minY | 0) || 0;
newMaxY = (value && value.maxY && value.maxY | 0) || 0;
break;
}
if (!isNullish(newMinX) && minX !== newMinX) {
minX = newMinX;
rangeX = maxX - minX;
}
if (!isNullish(newMaxX) && maxX !== newMaxX) {
maxX = newMaxX;
rangeX = maxX - minX;
}
if (!isNullish(newMinY) && minY !== newMinY) {
minY = newMinY;
rangeY = maxY - minY;
}
if (!isNullish(newMaxY) && maxY !== newMaxY) {
maxY = newMaxY;
rangeY = maxY - minY;
}
return undefined;
}
/**
* @param {GenericCallback} callback
* @returns {void}
*/
function bind (callback) { // eslint-disable-line promise/prefer-await-to-callbacks
if (typeof callback === 'function') changeEvents.push(callback);
}
/**
* @param {GenericCallback} callback
* @returns {void}
*/
function unbind (callback) { // eslint-disable-line promise/prefer-await-to-callbacks
if (typeof callback !== 'function') return;
let i;
while ((i = changeEvents.includes(callback))) changeEvents.splice(i, 1);
}
/**
*
* @returns {void}
*/
function destroy () {
// unbind all possible events and null objects
document.removeEventListener('mousemove', mouseMove);
document.removeEventListener('mouseup', mouseUp);
bar.removeEventListener('mousedown', mouseDown);
bar = null;
arrow = null;
changeEvents = null;
}
let offset,
timeout,
x = 0,
y = 0,
minX = 0,
maxX = 100,
rangeX = 100,
minY = 0,
maxY = 100,
rangeY = 100,
arrow = bar.querySelector('img'), // the arrow image to drag
changeEvents = [];
Object.assign(that, {
val,
range,
bind,
unbind,
destroy
});
// initialize this control
arrow.src = options.arrow && options.arrow.image;
arrow.w = (options.arrow && options.arrow.width) || arrow.width();
arrow.h = (options.arrow && options.arrow.height) || arrow.height();
bar.w = (options.map && options.map.width) || bar.width();
bar.h = (options.map && options.map.height) || bar.height();
bar.addEventListener('mousedown', mouseDown);
bind.call(that, draw);
}
}

37
src/editor/components/jgraduate/Util.js Normal file
View File

@@ -0,0 +1,37 @@
/**
* @param {any} obj
* @returns {any}
*/
export function findPos (obj) {
let curleft = 0;
let curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return {left: curleft, top: curtop};
}
return {left: curleft, top: curtop};
}
export function isObject(item) {
return (item && typeof item === 'object' && !Array.isArray(item));
}
export function mergeDeep(target, source) {
let output = Object.assign({}, target);
if (isObject(target) && isObject(source)) {
Object.keys(source).forEach(key => {
if (isObject(source[key])) {
if (!(key in target))
Object.assign(output, { [key]: source[key] });
else
output[key] = mergeDeep(target[key], source[key]);
} else {
Object.assign(output, { [key]: source[key] });
}
});
}
return output;
}

2500
src/editor/components/jgraduate/jQuery.jGraduate.js
View File

File diff suppressed because it is too large Load Diff

4285
src/editor/components/jgraduate/jQuery.jPicker.js
View File

File diff suppressed because it is too large Load Diff

78
src/editor/components/jgraduate/paint.js Normal file
View File

@@ -0,0 +1,78 @@
/**
*
*/
export default class Paint {
/**
* @param {module:jGraduate.jGraduatePaintOptions} [opt]
*/
constructor (opt) {
const options = opt || {};
this.alpha = isNaN(options.alpha) ? 100 : options.alpha;
// copy paint object
if (options.copy) {
/**
* @name module:jGraduate~Paint#type
* @type {"none"|"solidColor"|"linearGradient"|"radialGradient"}
*/
this.type = options.copy.type;
/**
* Represents opacity (0-100).
* @name module:jGraduate~Paint#alpha
* @type {Float}
*/
this.alpha = options.copy.alpha;
/**
* Represents #RRGGBB hex of color.
* @name module:jGraduate~Paint#solidColor
* @type {string}
*/
this.solidColor = null;
/**
* @name module:jGraduate~Paint#linearGradient
* @type {SVGLinearGradientElement}
*/
this.linearGradient = null;
/**
* @name module:jGraduate~Paint#radialGradient
* @type {SVGRadialGradientElement}
*/
this.radialGradient = null;
switch (this.type) {
case 'none':
break;
case 'solidColor':
this.solidColor = options.copy.solidColor;
break;
case 'linearGradient':
this.linearGradient = options.copy.linearGradient.cloneNode(true);
break;
case 'radialGradient':
this.radialGradient = options.copy.radialGradient.cloneNode(true);
break;
}
// create linear gradient paint
} else if (options.linearGradient) {
this.type = 'linearGradient';
this.solidColor = null;
this.radialGradient = null;
this.linearGradient = options.linearGradient.cloneNode(true);
// create linear gradient paint
} else if (options.radialGradient) {
this.type = 'radialGradient';
this.solidColor = null;
this.linearGradient = null;
this.radialGradient = options.radialGradient.cloneNode(true);
// create solid color paint
} else if (options.solidColor) {
this.type = 'solidColor';
this.solidColor = options.solidColor;
// create empty paint
} else {
this.type = 'none';
this.solidColor = null;
this.linearGradient = null;
this.radialGradient = null;
}
}
}

12
src/editor/components/seButton.js
View File

@@ -6,16 +6,15 @@ template.innerHTML = `
<style>
:host(:hover) :not(.disabled)
{
background-color: #ffc;
background-color: var(--icon-bg-color-hover);
}
div
{
height: 24px;
width: 24px;
margin: 2px 2px 4px;
margin: 2px 1px 4px;
padding: 3px;
box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
background-color: #E8E8E8;
background-color: var(--icon-bg-color);
cursor: pointer;
border-radius: 3px;
}
@@ -31,8 +30,7 @@ template.innerHTML = `
height: 100%;
}
.pressed {
background-color: #F4E284;
box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px 0 white !important;
background-color: var(--icon-bg-color-hover);
}
.disabled {
opacity: 0.3;
@@ -54,7 +52,7 @@ export class ToolButton extends HTMLElement {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot.appendChild(template.content.cloneNode(true));
this._shadowRoot.append(template.content.cloneNode(true));
// locate the component
this.$div = this._shadowRoot.querySelector('div');
this.$img = this._shadowRoot.querySelector('img');

80
src/editor/components/seColorPicker.js
View File

@@ -1,42 +1,36 @@
/* globals jQuery */
import jQueryPluginJGraduate from './jgraduate/jQuery.jGraduate.js';
import jQueryPluginJPicker from './jgraduate/jQuery.jPicker.js';
import {jGraduate, jGraduateMethod} from './jgraduate/jQuery.jGraduate.js';
import PaintBox from './PaintBox.js';
const $ = [
jQueryPluginJGraduate,
jQueryPluginJPicker
].reduce((jq, func) => func(jq), jQuery);
const template = document.createElement('template');
template.innerHTML = `
<style>
@import "./components/jgraduate/css/jGraduate.css";
@import "./components/jgraduate/css/jPicker.css";
#logo {
height: 22px;
width: 22px;
height: 18px;
width: 18px;
}
#block {
height: 22px;
width: 22px;
height: 13px;
width: 14px;
float: right;
background-color: darkgrey;
}
#picker {
background: #f0f0f0;
height: 26px;
line-height: 26px;
background: var(--input-color);
height: 19px;
line-height: 19px;
border-radius: 3px;
width: 52px;
display: flex;
align-items: center;
margin-right: 4px;
margin-top: 1px;
justify-content: space-evenly;
}
#color_picker {
position: absolute;
bottom: 40px;
z-index: 1000;
top: -350px;
}
</style>
<div id="picker">
@@ -59,7 +53,7 @@ export class SeColorPicker extends HTMLElement {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot.appendChild(template.content.cloneNode(true));
this._shadowRoot.append(template.content.cloneNode(true));
this.$logo = this._shadowRoot.getElementById('logo');
this.$label = this._shadowRoot.getElementById('label');
this.$block = this._shadowRoot.getElementById('block');
@@ -174,33 +168,29 @@ export class SeColorPicker extends HTMLElement {
*/
connectedCallback () {
this.paintBox = new PaintBox(this.$block, this.type);
let {paint} = this.paintBox;
$(this.$picker).click(() => {
$(this.$color_picker)
.draggable({
cancel: '.jGraduate_tabs, .jGraduate_colPick, .jGraduate_gradPick, .jPicker',
containment: 'window'
})
.jGraduate(
{
images: {clientPath: './components/jgraduate/images/'},
paint,
window: {pickerTitle: this.label},
newstop: 'inverse'
},
(p) => {
paint = new $.jGraduate.Paint(p);
this.setPaint(paint);
const changeEvent = new CustomEvent('change', {detail: {
paint
}});
this.dispatchEvent(changeEvent);
$('#color_picker').hide();
},
() => {
$('#color_picker').hide();
}
);
this.$picker.addEventListener('click', () => {
let {paint} = this.paintBox;
jGraduateMethod(
this.$color_picker,
{
images: {clientPath: './components/jgraduate/images/'},
paint,
window: {pickerTitle: this.label},
newstop: 'inverse'
},
(p) => {
paint = new jGraduate.Paint(p);
this.setPaint(paint);
const changeEvent = new CustomEvent('change', {detail: {
paint
}});
this.dispatchEvent(changeEvent);
this.$color_picker.style.display = 'none';
},
() => {
this.$color_picker.style.display = 'none';
}
);
});
}
}

4
src/editor/components/seDropdown.js
View File

@@ -1,10 +1,8 @@
/* eslint-disable node/no-unpublished-import */
import ListComboBox from 'elix/define/ListComboBox.js';
import NumberSpinBox from 'elix/define/NumberSpinBox.js';
// import Input from 'elix/src/base/Input.js';
import {defaultState} from 'elix/src/base/internal.js';
import {templateFrom, fragmentFrom} from 'elix/src/core/htmlLiterals.js';
import {internal} from 'elix';
import NumberSpinBox from '../dialogs/se-elix/define/NumberSpinBox.js';
/**
* @class Dropdown

25
src/editor/components/seExplorerButton.js
View File

@@ -1,12 +1,13 @@
/* eslint-disable no-unsanitized/property */
const template = document.createElement('template');
template.innerHTML = `
<style>
:host {
position:relative;
}
.menu-button:hover, se-button:hover, .menu-item:hover
.menu-button:hover, se-button:hover, .menu-item:hover
{
background-color: #ffc;
background-color: var(--icon-bg-color-hover);
}
img {
border: none;
@@ -14,13 +15,12 @@ template.innerHTML = `
height: 24px;
}
.overall.pressed .button-icon,
.overall.pressed .handle,
.overall.pressed,
.menu-item.pressed {
background-color: #F4E284 !important;
background-color: var(--icon-bg-color-hover) !important;
}
.overall.pressed .menu-button {
box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px 0 white !important;
background-color: #F4E284 !important;
background-color: var(--icon-bg-color-hover) !important;
}
.disabled {
opacity: 0.3;
@@ -29,10 +29,9 @@ template.innerHTML = `
.menu-button {
height: 24px;
width: 24px;
margin: 2px 2px 4px;
margin: 2px 1px 4px;
padding: 3px;
box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
background-color: #E8E8E8;
background-color: var(--icon-bg-color);
cursor: pointer;
position: relative;
border-radius: 3px;
@@ -83,7 +82,7 @@ template.innerHTML = `
background: none !important;
}
</style>
<div class="overall">
<div class="menu-button">
<img class="button-icon" src="./images/logo.svg" alt="icon">
@@ -96,7 +95,7 @@ template.innerHTML = `
<div class="menu-item">menu</div>
</div>
</div>
`;
/**
* @class ExplorerButton
@@ -109,7 +108,7 @@ export class ExplorerButton extends HTMLElement {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot.appendChild(template.content.cloneNode(true));
this._shadowRoot.append(template.content.cloneNode(true));
// locate the component
this.$button = this._shadowRoot.querySelector('.menu-button');
this.$overall = this._shadowRoot.querySelector('.overall');
@@ -162,7 +161,6 @@ export class ExplorerButton extends HTMLElement {
const response = await fetch(`${newValue}index.json`);
const json = await response.json();
const {lib} = json;
// eslint-disable-next-line no-unsanitized/property
this.$menu.innerHTML = lib.map((menu, i) => (
`<div data-menu="${menu}" class="menu-item ${(i === 0) ? 'pressed' : ''} ">${menu}</div>`
)).join('');
@@ -299,7 +297,6 @@ export class ExplorerButton extends HTMLElement {
const off = size * 0.05;
const vb = [-off, -off, size + off * 2, size + off * 2].join(' ');
const stroke = json.fill ? 0 : (size / 30);
// eslint-disable-next-line no-unsanitized/property
this.$lib.innerHTML = Object.entries(this.data).map(([key, path]) => {
const encoded = btoa(`
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">

57
src/editor/components/seFlyingButton.js
View File

@@ -6,7 +6,7 @@ template.innerHTML = `
}
.overall:hover *
{
background-color: #ffc;
background-color: var(--icon-bg-color-hover);
}
img {
border: none;
@@ -15,11 +15,10 @@ template.innerHTML = `
}
.overall.pressed .button-icon,
.overall.pressed .handle {
background-color: #F4E284 !important;
background-color: var(--icon-bg-color-hover) !important;
}
.overall.pressed .menu-button {
box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px 0 white !important;
background-color: #F4E284 !important;
background-color: var(--icon-bg-color-hover) !important;
}
.disabled {
opacity: 0.3;
@@ -28,10 +27,9 @@ template.innerHTML = `
.menu-button {
height: 24px;
width: 24px;
margin: 2px 2px 4px;
margin: 2px 1px 4px;
padding: 3px;
box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
background-color: #E8E8E8;
background-color: var(--icon-bg-color);
cursor: pointer;
position: relative;
border-radius: 3px;
@@ -68,7 +66,7 @@ template.innerHTML = `
background: none !important;
}
</style>
<div class="overall">
<div class="menu-button">
<img class="button-icon" src="./images/logo.svg" alt="icon">
@@ -78,7 +76,7 @@ template.innerHTML = `
<slot></slot>
</div>
</div>
`;
/**
* @class FlyingButton
@@ -91,7 +89,7 @@ export class FlyingButton extends HTMLElement {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot.appendChild(template.content.cloneNode(true));
this._shadowRoot.append(template.content.cloneNode(true));
// locate the component
this.$button = this._shadowRoot.querySelector('.menu-button');
this.$handle = this._shadowRoot.querySelector('.handle');
@@ -107,7 +105,7 @@ export class FlyingButton extends HTMLElement {
* @returns {any} observed
*/
static get observedAttributes () {
return ['title', 'pressed', 'disabled'];
return ['title', 'pressed', 'disabled', 'opened'];
}
/**
* @function attributeChangedCallback
@@ -132,6 +130,13 @@ export class FlyingButton extends HTMLElement {
this.$overall.classList.remove('pressed');
}
break;
case 'opened':
if (newValue) {
this.$menu.classList.add('open');
} else {
this.$menu.classList.remove('open');
}
break;
case 'disabled':
if (newValue) {
this.$div.classList.add('disabled');
@@ -178,6 +183,28 @@ export class FlyingButton extends HTMLElement {
this.setAttribute('pressed', 'true');
} else {
this.removeAttribute('pressed', '');
// close also the menu if open
this.removeAttribute('opened');
}
}
/**
* @function get
* @returns {any}
*/
get opened () {
return this.hasAttribute('opened');
}
/**
* @function set
* @returns {void}
*/
set opened (value) {
// boolean value => existence = true
if (value) {
this.setAttribute('opened', 'opened');
} else {
this.removeAttribute('opened');
}
}
/**
@@ -214,7 +241,7 @@ export class FlyingButton extends HTMLElement {
switch (ev.target.nodeName) {
case 'SE-FLYINGBUTTON':
if (this.pressed) {
this.$menu.classList.toggle('open');
this.setAttribute('opened', 'opened');
} else {
// launch current action
this.activeSlot.click();
@@ -231,7 +258,11 @@ export class FlyingButton extends HTMLElement {
break;
case 'DIV':
// this is a click on the handle so let's open/close the menu.
this.$menu.classList.toggle('open');
if (this.opened) {
this.removeAttribute('opened');
} else {
this.setAttribute('opened', 'opened');
}
break;
default:
// eslint-disable-next-line no-console

9
src/editor/components/seInput.js
View File

@@ -1,4 +1,3 @@
/* eslint-disable node/no-unpublished-import */
import 'elix/define/Input.js';
const template = document.createElement('template');
@@ -13,6 +12,12 @@ template.innerHTML = `
bottom: 1px;
right: -4px;
position: relative;
margin-right: 4px;
color: #fff;
}
elix-input {
background-color: var(--input-color);
border-radius: 3px;
}
</style>
<img src="./images/logo.svg" alt="icon" width="12" height="12" />
@@ -31,7 +36,7 @@ export class SEInput extends HTMLElement {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot.appendChild(template.content.cloneNode(true));
this._shadowRoot.append(template.content.cloneNode(true));
// locate the component
this.$img = this._shadowRoot.querySelector('img');
this.$label = this.shadowRoot.getElementById('label');

69
src/editor/components/seList.js
View File

@@ -1,25 +1,29 @@
/* eslint-disable node/no-unpublished-import */
import 'elix/define/DropdownList.js';
const template = document.createElement('template');
template.innerHTML = `
<style>
[part~="source"] {
grid-template-columns: 20px 1fr auto;
elix-dropdown-list {
margin: 1px;
}
::slotted(*) {
background: #E8E8E8;
border: 1px solid #B0B0B0;
elix-dropdown-list:hover {
background-color: var(--icon-bg-color-hover);
}
::part(popup-toggle) {
display: none;
}
::slotted(*) {
padding:0;
width:100%;
}
</style>
<label>Label</label>
<elix-dropdown-list>
<slot></slot>
</elix-dropdown-list>
`;
/**
* @class SeList
@@ -32,7 +36,7 @@ export class SeList extends HTMLElement {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot.appendChild(template.content.cloneNode(true));
this._shadowRoot.append(template.content.cloneNode(true));
this.$dropdown = this._shadowRoot.querySelector('elix-dropdown-list');
this.$label = this._shadowRoot.querySelector('label');
}
@@ -41,7 +45,7 @@ export class SeList extends HTMLElement {
* @returns {any} observed
*/
static get observedAttributes () {
return ['label'];
return ['label', 'width', 'height'];
}
/**
@@ -57,6 +61,12 @@ export class SeList extends HTMLElement {
case 'label':
this.$label.textContent = newValue;
break;
case 'height':
this.$dropdown.style.height = newValue;
break;
case 'width':
this.$dropdown.style.width = newValue;
break;
default:
// eslint-disable-next-line no-console
console.error(`unknown attribute: ${name}`);
@@ -78,16 +88,49 @@ export class SeList extends HTMLElement {
set label (value) {
this.setAttribute('label', value);
}
/**
* @function get
* @returns {any}
*/
get width () {
return this.getAttribute('width');
}
/**
* @function set
* @returns {void}
*/
set width (value) {
this.setAttribute('width', value);
}
/**
* @function get
* @returns {any}
*/
get height () {
return this.getAttribute('height');
}
/**
* @function set
* @returns {void}
*/
set height (value) {
this.setAttribute('height', value);
}
/**
* @function connectedCallback
* @returns {void}
*/
connectedCallback () {
this.$dropdown.addEventListener('change', (e) => {
const currentObj = this;
this.$dropdown.addEventListener('selectedindexchange', (e) => {
e.preventDefault();
const selectedItem = e?.detail?.closeResult;
if (selectedItem !== undefined && selectedItem?.id !== undefined) {
document.getElementById(selectedItem.id).click();
if (e?.detail?.selectedIndex !== undefined) {
const value = this.$dropdown.selectedItem.getAttribute('value');
const closeEvent = new CustomEvent('change', {detail: {value}});
currentObj.dispatchEvent(closeEvent);
currentObj.value = value;
}
});
}

18
src/editor/components/seListItem.js
View File

@@ -1,13 +1,19 @@
/* eslint-disable node/no-unpublished-import */
import 'elix/define/Option.js';
const template = document.createElement('template');
template.innerHTML = `
<style>
</style>
elix-option{
padding:0.25rem 0.125rem !important;
background-color: var(--icon-bg-color);
}
elix-option:hover{
background-color: var(--icon-bg-color-hover);
}
</style>
<elix-option aria-label="option">
<slot></slot>
</elix-option>
</elix-option>
`;
/**
* @class SeMenu
@@ -20,8 +26,10 @@ export class SeListItem extends HTMLElement {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot.appendChild(template.content.cloneNode(true));
this.$menuitem = this._shadowRoot.querySelector('elix-menu-item');
this._shadowRoot.append(template.content.cloneNode(true));
this.$menuitem = this._shadowRoot.querySelector('elix-option');
this.$svg = this.$menuitem.shadowRoot.querySelector('#checkmark');
this.$svg.setAttribute('style', 'display: none;');
}
/**
* @function observedAttributes

29
src/editor/components/seMenu.js
View File

@@ -1,6 +1,5 @@
/* eslint-disable node/no-unpublished-import */
import 'elix/define/MenuButton.js';
import 'elix/define/MenuItem.js';
import './sePlainMenuButton.js';
const template = document.createElement('template');
template.innerHTML = `
@@ -9,20 +8,26 @@ template.innerHTML = `
padding: 0px;
}
elix-menu-button::part(menu) {
background-color: #eee !important;
background-color: var(--icon-bg-color) !important;
color: #fff;
}
elix-menu-button::part(popup-toggle) {
padding: 0.25em 0.60em !important
padding: 0.25em 0.30em !important
}
:host ::slotted([current]){
background-color: #F4E284 !important;
background-color: var(--icon-bg-color-hover) !important;
color: #fff;
}
:host ::slotted(*){
padding: 0.25em 1.25em 0.25em 0.25em !important;
margin: 2px;
}
</style>
<elix-menu-button id="MenuButton" aria-label="Main Menu">
<slot></slot>
</elix-menu-button>
`;
/**
* @class SeMenu
@@ -35,7 +40,7 @@ export class SeMenu extends HTMLElement {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot.appendChild(template.content.cloneNode(true));
this._shadowRoot.append(template.content.cloneNode(true));
this.$menu = this._shadowRoot.querySelector('elix-menu-button');
this.$label = this.$menu.shadowRoot.querySelector('#popupToggle').shadowRoot;
}
@@ -60,8 +65,8 @@ export class SeMenu extends HTMLElement {
switch (name) {
case 'src':
image.src = newValue;
image.width = 18;
image.height = 18;
image.width = 24;
image.height = 24;
this.$label.prepend(image);
break;
case 'label':
@@ -107,7 +112,7 @@ export class SeMenu extends HTMLElement {
* @function connectedCallback
* @returns {void}
*/
connectedCallback () {
/* connectedCallback () {
this.$menu.addEventListener('openedchange', (e) => {
e.preventDefault();
const selectedItem = e?.detail?.closeResult;
@@ -115,7 +120,7 @@ export class SeMenu extends HTMLElement {
document.getElementById(selectedItem.id).click();
}
});
}
} */
}
// Register

15
src/editor/components/seMenuItem.js
View File

@@ -1,17 +1,16 @@
/* eslint-disable node/no-unpublished-import */
import 'elix/define/Menu.js';
import 'elix/define/MenuItem.js';
const template = document.createElement('template');
template.innerHTML = `
<style>
</style>
</style>
<elix-menu-item>
<div style="display:inline-block;">
<img src="./images/logo.svg" alt="icon" style="display:none;" />
<span></span>
<div style="display:flex; align-items: center;">
<img src="./images/logo.svg" alt="icon" style="display:none;" width="24"/>
<span style="margin-left: 7px;"></span>
</div>
</elix-menu-item>
</elix-menu-item>
`;
/**
* @class SeMenuItem
@@ -24,12 +23,12 @@ export class SeMenuItem extends HTMLElement {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot.appendChild(template.content.cloneNode(true));
this._shadowRoot.append(template.content.cloneNode(true));
this.$img = this._shadowRoot.querySelector('img');
this.$label = this._shadowRoot.querySelector('span');
this.$menuitem = this._shadowRoot.querySelector('elix-menu-item');
this.$svg = this.$menuitem.shadowRoot.querySelector('#checkmark');
this.$svg.setAttribute('style', 'width:1px;height:1px;');
this.$svg.setAttribute('style', 'display: none;');
}
/**
* @function observedAttributes

107
src/editor/components/sePalette.js
View File

@@ -1,9 +1,7 @@
/* eslint-disable node/no-unpublished-import */
import 'elix/define/CenteredStrip.js';
/* eslint-disable max-len */
const palette = [
// Todo: Make into configuration item?
'#000000', '#3f3f3f', '#7f7f7f', '#bfbfbf', '#ffffff',
'none', '#000000', '#3f3f3f', '#7f7f7f', '#bfbfbf', '#ffffff',
'#ff0000', '#ff7f00', '#ffff00', '#7fff00',
'#00ff00', '#00ff7f', '#00ffff', '#007fff',
'#0000ff', '#7f00ff', '#ff00ff', '#ff007f',
@@ -21,11 +19,66 @@ template.innerHTML = `
.square {
height: 15px;
width: 15px;
float: left;
}
#palette_holder {
overflow: hidden;
margin-top: 5px;
padding: 5px;
position: absolute;
right: 15px;
height: 16px;
background: #f0f0f0;
border-radius: 3px;
z-index: 2;
}
#js-se-palette {
float: left;
width: 632px;
height: 16px;
}
div.palette_item {
height: 15px;
width: 15px;
float: left;
}
div.palette_item:first-child {
background: white;
}
@media screen and (max-width:1100px) {
#palette_holder {
left: 410px;
overflow-x: scroll;
padding: 0 5px;
margin-top: 2px;
height: 30px;
}
}
@media screen and (max-width:1250px) {
#palette_holder {
left: 560px;
overflow-x: scroll;
padding: 0 5px;
margin-top: 2px;
height: 30px;
}
}
@media screen and (max-width:540px) {
#palette_holder {
left: 0px;
overflow-x: scroll;
padding: 0 5px;
margin-top: 32px;
height: 30px;
}
}
</style>
<div title="Click to change fill color, shift-click to change stroke color">
<elix-centered-strip style="width:300px">
</elix-centered-strip>
<div id="palette_holder" title="Click to change fill color, shift-click to change stroke color">
<div id="js-se-palette">
</div>
</div>
`;
@@ -40,14 +93,34 @@ export class SEPalette extends HTMLElement {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot.appendChild(template.content.cloneNode(true));
this.$strip = this._shadowRoot.querySelector('elix-centered-strip');
this._shadowRoot.append(template.content.cloneNode(true));
this.$strip = this._shadowRoot.querySelector('#js-se-palette');
palette.forEach((rgb) => {
const newDiv = document.createElement('div');
newDiv.classList.add('square');
newDiv.style.backgroundColor = rgb;
if(rgb === 'none') {
var img = document.createElement('img');
img.src = `data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9InN2Z19pY29uIj48c3ZnIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNkNDAwMDAiIGlkPSJzdmdfOTAiIHkyPSIyNCIgeDI9IjI0IiB5MT0iMCIgeDE9IjAiLz4KICAgIDxsaW5lIGlkPSJzdmdfOTIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2Q0MDAwMCIgeTI9IjI0IiB4Mj0iMCIgeTE9IjAiIHgxPSIyNCIvPgogIDwvc3ZnPjwvc3ZnPg==`;
img.style.width = "15px";
img.style.height = "15px";
newDiv.append(img);
} else {
newDiv.style.backgroundColor = rgb;
}
newDiv.dataset.rgb = rgb;
this.$strip.appendChild(newDiv);
newDiv.addEventListener('click', (evt) => {
evt.preventDefault();
// shift key or right click for stroke
const picker = evt.shiftKey || evt.button === 2 ? 'stroke' : 'fill';
let color = newDiv.dataset.rgb;
// Webkit-based browsers returned 'initial' here for no stroke
if (color === 'none' || color === 'transparent' || color === 'initial') {
color = 'none';
}
const paletteEvent = new CustomEvent('change', {detail: {picker, color}, bubbles: false});
this.dispatchEvent(paletteEvent);
});
this.$strip.append(newDiv);
});
}
@@ -56,18 +129,6 @@ export class SEPalette extends HTMLElement {
* @returns {void}
*/
connectedCallback () {
this.$strip.addEventListener('click', (evt) => {
evt.preventDefault();
// shift key or right click for stroke
const picker = evt.shiftKey || evt.button === 2 ? 'stroke' : 'fill';
let color = this.$strip.currentItem.dataset.rgb;
// Webkit-based browsers returned 'initial' here for no stroke
if (color === 'none' || color === 'transparent' || color === 'initial') {
color = 'none';
}
const paletteEvent = new CustomEvent('change', {detail: {picker, color}, bubbles: false});
this.dispatchEvent(paletteEvent);
});
}
}

32
src/editor/components/sePlainBorderButton.js Normal file
View File

@@ -0,0 +1,32 @@
import {template} from 'elix/src/base/internal.js';
import {fragmentFrom} from 'elix/src/core/htmlLiterals.js';
import PlainButton from 'elix/src/plain/PlainButton.js';
/**
* @class SePlainBorderButton
* Button with a border in the Plain reference design system
*
* @inherits PlainButton
*/
class SePlainBorderButton extends PlainButton {
/**
* @function get
* @returns {PlainObject}
*/
get [template] () {
const result = super[template];
result.content.append(
fragmentFrom.html`
<style>
[part~="button"] {
background: #72797A;
border: 1px solid #ccc;
}
</style>
`
);
return result;
}
}
export default SePlainBorderButton;

20
src/editor/components/sePlainMenuButton.js Normal file
View File

@@ -0,0 +1,20 @@
import PlainMenuButton from 'elix/src/plain/PlainMenuButton.js';
import {defaultState} from 'elix/src/base/internal.js';
import sePlainBorderButton from './sePlainBorderButton.js';
/**
* @class ElixMenuButton
*/
export default class ElixMenuButton extends PlainMenuButton {
/**
* @function get
* @returns {PlainObject}
*/
get [defaultState] () {
return Object.assign(super[defaultState], {
sourcePartType: sePlainBorderButton
});
}
}
customElements.define('elix-menu-button', ElixMenuButton);

30
src/editor/components/seSpinInput.js
View File

@@ -1,24 +1,40 @@
/* eslint-disable node/no-unpublished-import */
import 'elix/define/NumberSpinBox.js';
import '../dialogs/se-elix/define/NumberSpinBox.js';
const template = document.createElement('template');
template.innerHTML = `
<style>
img {
top: 2px;
left: 4px;
position: relative;
right: -4px;
}
span {
bottom: 1px;
bottom: -3px;
right: -4px;
position: relative;
margin-left: 4px;
margin-right: 4px;
color: #fff;
vertical-align: ;
}
elix-number-spin-box {
background-color: var(--input-color);
border-radius: 3px;
height: 20px !important;
margin-top: 1px;
vertical-align: top;
}
elix-number-spin-box::part(spin-button) {
padding: 0px;
}
elix-number-spin-box::part(input) {
width: 3em;
}
elix-number-spin-box{
width: 54px;
height: 24px;
}
</style>
<img src="./images/logo.svg" alt="icon" width="12" height="12" aria-labelledby="label" />
<img src="./images/logo.svg" alt="icon" width="24" height="24" aria-labelledby="label" />
<span id="label">label</span>
<elix-number-spin-box min="1" step="1"></elix-number-spin-box>
`;
@@ -34,7 +50,7 @@ export class SESpinInput extends HTMLElement {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot.appendChild(template.content.cloneNode(true));
this._shadowRoot.append(template.content.cloneNode(true));
// locate the component
this.$img = this._shadowRoot.querySelector('img');
this.$label = this.shadowRoot.getElementById('label');

19
src/editor/components/seZoom.js
View File

@@ -1,9 +1,7 @@
/* eslint-disable node/no-unpublished-import */
import ListComboBox from 'elix/define/ListComboBox.js';
import NumberSpinBox from 'elix/define/NumberSpinBox.js';
// import Input from 'elix/src/base/Input.js';
import * as internal from 'elix/src/base/internal.js';
import {templateFrom, fragmentFrom} from 'elix/src/core/htmlLiterals.js';
import NumberSpinBox from '../dialogs/se-elix/define/NumberSpinBox.js';
/**
* @class Dropdown
@@ -40,13 +38,24 @@ class Zoom extends ListComboBox {
}
::slotted(*) {
padding: 4px;
background: #E8E8E8;
border: 1px solid #B0B0B0;
width: 100%;
background-color: var(--icon-bg-color);
color: #fff;
}
}
[part~="popup"] {
width: 150%;
}
elix-number-spin-box {
background-color: var(--input-color);
border-radius: 3px;
height: 20px !important;
margin-top: 1px;
}
elix-number-spin-box::part(spin-button) {
padding: 0px;
}
</style>
`.content
);

2
src/editor/contextmenu.js
View File

@@ -48,7 +48,7 @@ export const add = function (menuItem) {
throw new Error('Cannot add extension "' + menuItem.id + '", an extension by that name already exists"');
}
// Register menuItem action, see below for deferred menu dom injection
console.log('Registered contextmenu item: {id:' + menuItem.id + ', label:' + menuItem.label + '}'); // eslint-disable-line no-console
console.log('Registered contextmenu item: {id:' + menuItem.id + ', label:' + menuItem.label + '}');
contextMenuExtensions[menuItem.id] = menuItem;
// TODO: Need to consider how to handle custom enable/disable behavior
};

267
src/editor/contextmenu/jQuery.contextMenu.js
View File

@@ -1,267 +0,0 @@
/**
* @file jQuery Context Menu Plugin
* Cory S.N. LaViska
* A Beautiful Site ({@link https://abeautifulsite.net/})
* Modified by Alexis Deveria
*
* More info: {@link https://abeautifulsite.net/2008/09/jquery-context-menu-plugin/}
*
* @module jQueryContextMenu
* @todo Update to latest version and adapt (and needs jQuery update as well): {@link https://github.com/swisnl/jQuery-contextMenu}
* @version 1.0.1
*
* @license (MIT OR GPL-2.0-or-later)
*
* This plugin is dual-licensed under the GNU General Public License
* and the MIT License and is copyright A Beautiful Site, LLC.
*
*/
import {isMac} from '../../common/browser.js';
/**
* @callback module:jQueryContextMenu.jQueryContextMenuListener
* @param {string} href The `href` value after the first character (for bypassing an initial `#`)
* @param {external:jQuery} srcElement The wrapped jQuery srcElement
* @param {{x: Float, y: Float, docX: Float, docY: Float}} coords
* @returns {void}
*/
/**
* @typedef {PlainObject} module:jQueryContextMenu.jQueryContextMenuConfig
* @property {string} menu
* @property {Float} inSpeed
* @property {Float} outSpeed
* @property {boolean} allowLeft
*/
/**
* Adds {@link external:jQuery.fn.contextMenu},
* {@link external:jQuery.fn.disableContextMenuItems},
* {@link external:jQuery.fn.enableContextMenuItems},
* {@link external:jQuery.fn.disableContextMenu},
* {@link external:jQuery.fn.enableContextMenu},
* {@link external:jQuery.fn.destroyContextMenu}.
* @function module:jQueryContextMenu.jQueryContextMenu
* @param {external:jQuery} $ The jQuery object to wrap (with `contextMenu`, `disableContextMenuItems`, `enableContextMenuItems`, `disableContextMenu`, `enableContextMenu`, `destroyContextMenu`)
* @returns {external:jQuery}
*/
function jQueryContextMenu ($) {
const win = $(window);
const doc = $(document);
$.extend($.fn, {
/**
* @memberof external:jQuery.fn
* @param {module:jQueryContextMenu.jQueryContextMenuConfig} o
* @param {module:jQueryContextMenu.jQueryContextMenuListener} listener
* @returns {external:jQuery}
*/
contextMenu (o, listener) {
// Defaults
if (o.menu === undefined) return false;
if (o.inSpeed === undefined) o.inSpeed = 150;
if (o.outSpeed === undefined) o.outSpeed = 75;
// 0 needs to be -1 for expected results (no fade)
if (o.inSpeed === 0) o.inSpeed = -1;
if (o.outSpeed === 0) o.outSpeed = -1;
// Loop each context menu
$(this).each(function () {
const el = $(this);
const offset = $(el).offset();
const menu = $('#' + o.menu);
// Add contextMenu class
menu.addClass('contextMenu');
// Simulate a true right click
$(this).bind('mousedown', function (evt) {
$(this).mouseup(function (e) {
const srcElement = $(this);
srcElement.unbind('mouseup');
if (!(evt.button === 2 || o.allowLeft ||
(evt.ctrlKey && isMac()))) {
return undefined;
}
e.stopPropagation();
// Hide context menus that may be showing
$('.contextMenu').hide();
// Get this context menu
if (el.hasClass('disabled')) return false;
// Detect mouse position
let x = e.pageX, y = e.pageY;
const xOff = win.width() - menu.width(),
yOff = win.height() - menu.height();
if (x > xOff - 15) x = xOff - 15;
if (y > yOff - 30) y = yOff - 30; // 30 is needed to prevent scrollbars in FF
// Show the menu
doc.unbind('click');
menu.css({top: y, left: x}).fadeIn(o.inSpeed);
// Hover events
menu.find('A').mouseover(function () {
menu.find('LI.hover').removeClass('hover');
$(this).parent().addClass('hover');
}).mouseout(function () {
menu.find('LI.hover').removeClass('hover');
});
// Keyboard
doc.keypress(function (ev) {
switch (ev.keyCode) {
case 38: // up
if (!menu.find('LI.hover').length) {
menu.find('LI:last').addClass('hover');
} else {
menu.find('LI.hover').removeClass('hover').prevAll('LI:not(.disabled)').eq(0).addClass('hover');
if (!menu.find('LI.hover').length) menu.find('LI:last').addClass('hover');
}
break;
case 40: // down
if (!menu.find('LI.hover').length) {
menu.find('LI:first').addClass('hover');
} else {
menu.find('LI.hover').removeClass('hover').nextAll('LI:not(.disabled)').eq(0).addClass('hover');
if (!menu.find('LI.hover').length) menu.find('LI:first').addClass('hover');
}
break;
case 13: // enter
menu.find('LI.hover A').trigger('click');
break;
case 27: // esc
doc.trigger('click');
break;
}
});
// When items are selected
menu.find('A').unbind('mouseup');
menu.find('LI:not(.disabled) A').mouseup(function () {
doc.unbind('click').unbind('keypress');
$('.contextMenu').hide();
if (listener) {
listener($(this).attr('href').substr(1), $(srcElement), {
x: x - offset.left, y: y - offset.top, docX: x, docY: y
});
}
return false;
});
// Hide bindings
setTimeout(function () { // Delay for Mozilla
doc.click(function () {
doc.unbind('click').unbind('keypress');
menu.fadeOut(o.outSpeed);
return false;
});
}, 0);
return undefined;
});
});
// Disable text selection
if ($.browser.mozilla) {
$('#' + o.menu).each(function () { $(this).css({MozUserSelect: 'none'}); });
} else if ($.browser.msie) {
$('#' + o.menu).each(function () { $(this).bind('selectstart.disableTextSelect', function () { return false; }); });
} else {
$('#' + o.menu).each(function () { $(this).bind('mousedown.disableTextSelect', function () { return false; }); });
}
// Disable browser context menu (requires both selectors to work in IE/Safari + FF/Chrome)
$(el).add($('UL.contextMenu')).bind('contextmenu', function () { return false; });
});
return $(this);
},
/**
* Disable context menu items on the fly.
* @memberof external:jQuery.fn
* @param {void|string} o Comma-separated
* @returns {external:jQuery}
*/
disableContextMenuItems (o) {
if (o === undefined) {
// Disable all
$(this).find('LI').addClass('disabled');
return $(this);
}
$(this).each(function () {
if (o !== undefined) {
const d = o.split(',');
for (const href of d) {
$(this).find('A[href="' + href + '"]').parent().addClass('disabled');
}
}
});
return $(this);
},
/**
* Enable context menu items on the fly.
* @memberof external:jQuery.fn
* @param {void|string} o Comma-separated
* @returns {external:jQuery}
*/
enableContextMenuItems (o) {
if (o === undefined) {
// Enable all
$(this).find('LI.disabled').removeClass('disabled');
return $(this);
}
$(this).each(function () {
if (o !== undefined) {
const d = o.split(',');
for (const href of d) {
$(this).find('A[href="' + href + '"]').parent().removeClass('disabled');
}
}
});
return $(this);
},
/**
* Disable context menu(s).
* @memberof external:jQuery.fn
* @returns {external:jQuery}
*/
disableContextMenu () {
$(this).each(function () {
$(this).addClass('disabled');
});
return $(this);
},
/**
* Enable context menu(s).
* @memberof external:jQuery.fn
* @returns {external:jQuery}
*/
enableContextMenu () {
$(this).each(function () {
$(this).removeClass('disabled');
});
return $(this);
},
/**
* Destroy context menu(s).
* @memberof external:jQuery.fn
* @returns {external:jQuery}
*/
destroyContextMenu () {
// Destroy specified context menus
$(this).each(function () {
// Disable action
$(this).unbind('mousedown').unbind('mouseup');
});
return $(this);
}
});
return $;
}
export default jQueryContextMenu;

68
src/editor/dialogs/SePlainAlertDialog.js Normal file
View File

@@ -0,0 +1,68 @@
import PlainAlertDialog from 'elix/src/plain/PlainAlertDialog.js';
import {template} from 'elix/src/base/internal.js';
import {fragmentFrom} from 'elix/src/core/htmlLiterals.js';
/**
* @class SePlainAlertDialog
*/
export default class SePlainAlertDialog extends PlainAlertDialog {
/**
* @function get
* @returns {PlainObject}
*/
get [template] () {
const result = super[template];
// Replace the default slot with a new default slot and a button container.
const defaultSlot = result.content.querySelector('#frameContent');
if (defaultSlot) {
defaultSlot.replaceWith(fragmentFrom.html`
<div id="alertDialogContent">
<div id="se-content-alert">
<slot></slot>
</div>
<div id="choiceButtonContainer" part="choice-button-container"></div>
</div>
`);
}
result.content.append(
fragmentFrom.html`
<style>
[part~="frame"] {
padding: 1em;
background: #CCC;
width: 300px;
border: 1px outset #777;
font-size: 0.8em;
font-family: Verdana,Helvetica,sans-serif;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
[part~="choice-button-container"] {
margin-top: 1em;
text-align: center;
}
[part~="choice-button"]:not(:first-child) {
margin-left: 0.5em;
}
#se-content-alert{
height: 95px;
background: #DDD;
overflow: auto;
text-align: left;
border: 1px solid #B0B0B0;
padding: 1em;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
</style>
`
);
return result;
}
}
customElements.define('se-elix-alert-dialog', SePlainAlertDialog);

2
src/editor/dialogs/cmenuDialog.js
View File

@@ -128,7 +128,7 @@ export class SeCMenuDialog extends HTMLElement {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot.appendChild(template.content.cloneNode(true));
this._shadowRoot.append(template.content.cloneNode(true));
this._workarea = document.getElementById('workarea');
this.$dialog = this._shadowRoot.querySelector('#cmenu_canvas');
this.$copyLink = this._shadowRoot.querySelector('#se-copy');

2
src/editor/dialogs/cmenuLayersDialog.js
View File

@@ -81,7 +81,7 @@ export class SeCMenuLayerDialog extends HTMLElement {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot.appendChild(template.content.cloneNode(true));
this._shadowRoot.append(template.content.cloneNode(true));
this.source = '';
this._workarea = undefined;
this.$sidePanels = document.getElementById('sidepanels');

8
src/editor/dialogs/editorPreferencesDialog.js
View File

@@ -1,4 +1,3 @@
/* eslint-disable node/no-unpublished-import */
import 'elix/define/Dialog.js';
const template = document.createElement('template');
@@ -119,11 +118,12 @@ template.innerHTML = `
float: left;
margin: 2px;
padding: 20px;
border: 1px solid #6f6f6f;
}
#change_background div.cur_background {
border: 2px solid blue;
padding: 18px;
padding: 19px;
}
#canvas_bg_url {
display: block;
@@ -243,7 +243,7 @@ export class SeEditPrefsDialog extends HTMLElement {
// create the shadowDom and insert the template
this.colorBlocks = ['#FFF', '#888', '#000', 'chessboard'];
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot.appendChild(template.content.cloneNode(true));
this._shadowRoot.append(template.content.cloneNode(true));
this.$dialog = this._shadowRoot.querySelector('#svg_prefs');
this.$saveBtn = this._shadowRoot.querySelector('#tool_prefs_save');
this.$cancelBtn = this._shadowRoot.querySelector('#tool_prefs_cancel');
@@ -511,7 +511,7 @@ export class SeEditPrefsDialog extends HTMLElement {
if (e === 'chessboard') {
newdiv.dataset.bgColor = e;
// eslint-disable-next-line max-len
newdiv.style.backgroundImage = 'url(data:image/gif;base64,R0lGODlhEAAQAIAAAP///9bW1iH5BAAAAAAALAAAAAAQABAAAAIfjGgq4jM3IFLJgpswNly/XkcBpIiVaInlLJr9FZWAQA7)';
newdiv.style.backgroundImage = 'url(data:image/gif;base64,R0lGODlhEAAQAIAAAP///9bW1iH5BAAAAAAALAAAAAAQABAAAAIfjG+gq4jM3IFLJgpswNly/XkcBpIiVaInlLJr9FZWAQA7)';
newdiv.classList.add('color_block');
} else {
newdiv.dataset.bgColor = e; // setAttribute('data-bgcolor', e);

188
src/editor/dialogs/exportDialog.js Normal file
View File

@@ -0,0 +1,188 @@
import 'elix/define/Dialog.js';
import './se-elix/define/NumberSpinBox.js';
const template = document.createElement('template');
template.innerHTML = `
<style>
#dialog_content {
margin: 10px 10px 5px 10px;
background: #DDD;
overflow: auto;
text-align: left;
border: 1px solid #B0B0B0;
}
#dialog_content p, #dialog_content select, #dialog_content label {
margin: 10px;
line-height: 0.3em;
}
#dialog_container {
font-family: Verdana;
text-align: center;
left: 50%;
top: 50%;
max-width: 400px;
z-index: 50001;
background: #CCC;
border: 1px outset #777;
font-family:Verdana,Helvetica,sans-serif;
font-size:0.8em;
}
#dialog_container, #dialog_content {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#dialog_buttons input[type=text] {
width: 90%;
display: block;
margin: 0 0 5px 11px;
}
#dialog_buttons input[type=button] {
margin: 0 1em;
}
.se-select{
text-align: center;
}
elix-number-spin-box{
margin-left: 15px;
}
</style>
<elix-dialog id="export_box" aria-label="export svg" closed>
<div class="overlay"></div>
<div id="dialog_container">
<div id="dialog_content">
<p class="se-select">
Select an image type for export:
</p>
<p class="se-select">
<select id="se-storage-pref">
<option value="PNG">PNG</option>
<option value="JPEG">JPEG</option>
<option value="BMP">BMP</option>
<option value="WEBP">WEBP</option>
<option value="PDF">PDF</option>
</select>
</p>
<p id="se-quality">Quality:<elix-number-spin-box min="-1" max="101" step="5" value="100"></elix-number-spin-box></p>
</div>
<div id="dialog_buttons">
<button id="export_ok">
<img class="svg_icon" src="./images/ok.svg" alt="icon" width="16" height="16" />
Ok
</button>
<button id="export_cancel">
<img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" />
Cancel
</button>
</div>
</div>
</elix-dialog>
`;
/**
* @class SeExportDialog
*/
export class SeExportDialog extends HTMLElement {
/**
* @function constructor
*/
constructor () {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot.append(template.content.cloneNode(true));
this.$dialog = this._shadowRoot.querySelector('#export_box');
this.$okBtn = this._shadowRoot.querySelector('#export_ok');
this.$cancelBtn = this._shadowRoot.querySelector('#export_cancel');
this.$exportOption = this._shadowRoot.querySelector('#se-storage-pref');
this.$qualityCont = this._shadowRoot.querySelector('#se-quality');
this.$input = this._shadowRoot.querySelector('elix-number-spin-box');
this.value = 1;
}
/**
* @function observedAttributes
* @returns {any} observed
*/
static get observedAttributes () {
return ['dialog'];
}
/**
* @function attributeChangedCallback
* @param {string} name
* @param {string} oldValue
* @param {string} newValue
* @returns {void}
*/
attributeChangedCallback (name, oldValue, newValue) {
switch (name) {
case 'dialog':
if (newValue === 'open') {
this.$dialog.open();
} else {
this.$dialog.close();
}
break;
default:
// super.attributeChangedCallback(name, oldValue, newValue);
break;
}
}
/**
* @function get
* @returns {any}
*/
get dialog () {
return this.getAttribute('dialog');
}
/**
* @function set
* @returns {void}
*/
set dialog (value) {
this.setAttribute('dialog', value);
}
/**
* @function connectedCallback
* @returns {void}
*/
connectedCallback () {
this.$input.addEventListener('change', (e) => {
e.preventDefault();
this.value = e.target.value;
});
this.$input.addEventListener('click', (e) => {
e.preventDefault();
this.value = e.target.value;
});
const onSubmitHandler = (e, action) => {
if (action === 'cancel') {
document.getElementById('se-export-dialog').setAttribute('dialog', 'close');
} else {
const triggerEvent = new CustomEvent('change', {detail: {
trigger: action,
imgType: this.$exportOption.value,
quality: this.value
}});
this.dispatchEvent(triggerEvent);
}
};
const onChangeHandler = (e) => {
if (e.target.value === 'PDF') {
this.$qualityCont.style.display = 'none';
} else {
this.$qualityCont.style.display = 'block';
}
};
this.$okBtn.addEventListener('click', (evt) => onSubmitHandler(evt, 'ok'));
this.$cancelBtn.addEventListener('click', (evt) => onSubmitHandler(evt, 'cancel'));
this.$exportOption.addEventListener('change', (evt) => onChangeHandler(evt));
}
}
// Register
customElements.define('se-export-dialog', SeExportDialog);

3
src/editor/dialogs/imagePropertiesDialog.js
View File

@@ -1,4 +1,3 @@
/* eslint-disable node/no-unpublished-import */
import 'elix/define/Dialog.js';
import {isValidUnit} from '../../common/units.js';
@@ -129,7 +128,7 @@ export class SeImgPropDialog extends HTMLElement {
// create the shadowDom and insert the template
this.eventlisten = false;
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot.appendChild(template.content.cloneNode(true));
this._shadowRoot.append(template.content.cloneNode(true));
this.$saveBtn = this._shadowRoot.querySelector('#tool_docprops_save');
this.$cancelBtn = this._shadowRoot.querySelector('#tool_docprops_cancel');
this.$resolution = this._shadowRoot.querySelector('#resolution');

1
src/editor/dialogs/index.js
View File

@@ -7,3 +7,4 @@ import './seSelectDialog.js';
import './seConfirmDialog.js';
import './sePromptDialog.js';
import './seAlertDialog.js';
import './exportDialog.js';

7
src/editor/dialogs/se-elix/define/NumberSpinBox.js Normal file
View File

@@ -0,0 +1,7 @@
import PlainNumberSpinBox from '../src/plain/PlainNumberSpinBox.js';
/**
* @class ElixNumberSpinBox
*/
export default class ElixNumberSpinBox extends PlainNumberSpinBox {}
customElements.define('elix-number-spin-box', ElixNumberSpinBox);

247
src/editor/dialogs/se-elix/src/base/NumberSpinBox.js Normal file
View File

@@ -0,0 +1,247 @@
/* eslint-disable class-methods-use-this */
import {
defaultState,
setState,
state,
stateEffects
} from 'elix/src/base/internal.js';
import {
SpinBox
} from 'elix/src/base/SpinBox.js';
/**
* @class NumberSpinBox
*/
class NumberSpinBox extends SpinBox {
/**
* @function attributeChangedCallback
* @param {string} name
* @param {string} oldValue
* @param {string} newValue
* @returns {void}
*/
attributeChangedCallback (name, oldValue, newValue) {
if (name === 'max') {
this.max = parseFloat(newValue);
} else if (name === 'min') {
this.min = parseFloat(newValue);
} else if (name === 'step') {
this.step = parseFloat(newValue);
} else {
super.attributeChangedCallback(name, oldValue, newValue);
}
}
/**
* @function observedAttributes
* @returns {any} observed
*/
get [defaultState] () {
return Object.assign(super[defaultState], {
max: null,
min: null,
step: 1
});
}
/**
* @function formatValue
* Format the numeric value as a string.
*
* This is used after incrementing/decrementing the value to reformat the
* value as a string.
*
* @param {number} value
* @param {number} precision
* @returns {number}
*/
formatValue (value, precision) {
return Number(value).toFixed(precision);
}
/**
* The maximum allowable value of the `value` property.
*
* @type {number|null}
* @default 1
*/
get max () {
return this[state].max;
}
/**
* The maximum allowable value of the `value` property.
*
* @type {number|null}
* @default 1
*/
set max (max) {
this[setState]({
max
});
}
/**
* The minimum allowable value of the `value` property.
*
* @type {number|null}
* @default 1
*/
get min () {
return this[state].min;
}
/**
* @function set
* @returns {void}
*/
set min (min) {
this[setState]({
min
});
}
/**
* @function parseValue
* @param {number} value
* @param {number} precision
* @returns {int}
*/
parseValue (value, precision) {
const parsed = precision === 0 ? parseInt(value) : parseFloat(value);
return isNaN(parsed) ? 0 : parsed;
}
/**
* @function stateEffects
* @param {any} state
* @param {any} changed
* @returns {any}
*/
[stateEffects] (state, changed) {
const effects = super[stateEffects];
// If step changed, calculate its precision (number of digits after
// the decimal).
if (changed.step) {
const {
step
} = state;
const decimalRegex = /\.(\d)+$/;
const match = decimalRegex.exec(String(step));
const precision = match && match[1] ? match[1].length : 0;
Object.assign(effects, {
precision
});
}
if (changed.max || changed.min || changed.value) {
// The value is valid if it falls between the min and max.
// TODO: We need a way to let other classes/mixins on the prototype chain
// contribute to validity -- if someone else thinks the value is invalid,
// we should respect that, even if the value falls within the min/max
// bounds.
const {
max,
min,
precision,
value
} = state;
const parsed = parseInt(value, precision);
if (value !== '' && isNaN(parsed)) {
Object.assign(effects, {
valid: false,
validationMessage: 'Value must be a number'
});
} else if (!(max === null || parsed <= max)) {
Object.assign(effects, {
valid: false,
validationMessage: `Value must be less than or equal to ${max}.`
});
} else if (!(min === null || parsed >= min)) {
Object.assign(effects, {
valid: false,
validationMessage: `Value must be greater than or equal to ${min}.`
});
} else {
Object.assign(effects, {
valid: true,
validationMessage: ''
});
}
// We can only go up if we're below max.
Object.assign(effects, {
canGoUp: isNaN(parsed) || state.max === null || parsed <= state.max
});
// We can only go down if we're above min.
Object.assign(effects, {
canGoDown: isNaN(parsed) || state.min === null || parsed >= state.min
});
}
return effects;
}
/**
* @function get
* @returns {any}
*/
get step () {
return this[state].step;
}
/**
* @function set
* @returns {void}
*/
set step (step) {
if (!isNaN(step)) {
this[setState]({
step
});
}
}
/**
* @function stepDown
* @returns {void}
*/
stepDown () {
super.stepDown();
const {
max,
precision,
value
} = this[state];
let result = this.parseValue(value, precision) - this.step;
if (max !== null) {
result = Math.min(result, max);
}
const {
min
} = this[state];
if (min === null || result >= min) {
this.value = this.formatValue(result, precision);
}
}
/**
* @function stepUp
* @returns {void}
*/
stepUp () {
super.stepUp();
const {
min,
precision,
value
} = this[state];
let result = this.parseValue(value, precision) + this.step;
if (min !== null) {
result = Math.max(result, min);
}
const {
max
} = this[state];
if (max === null || result <= max) {
this.value = this.formatValue(result, precision);
}
}
}
export default NumberSpinBox;

9
src/editor/dialogs/se-elix/src/plain/PlainNumberSpinBox.js Normal file
View File

@@ -0,0 +1,9 @@
import PlainSpinBoxMixin from 'elix/src/plain/PlainSpinBoxMixin.js';
import NumberSpinBox from '../base/NumberSpinBox.js';
/**
* @class PlainNumberSpinBox
*/
class PlainNumberSpinBox extends PlainSpinBoxMixin(NumberSpinBox) {}
export default PlainNumberSpinBox;

5
src/editor/dialogs/seAlertDialog.js
View File

@@ -1,8 +1,7 @@
// eslint-disable-next-line node/no-unpublished-import
import AlertDialog from 'elix/define/AlertDialog.js';
import SePlainAlertDialog from './SePlainAlertDialog.js';
const dialog = new AlertDialog();
const seAlert = (text) => {
const dialog = new SePlainAlertDialog();
dialog.textContent = text;
dialog.choices = ['Ok'];
dialog.open();

5
src/editor/dialogs/seConfirmDialog.js
View File

@@ -1,8 +1,7 @@
// eslint-disable-next-line node/no-unpublished-import
import AlertDialog from 'elix/define/AlertDialog.js';
import SePlainAlertDialog from './SePlainAlertDialog.js';
const dialog = new AlertDialog();
const seConfirm = async (text, choices) => {
const dialog = new SePlainAlertDialog();
dialog.textContent = text;
dialog.choices = (choices === undefined) ? ['Ok', 'Cancel'] : choices;
dialog.open();

8
src/editor/dialogs/sePromptDialog.js
View File

@@ -1,5 +1,4 @@
// eslint-disable-next-line node/no-unpublished-import
import AlertDialog from 'elix/define/AlertDialog.js';
import SePlainAlertDialog from './SePlainAlertDialog.js';
/**
* @class SePromptDialog
*/
@@ -11,7 +10,7 @@ export class SePromptDialog extends HTMLElement {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this.dialog = new AlertDialog();
this.dialog = new SePlainAlertDialog();
}
/**
* @function observedAttributes
@@ -43,7 +42,8 @@ export class SePromptDialog extends HTMLElement {
}
break;
default:
console.error('unkonw attr for:', name, 'newValue =', newValue);
// eslint-disable-next-line no-console
console.error('unknown attr for:', name, 'newValue =', newValue);
break;
}
}

5
src/editor/dialogs/seSelectDialog.js
View File

@@ -1,8 +1,7 @@
// eslint-disable-next-line node/no-unpublished-import
import AlertDialog from 'elix/define/AlertDialog.js';
import SePlainAlertDialog from './SePlainAlertDialog.js';
const dialog = new AlertDialog();
const seSelect = async (text, choices) => {
const dialog = new SePlainAlertDialog();
dialog.textContent = text;
dialog.choices = choices;
dialog.open();

3
src/editor/dialogs/svgSourceDialog.js
View File

@@ -1,4 +1,3 @@
/* eslint-disable node/no-unpublished-import */
import 'elix/define/Dialog.js';
const template = document.createElement('template');
@@ -83,7 +82,7 @@ export class SeSvgSourceEditorDialog extends HTMLElement {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot.appendChild(template.content.cloneNode(true));
this._shadowRoot.append(template.content.cloneNode(true));
this.$dialog = this._shadowRoot.querySelector('#svg_source_editor');
this.$copyBtn = this._shadowRoot.querySelector('#copy_save_done');
this.$saveBtn = this._shadowRoot.querySelector('#tool_source_save');

96
src/editor/dragmove/dragmove.js Normal file
View File

@@ -0,0 +1,96 @@
// https://github.com/knadh/dragmove.js
// Kailash Nadh (c) 2020.
// MIT License.
let _loaded = false;
let _callbacks = [];
const _isTouch = window.ontouchstart !== undefined;
export const dragmove = function(target, handler, parent, onStart, onEnd, onDrag) {
// Register a global event to capture mouse moves (once).
if (!_loaded) {
document.addEventListener(_isTouch ? "touchmove" : "mousemove", function(e) {
let c = e;
if (e.touches) {
c = e.touches[0];
}
// On mouse move, dispatch the coords to all registered callbacks.
for (var i = 0; i < _callbacks.length; i++) {
_callbacks[i](c.clientX, c.clientY);
}
});
}
_loaded = true;
let isMoving = false, hasStarted = false;
let startX = 0, startY = 0, lastX = 0, lastY = 0;
// On the first click and hold, record the offset of the pointer in relation
// to the point of click inside the element.
handler.addEventListener(_isTouch ? "touchstart" : "mousedown", function(e) {
e.stopPropagation();
e.preventDefault();
if (target.dataset.dragEnabled === "false") {
return;
}
let c = e;
if (e.touches) {
c = e.touches[0];
}
isMoving = true;
startX = target.offsetLeft - c.clientX;
startY = target.offsetTop - c.clientY;
});
// On leaving click, stop moving.
document.addEventListener(_isTouch ? "touchend" : "mouseup", function(e) {
if (onEnd && hasStarted) {
onEnd(target, parent, parseInt(target.style.left), parseInt(target.style.top));
}
isMoving = false;
hasStarted = false;
});
// On leaving click, stop moving.
document.addEventListener(_isTouch ? "touchmove" : "mousemove", function(e) {
if (onDrag && hasStarted) {
onDrag(target, parseInt(target.style.left), parseInt(target.style.top));
}
});
// Register mouse-move callback to move the element.
_callbacks.push(function move(x, y) {
if (!isMoving) {
return;
}
if (!hasStarted) {
hasStarted = true;
if (onStart) {
onStart(target, lastX, lastY);
}
}
lastX = x + startX;
lastY = y + startY;
// If boundary checking is on, don't let the element cross the viewport.
if (target.dataset.dragBoundary === "true") {
if (lastX < 1 || lastX >= window.innerWidth - target.offsetWidth) {
return;
}
if (lastY < 1 || lastY >= window.innerHeight - target.offsetHeight) {
return;
}
}
target.style.left = lastX + "px";
target.style.top = lastY + "px";
});
}
export { dragmove as default };

6
src/editor/embedapi-dom.js
View File

@@ -18,10 +18,10 @@ let svgCanvas = null;
function handleSvgData (data, error) {
if (error) {
// Todo: This should be replaced with a general purpose dialog alert library call
alert('error ' + error); // eslint-disable-line no-alert
alert('error ' + error);
} else {
// Todo: This should be replaced with a general purpose dialog alert library call
alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data); // eslint-disable-line no-alert
alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
}
}
@@ -112,7 +112,7 @@ iframe[0].addEventListener('load', function () {
try {
doc = frame.contentDocument || frame.contentWindow.document;
} catch (err) {
console.log('Blocked from accessing document', err); // eslint-disable-line no-console
console.log('Blocked from accessing document', err);
}
if (doc) {
// Todo: Provide a way to get this to occur by `postMessage`

8
src/editor/embedapi.js
View File

@@ -24,7 +24,7 @@ let cbid = 0;
function getCallbackSetter (funcName) {
return function (...args) {
const that = this, // New callback
callbackID = this.send(funcName, args, function () { /* empty */ }); // The callback (currently it's nothing, but will be set later)
callbackID = this.send(funcName, args, function () { /* empty fn */ }); // The callback (currently it's nothing, but will be set later)
return function (newCallback) {
that.callbacks[callbackID] = newCallback; // Set callback
@@ -71,7 +71,6 @@ function messageListener (e) {
e.source !== this.frame.contentWindow ||
(!allowedOrigins.includes('*') && !allowedOrigins.includes(e.origin))
) {
// eslint-disable-next-line no-console -- Info for developers
console.error(
`The origin ${e.origin} was not whitelisted as an origin from ` +
`which responses may be received by this ${window.origin} script.`
@@ -111,6 +110,7 @@ svgCanvas.setSvgString('string');
svgCanvas.setSvgString('string')(function (data, error) {
if (error) {
// There was an error
throw error
} else {
// Handle data
}
@@ -344,7 +344,7 @@ class EmbeddedSVGEdit {
* @param {GenericCallback} callback (This may be better than a promise in case adding an event.)
* @returns {Integer}
*/
send (name, args, callback) { // eslint-disable-line promise/prefer-await-to-callbacks
send (name, args, callback) {
const that = this;
cbid++;
@@ -363,7 +363,7 @@ class EmbeddedSVGEdit {
try {
sameOriginWithGlobal = window.location.origin === that.frame.contentWindow.location.origin &&
that.frame.contentWindow.svgEditor.svgCanvas;
} catch (err) {}
}catch (err) {/* empty */}
if (sameOriginWithGlobal) {
// Although we do not really need this API if we are working same

16
src/editor/extensions/ext-connector/ext-connector.js
View File

@@ -28,8 +28,6 @@ export default {
const {$, svgroot} = S,
addElem = svgCanvas.addSVGElementFromJson,
selManager = S.selectorManager,
connSel = '.se_connector',
// connect_str = '-SE_CONNECT-',
elData = $.data;
let startX,
@@ -191,7 +189,7 @@ export default {
* @returns {void}
*/
function findConnectors (elems = selElems) {
const connectors = $(svgcontent).find(connSel);
const connectors = $(svgcontent).find('.se_connector');
connections = [];
// Loop through connectors to see if one is connected to the element
@@ -310,7 +308,7 @@ export default {
const gse = svgCanvas.groupSelectedElements;
svgCanvas.groupSelectedElements = function (...args) {
svgCanvas.removeFromSelection($(connSel).toArray());
svgCanvas.removeFromSelection($('.se_connector').toArray());
return gse.apply(this, args);
};
@@ -334,7 +332,7 @@ export default {
$(svgcontent).find('*').each(function () {
const conn = this.getAttributeNS(seNs, 'connector');
if (conn) {
this.setAttribute('class', connSel.substr(1));
this.setAttribute('class', 'se_connector');
const connData = conn.split(' ');
const sbb = svgCanvas.getStrokedBBox([getElem(connData[0])]);
const ebb = svgCanvas.getStrokedBBox([getElem(connData[1])]);
@@ -500,7 +498,7 @@ export default {
const connStr = startId + ' ' + endId;
const altStr = endId + ' ' + startId;
// Don't create connector if one already exists
const dupe = $(svgcontent).find(connSel).filter(function () {
const dupe = $(svgcontent).find('.se_connector').filter(function () {
const conn = this.getAttributeNS(seNs, 'connector');
if (conn === connStr || conn === altStr) { return true; }
return false;
@@ -524,7 +522,7 @@ export default {
.data('end_bb', bb);
seNs = svgCanvas.getEditorNS(true);
curLine.setAttributeNS(seNs, 'se:connector', connStr);
curLine.setAttribute('class', connSel.substr(1));
curLine.setAttribute('class', 'se_connector');
curLine.setAttribute('opacity', 1);
svgCanvas.addToSelection([curLine]);
svgCanvas.moveToBottomSelectedElement();
@@ -538,7 +536,7 @@ export default {
},
selectedChanged (opts) {
// TODO: Find better way to skip operations if no connectors are in use
if (!$(svgcontent).find(connSel).length) { return; }
if (!$(svgcontent).find('.se_connector').length) { return; }
if (svgCanvas.getMode() === 'connector') {
svgCanvas.setMode('select');
@@ -616,7 +614,7 @@ export default {
}
}
// Update line if it's a connector
if (elem.getAttribute('class') === connSel.substr(1)) {
if (elem.getAttribute('class') === 'se_connector') {
const start = getElem(elData(elem, 'c_start'));
updateConnectors([start]);
} else {

2
src/editor/extensions/ext-foreignobject/ext-foreignobject.js
View File

@@ -83,7 +83,7 @@ export default {
svgCanvas.clearSelection();
} catch (e) {
// Todo: Surface error to user
console.log(e); // eslint-disable-line no-console
console.log(e);
return false;
}

2
src/editor/extensions/ext-helloworld/ext-helloworld.js
View File

@@ -78,7 +78,7 @@ export default {
});
// Show the text using the custom alert function
alert(text); // eslint-disable-line no-alert
alert(text);
}
}
};

16
src/editor/extensions/ext-imagelib/ext-imagelib.js
View File

@@ -1,3 +1,4 @@
/* globals seConfirm */
/**
* @file ext-imagelib.js
*
@@ -108,7 +109,7 @@ export default {
* @param {ImageLibMetaMessage|ImageLibMessage|string} cfg.data String is deprecated when parsed to JSON `ImageLibMessage`
* @returns {void}
*/
async function onMessage ({origin, data: response}) { // eslint-disable-line no-shadow
async function onMessage ({origin, data: response}) {
if (!response || !['string', 'object'].includes(typeof response)) {
// Do nothing
return;
@@ -125,7 +126,7 @@ export default {
}
if (!allowedImageLibOrigins.includes('*') && !allowedImageLibOrigins.includes(origin)) {
// Todo: Surface this error to user?
console.log(`Origin ${origin} not whitelisted for posting to ${window.origin}`); // eslint-disable-line no-console
console.log(`Origin ${origin} not whitelisted for posting to ${window.origin}`);
return;
}
const hasName = 'name' in response;
@@ -142,7 +143,9 @@ export default {
}
// Hide possible transfer dialog box
$('#dialog_box').hide();
if (document.querySelector('se-elix-alert-dialog')) {
document.querySelector('se-elix-alert-dialog').remove();
}
type = hasName
? 'meta'
: response.charAt(0);
@@ -181,11 +184,8 @@ export default {
const message = uiStrings.notification.retrieving.replace('%s', name);
if (mode !== 'm') {
await $.process_cancel(message);
await seConfirm(message);
transferStopped = true;
// Should a message be sent back to the frame?
$('#dialog_box').hide();
} else {
entry = $('<div>').text(message).data('id', curMeta.id);
preview.append(entry);
@@ -237,7 +237,7 @@ export default {
case 's':
// Import one
if (svgStr) {
svgCanvas.importSvgString(response);
svgEditor.svgCanvas.importSvgString(response);
} else if (imgStr) {
importImage(response);
}

2
src/editor/extensions/ext-imagelib/index.js
View File

@@ -33,7 +33,7 @@ $('a').click(function () {
} catch (err) {
// This fails in Firefox with `file:///` URLs :(
// Todo: This could use a generic alert library instead
alert('Data URL conversion failed: ' + err); // eslint-disable-line no-alert
alert('Data URL conversion failed: ' + err);
data = '';
}
post({href, data});

6
src/editor/extensions/ext-imagelib/openclipart.js
View File

@@ -1,8 +1,6 @@
// eslint-disable-next-line node/no-unpublished-import
/* eslint-disable node/no-unpublished-import */
import {jml, body, nbsp} from 'jamilih';
// eslint-disable-next-line node/no-unpublished-import
import $ from 'query-result';
// eslint-disable-next-line node/no-unpublished-import
import {manipulation} from 'qr-manipulation';
manipulation($, jml);
@@ -40,7 +38,7 @@ async function processResults (url) {
if (!json || json.msg !== 'success') {
// Todo: This could use a generic alert library instead
alert('There was a problem downloading the results'); // eslint-disable-line no-alert
alert('There was a problem downloading the results');
return;
}
const {payload, info: {

7
src/editor/extensions/ext-markers/ext-markers.js
View File

@@ -121,7 +121,7 @@ export default {
function setIcon (pos, id) {
if (id.substr(0, 1) !== '\\') { id = '\\textmarker'; }
const ci = '#' + idPrefix + pos + '_' + id.substr(1);
// svgEditor.setIcon('#cur_' + pos + '_marker_list', $(ci).children());
svgEditor.setIcon('#cur_' + pos + '_marker_list', $(ci).children());
$(ci).addClass('current').siblings().removeClass('current');
}
@@ -508,7 +508,7 @@ export default {
buttons.push({
id: idPrefix + pos + '_' + id,
svgicon: id,
icon: 'markers-' + id + '.png',
icon: id + '.svg',
title,
type: 'context',
events: {click: setArrowFromButton},
@@ -565,7 +565,7 @@ export default {
return {
name: strings.name,
svgicons: 'markers-icons.xml',
svgicons: '',
callback () {
$('#marker_panel').addClass('toolset').hide();
},
@@ -595,7 +595,6 @@ export default {
},
elementChanged (opts) {
// console.log('elementChanged',opts);
const elem = opts.elems[0];
if (elem && (
elem.getAttribute('marker-start') ||

12
src/editor/extensions/ext-mathjax/ext-mathjax.js
View File

@@ -168,12 +168,12 @@ export default {
'</div>' +
'</div>'
).insertAfter('#svg_prefs').hide();
// Make the MathEditor draggable.
$('#mathjax_container').draggable({
// TODO: unable to reach this place
/* $('#mathjax_container').draggable({
cancel: 'button,fieldset',
containment: 'window'
});
}); */
// Add functionality and picture to cancel button.
$('#tool_mathjax_cancel').prepend($.getSvgIcon('cancel', true))
@@ -196,12 +196,12 @@ export default {
// When MathJax is loaded get the div where the math will be rendered.
MathJax.Hub.queue.Push(function () {
math = MathJax.Hub.getAllJax('#mathjax_creator')[0];
console.log(math); // eslint-disable-line no-console
console.log(math);
mathjaxLoaded = true;
console.log('MathJax Loaded'); // eslint-disable-line no-console
console.log('MathJax Loaded');
});
} catch (e) {
console.log('Failed loading MathJax.'); // eslint-disable-line no-console
console.log('Failed loading MathJax.');
// eslint-disable-next-line no-alert
alert('Failed loading MathJax. You will not be able to change the mathematics.');
}

2
src/editor/extensions/ext-opensave/ext-opensave.js
View File

@@ -54,7 +54,7 @@ export default {
},
async open () {
const ok = await this.openPrep();
if (!ok) { return; }
if (ok === 'Cancel') { return; }
this.svgCanvas.clear();
const input = document.createElement('input');
input.type = 'file';

32
src/editor/extensions/ext-overview_window/ext-overview_window.js
View File

@@ -6,6 +6,7 @@
* @copyright 2013 James Sacksteder
*
*/
import { dragmove } from '../../dragmove/dragmove.js';
export default {
name: 'overview_window',
init ({$, isChrome}) {
@@ -104,12 +105,31 @@ export default {
$('#workarea').scrollLeft(portX);
$('#workarea').scrollTop(portY);
};
$('#overview_window_view_box').draggable({
containment: 'parent',
drag: updateViewPortFromViewBox,
start () { overviewWindowGlobals.viewBoxDragging = true; },
stop () { overviewWindowGlobals.viewBoxDragging = false; }
});
const onStart = function () {
overviewWindowGlobals.viewBoxDragging = true;
updateViewPortFromViewBox();
};
const onEnd = function (el, parent, x, y) {
if((el.offsetLeft + el.offsetWidth) > $(parent).attr('width')){
el.style.left = ($(parent).attr('width') - el.offsetWidth) + 'px';
} else if(el.offsetLeft < 0){
el.style.left = "0px"
}
if((el.offsetTop + el.offsetHeight) > $(parent).attr('height')){
el.style.top = ($(parent).attr('height') - el.offsetHeight) + 'px';
} else if(el.offsetTop < 0){
el.style.top = "0px"
}
overviewWindowGlobals.viewBoxDragging = false;
updateViewPortFromViewBox();
};
const onDrag = function () {
updateViewPortFromViewBox();
};
const dragElem = document.querySelector("#overview_window_view_box");
const parentElem = document.querySelector("#overviewMiniView");
dragmove(dragElem, dragElem, parentElem, onStart, onEnd, onDrag);
$('#overviewMiniView').click(function (evt) {
// Firefox doesn't support evt.offsetX and evt.offsetY.
const mouseX = (evt.offsetX || evt.originalEvent.layerX);

6
src/editor/extensions/ext-storage/ext-storage.js
View File

@@ -151,10 +151,10 @@ export default {
function setupBeforeUnloadListener () {
window.addEventListener('beforeunload', function (e) {
// Don't save anything unless the user opted in to storage
if (!document.cookie.match(/(?:^|;\s*)svgeditstore=(?:prefsAndContent|prefsOnly)/)) {
if (!(/(?:^|;\s*)svgeditstore=(?:prefsAndContent|prefsOnly)/).test(document.cookie)) {
return;
}
if (document.cookie.match(/(?:^|;\s*)svgeditstore=prefsAndContent/)) {
if ((/(?:^|;\s*)svgeditstore=prefsAndContent/).test(document.cookie)) {
setSVGContentStorage(svgCanvas.getSvgString());
}
@@ -209,7 +209,7 @@ export default {
// continual prompts about it)...
storagePrompt !== 'false' &&
// ...and this user hasn't previously indicated a desire for storage
!document.cookie.match(/(?:^|;\s*)svgeditstore=(?:prefsAndContent|prefsOnly)/)
!(/(?:^|;\s*)svgeditstore=(?:prefsAndContent|prefsOnly)/).test(document.cookie)
)
// ...then show the storage prompt.
)) {

3
src/editor/extensions/ext-storage/storageDialog.js
View File

@@ -1,5 +1,4 @@
/* eslint-disable max-len */
/* eslint-disable node/no-unpublished-import */
import 'elix/define/Dialog.js';
const template = document.createElement('template');
@@ -88,7 +87,7 @@ export class SeStorageDialog extends HTMLElement {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot.appendChild(template.content.cloneNode(true));
this._shadowRoot.append(template.content.cloneNode(true));
this.$dialog = this._shadowRoot.querySelector('#dialog_box');
this.$storage = this._shadowRoot.querySelector('#js-storage');
this.$okBtn = this._shadowRoot.querySelector('#storage_ok');

2
src/editor/extensions/ext-webappfind/ext-webappfind.js
View File

@@ -39,7 +39,7 @@ export default {
* @throws {Error} Unexpected event type
* @returns {void}
*/
(win, {data, origin}) => { // eslint-disable-line no-shadow
(win, {data, origin}) => {
// console.log('data, origin', data, origin);
let type, content;
try {

4
src/editor/extensions/ext-xdomain-messaging/ext-xdomain-messaging.js
View File

@@ -24,7 +24,7 @@ export default {
// to configure
const {allowedOrigins} = svgEditor.configObj.curConfig;
if (!allowedOrigins.includes('*') && !allowedOrigins.includes(e.origin)) {
console.log(`Origin ${e.origin} not whitelisted for posting to ${window.origin}`); // eslint-disable-line no-console
console.log(`Origin ${e.origin} not whitelisted for posting to ${window.origin}`);
return;
}
const cbid = data.id;
@@ -43,7 +43,7 @@ export default {
e.source.postMessage(JSON.stringify(message), '*');
});
} catch (err) {
console.log('Error with xdomain message listener: ' + err); // eslint-disable-line no-console
console.log('Error with xdomain message listener: ' + err);
}
}
};

10
src/editor/images/align_bottom.svg
View File

@@ -1,9 +1 @@
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
<g transform="rotate(90, 11, 11)" id="svg_1">
<rect stroke="#606060" fill="#ffffff" id="svg_4" height="7" width="12" y="2.5" x="7.5"/>
<rect stroke="none" fill="#fddb8c" id="svg_5" height="4" width="11" y="4" x="9"/>
<rect id="svg_6" stroke="#606060" fill="#ffffff" height="7" width="18" y="12.5" x="1.5"/>
<rect id="svg_7" stroke="none" fill="#fddb8c" height="4" width="17" y="14" x="3"/>
<rect stroke="#c15909" fill="#f9bc01" id="svg_2" height="40" width="2" y="-10" x="18.5"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-3{fill:none;}.cls-2{fill:#fff;stroke:#fff;stroke-linejoin:round;}.cls-2,.cls-3{stroke-linecap:round;stroke-width:2px;}.cls-3{stroke:#f9ba00;stroke-miterlimit:10;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="7.25" y="19.12" width="20.5" height="11.59" transform="translate(42.42 7.42) rotate(90)"/><rect class="cls-2" x="19.11" y="14.94" width="28.87" height="11.59" transform="translate(54.28 -12.81) rotate(90)"/><line class="cls-3" x1="5.6" y1="43.17" x2="45.44" y2="43.17"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 615 B

After

Width:  |  Height:  |  Size: 731 B

8
src/editor/images/align_center.svg
View File

@@ -1,7 +1 @@
<svg viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="1.5" y="12.5" width="18" height="7" fill="#fddb8c" stroke="#606060" id="svg_6"/>
<rect x="4.5" y="2.5" width="12" height="7" id="svg_4" fill="#fddb8c" stroke="#606060"/>
<rect x="9.5" y="-10" width="2" height="40" id="svg_2" fill="#f9bc01" stroke="#c15909"/>
<rect x="2.5" y="13.5" width="16" height="5" fill="none" stroke="#ffffff" id="svg_7"/>
<rect x="5.5" y="3.5" width="10" height="5" id="svg_5" fill="none" stroke="#ffffff"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-3{fill:none;}.cls-2{fill:#fff;stroke:#fff;stroke-linejoin:round;}.cls-2,.cls-3{stroke-linecap:round;stroke-width:2px;}.cls-3{stroke:#f9ba00;stroke-miterlimit:10;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="15.27" y="10.91" width="20.5" height="11.59" transform="translate(51.04 33.42) rotate(-180)"/><rect class="cls-2" x="11.09" y="26.96" width="28.87" height="11.59" transform="translate(51.04 65.52) rotate(-180)"/><line class="cls-3" x1="25.52" y1="4.81" x2="25.52" y2="44.66"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 573 B

After

Width:  |  Height:  |  Size: 737 B

8
src/editor/images/align_left.svg
View File

@@ -1,7 +1 @@
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
<rect stroke="#606060" fill="#ffffff" id="svg_4" height="7" width="12" y="2.5" x="2.5"/>
<rect stroke="none" fill="#fddb8c" id="svg_5" height="4" width="11" y="4" x="2"/>
<rect id="svg_6" stroke="#606060" fill="#ffffff" height="7" width="18" y="12.5" x="2.5"/>
<rect id="svg_7" stroke="none" fill="#fddb8c" height="4" width="17" y="14" x="2"/>
<rect stroke="#c15909" fill="#f9bc01" id="svg_2" height="40" width="2" y="-10" x="1.5"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-3{fill:none;}.cls-2{fill:#fff;stroke:#fff;stroke-linejoin:round;}.cls-2,.cls-3{stroke-linecap:round;stroke-width:2px;}.cls-3{stroke:#f9ba00;stroke-miterlimit:10;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="15.6" y="10.91" width="20.5" height="11.59" transform="translate(51.71 33.42) rotate(-180)"/><rect class="cls-2" x="15.6" y="26.96" width="28.87" height="11.59" transform="translate(60.07 65.52) rotate(-180)"/><line class="cls-3" x1="7.61" y1="4.81" x2="7.61" y2="44.66"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 567 B

After

Width:  |  Height:  |  Size: 733 B

10
src/editor/images/align_middle.svg
View File

@@ -1,9 +1 @@
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
<g transform="rotate(90, 12, 11.5)" id="svg_1">
<rect id="svg_6" stroke="#606060" fill="#fddb8c" height="7" width="18" y="14" x="3"/>
<rect stroke="#606060" fill="#fddb8c" id="svg_4" height="7" width="12" y="4" x="6"/>
<rect stroke="#c15909" fill="#f9bc01" id="svg_2" height="40" width="2" y="-8.5" x="11"/>
<rect id="svg_7" stroke="#ffffff" fill="none" height="5" width="16" y="15" x="4"/>
<rect stroke="#ffffff" fill="none" id="svg_5" height="5" width="10" y="5" x="7"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-3{fill:none;}.cls-2{fill:#fff;stroke:#fff;stroke-linejoin:round;}.cls-2,.cls-3{stroke-linecap:round;stroke-width:2px;}.cls-3{stroke:#f9ba00;stroke-miterlimit:10;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="7.25" y="18.94" width="20.5" height="11.59" transform="translate(42.23 7.24) rotate(90)"/><rect class="cls-2" x="19.11" y="18.94" width="28.87" height="11.59" transform="translate(58.28 -8.81) rotate(90)"/><line class="cls-3" x1="5.6" y1="24.74" x2="45.44" y2="24.74"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 608 B

After

Width:  |  Height:  |  Size: 730 B

8
src/editor/images/align_right.svg
View File

@@ -1,7 +1 @@
<svg viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="7.5" y="2.5" width="12" height="7" id="svg_4" fill="#ffffff" stroke="#606060"/>
<rect x="9" y="4" width="11" height="4" id="svg_5" fill="#fddb8c" stroke="none"/>
<rect x="1.5" y="12.5" width="18" height="7" fill="#ffffff" stroke="#606060" id="svg_6"/>
<rect x="3" y="14" width="17" height="4" fill="#fddb8c" stroke="none" id="svg_7"/>
<rect x="18.5" y="-10" width="2" height="40" id="svg_2" fill="#f9bc01" stroke="#c15909"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-3{fill:none;}.cls-2{fill:#fff;stroke:#fff;stroke-linejoin:round;}.cls-2,.cls-3{stroke-linecap:round;stroke-width:2px;}.cls-3{stroke:#f9ba00;stroke-miterlimit:10;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="15.46" y="10.91" width="20.5" height="11.59"/><rect class="cls-2" x="7.09" y="26.96" width="28.87" height="11.59"/><line class="cls-3" x1="43.95" y1="4.81" x2="43.95" y2="44.66"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 567 B

After

Width:  |  Height:  |  Size: 640 B

10
src/editor/images/align_top.svg
View File

@@ -1,9 +1 @@
<svg viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="rotate(90, 11, 11)" id="svg_1">
<rect x="2.5" y="3.5" width="12" height="7" id="svg_4" fill="#ffffff" stroke="#606060"/>
<rect x="2" y="5" width="11" height="4" id="svg_5" fill="#fddb8c" stroke="none"/>
<rect x="2.5" y="13.5" width="18" height="7" fill="#ffffff" stroke="#606060" id="svg_6"/>
<rect x="2" y="15" width="17" height="4" fill="#fddb8c" stroke="none" id="svg_7"/>
<rect x="1.5" y="-9" width="2" height="40" id="svg_2" fill="#f9bc01" stroke="#c15909"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-3{fill:none;}.cls-2{fill:#fff;stroke:#fff;stroke-linejoin:round;}.cls-2,.cls-3{stroke-linecap:round;stroke-width:2px;}.cls-3{stroke:#f9ba00;stroke-miterlimit:10;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="6.73" y="18.75" width="20.5" height="11.59" transform="translate(-7.57 41.53) rotate(-90)"/><rect class="cls-2" x="18.6" y="22.94" width="28.87" height="11.59" transform="translate(4.3 61.76) rotate(-90)"/><line class="cls-3" x1="5.08" y1="6.3" x2="44.93" y2="6.3"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 628 B

After

Width:  |  Height:  |  Size: 727 B

5
src/editor/images/angle.svg
View File

@@ -1,4 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
<path stroke-width="2" stroke-dasharray="1,3" id="svg_6" d="m32.78778,41.03469c-0.40379,-8.68145 -4.50873,-16.79003 -12.11365,-20.5932" stroke="#000000" fill="none"/>
<path id="svg_7" d="m29.20348,7.67055l-24.20348,34.47921l41.16472,0" stroke-width="3" stroke="#404040" fill="none"/>
</svg></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-3{fill:none;}.cls-2{fill:#fff;stroke:#fff;}.cls-2,.cls-3{stroke-linecap:round;stroke-width:2px;}.cls-2,.cls-3,.cls-4{stroke-linejoin:round;}.cls-3,.cls-4{stroke:#f9ba00;}.cls-4{fill:#f9ba00;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><line class="cls-2" x1="44.2" y1="37.01" x2="6.85" y2="37.01"/><line class="cls-2" x1="30.11" y1="12.46" x2="6.85" y2="37.01"/><path class="cls-3" d="M28.12,21.07c3.34,4.44,5.19,7.37,5.19,13.35"/><polygon class="cls-4" points="26.66 19 27.24 24.45 31.64 21.28 26.66 19"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 504 B

After

Width:  |  Height:  |  Size: 738 B

10
src/editor/images/blur.svg
View File

@@ -1,9 +1 @@
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit -->
<defs>
<filter id="svg_4_blur" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="25"/>
</filter>
</defs>
<circle fill="#000000" stroke="#000000" stroke-width="5" stroke-dasharray="null" cx="150" cy="150" r="91.80151" id="svg_4" filter="url(#svg_4_blur)"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2{fill:#f9ba00;}.cls-2{opacity:0.2;}.cls-3{fill:none;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><path class="cls-1" d="M24.78,39.73a15.16,15.16,0,0,1-15.32-15,15.16,15.16,0,0,1,15.32-15"/><path class="cls-2" d="M24.88,7.58A17.34,17.34,0,0,1,42.4,24.74,17.34,17.34,0,0,1,24.88,41.89"/><path class="cls-2" d="M24.88,9.74A15.25,15.25,0,0,1,40.29,24.82,15.25,15.25,0,0,1,24.88,39.9"/><path class="cls-2" d="M24.88,11.77A13.19,13.19,0,0,1,38.21,24.82a13.19,13.19,0,0,1-13.33,13"/><path class="cls-2" d="M24.88,13.81a11,11,0,1,1,0,22"/><path class="cls-2" d="M24.88,15.85a9,9,0,1,1,0,17.94"/><path class="cls-2" d="M24.78,17.88a6.94,6.94,0,1,1,0,13.88"/><path class="cls-2" d="M24.78,19.92a4.91,4.91,0,1,1,0,9.81"/><path class="cls-2" d="M24.78,21.64a3.1,3.1,0,1,1,0,6.2"/><polyline class="cls-3" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 435 B

After

Width:  |  Height:  |  Size: 1001 B

3
src/editor/images/box.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-60 -60 120 120">
<path stroke-width="10" stroke="#f9bc01" fill="#f9bc01" d="m-30,-30l0,60l60,0l0,-60z"/>
</svg></svg>
Side by Side

After

Width:  |  Height:  |  Size: 331 B

3
src/editor/images/box_o.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-60 -60 120 120">
<path stroke-width="10" stroke="#f9bc01" fill="none" d="m-30,-30l0,60l60,0l0,-60z"/>
</svg></svg>
Side by Side

After

Width:  |  Height:  |  Size: 328 B

12
src/editor/images/circle.svg
View File

@@ -1,11 +1 @@
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54">
<defs>
<linearGradient y2="1.0" x2="1.0" y1="0.1875" x1="0.171875" id="svg_4">
<stop stop-opacity="1" stop-color="#ffffff" offset="0.0"/>
<stop stop-opacity="1" stop-color="#fddb8c" offset="1.0"/>
</linearGradient>
</defs>
<g>
<circle stroke-opacity="1" fill-opacity="1" stroke-width="2" stroke="#000000" fill="url(#svg_4)" id="svg_1" r="23" cy="27" cx="27"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2{fill:none;}.cls-2{stroke:#f9ba00;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><ellipse class="cls-2" cx="25.41" cy="24.81" rx="13.99" ry="14.28"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 491 B

After

Width:  |  Height:  |  Size: 440 B

18
src/editor/images/clone.svg
View File

@@ -1,17 +1 @@
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
<defs>
<linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_36">
<stop stop-opacity="1" stop-color="#fddb8c" offset="0"/>
<stop stop-opacity="1" stop-color="#bf5f00" offset="1"/>
</linearGradient>
<linearGradient y2="0.80078" x2="0.42578" y1="0" x1="0" id="svg_69">
<stop stop-opacity="1" stop-color="#fddb8c" offset="0"/>
<stop stop-opacity="1" stop-color="#bf5f00" offset="1"/>
</linearGradient>
</defs>
<path stroke="#8f5902" fill="url(#svg_69)" id="svg_34" d="m2.11676,16.32061l-0.13787,-5.05515l1.93015,-2.02206l10.11029,0l2.02206,2.29779l0,4.77941l-13.92463,0z"/>
<rect x="7.85379" y="6.30027" width="2.2932" height="4.3407" id="svg_38" fill="url(#svg_36)" stroke="#8f5902" rx="1" ry="1"/>
<circle stroke="#8f5902" fill="url(#svg_36)" id="svg_35" r="2.96392" cy="4.48149" cx="9.11757"/>
<line x1="2.44838" y1="12.03512" x2="15.5524" y2="12.03512" id="svg_39" stroke="#8f5902" fill="none"/>
<path d="m6.72427,12.55859l4.74203,0l-2.30831,2.07258l-2.43372,-2.07258z" id="svg_43" fill="#000000" stroke="none"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2,.cls-4{fill:none;}.cls-2,.cls-4{stroke:#fff;}.cls-2,.cls-3{stroke-linecap:round;stroke-linejoin:round;}.cls-2,.cls-3,.cls-4{stroke-width:2px;}.cls-3{fill:#f9ba00;stroke:#f9ba00;}.cls-4{stroke-miterlimit:10;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><path class="cls-2" d="M38.92,33.18s-9.39-5.22-9.39-9,2.35-11.83,2.35-11.83v-.58a6.87,6.87,0,0,0-13.7,0l0,.58s2.35,8,2.35,11.83-9.39,9-9.39,9"/><rect class="cls-3" x="6.72" y="42.58" width="36.59" height="2.45"/><rect class="cls-4" x="4.84" y="33.18" width="40.35" height="8.4"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 764 B

25
src/editor/images/conn.svg
View File

@@ -1,24 +1 @@
<svg viewBox="0 0 24 24" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<defs>
<line stroke-width="5" fill="none" stroke="#000000" id="svg_2" y2="121" x2="136" y1="7" x1="136">
<stop stop-opacity="1" stop-color="#4687a0"/>
<stop stop-opacity="1" stop-color="#ffffff"/>
</line>
<linearGradient y2="0.18359" x2="0.29688" y1="0.92188" x1="0.62109" id="svg_3">
<stop stop-opacity="1" stop-color="#fddb8c" offset="0"/>
<stop stop-opacity="1" stop-color="#ffffff" offset="1"/>
</linearGradient>
</defs>
<g>
<title>Layer 1</title>
<line x1="5.64676" y1="5.60056" x2="18.50037" y2="18.62557" id="svg_5" stroke="#000000" fill="none"/>
<rect opacity="0.75" stroke-width="0.5" x="0.5" y="0.5" width="9.625" height="5.125" id="svg_1" fill="url(#svg_3)" stroke="#000000"/>
<rect opacity="0.75" id="svg_4" stroke-width="0.5" x="13.75" y="18.25" width="9.625" height="5.125" fill="url(#svg_3)" stroke="#000000"/>
<g id="svg_9">
<path d="m14.57119,9.12143l-0.98244,5.18852l2.70861,-4.36084" id="svg_6" fill="#a0a0a0" stroke="#000000"/>
<path d="m14.27564,6.76258c-0.25872,0.72562 -0.40735,1.65632 -0.33812,2.15432l2.90784,1.2509c0.30961,-0.21212 1.08198,-1.1814 1.08198,-1.73736" id="svg_7" fill="url(#svg_3)" stroke="#000000"/>
<path d="m16.28893,0.37519l-2.46413,5.9304l4.76481,2.39435l2.13178,-4.96735" id="svg_8" fill="url(#svg_3)" stroke="#000000"/>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2{fill:none;}.cls-2{stroke:#f9ba00;stroke-miterlimit:10;}.cls-2,.cls-3{stroke-linecap:round;stroke-width:2px;}.cls-3{fill:#fff;stroke:#fff;stroke-linejoin:round;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><line class="cls-2" x1="14.25" y1="16.23" x2="37.11" y2="33.52"/><rect class="cls-3" x="9.19" y="-0.56" width="10.12" height="22.9" transform="matrix(0, 1, -1, 0, 25.14, -3.36)"/><rect class="cls-3" x="31.73" y="27.13" width="10.12" height="22.9" transform="matrix(0, 1, -1, 0, 75.37, 1.79)"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 731 B

7
src/editor/images/delete.svg
View File

@@ -1,6 +1 @@
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<rect ry="3" rx="3" stroke="#800000" fill="#aa0000" id="svg_37" height="20.29514" width="21.17486" y="1.70304" x="1.42011"/>
<rect ry="3" rx="3" stroke="#ff5555" fill="#aa0000" id="svg_67" height="18.63022" width="19.61118" y="2.53597" x="2.20258"/>
<line stroke-width="2" fill="none" stroke="#ffffff" id="svg_68" y2="16.85127" x2="17.00646" y1="6.85127" x1="7.00646"/>
<line stroke-width="2" id="svg_70" fill="none" stroke="#ffffff" y2="16.85127" x2="7.00646" y1="6.85127" x1="17.00646"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2,.cls-3,.cls-4{fill:none;}.cls-2,.cls-3,.cls-4{stroke:#fff;stroke-width:2px;}.cls-2,.cls-4{stroke-linejoin:round;}.cls-3,.cls-4{stroke-linecap:round;}.cls-3{stroke-miterlimit:10;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><polygon class="cls-2" points="41.06 11.05 36.34 43.08 14.71 43.08 9.99 11.05 41.06 11.05"/><line class="cls-3" x1="18.2" y1="16.01" x2="19.71" y2="38.01"/><line class="cls-3" x1="25.43" y1="16.06" x2="25.43" y2="38.06"/><line class="cls-3" x1="32.68" y1="16.06" x2="31.17" y2="38.06"/><line class="cls-4" x1="6.94" y1="11.05" x2="44.1" y2="11.05"/><rect class="cls-2" x="19.69" y="6.4" width="11.66" height="4.65"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 609 B

After

Width:  |  Height:  |  Size: 872 B

20
src/editor/images/docprop.svg
View File

@@ -1,19 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<defs>
<linearGradient y2="1" x2="1" y1="0.5" x1="1" id="svg_53">
<stop stop-opacity="1" stop-color="#606060" offset="0"/>
<stop stop-opacity="0" stop-color="#5e5e5e" offset="1"/>
</linearGradient>
</defs>
<rect stroke="#606060" fill="#eaeaea" id="svg_55" height="21" width="18" y="1.6692" x="2.42792"/>
<line fill="none" stroke="#a0a0a0" id="svg_56" y2="4.37757" x2="14.89023" y1="4.37757" x1="6.696"/>
<line fill="none" stroke="#a0a0a0" id="svg_57" y2="7.10804" x2="12.92026" y1="7.10804" x1="6.6948"/>
<line fill="none" stroke="#a0a0a0" id="svg_58" y2="9.84241" x2="15.64716" y1="9.84241" x1="6.6942"/>
<line fill="none" stroke="#a0a0a0" id="svg_59" y2="12.36585" x2="13.21805" y1="12.36585" x1="6.69691"/>
<line fill="none" stroke="#a0a0a0" id="svg_60" y2="15.06507" x2="14.43591" y1="15.06507" x1="6.69691"/>
<line fill="none" stroke="#a0a0a0" id="svg_61" y2="17.84241" x2="13.36979" y1="17.84241" x1="6.69691"/>
<g id="svg_54">
<path transform="rotate(-45, 12.5448, 11.7085)" stroke="none" fill="#606060" id="svg_31" d="m11.24329,8.73944l0,2.79974l2.53499,0.07777l0,-2.95528c1.78134,0.07777 2.26093,1.39987 2.12391,2.95528c-0.06851,1.63318 -1.30175,3.49967 -3.49418,3.26636c-2.19242,-0.31108 -2.87755,-1.39987 -3.15161,-2.72197c-0.27406,-1.39987 0.41108,-3.34413 1.98689,-3.4219z"/>
<rect opacity="0.95" transform="rotate(-45, 16.2485, 15.1732)" stroke="none" fill="url(#svg_53)" id="svg_50" height="4.85445" width="2.57974" y="12.746" x="15.04047"/>
</g>
</svg></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2{fill:none;}.cls-2{stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}.cls-3{fill:#f9ba00;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><polyline class="cls-2" points="37.26 21.1 37.26 14.03 27.02 3.91 7.31 3.91 7.31 40.98 23.79 40.98"/><polyline class="cls-2" points="27.02 3.91 27.02 14.03 37.26 14.03"/><path class="cls-3" d="M36.41,46.73a1.79,1.79,0,0,1-1.34-.57c-.45-.48-1.85-1.72-3-1.72s-2.57,1.25-3,1.69a1.83,1.83,0,0,1-2,.42h0l-3.49-1.93,0,0a1.64,1.64,0,0,1-.56-2,4.18,4.18,0,0,0,.32-1.4,3.69,3.69,0,0,0-3.7-3.66h-.15c-.58,0-1.06-.51-1.21-1.3a16.62,16.62,0,0,1-.3-2.76,16.47,16.47,0,0,1,.3-2.76c.15-.8.64-1.32,1.23-1.31h.13a3.68,3.68,0,0,0,3.7-3.65,3.77,3.77,0,0,0-.33-1.4,1.66,1.66,0,0,1,.57-2l0,0,3.68-2,0,0a1.89,1.89,0,0,1,2,.42,5.23,5.23,0,0,0,2.93,1.62,5.31,5.31,0,0,0,2.91-1.59,1.88,1.88,0,0,1,2-.4l0,0,3.56,1.95,0,0a1.64,1.64,0,0,1,.56,2,4.1,4.1,0,0,0-.32,1.4,3.68,3.68,0,0,0,3.7,3.65h.12c.6,0,1.08.51,1.24,1.31a17.7,17.7,0,0,1,.3,2.76,17.88,17.88,0,0,1-.3,2.76c-.15.8-.64,1.32-1.23,1.3h-.13A3.68,3.68,0,0,0,41,41.18a3.84,3.84,0,0,0,.33,1.4,1.64,1.64,0,0,1-.57,2l0,0-3.62,2,0,0A1.54,1.54,0,0,1,36.41,46.73Zm-.18-1.92a.23.23,0,0,0,.11,0h0L39.67,43a5.57,5.57,0,0,1-.44-2,5.24,5.24,0,0,1,5-5.19,15.57,15.57,0,0,0,.26-2.37,15.57,15.57,0,0,0-.26-2.37,5.25,5.25,0,0,1-5-5.2,5.49,5.49,0,0,1,.44-2L36.4,22.1h0a.28.28,0,0,0-.13,0,8.93,8.93,0,0,1-1.21,1,5.07,5.07,0,0,1-2.83,1.05,5.12,5.12,0,0,1-2.86-1.07,10.81,10.81,0,0,1-1.22-1,.27.27,0,0,0-.12,0h0l-3.39,1.83a5.61,5.61,0,0,1,.44,2,5.25,5.25,0,0,1-5,5.2,15.57,15.57,0,0,0-.26,2.37,15.4,15.4,0,0,0,.26,2.36,5.25,5.25,0,0,1,5,5.2,5.73,5.73,0,0,1-.44,2l3.2,1.77h0a.2.2,0,0,0,.11,0,9.88,9.88,0,0,1,1.23-1.06,5.09,5.09,0,0,1,2.9-1.12A5.07,5.07,0,0,1,35,43.73,10.1,10.1,0,0,1,36.23,44.81Zm-4.09-6.62a4.74,4.74,0,1,1,4.75-4.74A4.75,4.75,0,0,1,32.14,38.19Zm0-7.58a2.85,2.85,0,1,0,2.77,2.77A2.85,2.85,0,0,0,32.14,30.61Z"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

2
src/editor/images/editPref.svg
View File

@@ -1 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" version="1.1"><path d="M655.872 960a61.952 61.952 0 0 1-45.376-19.136c-14.912-16.192-62.272-58.24-100.992-58.24-38.464 0-86.528 42.304-100.352 57.216a62.144 62.144 0 0 1-68.224 14.144l-1.28-0.576-117.76-65.088-1.088-0.832a55.552 55.552 0 0 1-18.944-67.52c0.064-0.192 10.816-24.768 10.816-47.168 0-67.968-56-123.392-124.8-123.392h-4.16l-0.768 0.064c-19.712 0-35.776-17.344-40.896-44.096C41.6 603.264 32 552.448 32 512.384c0-40 9.6-90.88 10.048-92.992 5.184-27.136 21.568-44.48 41.664-44.096h4.16c68.8 0 124.8-55.296 124.8-123.328 0-22.4-10.752-46.976-10.88-47.232a55.424 55.424 0 0 1 19.136-67.456l1.216-0.832 124.224-67.456 1.344-0.576a63.36 63.36 0 0 1 67.968 13.952c14.656 15.232 61.184 54.784 98.816 54.784 37.312 0 83.52-38.784 98.112-53.76a63.616 63.616 0 0 1 68.032-13.376l1.28 0.576 120 65.92 1.216 0.832a55.424 55.424 0 0 1 19.072 67.456c-0.128 0.192-10.88 24.768-10.88 47.168 0 67.968 56 123.328 124.8 123.328h4.16c19.968-0.384 36.416 17.024 41.6 44.096 0.512 2.112 10.112 52.992 10.112 92.992 0 40.064-9.6 90.88-10.048 92.992-5.184 27.136-21.632 44.48-41.6 44.032h-4.16c-68.8 0-124.8 55.36-124.8 123.392 0 22.464 10.752 46.976 10.88 47.232a55.36 55.36 0 0 1-19.072 67.392l-1.28 0.896-122.048 66.688-1.344 0.512a56.32 56.32 0 0 1-22.656 4.48z m-6.016-64.832a8.192 8.192 0 0 0 3.648 0.96h0.192l112.128-61.056c-2.688-6.208-15.04-36.16-15.04-67.584 0-93.76 75.008-170.56 169.024-175.296 1.344-7.36 8.704-48.832 8.704-79.808s-7.296-72.384-8.704-79.744c-94.016-4.864-169.024-81.664-169.024-175.36 0-31.424 12.416-61.44 15.104-67.648l-110.4-60.352h-0.448a8.448 8.448 0 0 0-4.16 1.088 309.12 309.12 0 0 1-40.832 33.728c-33.984 23.552-66.176 35.456-95.552 35.456-29.76 0-62.144-12.16-96.384-36.16a312.064 312.064 0 0 1-41.024-34.432 9.088 9.088 0 0 0-4.224-1.024H372.48l-114.304 61.76c2.752 6.272 15.104 36.288 15.104 67.584 0 93.696-75.008 170.496-169.024 175.36-1.408 7.36-8.704 48.704-8.704 79.744s7.36 72.384 8.704 79.744c94.016 4.8 169.024 81.6 169.024 175.36 0 31.424-12.48 61.632-15.104 67.712l108.16 59.52h0.256a8 8 0 0 0 3.584-0.896c2.048-2.112 18.176-19.008 41.408-35.776 34.688-25.088 67.648-37.76 97.92-37.76 30.656 0 63.872 12.928 98.752 38.464 23.36 17.152 39.616 34.24 41.6 36.416z m-137.984-223.104c-88.32 0-160.192-71.68-160.192-159.808s71.872-159.744 160.192-159.744c88.384 0 160.256 71.616 160.256 159.744s-71.872 159.808-160.256 159.808z m0-255.744a96 96 0 0 0 0 191.808 95.936 95.936 0 0 0 0-191.808z"/></svg></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2,.cls-4{fill:none;}.cls-2,.cls-4{stroke:#fff;stroke-width:2px;}.cls-2{stroke-linecap:round;stroke-linejoin:round;}.cls-3{fill:#fff;}.cls-4{stroke-miterlimit:10;}.cls-5{fill:#f9ba00;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><line class="cls-2" x1="26.12" y1="13.74" x2="12.11" y2="31"/><line class="cls-2" x1="29.45" y1="18.86" x2="34.43" y2="12.69"/><polyline class="cls-2" points="25.36 5.39 8.01 26.93 5.95 38.81 16.9 34.44 18.7 32.2"/><path class="cls-3" d="M6.8,33.94a3.51,3.51,0,0,1,2.62.51,3.18,3.18,0,0,1,1.42,2.41L6,38.81Z"/><path class="cls-4" d="M8.73,26.63A14.26,14.26,0,0,0,12.11,31a16.56,16.56,0,0,0,5.12,2.63"/><path class="cls-4" d="M22.29,8.36A15,15,0,0,0,25.91,13a18.2,18.2,0,0,0,5.49,2.78"/><path class="cls-2" d="M34.62,12.39A16.56,16.56,0,0,1,29.5,9.76a29.86,29.86,0,0,1-4.14-4.37S29.26,6.45,31,7.8A22.22,22.22,0,0,1,34.62,12.39Z"/><path class="cls-5" d="M36.67,44.08a1.84,1.84,0,0,1-1.35-.56c-.44-.48-1.85-1.73-3-1.73s-2.57,1.25-3,1.69a1.82,1.82,0,0,1-2,.42h0L23.8,42l0,0a1.65,1.65,0,0,1-.56-2,4.18,4.18,0,0,0,.32-1.4,3.69,3.69,0,0,0-3.7-3.66h-.14c-.59,0-1.06-.51-1.22-1.3a18.42,18.42,0,0,1-.29-2.76,18.23,18.23,0,0,1,.29-2.76c.16-.8.64-1.32,1.24-1.31h.12a3.68,3.68,0,0,0,3.7-3.65,4.1,4.1,0,0,0-.32-1.4,1.64,1.64,0,0,1,.57-2l0,0,3.69-2,0,0a1.88,1.88,0,0,1,2,.42,5.3,5.3,0,0,0,2.93,1.62,5.24,5.24,0,0,0,2.91-1.59,1.89,1.89,0,0,1,2-.4l0,0L41,19.66l0,0a1.64,1.64,0,0,1,.57,2,4.1,4.1,0,0,0-.32,1.4A3.68,3.68,0,0,0,45,26.74h.12c.59,0,1.08.51,1.23,1.31a16.47,16.47,0,0,1,.3,2.76,18.42,18.42,0,0,1-.29,2.76c-.16.8-.64,1.32-1.24,1.3H45a3.68,3.68,0,0,0-3.7,3.66,4.18,4.18,0,0,0,.32,1.4,1.64,1.64,0,0,1-.56,2l0,0-3.62,2,0,0A1.54,1.54,0,0,1,36.67,44.08Zm-.18-1.92a.2.2,0,0,0,.11,0h0l3.33-1.81a5.5,5.5,0,0,1-.45-2,5.24,5.24,0,0,1,5-5.19,15.57,15.57,0,0,0,.26-2.37,14.35,14.35,0,0,0-.26-2.37,5.25,5.25,0,0,1-5-5.2,5.43,5.43,0,0,1,.45-2l-3.27-1.79h0a.27.27,0,0,0-.12,0,9.59,9.59,0,0,1-1.21,1,5.07,5.07,0,0,1-2.84,1.05,5.07,5.07,0,0,1-2.85-1.07,9.29,9.29,0,0,1-1.22-1,.28.28,0,0,0-.13,0h0l-3.39,1.83a5.55,5.55,0,0,1,.45,2,5.25,5.25,0,0,1-5,5.2,15.57,15.57,0,0,0-.26,2.37,15.23,15.23,0,0,0,.26,2.36,5.25,5.25,0,0,1,5,5.2,5.44,5.44,0,0,1-.45,2l3.21,1.77h0a.17.17,0,0,0,.1,0,10.82,10.82,0,0,1,1.23-1.06,5.11,5.11,0,0,1,2.91-1.12,5,5,0,0,1,2.92,1.14A9.75,9.75,0,0,1,36.49,42.16ZM32.4,35.54a4.74,4.74,0,1,1,4.75-4.74A4.75,4.75,0,0,1,32.4,35.54Zm0-7.58a2.85,2.85,0,1,0,2.77,2.77A2.85,2.85,0,0,0,32.4,28Z"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

12
src/editor/images/ellipse.svg
View File

@@ -1,11 +1 @@
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54">
<defs>
<linearGradient y2="1.0" x2="1.0" y1="0.1875" x1="0.171875" id="svg_4">
<stop stop-opacity="1" stop-color="#ffffff" offset="0.0"/>
<stop stop-opacity="1" stop-color="#fddb8c" offset="1.0"/>
</linearGradient>
</defs>
<g>
<ellipse stroke-opacity="1" fill-opacity="1" stroke-width="2" stroke="#000000" fill="url(#svg_4)" id="svg_1" rx="23" ry="15" cy="27" cx="27"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2{fill:none;}.cls-2{stroke:#f9ba00;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><ellipse class="cls-2" cx="25.93" cy="28.94" rx="18.79" ry="10.15"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 501 B

After

Width:  |  Height:  |  Size: 440 B

16
src/editor/images/export.svg
View File

@@ -1,15 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<defs>
<linearGradient id="svg_5" x1="0.77734" y1="0.51172" x2="0.09375" y2="0.53516">
<stop offset="0" stop-color="#81bbf4"/>
<stop offset="1" stop-color="#376eb7"/>
</linearGradient>
</defs>
<g>
<rect x="7.22599" y="1.3603" width="15.76465" height="21.51735" id="svg_55" fill="#eaeaea" stroke="#606060"/>
<circle fill="#31abed" stroke-width="0.5" cx="17.4206" cy="11.1278" r="4.69727" id="svg_3"/>
<path fill="#ffcc00" stroke-width="0.5" d="m9.67673,20.24302l7.38701,-6.80778l2.91746,6.71323" id="svg_4"/>
<rect fill="#ff5555" stroke-width="0.5" x="9.5385" y="2.94914" width="5.74652" height="5.74652" id="svg_2"/>
<path d="m6.13727,17.94236l5.77328,-4.91041l-5.86949,-5.1832l-0.09622,2.36426l-4.64805,-0.06751l-0.04665,5.54694l4.79093,-0.02342l0.09623,2.27334z" id="svg_45" fill="url(#svg_5)" stroke="#285582"/>
</g>
</svg></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2{fill:none;}.cls-2{stroke:#fff;stroke-width:2px;}.cls-2,.cls-4{stroke-linecap:round;}.cls-2,.cls-3,.cls-4{stroke-linejoin:round;}.cls-3{fill:#f9ba00;}.cls-3,.cls-4{stroke:#f9ba00;}.cls-4{fill:#fff;stroke-width:5px;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><path class="cls-2" d="M37.19,34.36a6.93,6.93,0,0,1-6.35,4.16H17.12a6.93,6.93,0,0,1-6.93-6.93V17.88A6.93,6.93,0,0,1,17.12,11H30.84a6.93,6.93,0,0,1,6.26,4"/><polygon class="cls-3" points="44.65 24.74 32.88 18.03 32.88 31.44 44.65 24.74"/><line class="cls-4" x1="36.49" y1="24.74" x2="20.18" y2="24.74"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 794 B

28
src/editor/images/eye_dropper.svg
View File

@@ -1,27 +1 @@
<svg viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit -->
<defs>
<radialGradient id="eyedropper_svg_6" cx="0.5" cy="0.5" r="0.5">
<stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
<stop offset="1" stop-color="#fddb8c" stop-opacity="0.38"/>
</radialGradient>
<linearGradient id="eyedropper_svg_15" x1="0" y1="0" x2="0.58594" y2="0.55078">
<stop offset="0" stop-color="#ffffff" stop-opacity="0.57"/>
<stop offset="1" stop-color="#fddb8c" stop-opacity="1"/>
</linearGradient>
<linearGradient id="eyedropper_svg_19" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
<stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
</linearGradient>
</defs>
<g display="inline">
<title>Layer 1</title>
<path d="m193.899994,73l-119.899979,118l-15,39.5l10.25,4.5l43.750015,-20l108.999969,-112l-28.100006,-30z" id="svg_3" fill="none" stroke="#000000" stroke-width="5"/>
<path d="m58.649994,232c-2.75,28.200012 -26.399994,28.950012 -21.899994,59c4.5,30.049988 55,28 55.5,-1.25c0.5,-29.25 -20.25,-28.75 -22.25,-54.75l-11.350006,-3z" id="svg_4" fill="#fddb8c" stroke="#000000" stroke-width="7"/>
<path d="m45.474976,269.275024l13.775024,0.474976l-0.75,16.75l-14.25,-1.25l1.224976,-15.974976z" id="svg_5" fill="url(#eyedropper_svg_6)" stroke-width="5" fill-opacity="0.73"/>
<path d="m217.899994,46c21.5,-101.549999 141.600006,20.449997 28.100006,33l-5,44l-63,-66l39.899994,-11z" id="svg_2" fill="#000000" stroke-width="5"/>
<path d="m206.825012,61.075008c3.712494,-2.46249 7.637482,-3.53751 14.424988,-5.575008c10.125,-16.5 32.875,-41.5 40.5,-35c7.625,6.5 -21.25,35.625 -37.5,39.25c-5.5,10.125 -8,13.875 -17.25,16.5c-2.837494,-8.162514 -4.262482,-12.337486 -0.174988,-15.174992z" id="svg_7" fill="url(#eyedropper_svg_15)" stroke-width="5"/>
<path d="m133.049988,134.75l46.950012,9.25l-66,70l-42.5,20.5l-11.5,-5l14,-37.5l59.049988,-57.25z" id="svg_11" fill="#fddb8c" stroke="#000000" stroke-width="7"/>
<path d="m71.425034,212.350006l9.050888,-20.022537l51.516724,-49.327469l8.507355,0.97197l-69.074966,68.378036z" id="svg_16" fill="url(#eyedropper_svg_19)" stroke-width="5"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-4{fill:none;}.cls-2{fill:#fff;}.cls-3{fill:#f9ba00;}.cls-4{stroke:#fff;stroke-miterlimit:10;stroke-width:2px;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><path class="cls-2" d="M40.3,17.49,38,15.66l4.6-5.88A2.72,2.72,0,0,0,41.82,6l-1.2-.94a2.74,2.74,0,0,0-3.84.17l-4.6,5.88L29.84,9.3a.55.55,0,0,0-.77,0l-2.8,3.58a.55.55,0,0,0,.15.75l10.47,8.19a.53.53,0,0,0,.76,0l2.8-3.57A.55.55,0,0,0,40.3,17.49Z"/><polygon class="cls-3" points="15.05 31.59 25.81 31.59 18.73 40.38 14.36 42.43 13.65 44.51 11.43 45.52 9.08 44.34 9.08 40.84 11.19 39.65 15.05 31.59"/><path class="cls-4" d="M30.62,12.26,12.84,34.33l-1.65,5.33a2.94,2.94,0,1,0,3.18,2.92s0-.1,0-.15l4.37-2L36.51,18.31"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 899 B

17
src/editor/images/fh_ellipse.svg
View File

@@ -1,16 +1 @@
<svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="svg_9" x1="0.3046" y1="0.1093" x2="0.6132" y2="0.3945">
<stop offset="0" stop-color="#fddb8c" stop-opacity="1"/>
<stop offset="1" stop-color="#bf5f00" stop-opacity="1"/>
</linearGradient>
<linearGradient id="svg_4" x1="0.17188" y1="0.1875" x2="1" y2="1">
<stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
<stop offset="1" stop-color="#fddb8c" stop-opacity="1"/>
</linearGradient>
</defs>
<ellipse stroke-width="2" stroke="#000000" fill="url(#svg_4)" id="svg_1" rx="23" ry="12" cy="37" cx="27"/>
<path d="m31.5,0l-8.75,20.25l0.75,24l16.5,-16.5l6,-12.5" id="svg_2" fill="url(#svg_9)" stroke="#000000" stroke-width="2"/>
<path d="m39.5,28.5c-2,-9.25 -10.25,-11.75 -17,-7.4375l0.4843,24.4414z" id="svg_10" fill="#fddb8c" stroke="#000000" stroke-width="2"/>
<path d="m26.9318,41.1745c-0.4491,-2.3511 -2.3021,-2.9866 -3.8181,-1.8905l0.1087,6.2126z" fill="#000000" stroke="#000000" stroke-width="2" id="svg_11"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2,.cls-3,.cls-5{fill:none;}.cls-1{stroke:#f9ba00;stroke-linecap:round;}.cls-1,.cls-2{stroke-linejoin:round;}.cls-1,.cls-2,.cls-5{stroke-width:2px;}.cls-2,.cls-5{stroke:#fff;}.cls-4{fill:#fff;}.cls-5{stroke-miterlimit:10;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><path class="cls-1" d="M40.52,22.58c3.59,1.85,5.82,4.45,5.82,7.34,0,5.61-8.42,10.16-18.79,10.16S8.75,35.53,8.75,29.92s8.42-10.15,18.8-10.15"/><line class="cls-2" x1="44.72" y1="8.14" x2="29.2" y2="27.42"/><polyline class="cls-2" points="40.44 4.14 22.66 26.21 20.6 38.09 31.55 33.72 49.33 11.65"/><polyline class="cls-3" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><path class="cls-4" d="M21.45,33.22s1.72-1.35,3.16-.48.88,3.4.88,3.4l-4.89,2Z"/><path class="cls-5" d="M22.66,26.21s4.38-.55,6.54,1.21,2.35,6.3,2.35,6.3"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 949 B

17
src/editor/images/fh_rect.svg
View File

@@ -1,16 +1 @@
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<defs>
<linearGradient y2="1" x2="1" y1="0.10156" x1="0.36328" id="svg_2">
<stop stop-opacity="1" stop-color="#ffffff" offset="0"/>
<stop stop-opacity="1" stop-color="#fddb8c" offset="1"/>
</linearGradient>
<linearGradient y2="0.3945" x2="0.6132" y1="0.1093" x1="0.3046" id="svg_9">
<stop stop-opacity="1" stop-color="#fddb8c" offset="0"/>
<stop stop-opacity="1" stop-color="#bf5f00" offset="1"/>
</linearGradient>
</defs>
<rect stroke-width="2" stroke="#000000" fill="url(#svg_2)" x="3.25" y="25.75" width="46" height="25"/>
<path stroke-width="2" stroke="#000000" fill="url(#svg_9)" d="m31.5,0l-8.75,20.25l0.75,24l16.5,-16.5l6,-12.5"/>
<path stroke-width="2" stroke="#000000" fill="#fddb8c" d="m39.5,28.5c-2,-9.25 -10.25,-11.75 -17,-7.4375l0.4843,24.4414z"/>
<path stroke-width="2" stroke="#000000" fill="#000000" d="m26.9318,41.1745c-0.4491,-2.3511 -2.3021,-2.9866 -3.8181,-1.8905l0.1087,6.2126z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2,.cls-3,.cls-5{fill:none;}.cls-1{stroke:#f9ba00;stroke-linecap:round;}.cls-1,.cls-2{stroke-linejoin:round;}.cls-1,.cls-2,.cls-5{stroke-width:2px;}.cls-2,.cls-5{stroke:#fff;}.cls-4{fill:#fff;}.cls-5{stroke-miterlimit:10;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="44.72 18.78 44.72 39.09 7.14 39.09 7.14 18.78 28.64 18.78"/><line class="cls-2" x1="44.72" y1="8.14" x2="29.2" y2="27.42"/><polyline class="cls-2" points="40.44 4.14 22.66 26.21 20.6 38.09 31.55 33.72 49.33 11.65"/><polyline class="cls-3" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><path class="cls-4" d="M21.45,33.22s1.72-1.35,3.16-.48.88,3.4.88,3.4l-4.89,2Z"/><path class="cls-5" d="M22.66,26.21s4.38-.55,6.54,1.21,2.35,6.3,2.35,6.3"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 899 B

3
src/editor/images/forwardslash.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-60 -60 120 120">
<path stroke-width="10" stroke="#f9bc01" fill="none" d="m-20,50l40,-100"/>
</svg></svg>
Side by Side

After

Width:  |  Height:  |  Size: 318 B

27
src/editor/images/globe_link.svg
View File

@@ -1,26 +1 @@
<svg width="66" height="66" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="svg_8" spreadMethod="pad" cx="0.5" cy="0.32513">
<stop stop-color="#7791ef" stop-opacity="0.99219" offset="0"/>
<stop stop-color="#3c3cfc" offset="1"/>
</radialGradient>
<linearGradient id="svg_10" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#333333" stop-opacity="0.99609"/>
<stop offset="1" stop-opacity="0.99609" stop-color="#fddb8c"/>
</linearGradient>
</defs>
<g>
<g opacity="0.8" id="svg_5">
<circle id="svg_1" r="27.90625" cy="33" cx="33" stroke-width="0" stroke="#AAAAAA" fill="url(#svg_8)"/>
<g id="svg_7">
<path d="m38.2478,36.06121c-0.43732,0 -0.87463,0 -1.31195,0c-0.43731,0 -0.87463,0 -2.6239,0c-0.87463,0 -1.74926,0 -2.18658,0c-0.43732,0 -2.19828,0.33684 -2.6239,0.43732c-0.95172,0.22467 -1.27098,0.48253 -1.74927,0.87463c-1.21939,0.99965 -1.44004,1.00272 -1.74926,1.31195c-0.30923,0.30923 -0.21265,0.79756 -0.43732,1.74926c-0.10048,0.42562 0.16736,0.90792 0,1.31195c-0.23668,0.57138 -0.43732,0.87463 -0.43732,1.74926c0,0.43732 0.12809,0.56541 0.43732,0.87463c0.30923,0.30923 0.12809,0.56541 0.43732,0.87463c0.30923,0.30923 1.32364,0.77415 1.74926,0.87463c0.95171,0.22467 0.69349,0.69349 1.31195,1.31195c0.30923,0.30923 0.90791,-0.16736 1.31195,0c0.57138,0.23668 0.56541,0.56541 0.87463,0.87463c0.30923,0.30923 0.56541,0.12809 0.87463,0.43732c0.61846,0.61846 -0.10048,1.32365 0,1.74926c0.22467,0.95171 0.43732,1.31195 0.43732,2.6239c0,0.87463 0,2.18658 0,3.06121c0,0.43732 0,1.31195 0,2.6239c0,0.43732 0.12809,1.00272 0.43732,1.31195c0.30922,0.30923 1.31195,0 1.74926,0c0.87463,0 1.31195,0 1.74927,0c0.43731,0 0.6065,-0.40129 1.74926,-0.87464c0.40403,-0.16736 0.74057,-0.20064 1.31195,-0.43732c0.40403,-0.16736 0.63795,-0.74057 0.87463,-1.31195c0.16736,-0.40403 0.15712,-2.20917 0.43732,-3.93585c0.22151,-1.36505 0.43732,-2.18658 0.43732,-2.6239c0,-0.43732 -0.12928,-0.88101 0,-2.18658c0.21973,-2.21904 0.43732,-3.49853 0.43732,-3.93585c0,-0.43732 0,-0.87463 0,-1.74927c0,-1.31195 0.16736,-1.78254 0,-2.18658c-0.23668,-0.57138 -1.00272,-0.56541 -1.31195,-0.87463c-0.30923,-0.30922 -0.43732,-0.43731 -1.74926,-1.74926l0,-0.87463l-0.43732,0l0,-0.43732" id="svg_2" stroke="#007f00" fill="#44b544" stroke-width="0"/>
<path d="m5.66773,37.0452c1.12973,-0.3645 0.87463,-0.2187 1.74927,-0.656c0.87463,-0.4373 1.34081,-0.8211 2.18658,-1.3119c1.36372,-0.7915 1.44002,-1.4401 1.74922,-1.7493c0.3093,-0.3092 0.1281,-0.5654 0.4374,-0.8746c0.6184,-0.6185 0.8746,-0.4374 1.7492,-1.312c0.8747,-0.8746 1.0027,-1.0027 1.312,-1.3119c0.6184,-0.6185 0.1281,-1.0028 0.4373,-1.312c0.3092,-0.3092 0,-0.8746 0,-1.3119c0,-0.4374 0,-1.312 0,-1.7493c0,-0.4373 0.2009,-1.7727 0,-2.6239c-0.2247,-0.9517 -0.1281,-1.4401 -0.4373,-1.7493c-0.3093,-0.3092 -0.7073,-1.3452 -0.8746,-1.7492c-0.2367,-0.5714 -0.8747,-0.8747 -0.8747,-1.312c0,-0.4373 -0.4373,-0.4373 -0.4373,-0.8746l0,-0.4374l-1.2026,-0.8746c-3.7901,5.8674 -6.81486,11.6253 -5.79446,21.2099l-0.00001,0z" id="svg_3" stroke="#007f00" fill="#44b544" stroke-width="0"/>
<path d="m52.2419,13.1021c-0.4373,0.4373 -1.3495,0.8398 -2.1866,1.0933c-3.0182,0.9138 -3.2212,2.2857 -3.4985,2.6239c-1.4137,1.7245 -2.4979,1.3039 -4.8105,1.7493c-0.4294,0.0827 -0.4373,0.4373 -0.8746,0.4373c-0.4373,0 -0.8746,0 -1.312,0c-0.4373,0 -1.3119,0 -1.7492,0c-0.4373,0 -1.3453,-0.27 -1.7493,-0.4373c-0.5714,-0.2367 -0.5654,-0.5654 -0.8746,-0.8747c-0.3092,-0.3092 -0.5654,-0.1281 -0.8746,-0.4373c-0.3093,-0.3092 -0.8747,0 -1.312,0c-0.4373,0 -0.9079,-0.1673 -1.3119,0c-0.5714,0.2367 -0.3033,1.0753 -0.8747,1.312c-0.404,0.1673 -0.1281,0.5654 -0.4373,0.8746c-0.3092,0.3092 -0.4373,0.4373 -0.4373,0.8746c0,0.4373 0,0.8747 0,1.312c0,0.4373 0.0333,0.7073 0.4373,0.8746c0.5714,0.2367 0.638,0.7406 0.8746,1.312c0.1674,0.404 0.4374,0.4373 0.4374,0.8746c0,0.4373 0,0.8746 0,1.3119c0,0.4374 -0.4374,0.4374 -0.8747,0.8747c-1.3119,1.3119 -1.9499,1.1779 -2.1865,1.7492c-0.1674,0.4041 -1.0753,0.3033 -1.312,0.8747c-0.1674,0.404 0,0.8746 0.4373,0.8746c0.4373,0 0.8746,0.4373 1.312,0.4373c0.4373,0 0.8746,-0.4373 1.3119,-0.4373c0.4373,0 0.5654,-0.1281 0.8746,-0.4373c0.6185,-0.6185 1.312,0 1.7493,0c0.4373,0 0.397,-0.6543 2.1866,-0.8747c0.434,-0.0534 2.8801,-0.2561 3.4985,-0.8746c0.3093,-0.3092 0.8343,-0.6543 2.6239,-0.8746c0.4341,-0.0535 0.8747,0 1.312,0c0.4373,0 0.8746,0.4373 0.8746,0.8746c0,0.4373 0.4373,0.4373 0.4373,0.8746c0,0.4374 0.5654,2.3147 0.8746,2.6239c0.3093,0.3093 0.1281,1.0028 0.4374,1.312c0.3092,0.3092 2.1095,2.8366 3.0612,3.0612c0.4256,0.1005 0.8215,0.2158 2.1866,0.4373c0.4316,0.0701 1.3119,0 1.7492,0c0.4373,0 0.8864,0.1005 1.312,0c0.9517,-0.2246 1.44,-0.5654 1.7492,-0.8746c0.3093,-0.3092 0.8747,-0.4373 1.312,-0.4373c0.4373,0 0.5654,-0.5654 0.8746,-0.8746c0.3092,-0.3093 0.8746,0 1.312,0l1.0933,-0.656c1.1661,-7.7259 -2.4782,-14.1399 -7.6531,-20.5539l0,0z" id="svg_4" stroke="#007f00" fill="#44b544" stroke-width="0"/>
<path id="svg_6" d="m10.0409,48.3061c2.1137,-0.2187 4.6647,-0.2187 6.3411,1.9679c1.1662,1.5306 1.239,3.7172 0.2186,4.5918c-2.4052,-0.8746 -5.0291,-2.6239 -6.5597,-6.5597l0,0z" stroke="#007f00" fill="#44b544" stroke-width="0"/>
</g>
</g>
<rect transform="rotate(45, 16.9336, 16.9375)" ry="9" rx="9" id="svg_9" height="19.32339" width="29.34293" y="7.27574" x="2.26257" stroke-width="5" stroke="url(#svg_10)" fill="none" stroke-linecap="round"/>
<rect id="svg_11" transform="rotate(45, 49.0664, 49.0625)" ry="9" rx="9" height="19.32339" width="29.34293" y="39.40074" x="34.39538" stroke-width="5" stroke="url(#svg_10)" fill="none" stroke-linecap="round"/>
<line id="svg_12" y2="45.75" x2="45.75" y1="20.25" x1="20.25" stroke-linecap="round" stroke-width="5" stroke="url(#svg_10)" fill="none"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2,.cls-3{fill:none;}.cls-2{stroke:#fff;}.cls-2,.cls-3{stroke-linecap:round;stroke-miterlimit:10;stroke-width:3px;}.cls-3{stroke:#f9ba00;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><path class="cls-2" d="M27.7,20.76l.53.53a6.77,6.77,0,0,1,0,9.57h0a6.77,6.77,0,0,1-9.57,0L9.77,22a6.75,6.75,0,0,1,0-9.57h0a6.76,6.76,0,0,1,9.56,0l2.18,2.18"/><path class="cls-3" d="M23.56,28.08a6.77,6.77,0,0,1,0-9.57h0a6.77,6.77,0,0,1,9.57,0l8.9,8.9A6.77,6.77,0,0,1,42,37h0a6.77,6.77,0,0,1-9.57,0l-2.24-2.25"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 723 B

19
src/editor/images/grid.svg
View File

@@ -1,18 +1 @@
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g>
<rect fill="#ffffff" stroke="#848484" x="2" y="2" width="20" height="20"/>
<line fill="none" stroke="#848484" x1="11.84375" y1="-1.53125" x2="11.84375" y2="18.46875" transform="rotate(90, 11.8429, 8.46955)"/>
<line fill="none" stroke="#848484" x1="11.90625" y1="5.21875" x2="11.90625" y2="25.21875" transform="rotate(90, 11.9054, 15.2196)"/>
<line fill="none" stroke="#848484" x1="8.5" y1="2.03125" x2="8.5" y2="22.03125"/>
<line fill="none" stroke="#848484" x1="15.5" y1="2.03125" x2="15.5" y2="22.03125"/>
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="3.25" y="3.28125" width="4" height="4"/>
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="10" y="3.28125" width="4" height="4"/>
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="16.75" y="3.28125" width="4" height="4"/>
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="3.28125" y="9.75" width="4" height="4"/>
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="10.03125" y="9.75" width="4" height="4"/>
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="16.78125" y="9.75" width="4" height="4"/>
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="3.3125" y="16.59375" width="4" height="4"/>
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="10.0625" y="16.59375" width="4" height="4"/>
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="16.8125" y="16.59375" width="4" height="4"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2,.cls-3,.cls-4{fill:none;}.cls-1{stroke:#f9ba00;}.cls-1,.cls-2,.cls-3{stroke-miterlimit:10;stroke-width:2px;}.cls-2,.cls-3{stroke:#fff;}.cls-3{stroke-dasharray:2.89 2.89;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><line class="cls-1" x1="11.78" y1="2.3" x2="11.78" y2="41.73"/><line class="cls-1" x1="22.55" y1="2.88" x2="22.51" y2="31.55"/><line class="cls-1" x1="33.32" y1="2.98" x2="33.3" y2="20.51"/><line class="cls-1" x1="44.1" y1="3.08" x2="44.09" y2="9.7"/><line class="cls-1" x1="44.09" y1="9.7" x2="4.62" y2="9.71"/><line class="cls-1" x1="32.91" y1="20.65" x2="4.52" y2="20.62"/><line class="cls-1" x1="22.51" y1="31.57" x2="4.42" y2="31.53"/><line class="cls-1" x1="11.07" y1="42.45" x2="4.32" y2="42.44"/><line class="cls-2" x1="47.76" y1="5.37" x2="46.71" y2="6.44"/><line class="cls-3" x1="44.69" y1="8.5" x2="9.26" y2="44.5"/><line class="cls-2" x1="8.25" y1="45.53" x2="7.19" y2="46.6"/><rect class="cls-4" width="51.04" height="49.47"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

20
src/editor/images/group_elements.svg
View File

@@ -1,19 +1 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="svg_90" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#ccddff" stop-opacity="1"/>
<stop offset="1" stop-color="#789fed" stop-opacity="1"/>
</linearGradient>
<linearGradient id="svg_92" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#70a1e5" stop-opacity="1"/>
<stop offset="1" stop-color="#4b6baf" stop-opacity="1"/>
</linearGradient>
</defs>
<rect x="13.5" y="0.5" width="2" height="2" fill="#a0a0a0" stroke="#555555" id="svg_79"/>
<rect x="13.5" y="13.5" width="2" height="2" fill="#a0a0a0" stroke="#555555" id="svg_82"/>
<rect x="0.5" y="13.5" width="2" height="2" fill="#a0a0a0" stroke="#555555" id="svg_83"/>
<rect x="2.5" y="2.5" width="8" height="7" fill="#a0a0a0" stroke="#555555" id="svg_85"/>
<rect x="2.5" y="2.5" width="8" height="7" fill="url(#svg_90)" stroke="url(#svg_92)" id="svg_87"/>
<rect x="5.5" y="6.5" width="8" height="7" id="svg_84" fill="#7399d6" stroke="url(#svg_92)"/>
<rect x="0.5" y="0.5" width="2" height="2" id="svg_78" fill="#a0a0a0" stroke="#555555"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-4,.cls-5,.cls-6{fill:none;}.cls-2{fill:#fff;}.cls-2,.cls-4,.cls-5,.cls-6{stroke:#fff;}.cls-2,.cls-3,.cls-4,.cls-5,.cls-6{stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}.cls-3{fill:#f9ba00;stroke:#f9ba00;}.cls-5{stroke-dasharray:2.98 2.98;}.cls-6{stroke-dasharray:3.17 3.17;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="10.76" y="12.5" width="18.91" height="18.91"/><circle class="cls-3" cx="30.43" cy="28.04" r="10.21"/><polyline class="cls-4" points="46.39 42.15 46.39 43.65 44.89 43.65"/><line class="cls-5" x1="41.91" y1="43.65" x2="7.64" y2="43.65"/><polyline class="cls-4" points="6.15 43.65 4.65 43.65 4.65 42.15"/><line class="cls-6" x1="4.65" y1="38.99" x2="4.65" y2="8.9"/><polyline class="cls-4" points="4.65 7.32 4.65 5.82 6.15 5.82"/><line class="cls-5" x1="9.13" y1="5.82" x2="43.4" y2="5.82"/><polyline class="cls-4" points="44.89 5.82 46.39 5.82 46.39 7.32"/><line class="cls-6" x1="46.39" y1="10.48" x2="46.39" y2="40.57"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

4
src/editor/images/handle.svg
View File

@@ -1,3 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<polygon points="5,5 14,10 5,15" fill="#000000" stroke="#000000" stroke-width="5"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.76 14.3"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:none;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><path class="cls-1" d="M9.14,8.5l-.36-5A1.62,1.62,0,0,1,8.83,3a1.33,1.33,0,0,1,.28-.42,1.23,1.23,0,0,1,.59-.34.52.52,0,0,1,.49.1.88.88,0,0,1,.14.51l.52,7.42L3.43,9.69a.9.9,0,0,1-.51-.13.52.52,0,0,1-.1-.49,1.26,1.26,0,0,1,.35-.59,1.18,1.18,0,0,1,.42-.29,1.63,1.63,0,0,1,.58,0Z"/><polyline class="cls-2" points="1.97 0 14.76 0 14.76 14.3 0 14.3 0 0 1.97 0"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 191 B

After

Width:  |  Height:  |  Size: 577 B

20
src/editor/images/image.svg
View File

@@ -1,19 +1 @@
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<defs>
<linearGradient y2="1" x2="1" y1="0" x1="1" id="svg_25">
<stop stop-opacity="1" stop-color="#10284c" offset="0"/>
<stop stop-opacity="1" stop-color="#fddb8c" offset="1"/>
</linearGradient>
<linearGradient y2="0.75781" x2="0.99609" y1="0" x1="1" id="svg_23">
<stop stop-opacity="1" stop-color="#fddb8c" offset="0"/>
<stop stop-opacity="1" stop-color="#97c4ef" offset="1"/>
</linearGradient>
</defs>
<rect x="1" y="3.83333" width="22" height="17" id="svg_18" fill="#202020" stroke="none"/>
<rect stroke-width="1.2" stroke="#ffffff" fill="#232947" id="svg_15" height="14" width="19" y="5.33333" x="2.5"/>
<rect fill="url(#svg_23)" id="svg_20" height="7.02244" width="15.96424" y="6.7266" x="4"/>
<rect fill="url(#svg_25)" id="svg_24" height="4.02393" width="15.96303" y="13.77454" x="4"/>
<circle fill="#ffffad" id="svg_26" r="1.83333" cy="9.82002" cx="7.13254"/>
<path d="m14.5696,13.77458l0.70243,-4.85313l-3.12899,4.85313l2.42656,0z" id="svg_14" fill="#212121" stroke="none"/>
<path d="m15.27203,8.98531c2.74584,0.06386 2.42657,4.21456 -0.63857,4.85313c0.70243,-1.27714 1.66028,-3.63985 0.63857,-4.85313z" id="svg_17" fill="#212121" stroke="none"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2{fill:none;}.cls-2{stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}.cls-3{fill:#fff;}.cls-4{fill:#f9ba00;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="2.64" y="10.73" width="44.67" height="27.85"/><circle class="cls-3" cx="13.71" cy="23.94" r="4.46"/><polygon class="cls-4" points="6.6 34.82 15.15 24.61 22.14 29.71 33.63 19.27 43.52 27.05 43.52 34.82 6.6 34.82"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 644 B

11
src/editor/images/importImg.svg
View File

@@ -1,10 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<defs>
<linearGradient y2="0.875" x2="0.21484" y1="0.00391" x1="0.04297" id="svg_46_import">
<stop stop-opacity="1" stop-color="#81f4bb" offset="0"/>
<stop stop-opacity="1" stop-color="#37b76e" offset="1"/>
</linearGradient>
</defs>
<rect x="2.42792" y="1.6692" width="18" height="21" id="svg_55" fill="#eaeaea" stroke="#606060"/>
<path stroke="#285582" fill="url(#svg_46_import)" id="svg_45" d="m7.14286,12.74903l5.21236,5.79151l5.50193,-5.88803l-2.50965,-0.09653l0,-2.79923c0,-2.3166 -2.3166,-5.59846 -6.56371,-5.59846c-4.05405,0 -6.27413,3.37838 -6.56371,6.75676c0.48263,-1.5444 2.7027,-4.53668 4.44015,-4.44015c2.12355,-0.09653 2.79923,1.64093 2.79923,3.37838l0.09653,2.79923l-2.41313,0.09653z"/>
</svg></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-4{fill:none;}.cls-2{fill:#f9ba00;}.cls-2,.cls-3{stroke:#f9ba00;}.cls-2,.cls-3,.cls-4{stroke-linejoin:round;}.cls-3{fill:#fff;stroke-width:5px;}.cls-3,.cls-4{stroke-linecap:round;}.cls-4{stroke:#fff;stroke-width:2px;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><polygon class="cls-2" points="32.1 24.74 20.33 18.03 20.33 31.44 32.1 24.74"/><line class="cls-3" x1="23.94" y1="24.74" x2="7.63" y2="24.74"/><path class="cls-4" d="M12.75,19.77v-2A6.84,6.84,0,0,1,19.59,11H32.92a6.84,6.84,0,0,1,6.84,6.84V31.68a6.84,6.84,0,0,1-6.84,6.84H19.59a6.84,6.84,0,0,1-6.84-6.84V29.61"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 977 B

After

Width:  |  Height:  |  Size: 803 B

3
src/editor/images/leftarrow.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-60 -60 120 120">
<path stroke-width="10" stroke="#f9bc01" fill="#f9bc01" d="m-50,0l100,40l-30,-40l30,-40z"/>
</svg></svg>
Side by Side

After

Width:  |  Height:  |  Size: 335 B

3
src/editor/images/leftarrow_o.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-60 -60 120 120">
<path stroke-width="10" stroke="#f9bc01" fill="none" d="m-50,0l100,40l-30,-40l30,-40z"/>
</svg></svg>
Side by Side

After

Width:  |  Height:  |  Size: 332 B

11
src/editor/images/library.svg
View File

@@ -1,10 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 211">
<g>
<path fill="#efe8b8" stroke="#d6c47c" stroke-linecap="round" d="m2.75,49.51761l56.56,-46.26761c12.73,8.25 25.71001,7 46.44,0.75l-56.03999,47.23944l-22.72002,25.01056l-24.23999,-26.73239z" id="svg_2" stroke-width="7"/>
<path fill="#a03333" stroke="#3f3f3f" d="m3.75,203.25002c14.33301,7 30.66699,7 46,0l0,-152.00002c-14.66699,8 -32.33301,8 -47,0l1,152.00002zm45.75,-152.25002l56.25,-46.75l0,151l-56,48.00002m-47.25,-154.25002l57.25,-46.5" id="svg_1" stroke-width="7" stroke-linecap="round"/>
<path fill="#efe8b8" stroke="#d6c47c" stroke-linecap="round" d="m49.75,49.51801l56.56,-46.26801c12.72998,8.25 25.71002,7 46.44,0.75l-56.03998,47.239l-22.72003,25.011l-24.23999,-26.73199z" stroke-width="7" id="svg_5"/>
<path fill="#2f8e2f" stroke="#3f3f3f" d="m50.75,202.25c14.33301,7 30.66699,7.04253 46,0.04253l0,-151.04253c-14.66699,8 -32.33301,8 -47,0l1,151zm45.75,-151.25l56.25,-46.75l0,144.01219l-56,51.98782m-47.25,-151.25002l57.25,-46.5" stroke-width="7" stroke-linecap="round" id="svg_6"/>
<path fill="#efe8b8" stroke="#d6c47c" stroke-linecap="round" d="m95.75,49.51801l56.56,-46.26801c12.72998,8.25 25.71002,7 46.44,0.75l-56.03998,47.239l-22.72003,25.011l-24.23999,-26.73199z" stroke-width="7" id="svg_10"/>
<path fill="#336393" stroke="#3f3f3f" d="m96.75,200.29445c14.33301,7 30.66699,7 46,0l0,-149.04445c-14.66699,8 -32.33301,8 -47,0l1,149.04445zm45.75,-149.29445l56.25,-46.75l0,148.04445l-56,48m-47.25,-151.29445l57.25,-46.5" stroke-width="7" stroke-linecap="round" id="svg_11"/>
</g>
</svg></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-4{fill:none;}.cls-2{fill:#fff;}.cls-3{fill:#f9ba00;}.cls-4{stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><circle class="cls-2" cx="19.34" cy="24.42" r="4.86"/><polygon class="cls-3" points="37.37 36.3 13.55 36.3 13.55 33.94 20.91 25.15 28.54 30.72 37.43 22.65 37.37 36.3"/><polyline class="cls-4" points="5.88 18 25.52 7.9 45.16 18"/><line class="cls-4" x1="5.88" y1="41.88" x2="45.16" y2="41.88"/><line class="cls-4" x1="9.6" y1="20.67" x2="9.6" y2="37.41"/><line class="cls-4" x1="41.37" y1="20.67" x2="41.37" y2="37.41"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 827 B

15
src/editor/images/linecap_butt.svg
View File

@@ -1,14 +1 @@
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit -->
<defs>
<linearGradient id="svg_8" x1="0.8" y1="1" x2="0.2" y2="1">
<stop offset="0" stop-color="#000000" stop-opacity="1"/>
<stop offset="1" stop-color="#000000" stop-opacity="0"/>
</linearGradient>
</defs>
<g>
<rect fill="url(#svg_8)" stroke="#a0a0a0" stroke-width="2" x="-15.20196" y="43.5974" width="94.8373" height="50.3728" id="svg_3" transform="rotate(-45, 32.2148, 68.7832)"/>
<path id="svg_1" d="m6.63133,95.07755l59.17514,-59.17514" stroke-width="3" stroke="#fddb8c" fill="none"/>
<path id="svg_2" d="m51.62893,36.10742l13.05662,-13.05662l13.05661,13.05662l-13.05661,13.05662l-13.05662,-13.05662z" stroke="none" fill="#fddb8c"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1{fill:none;}.cls-2{fill:#f9ba00;stroke:#f9ba00;}.cls-2,.cls-3{stroke-linecap:round;}.cls-2,.cls-3,.cls-4{stroke-linejoin:round;stroke-width:2px;}.cls-3,.cls-4{fill:#fff;stroke:#fff;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="13.37" y="15.26" width="23.98" height="18.95"/><rect class="cls-3" x="35.51" y="22.4" width="4.67" height="4.67"/><line class="cls-4" x1="36.82" y1="24.78" x2="12.39" y2="24.78"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 890 B

After

Width:  |  Height:  |  Size: 654 B

15
src/editor/images/linecap_round.svg
View File

@@ -1,14 +1 @@
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:se="http://svg-edit.googlecode.com">
<!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit -->
<defs>
<linearGradient y2="1" x2="0.2" y1="1" x1="0.8" id="svg_8">
<stop stop-opacity="1" stop-color="#000000" offset="0"/>
<stop stop-opacity="0" stop-color="#000000" offset="1"/>
</linearGradient>
</defs>
<g>
<path transform="rotate(-45, 41.5117, 59.4648)" id="svg_3" d="m-19.0679,34.2946l94.8359,0c36.499,-1.4142 33.67101,48.9569 0,50.3711l-94.8359,0l0,-50.3711z" stroke-width="2" stroke="#a0a0a0" fill="url(#svg_8)"/>
<path id="svg_1" d="m6.63133,95.07755l59.17515,-59.17515" stroke-width="3" stroke="#fddb8c" fill="none"/>
<path id="svg_2" d="m51.62893,36.10742l13.05662,-13.05662l13.05661,13.05662l-13.05661,13.05662l-13.05662,-13.05662z" stroke="none" fill="#fddb8c"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1{fill:none;}.cls-2{fill:#f9ba00;stroke:#f9ba00;}.cls-2,.cls-3{stroke-linecap:round;}.cls-2,.cls-3,.cls-4{stroke-linejoin:round;stroke-width:2px;}.cls-3,.cls-4{fill:#fff;stroke:#fff;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="13.23" y="15.26" width="15.82" height="18.95"/><ellipse class="cls-2" cx="29.04" cy="24.74" rx="9.68" ry="9.48"/><rect class="cls-3" x="26.71" y="22.4" width="4.67" height="4.67"/><line class="cls-4" x1="30.36" y1="24.78" x2="12.24" y2="24.78"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 928 B

After

Width:  |  Height:  |  Size: 720 B

15
src/editor/images/linecap_square.svg
View File

@@ -1,14 +1 @@
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit -->
<defs>
<linearGradient id="svg_8" x1="0.8" y1="1" x2="0.2" y2="1">
<stop offset="0" stop-color="#000000" stop-opacity="1"/>
<stop offset="1" stop-color="#000000" stop-opacity="0"/>
</linearGradient>
</defs>
<g>
<rect fill="url(#svg_8)" stroke="none" x="-18.51568" y="35.5974" width="117.46469" height="50.3728" id="svg_3" transform="rotate(-45, 40.2168, 60.7832)"/>
<path id="svg_1" d="m6.63133,95.07755l59.17514,-59.17514" stroke-width="3" stroke="#fddb8c" fill="none"/>
<path id="svg_2" d="m51.62893,36.10742l13.05662,-13.05662l13.05661,13.05662l-13.05661,13.05662l-13.05662,-13.05662z" stroke="none" fill="#fddb8c"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1{fill:none;}.cls-2{fill:#f9ba00;stroke:#f9ba00;}.cls-2,.cls-3{stroke-linecap:round;}.cls-2,.cls-3,.cls-4{stroke-linejoin:round;stroke-width:2px;}.cls-3,.cls-4{fill:#fff;stroke:#fff;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="14.02" y="14.98" width="23.98" height="18.95"/><rect class="cls-3" x="27.5" y="22.12" width="4.67" height="4.67"/><line class="cls-4" x1="31.16" y1="24.51" x2="13.04" y2="24.51"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 872 B

After

Width:  |  Height:  |  Size: 654 B

15
src/editor/images/linejoin_bevel.svg
View File

@@ -1,14 +1 @@
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:se="http://svg-edit.googlecode.com">
<!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit -->
<defs>
<linearGradient y2="1" x2="0.2" y1="1" x1="0.8" id="svg_8">
<stop stop-opacity="1" stop-color="#000000" offset="0"/>
<stop stop-opacity="0" stop-color="#000000" offset="1"/>
</linearGradient>
</defs>
<g>
<path stroke-linejoin="bevel" fill="none" stroke="url(#svg_8)" stroke-width="49" d="m-15,-35l75,85l-75,75" id="svg_6"/>
<path transform="rotate(90, 57.8925, 50.2519)" fill="#fddb8c" stroke="none" d="m44.83592,50.25187l13.05661,-13.05663l13.05661,13.05663l-13.05661,13.05662l-13.05661,-13.05662z" id="svg_2"/>
<path id="svg_4" d="m-15,-35l75,85l-75,75" stroke-width="3" stroke="#fddb8c" fill="none"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1{fill:none;}.cls-2{fill:#f9ba00;stroke:#f9ba00;}.cls-2,.cls-3{stroke-linecap:round;}.cls-2,.cls-3,.cls-4{stroke-linejoin:round;stroke-width:2px;}.cls-3,.cls-4{fill:#fff;stroke:#fff;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="23.76" y="24.41" width="11.45" height="18.95" transform="translate(-4.4 63.38) rotate(-90)"/><polygon class="cls-2" points="38.96 30.44 11.01 30.44 11.01 11.49 27.71 11.49 38.96 22.5 38.96 30.44"/><rect class="cls-3" x="27.15" y="18.63" width="4.67" height="4.67"/><line class="cls-4" x1="29.49" y1="21.01" x2="10.06" y2="21.01"/><line class="cls-4" x1="29.49" y1="40.69" x2="29.49" y2="21.01"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 863 B

After

Width:  |  Height:  |  Size: 870 B

15
src/editor/images/linejoin_miter.svg
View File

@@ -1,14 +1 @@
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:se="http://svg-edit.googlecode.com">
<!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit -->
<defs>
<linearGradient y2="1" x2="0.2" y1="1" x1="0.8" id="svg_8">
<stop stop-opacity="1" stop-color="#000000" offset="0"/>
<stop stop-opacity="0" stop-color="#000000" offset="1"/>
</linearGradient>
</defs>
<g>
<path fill="none" stroke="url(#svg_8)" stroke-width="49" d="m-15,-35l75,85l-75,75" id="svg_6"/>
<path transform="rotate(90, 57.8925, 50.2519)" fill="#fddb8c" stroke="none" d="m44.83592,50.25187l13.05661,-13.05663l13.05661,13.05663l-13.05661,13.05662l-13.05661,-13.05662z" id="svg_2"/>
<path id="svg_4" d="m-15,-35l75,85l-75,75" stroke-width="3" stroke="#fddb8c" fill="none"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1{fill:none;}.cls-2{fill:#f9ba00;stroke:#f9ba00;}.cls-2,.cls-3{stroke-linecap:round;}.cls-2,.cls-3,.cls-4{stroke-linejoin:round;stroke-width:2px;}.cls-3,.cls-4{fill:#fff;stroke:#fff;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="14.47" y="16.4" width="28.13" height="18.95" transform="translate(2.66 54.41) rotate(-90)"/><rect class="cls-2" x="10.05" y="11.81" width="27.96" height="18.95"/><rect class="cls-3" x="26.2" y="18.95" width="4.67" height="4.67"/><line class="cls-4" x1="28.53" y1="21.33" x2="9.1" y2="21.33"/><line class="cls-4" x1="28.53" y1="41.01" x2="28.53" y2="21.33"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 839 B

After

Width:  |  Height:  |  Size: 832 B

15
src/editor/images/linejoin_round.svg
View File

@@ -1,14 +1 @@
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:se="http://svg-edit.googlecode.com">
<!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit -->
<defs>
<linearGradient y2="1" x2="0.2" y1="1" x1="0.8" id="svg_8">
<stop stop-opacity="1" stop-color="#000000" offset="0"/>
<stop stop-opacity="0" stop-color="#000000" offset="1"/>
</linearGradient>
</defs>
<g>
<path stroke-linejoin="round" fill="none" stroke="url(#svg_8)" stroke-width="49" d="m-15,-35l75,85l-75,75" id="svg_6"/>
<path transform="rotate(90, 57.8925, 50.2519)" fill="#fddb8c" stroke="none" d="m44.83592,50.25187l13.05661,-13.05663l13.05661,13.05663l-13.05661,13.05662l-13.05661,-13.05662z" id="svg_2"/>
<path id="svg_4" d="m-15,-35l75,85l-75,75" stroke-width="3" stroke="#fddb8c" fill="none"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1{fill:none;}.cls-2{fill:#f9ba00;stroke:#f9ba00;}.cls-2,.cls-3{stroke-linecap:round;}.cls-2,.cls-3,.cls-4{stroke-linejoin:round;stroke-width:2px;}.cls-3,.cls-4{fill:#fff;stroke:#fff;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><ellipse class="cls-2" cx="30.29" cy="21.27" rx="9.68" ry="9.48"/><rect class="cls-2" x="21.2" y="21.1" width="18.6" height="18.95" transform="translate(-0.07 61.07) rotate(-90)"/><rect class="cls-2" x="12.02" y="11.75" width="18.48" height="18.95"/><rect class="cls-3" x="28.16" y="18.89" width="4.67" height="4.67"/><line class="cls-4" x1="30.5" y1="21.27" x2="11.07" y2="21.27"/><line class="cls-4" x1="30.5" y1="40.95" x2="30.5" y2="21.27"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 864 B

After

Width:  |  Height:  |  Size: 897 B

33
src/editor/images/logo.svg
View File

@@ -1,32 +1 @@
<svg viewBox="0 0 478 472" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="svg_5" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#ffffe0" stop-opacity="1"/>
<stop offset="1" stop-color="#edc39c" stop-opacity="1"/>
</linearGradient>
<linearGradient id="svg_10" x1="0.57031" y1="0.78125" x2="0.28906" y2="0.41406">
<stop offset="0" stop-color="#f9bc01" stop-opacity="1"/>
<stop offset="1" stop-color="#ffff00"/>
</linearGradient>
<linearGradient id="svg_18" x1="0.37891" y1="0.35938" x2="1" y2="1">
<stop offset="0" stop-color="#e0e0e0" stop-opacity="1"/>
<stop offset="1" stop-color="#fddb8c" stop-opacity="1"/>
</linearGradient>
</defs>
<g>
<title>Layer 1</title>
<path d="m68.82031,270.04688l-22,-33l17,-35l34,2l25,15l7,-35l28,-16l25,12l100,102l21,23l-15,35l-36,9l20,49l-31,24l-49,-17l-1,31l-33,21l-31,-19l-13,-35l-30,21l-30,-9l-5,-35l16,-31l-32,-6l-15,-19l3,-36l47,-18z" id="svg_19" fill="#ffffff"/>
<path fill="#1a171a" fill-rule="nonzero" id="path2902" d="m158.96452,155.03685c-25.02071,0 -45.37077,20.35121 -45.37077,45.3775c0,0.72217 0.01794,1.4399 0.0471,2.15645c-0.49339,-0.53604 -0.99355,-1.06085 -1.50603,-1.58452c-8.56077,-8.55519 -19.95982,-13.28413 -32.07432,-13.28413c-12.12122,0 -23.52027,4.72334 -32.08778,13.29646c-17.69347,17.69464 -17.69347,46.4619 0,64.17445c0.51809,0.51697 1.0485,1.0126 1.59015,1.50601c-0.72891,-0.03586 -1.45782,-0.04822 -2.19234,-0.04822c-25.02071,0 -45.37189,20.35117 -45.37189,45.37747c0,25.01398 20.35119,45.36517 45.37189,45.36517c0.72891,0 1.45221,-0.01236 2.1744,-0.04828c-0.5293,0.48221 -1.05412,0.98801 -1.56547,1.49368c-17.70021,17.68906 -17.70021,46.48654 -0.00628,64.18677c8.57872,8.56747 19.96655,13.2785 32.08778,13.2785c12.1145,0 23.5012,-4.71103 32.07433,-13.2785c0.51247,-0.51694 1.01823,-1.04849 1.50603,-1.57895c-0.02915,0.71213 -0.04709,1.44669 -0.04709,2.15759c0,25.01511 20.35007,45.37747 45.37077,45.37747c25.01398,0 45.37079,-20.3624 45.37079,-45.37747c0,-0.7222 -0.01689,-1.44553 -0.05266,-2.18112c0.48105,0.52933 0.97562,1.04849 1.48697,1.56662c8.57982,8.57977 19.97775,13.2908 32.1057,13.2908c12.11003,0 23.51358,-4.71103 32.0687,-13.2785c17.68906,-17.70013 17.68906,-46.48538 0,-64.17441c-0.50577,-0.4946 -1.01141,-1.00034 -1.54306,-1.48248c0.69983,0.03592 1.42316,0.04828 2.16992,0.04828c25.01514,0 45.35284,-20.35123 45.35284,-45.36517c0,-25.02631 -20.33774,-45.37747 -45.35284,-45.37747c-0.74683,0 -1.47009,0.01236 -2.19345,0.04822c0.53152,-0.49341 1.06082,-0.98904 1.59128,-1.50601c8.55521,-8.55521 13.2785,-19.94186 13.2785,-32.07545c0,-12.12793 -4.72336,-23.52028 -13.30319,-32.0934c-8.55515,-8.56076 -19.95866,-13.2841 -32.0687,-13.2841c-12.12122,0 -23.52025,4.72334 -32.08777,13.2841c-0.51137,0.5181 -1.01822,1.04851 -1.5049,1.57895c0.03586,-0.72331 0.05266,-1.43991 0.05266,-2.16881c0,-25.02629 -20.35681,-45.3775 -45.37079,-45.3775m0,20.71901c13.61607,0 24.65851,11.03122 24.65851,24.65849c0,6.62749 -2.651,12.62137 -6.9101,17.04979l0,51.67419l36.53975,-36.53523c0.12001,-6.14418 2.48277,-12.24686 7.18146,-16.94667c4.81305,-4.81305 11.12094,-7.22409 17.44116,-7.22409c6.30228,0 12.61577,2.41104 17.43552,7.22409c9.62166,9.63287 9.62166,25.24948 0,34.87669c-4.69977,4.68634 -10.80803,7.04915 -16.95334,7.18147l-36.5341,36.53305l51.66742,0c4.42841,-4.25351 10.42905,-6.90451 17.08008,-6.90451c13.59137,0 24.62933,11.03799 24.62933,24.66525c0,13.61606 -11.03796,24.66519 -24.62933,24.66519c-6.65106,0 -12.65167,-2.66333 -17.08008,-6.91681l-51.64836,0l36.50273,36.50946c6.16995,0.14465 12.26587,2.50522 16.96568,7.20618c9.6216,9.61487 9.6216,25.23151 0,34.85757c-4.80856,4.81979 -11.13327,7.22974 -17.43556,7.22974c-6.32019,0 -12.63371,-2.40991 -17.44786,-7.22974c-4.68074,-4.68744 -7.04802,-10.79572 -7.17473,-16.94098l-36.53975,-36.53415l0,51.66742c4.25908,4.44635 6.9101,10.43466 6.9101,17.0621c0,13.62729 -11.04243,24.66415 -24.65851,24.66415c-13.62166,0 -24.65848,-11.0369 -24.65848,-24.66415c0,-6.62744 2.64539,-12.61575 6.90335,-17.0621l0,-51.66742l-36.53864,36.54648c-0.12672,6.14413 -2.48838,12.26477 -7.18147,16.94098c-4.81416,4.81873 -11.12206,7.22974 -17.42882,7.22974c-6.31461,0 -12.6225,-2.41101 -17.43555,-7.22974c-9.63284,-9.62833 -9.63284,-25.24277 0,-34.8699c4.68073,-4.67627 10.79012,-7.05026 16.94101,-7.18262l36.533,-36.53302l-51.66632,0c-4.44075,4.25348 -10.42902,6.91681 -17.06211,6.91681c-13.61606,0 -24.65288,-11.04913 -24.65288,-24.66519c0,-13.62726 11.03682,-24.66525 24.65288,-24.66525c6.63309,0 12.62136,2.651 17.06211,6.90451l51.68537,0l-36.55208,-36.54538c-6.14527,-0.12 -12.25354,-2.49403 -16.94775,-7.19377c-9.62611,-9.61493 -9.62611,-25.23715 0,-34.86441c4.81419,-4.81305 11.12769,-7.22406 17.44228,-7.22406c6.30676,0 12.61465,2.41101 17.42883,7.22406c4.69978,4.69307 7.06034,10.80246 7.18144,16.94777l36.5386,36.53299l0,-51.66074c-4.25795,-4.42841 -6.90334,-10.42229 -6.90334,-17.04979c0,-13.62726 11.03682,-24.65848 24.65848,-24.65848"/>
<path d="m188.82031,210.04688l16,-47l155,-148l107,100l-158,156.99999l-44,12l-76,-74z" id="svg_6" fill="url(#svg_10)" stroke="#ffffff" stroke-width="0"/>
<path d="m335.57031,40.29688c-11.5,39.75 55.5,115.25 109.25,98.75l21,-20.99999l-103,-101l-27.25,23.25z" id="svg_11" fill="url(#svg_18)" stroke="#ffffff" stroke-width="0"/>
<rect x="272.80404" y="20.76382" width="42.35197" height="232.66835" id="svg_13" fill="#ffffff" stroke="#ffffff" stroke-width="0" transform="rotate(45.9094, 293.98, 137.1)" opacity="0.4"/>
<rect x="282.80404" y="22.76382" width="14" height="232.66835" fill="#ffffff" stroke="#ffffff" stroke-width="0" transform="rotate(45.9094, 289.805, 139.1)" opacity="0.4" id="svg_14"/>
<ellipse cx="415.13312" cy="64.38066" id="svg_12" fill="#ea7598" stroke="#ffffff" stroke-width="0" rx="67.79251" ry="34.82026" transform="rotate(39.4735, 415.133, 64.379)"/>
<path d="m212.07031,166.04688c-8.5,47 36.25,103.75 99.25,96.75l-152.5,53.25l53.25,-150z" id="svg_4" fill="url(#svg_5)" stroke="#ffffff" stroke-width="0"/>
<path d="m181.32031,242.54688c0.5,20.5 26.75,45 46.75,48.5l-66.25,20l19.5,-68.5z" id="svg_3" fill="#27382f" stroke="#ffffff" stroke-width="0"/>
</g>
<g>
<title>Layer 2</title>
<path d="m152.82031,317.04688l51,-152l157,-153c40,-12.00001 118,48 105,105l-157,152.99999l-156,47z" id="svg_1" fill="none" stroke="#800000" stroke-width="17"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 50.52"><defs><style>.cls-1,.cls-3,.cls-5{fill:none;}.cls-2{fill:#f9ba00;}.cls-3,.cls-5{stroke:#fff;stroke-width:2px;}.cls-3{stroke-linecap:round;stroke-linejoin:round;}.cls-4{fill:#fff;}.cls-5{stroke-miterlimit:10;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><rect class="cls-1" y="1" width="51.04" height="49.47"/><circle class="cls-2" cx="4.93" cy="36.72" r="2.53"/><circle class="cls-2" cx="8.24" cy="28.61" r="2.53"/><circle class="cls-2" cx="16.24" cy="25.3" r="2.53"/><circle class="cls-2" cx="27.58" cy="36.64" r="2.53"/><circle class="cls-2" cx="24.3" cy="44.67" r="2.53"/><circle class="cls-2" cx="16.24" cy="47.99" r="2.53"/><circle class="cls-2" cx="8.24" cy="44.67" r="2.53"/><rect class="cls-2" x="6.34" y="38.33" width="13" height="3.49" transform="translate(-24.58 20.82) rotate(-45.01)"/><rect class="cls-2" x="14.5" y="25.3" width="3.49" height="22.68"/><rect class="cls-2" x="14.52" y="25.29" width="3.49" height="22.71" transform="translate(-21.14 22.23) rotate(-44.99)"/><rect class="cls-2" x="4.93" y="34.95" width="22.45" height="3.49" transform="translate(-0.08 0.03) rotate(-0.12)"/><line class="cls-3" x1="38.49" y1="10.3" x2="22.88" y2="29.54"/><polyline class="cls-3" points="37.65 1 18.31 25 16.01 38.25 28.21 33.38 47.74 9.13"/><path class="cls-4" d="M17,32.82a3.88,3.88,0,0,1,2.93.57,3.54,3.54,0,0,1,1.58,2.68L16,38.25Z"/><path class="cls-5" d="M19.11,24.67a15.65,15.65,0,0,0,3.77,4.87,18.57,18.57,0,0,0,5.7,2.94"/><path class="cls-5" d="M34.22,4.32a16.7,16.7,0,0,0,4,5.15,19.8,19.8,0,0,0,6.11,3.09"/><path class="cls-3" d="M48,8.8a18.54,18.54,0,0,1-5.7-2.93A33.51,33.51,0,0,1,37.64,1S42,2.18,43.87,3.68A24.51,24.51,0,0,1,48,8.8Z"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

3
src/editor/images/mcircle.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-60 -60 120 120">
<circle stroke-width="10" stroke="#f9bc01" fill="#f9bc01" cy="0" cx="0" r="30"/>
</svg></svg>
Side by Side

After

Width:  |  Height:  |  Size: 324 B

Some files were not shown because too many files have changed in this diff Show More