579 lines
19 KiB
JavaScript
579 lines
19 KiB
JavaScript
/* globals seConfirm */
|
|
/**
|
|
* @file ext-imagelib.js
|
|
*
|
|
* @license MIT
|
|
*
|
|
* @copyright 2010 Alexis Deveria
|
|
*
|
|
*/
|
|
|
|
const name = 'imagelib'
|
|
|
|
const loadExtensionTranslation = async function (svgEditor) {
|
|
let translationModule
|
|
const lang = svgEditor.configObj.pref('lang')
|
|
try {
|
|
translationModule = await import(`./locale/${lang}.js`)
|
|
} catch (_error) {
|
|
console.warn(`Missing translation (${lang}) for ${name} - using 'en'`)
|
|
translationModule = await import('./locale/en.js')
|
|
}
|
|
svgEditor.i18next.addResourceBundle(lang, name, translationModule.default)
|
|
}
|
|
|
|
export default {
|
|
name,
|
|
async init ({ decode64, dropXMLInternalSubset }) {
|
|
const svgEditor = this
|
|
const { $id, $click } = svgEditor.svgCanvas
|
|
const { $svgEditor } = svgEditor
|
|
const { imgPath } = svgEditor.configObj.curConfig
|
|
|
|
await loadExtensionTranslation(svgEditor)
|
|
|
|
const { svgCanvas } = svgEditor
|
|
|
|
const imgLibs = [
|
|
{
|
|
name: svgEditor.i18next.t(`${name}:imgLibs_0_name`),
|
|
url: 'extensions/ext-imagelib/index.html',
|
|
description: svgEditor.i18next.t(`${name}:imgLibs_0_description`)
|
|
}
|
|
]
|
|
|
|
const allowedImageLibOrigins = imgLibs.map(({ url }) => {
|
|
try {
|
|
return new URL(url).origin
|
|
} catch (err) {
|
|
return location.origin
|
|
}
|
|
})
|
|
|
|
/**
|
|
*
|
|
* @returns {void}
|
|
*/
|
|
const closeBrowser = () => {
|
|
$id('imgbrowse_holder').style.display = 'none'
|
|
document.activeElement.blur() // make sure focus is the body to correct issue #417
|
|
}
|
|
|
|
/**
|
|
* @param {string} url
|
|
* @returns {void}
|
|
*/
|
|
const importImage = (url) => {
|
|
const newImage = svgCanvas.addSVGElementsFromJson({
|
|
element: 'image',
|
|
attr: {
|
|
x: 0,
|
|
y: 0,
|
|
width: 0,
|
|
height: 0,
|
|
id: svgCanvas.getNextId(),
|
|
style: 'pointer-events:inherit'
|
|
}
|
|
})
|
|
svgCanvas.clearSelection()
|
|
svgCanvas.addToSelection([newImage])
|
|
svgCanvas.setImageURL(url)
|
|
}
|
|
|
|
const pending = {}
|
|
|
|
let mode = 's'
|
|
let multiArr = []
|
|
let transferStopped = false
|
|
let preview; let submit
|
|
|
|
/**
|
|
* Contains the SVG to insert.
|
|
* @typedef {PlainObject} ImageLibMessage
|
|
* @property {"imagelib"} namespace Required to distinguish from any other messages of app.
|
|
* @property {string} href Set to same value as previous `ImageLibMetaMessage` `id`.
|
|
* @property {string} data The response (as an SVG string or URL)
|
|
*/
|
|
|
|
/**
|
|
* Used for setting meta-data before images are retrieved.
|
|
* @typedef {PlainObject} ImageLibMetaMessage
|
|
* @property {"imagelib"} namespace Required to distinguish from any other messages of app.
|
|
* @property {string} name If the subsequent response is an SVG string or if `preview_url`
|
|
* is present, will be used as the title for the preview image. When an
|
|
* SVG string is present, will default to the first `<title>`'s contents or
|
|
* "(SVG #<Length of response>)" if none is present. Otherwise, if `preview_url`
|
|
* is present, will default to the empty string. Though `name` may be falsy,
|
|
* it is always expected to be present for meta messages.
|
|
* @property {string} id Identifier (the expected `href` for a subsequent response message);
|
|
* used for ensuring the subsequent response can be tied to this `ImageLibMetaMessage` object.
|
|
* @property {string} [preview_url] When import mode is multiple, used to set an image
|
|
* source along with the name/title. If the subsequent response is an SVG string
|
|
* and there is no `preview_url`, the default will just be to show the
|
|
* name/title. If the response is not an SVG string, the default will be to
|
|
* show that response (i.e., the URL).
|
|
* @property {string} entry Set automatically with div holding retrieving
|
|
* message (until ready to delete)
|
|
* @todo Should use a separate Map instead of `entry`
|
|
*/
|
|
|
|
/**
|
|
* @param {PlainObject} cfg
|
|
* @param {string} cfg.origin
|
|
* @param {ImageLibMetaMessage|ImageLibMessage|string} cfg.data String is deprecated when parsed to JSON `ImageLibMessage`
|
|
* @returns {void}
|
|
*/
|
|
async function onMessage ({ origin, data }) {
|
|
let response = data
|
|
if (!response || !['string', 'object'].includes(typeof response)) {
|
|
// Do nothing
|
|
return
|
|
}
|
|
let id
|
|
let type
|
|
try {
|
|
// Todo: This block can be removed (and the above check changed to
|
|
// insist on an object) if embedAPI moves away from a string to
|
|
// an object (if IE9 support not needed)
|
|
response = typeof response === 'object' ? response : JSON.parse(response)
|
|
if (response.namespace !== 'imagelib') {
|
|
return
|
|
}
|
|
if (!allowedImageLibOrigins.includes('*') && !allowedImageLibOrigins.includes(origin)) {
|
|
// Todo: Surface this error to user?
|
|
console.error(`Origin ${origin} not whitelisted for posting to ${window.origin}`)
|
|
return
|
|
}
|
|
const hasName = 'name' in response
|
|
const hasHref = 'href' in response
|
|
|
|
if (!hasName && transferStopped) {
|
|
transferStopped = false
|
|
return
|
|
}
|
|
|
|
if (hasHref) {
|
|
id = response.href
|
|
response = response.data
|
|
}
|
|
|
|
// Hide possible transfer dialog box
|
|
if (document.querySelector('se-elix-alert-dialog')) {
|
|
document.querySelector('se-elix-alert-dialog').remove()
|
|
}
|
|
type = hasName
|
|
? 'meta'
|
|
: response.charAt(0)
|
|
} catch (e) {
|
|
// This block is for backward compatibility (for IAN and Openclipart);
|
|
// should otherwise return
|
|
if (typeof response === 'string') {
|
|
const char1 = response.charAt(0)
|
|
|
|
if (char1 !== '{' && transferStopped) {
|
|
transferStopped = false
|
|
return
|
|
}
|
|
|
|
if (char1 === '|') {
|
|
const secondpos = response.indexOf('|', 1)
|
|
id = response.substr(1, secondpos - 1)
|
|
response = response.substr(secondpos + 1)
|
|
type = response.charAt(0)
|
|
}
|
|
}
|
|
}
|
|
|
|
let entry; let curMeta; let svgStr; let imgStr
|
|
switch (type) {
|
|
case 'meta': {
|
|
// Metadata
|
|
transferStopped = false
|
|
curMeta = response
|
|
|
|
// Should be safe to add dynamic property as passed metadata
|
|
pending[curMeta.id] = curMeta // lgtm [js/remote-property-injection]
|
|
|
|
const name = (curMeta.name || 'file')
|
|
|
|
const message = svgEditor.i18next.t('notification.retrieving').replace('%s', name)
|
|
|
|
if (mode !== 'm') {
|
|
await seConfirm(message)
|
|
transferStopped = true
|
|
} else {
|
|
entry = document.createElement('div')
|
|
entry.textContent = message
|
|
entry.dataset.id = curMeta.id
|
|
preview.appendChild(entry)
|
|
curMeta.entry = entry
|
|
}
|
|
|
|
return
|
|
}
|
|
case '<':
|
|
svgStr = true
|
|
break
|
|
case 'd': {
|
|
if (response.startsWith('data:image/svg+xml')) {
|
|
const pre = 'data:image/svg+xml;base64,'
|
|
const src = response.substring(pre.length)
|
|
response = decode64(src)
|
|
svgStr = true
|
|
break
|
|
} else if (response.startsWith('data:image/')) {
|
|
imgStr = true
|
|
break
|
|
}
|
|
}
|
|
// Else fall through
|
|
default:
|
|
// TODO: See if there's a way to base64 encode the binary data stream
|
|
// Assume it's raw image data
|
|
// importImage(str);
|
|
|
|
// Don't give warning as postMessage may have been used by something else
|
|
if (mode !== 'm') {
|
|
closeBrowser()
|
|
} else {
|
|
pending[id].entry.remove()
|
|
}
|
|
// await alert('Unexpected data was returned: ' + response, function() {
|
|
// if (mode !== 'm') {
|
|
// closeBrowser();
|
|
// } else {
|
|
// pending[id].entry.remove();
|
|
// }
|
|
// });
|
|
return
|
|
}
|
|
|
|
switch (mode) {
|
|
case 's':
|
|
// Import one
|
|
if (svgStr) {
|
|
svgEditor.svgCanvas.importSvgString(response)
|
|
} else if (imgStr) {
|
|
importImage(response)
|
|
}
|
|
closeBrowser()
|
|
break
|
|
case 'm': {
|
|
// Import multiple
|
|
multiArr.push([(svgStr ? 'svg' : 'img'), response])
|
|
curMeta = pending[id]
|
|
let title
|
|
if (svgStr) {
|
|
if (curMeta?.name) {
|
|
title = curMeta.name
|
|
} else {
|
|
// Try to find a title
|
|
// `dropXMLInternalSubset` is to help prevent the billion laughs attack
|
|
const xml = new DOMParser().parseFromString(dropXMLInternalSubset(response), 'text/xml').documentElement // lgtm [js/xml-bomb]
|
|
title = xml.querySelector('title').textContent || '(SVG #' + response.length + ')'
|
|
}
|
|
if (curMeta) {
|
|
Array.from(preview.children).forEach(function (element) {
|
|
if (element.dataset.id === id) {
|
|
if (curMeta.preview_url) {
|
|
const img = document.createElement('img')
|
|
img.src = curMeta.preview_url
|
|
const span = document.createElement('span')
|
|
span.appendChild(img)
|
|
element.append(span)
|
|
} else {
|
|
element.textContent = title
|
|
}
|
|
submit.removeAttribute('disabled')
|
|
}
|
|
})
|
|
} else {
|
|
const div = document.createElement('div')
|
|
div.textContent = title
|
|
preview.appendChild(div)
|
|
submit.removeAttribute('disabled')
|
|
}
|
|
} else {
|
|
if (curMeta?.preview_url) {
|
|
title = curMeta.name || ''
|
|
entry = document.createElement('span')
|
|
const img = document.createElement('img')
|
|
img.src = curMeta.preview_url
|
|
entry.appendChild(img)
|
|
entry.appendChild(document.createTextNode(title))
|
|
} else {
|
|
entry = document.createElement('img')
|
|
entry.src = response
|
|
}
|
|
|
|
if (curMeta) {
|
|
Array.from(preview.children).forEach(function (element) {
|
|
if (element.dataset.id === id) {
|
|
element.appendChild(entry)
|
|
submit.removeAttribute('disabled')
|
|
}
|
|
})
|
|
} else {
|
|
const div = document.createElement('div')
|
|
div.appendChild(entry)
|
|
preview.appendChild(div)
|
|
submit.removeAttribute('disabled')
|
|
}
|
|
}
|
|
break
|
|
} case 'o': {
|
|
// Open
|
|
if (!svgStr) { break }
|
|
closeBrowser()
|
|
const ok = await svgEditor.openPrep()
|
|
if (!ok) { return }
|
|
svgCanvas.clear()
|
|
svgCanvas.setSvgString(response)
|
|
// updateCanvas();
|
|
break
|
|
}
|
|
}
|
|
}
|
|
|
|
// Receive `postMessage` data
|
|
window.addEventListener('message', onMessage, true)
|
|
|
|
const insertAfter = (referenceNode, newNode) => {
|
|
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling)
|
|
}
|
|
|
|
const toggleMultiLoop = () => {
|
|
multiArr.forEach(function (item, i) {
|
|
const type = item[0]
|
|
const data = item[1]
|
|
if (type === 'svg') {
|
|
svgCanvas.importSvgString(data)
|
|
} else {
|
|
importImage(data)
|
|
}
|
|
svgCanvas.moveSelectedElements(i * 20, i * 20, false)
|
|
})
|
|
while (preview.firstChild) { preview.removeChild(preview.firstChild) }
|
|
multiArr = []
|
|
$id('imgbrowse_holder').style.display = 'none'
|
|
}
|
|
|
|
/**
|
|
* @param {boolean} show
|
|
* @returns {void}
|
|
*/
|
|
const toggleMulti = (show) => {
|
|
$id('lib_framewrap').style.right = (show ? 200 : 10)
|
|
$id('imglib_opts').style.right = (show ? 200 : 10)
|
|
if (!preview) {
|
|
preview = document.createElement('div')
|
|
preview.setAttribute('id', 'imglib_preview')
|
|
preview.setAttribute('style', 'position: absolute;top: 45px;right: 10px;width: 180px;bottom: 45px;background: #fff;overflow: auto;')
|
|
insertAfter($id('lib_framewrap'), preview)
|
|
|
|
submit = document.createElement('button')
|
|
submit.setAttribute('content', 'Import selected')
|
|
submit.setAttribute('disabled', true)
|
|
submit.textContent = 'Import selected'
|
|
submit.setAttribute('style', 'position: absolute;bottom: 10px;right: -10px;')
|
|
$id('imgbrowse').appendChild(submit)
|
|
$click(submit, toggleMultiLoop)
|
|
}
|
|
submit.style.display = (show) ? 'block' : 'none'
|
|
preview.style.display = (show) ? 'block' : 'none'
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @returns {void}
|
|
*/
|
|
const showBrowser = () => {
|
|
let browser = $id('imgbrowse')
|
|
if (!browser) {
|
|
const div = document.createElement('div')
|
|
div.id = 'imgbrowse_holder'
|
|
div.innerHTML = '<div id=imgbrowse class=toolbar_button></div>'
|
|
insertAfter($svgEditor, div)
|
|
browser = $id('imgbrowse')
|
|
|
|
const allLibs = svgEditor.i18next.t(`${name}:select_lib`)
|
|
|
|
const divFrameWrap = document.createElement('div')
|
|
divFrameWrap.id = 'lib_framewrap'
|
|
|
|
const libOpts = document.createElement('ul')
|
|
libOpts.id = 'imglib_opts'
|
|
browser.append(libOpts)
|
|
const frame = document.createElement('iframe')
|
|
frame.src = 'javascript:0'
|
|
frame.style.display = 'none'
|
|
divFrameWrap.append(frame)
|
|
browser.prepend(divFrameWrap)
|
|
|
|
const header = document.createElement('h1')
|
|
browser.prepend(header)
|
|
header.textContent = allLibs
|
|
header.setAttribute('style', 'position: absolute;top: 0px;left: 0px;width: 100%;')
|
|
|
|
const button = document.createElement('button')
|
|
button.innerHTML = svgEditor.i18next.t('common.cancel')
|
|
browser.appendChild(button)
|
|
$click(button, function () {
|
|
$id('imgbrowse_holder').style.display = 'none'
|
|
})
|
|
button.setAttribute('style', 'position: absolute;top: 5px;right: 10px;')
|
|
|
|
const leftBlock = document.createElement('span')
|
|
leftBlock.setAttribute('style', 'position: absolute;top: 5px;left: 10px;display: inline-flex;')
|
|
browser.appendChild(leftBlock)
|
|
|
|
const back = document.createElement('button')
|
|
back.style.visibility = 'hidden'
|
|
back.innerHTML = `<img class="svg_icon" src="${imgPath}/library.svg" alt="icon" width="16" height="16" />` + svgEditor.i18next.t(`${name}:show_list`)
|
|
leftBlock.appendChild(back)
|
|
$click(back, function () {
|
|
frame.setAttribute('src', 'about:blank')
|
|
frame.style.display = 'none'
|
|
libOpts.style.display = 'block'
|
|
header.textContent = allLibs
|
|
back.style.display = 'none'
|
|
})
|
|
back.setAttribute('style', 'margin-right: 5px;')
|
|
back.style.display = 'none'
|
|
|
|
const select = document.createElement('select')
|
|
select.innerHTML = '<select><option value=s>' +
|
|
svgEditor.i18next.t(`${name}:import_single`) + '</option><option value=m>' +
|
|
svgEditor.i18next.t(`${name}:import_multi`) + '</option><option value=o>' +
|
|
svgEditor.i18next.t(`${name}:open`) + '</option>'
|
|
leftBlock.appendChild(select)
|
|
select.addEventListener('change', function () {
|
|
mode = this.value
|
|
switch (mode) {
|
|
case 's':
|
|
case 'o':
|
|
toggleMulti(false)
|
|
break
|
|
|
|
case 'm':
|
|
// Import multiple
|
|
toggleMulti(true)
|
|
break
|
|
}
|
|
})
|
|
select.setAttribute('style', 'margin-top: 10px;')
|
|
|
|
imgLibs.forEach(function ({ name, url, description }) {
|
|
const li = document.createElement('li')
|
|
libOpts.appendChild(li)
|
|
li.textContent = name
|
|
$click(li, function () {
|
|
frame.setAttribute('src', url)
|
|
frame.style.display = 'block'
|
|
header.textContent = name
|
|
libOpts.style.display = 'none'
|
|
back.style.display = 'block'
|
|
})
|
|
const span = document.createElement('span')
|
|
span.textContent = description
|
|
li.appendChild(span)
|
|
})
|
|
} else {
|
|
$id('imgbrowse_holder').style.display = 'block'
|
|
}
|
|
}
|
|
|
|
return {
|
|
svgicons: 'ext-imagelib.xml',
|
|
callback () {
|
|
// Add the button and its handler(s)
|
|
const buttonTemplate = document.createElement('template')
|
|
const key = name + ':buttons.0.title'
|
|
buttonTemplate.innerHTML = `
|
|
<se-menu-item id="tool_imagelib" label="${key}" src="library.svg"></se-menu-item>
|
|
`
|
|
insertAfter($id('tool_export'), buttonTemplate.content.cloneNode(true))
|
|
$click($id('tool_imagelib'), () => {
|
|
showBrowser()
|
|
})
|
|
|
|
const style = document.createElement('style')
|
|
style.textContent = '#imgbrowse_holder {' +
|
|
'position: absolute;' +
|
|
'top: 0;' +
|
|
'left: 0;' +
|
|
'width: 100%;' +
|
|
'height: 100%;' +
|
|
'background-color: rgba(0, 0, 0, .5);' +
|
|
'z-index: 5;' +
|
|
'}' +
|
|
'#imgbrowse {' +
|
|
'position: absolute;' +
|
|
'top: 25px;' +
|
|
'left: 25px;' +
|
|
'right: 25px;' +
|
|
'bottom: 25px;' +
|
|
'min-width: 300px;' +
|
|
'min-height: 200px;' +
|
|
'background: #5a6162;' +
|
|
'border: 1px outset #777;' +
|
|
'}' +
|
|
'#imgbrowse h1 {' +
|
|
'font-size: 20px;' +
|
|
'margin: .4em;' +
|
|
'text-align: center;' +
|
|
'}' +
|
|
'#lib_framewrap,' +
|
|
'#imgbrowse > ul {' +
|
|
'position: absolute;' +
|
|
'top: 45px;' +
|
|
'left: 10px;' +
|
|
'right: 10px;' +
|
|
'bottom: 10px;' +
|
|
'background: white;' +
|
|
'margin: 0;' +
|
|
'padding: 0;' +
|
|
'}' +
|
|
'#imgbrowse > ul {' +
|
|
'overflow: auto;' +
|
|
'}' +
|
|
'#imgbrowse > div {' +
|
|
'border: 1px solid #666;' +
|
|
'}' +
|
|
'#imglib_preview > div {' +
|
|
'padding: 5px;' +
|
|
'font-size: 12px;' +
|
|
'}' +
|
|
'#imglib_preview img {' +
|
|
'display: block;' +
|
|
'margin: 0 auto;' +
|
|
'max-height: 100px;' +
|
|
'}' +
|
|
'#imgbrowse li {' +
|
|
'list-style: none;' +
|
|
'padding: .5em;' +
|
|
'background: #E8E8E8;' +
|
|
'border-bottom: 1px solid #5a6162;' +
|
|
'line-height: 1.2em;' +
|
|
'font-style: sans-serif;' +
|
|
'}' +
|
|
'#imgbrowse li > span {' +
|
|
'color: #666;' +
|
|
'font-size: 15px;' +
|
|
'display: block;' +
|
|
'}' +
|
|
'#imgbrowse li:hover {' +
|
|
'background: #FFC;' +
|
|
'cursor: pointer;' +
|
|
'}' +
|
|
'#imgbrowse iframe {' +
|
|
'width: 100%;' +
|
|
'height: 100%;' +
|
|
'border: 0;' +
|
|
'}'
|
|
document.head.appendChild(style)
|
|
}
|
|
}
|
|
}
|
|
}
|