From 9e62f0371f66cc4f2aa275f958f16a9443b108b7 Mon Sep 17 00:00:00 2001 From: Hsieh Chin Fan Date: Tue, 8 Oct 2024 17:33:26 +0800 Subject: chore: apply standardjs with trailing comma --- src/Layout.mjs | 8 +-- src/MenuItem.mjs | 46 +++++++++--------- src/dumbyUtils.mjs | 36 ++++++++------ src/dumbymap.mjs | 44 ++++++++--------- src/editor.mjs | 140 +++++++++++++++++++++++++---------------------------- src/utils.mjs | 8 +-- 6 files changed, 140 insertions(+), 142 deletions(-) (limited to 'src') diff --git a/src/Layout.mjs b/src/Layout.mjs index 6bb6282..c5276b4 100644 --- a/src/Layout.mjs +++ b/src/Layout.mjs @@ -55,7 +55,7 @@ export class SideBySide extends Layout { const draggable = new PlainDraggable(bar, { handle, - containment: { left: '25%', top: 0, right: '75%', height: 0 } + containment: { left: '25%', top: 0, right: '75%', height: 0 }, }) draggable.draggableCursor = 'grab' @@ -110,7 +110,7 @@ export class Overlay extends Layout { addDraggable = element => { // Make sure current element always on top const siblings = Array.from( - element.parentElement?.querySelectorAll(':scope > *') ?? [] + element.parentElement?.querySelectorAll(':scope > *') ?? [], ) let popTimer = null element.onmouseover = () => { @@ -135,7 +135,7 @@ export class Overlay extends Layout { top, left, handle: draggablePart, - snap: { x: { step: 20 }, y: { step: 20 } } + snap: { x: { step: 20 }, y: { step: 20 } }, }) // FIXME use pure CSS to hide utils @@ -215,7 +215,7 @@ export class Overlay extends Layout { animateRectTransition( wrapper, { left: originLeft, top: originTop }, - { resume: true, duration: 300 } + { resume: true, duration: 300 }, ).finished.finally(() => this.addDraggable(wrapper)) // Trivial case: diff --git a/src/MenuItem.mjs b/src/MenuItem.mjs index d580cb3..0fea539 100644 --- a/src/MenuItem.mjs +++ b/src/MenuItem.mjs @@ -81,9 +81,9 @@ export const pickMapItem = ({ utils }) => onclick: () => { map.classList.add('focus') map.scrollIntoView({ behavior: 'smooth' }) - } - }) - ) + }, + }), + ), }) /** @@ -118,10 +118,10 @@ export const pickBlockItem = ({ blocks, utils }) => // UX: remove menu after user select/deselect blocks const submenu = e.target.closest('.sub-menu') submenu.onmouseleave = () => { submenu.closest('.menu').style.display = 'none' } - } + }, }) - } - ) + }, + ), }) /** @@ -138,14 +138,14 @@ export const pickLayoutItem = ({ container, layouts }) => layout => new Item({ text: layout.name, - onclick: () => container.setAttribute('data-layout', layout.name) - }) + onclick: () => container.setAttribute('data-layout', layout.name), + }), ), new Item({ innerHTML: 'More...', - style: 'padding: 0;' - }) - ] + style: 'padding: 0;', + }), + ], }) /** @@ -174,7 +174,7 @@ export const addGeoLink = ({ utils }, range) => range.deleteContents() range.insertNode(anchor) } - } + }, }) /** @@ -195,7 +195,7 @@ export class Suggestion extends Item { this.onmouseover = () => { Array.from(this.parentElement?.children)?.forEach(s => - s.classList.remove('focus') + s.classList.remove('focus'), ) this.classList.add('focus') } @@ -244,12 +244,12 @@ export const renderResults = ({ modal, modalContent }, map) => success: 'green', fail: 'red', skip: 'black', - stop: 'chocolate' + stop: 'chocolate', }[result.state] ?? 'black' printObject( result, modalContent, - `${result.func.name} ${result.state}` + `${result.func.name} ${result.state}`, ) } @@ -258,7 +258,7 @@ export const renderResults = ({ modal, modalContent }, map) => prepareHeading.textContent = 'Prepare Steps' modalContent.appendChild(prepareHeading) const prepareSteps = map.renderer.results.filter( - r => r.type === 'prepare' + r => r.type === 'prepare', ) prepareSteps.forEach(printDetails) @@ -268,7 +268,7 @@ export const renderResults = ({ modal, modalContent }, map) => modalContent.appendChild(renderHeading) const renderSteps = map.renderer.results.filter(r => r.type === 'render') renderSteps.forEach(printDetails) - } + }, }) /** @@ -326,7 +326,7 @@ function printObject (obj, parentElement, name = null) { export const toggleBlockFocus = block => new Item({ text: 'Toggle Focus', - onclick: () => block.classList.toggle('focus') + onclick: () => block.classList.toggle('focus'), }) /** @@ -337,7 +337,7 @@ export const toggleBlockFocus = block => export const toggleMapFocus = map => new Item({ text: 'Toggle Focus', - onclick: () => map.classList.toggle('focus') + onclick: () => map.classList.toggle('focus'), }) /** @@ -354,7 +354,7 @@ export const getCoordinatesByPixels = (map, xy) => const xyString = `[${x.toFixed(7)}, ${y.toFixed(7)}]` navigator.clipboard.writeText(xyString) window.alert(`${xyString} copied to clipboard`) - } + }, }) /** @@ -365,7 +365,7 @@ export const getCoordinatesByPixels = (map, xy) => export const restoreCamera = map => new Item({ text: 'Restore Camera', - onclick: () => map.renderer.restoreCamera() + onclick: () => map.renderer.restoreCamera(), }) /** @@ -387,6 +387,6 @@ export const addRefLink = (cm, refLinks) => } else { cm.replaceSelection(`[${selection}][${refLink.ref}]`) } - } - })) + }, + })), }) diff --git a/src/dumbyUtils.mjs b/src/dumbyUtils.mjs index 852e4c7..2efc3b1 100644 --- a/src/dumbyUtils.mjs +++ b/src/dumbyUtils.mjs @@ -6,7 +6,7 @@ import { insideWindow, insideParent } from './utils' * * @param {Boolean} reverse -- focus previous map */ -export function focusNextMap(reverse = false) { +export function focusNextMap (reverse = false) { const renderedList = this.utils.renderedMaps() const index = renderedList.findIndex(e => e.classList.contains('focus')) const nextIndex = (index + (reverse ? -1 : 1)) % renderedList.length @@ -21,13 +21,13 @@ export function focusNextMap(reverse = false) { * * @param {Boolean} reverse -- focus previous block */ -export function focusNextBlock(reverse = false) { +export function focusNextBlock (reverse = false) { const blocks = this.blocks.filter(b => b.checkVisibility({ contentVisibilityAuto: true, opacityProperty: true, - visibilityProperty: true - }) + visibilityProperty: true, + }), ) const index = blocks.findIndex(e => e.classList.contains('focus')) const nextIndex = (index + (reverse ? -1 : 1)) % blocks.length @@ -56,7 +56,7 @@ export const scrollToBlock = block => { /** * focusDelay. Delay of throttle, value changes by cases */ -export function focusDelay() { +export function focusDelay () { return window.window.getComputedStyle(this.showcase).display === 'none' ? 50 : 300 } @@ -65,7 +65,7 @@ export function focusDelay() { * * @param {Boolean} reverse -- Switch to previous one */ -export function switchToNextLayout(reverse = false) { +export function switchToNextLayout (reverse = false) { const layouts = this.layouts const currentLayoutName = this.container.getAttribute('data-layout') const currentIndex = layouts.map(l => l.name).indexOf(currentLayoutName) @@ -81,7 +81,7 @@ export function switchToNextLayout(reverse = false) { /** * removeBlockFocus. */ -export function removeBlockFocus() { +export function removeBlockFocus () { this.blocks.forEach(b => b.classList.remove('focus')) } @@ -94,7 +94,7 @@ export function removeBlockFocus() { const getMarkersFromMaps = link => { const maps = Array.from( link.closest('.Dumby') - .querySelectorAll('.mapclay[data-render="fulfilled"]') + .querySelectorAll('.mapclay[data-render="fulfilled"]'), ) return maps .filter(map => link.targets ? link.targets.includes(map.id) : true) @@ -105,7 +105,7 @@ const getMarkersFromMaps = link => { return map.querySelector(`.marker[title="${markerTitle}"]`) ?? renderer.addMarker({ xy: link.xy, - title: markerTitle + title: markerTitle, }) }) } @@ -122,7 +122,7 @@ const addLeaderLine = (link, target) => { end: target, hide: true, middleLabel: link.url.searchParams.get('text'), - path: 'magnet' + path: 'magnet', }) line.show('draw', { duration: 300 }) @@ -196,10 +196,10 @@ export const createDocLink = link => { end: target, middleLabel: LeaderLine.pathLabel({ text: label, - fontWeight: 'bold' + fontWeight: 'bold', }), hide: true, - path: 'magnet' + path: 'magnet', }) link.lines.push(line) line.show('draw', { duration: 300 }) @@ -229,7 +229,6 @@ const removeLeaderLines = link => { * @return {Function} function */ const updateMapCameraByMarker = xy => marker => { - console.log('update') const renderer = marker.closest('.mapclay')?.renderer renderer.updateCamera({ center: xy }, true) } @@ -244,10 +243,17 @@ const isAnchorVisible = anchor => { return insideWindow(anchor) && insideParent(anchor, mapContainer) } +/** + * addAnchorByPoint. + * + * @param {point} options.point -- object has {x, y} for window coordinates + * @param {HTMLElement} options.map + * @param {Function} options.validateAnchorName -- validate anchor name is OK to use + */ export const addAnchorByPoint = ({ point, map, - validateAnchorName = () => true + validateAnchorName = () => true, }) => { const rect = map.getBoundingClientRect() const [x, y] = map.renderer @@ -268,7 +274,7 @@ export const addAnchorByPoint = ({ map.renderer.addMarker({ xy: [x, y], title: `${map.id}@${x},${y}`, - type: 'circle' + type: 'circle', }) return { ref: anchorName, link } diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs index 1da5bb6..b02e783 100644 --- a/src/dumbymap.mjs +++ b/src/dumbymap.mjs @@ -17,7 +17,7 @@ const geoLinkSelector = 'a[href^="geo:"]' const layouts = [ new Layout({ name: 'normal' }), new SideBySide({ name: 'side-by-side' }), - new Overlay({ name: 'overlay' }) + new Overlay({ name: 'overlay' }), ] const mapCache = {} @@ -37,12 +37,12 @@ export const markdown2HTML = (container, mdContent) => { const md = MarkdownIt({ html: true, breaks: true, - linkify: true + linkify: true, }) .use(MarkdownItAnchor, { permalink: MarkdownItAnchor.permalink.linkInsideHeader({ - placement: 'before' - }) + placement: 'before', + }), }) .use(MarkdownItFootnote) .use(MarkdownItFrontMatter) @@ -58,11 +58,11 @@ export const markdown2HTML = (container, mdContent) => { match.text = `${x}${sep} ${y}` match.index += match.text.indexOf(x) + 1 return match - } + }, } const patterns = ['[', '(', '📍', '\uFF08', '@', 'geo:', 'twd'] patterns.forEach(prefix => - md.linkify.add(prefix, coordinateValue) + md.linkify.add(prefix, coordinateValue), ) // FIXME A better way to generate blocks @@ -133,7 +133,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => { ...utils, renderedMaps: () => Array.from( - container.querySelectorAll('.mapclay[data-render=fulfilled]') + container.querySelectorAll('.mapclay[data-render=fulfilled]'), ).sort((a, b) => a.style.order > b.style.order), setContextMenu: (menuCallback) => { const originalCallback = container.oncontextmenu @@ -145,8 +145,8 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => { } }, focusNextMap: throttle(utils.focusNextMap, utils.focusDelay), - switchToNextLayout: throttle(utils.switchToNextLayout, 300) - } + switchToNextLayout: throttle(utils.switchToNextLayout, 300), + }, } Object.entries(dumbymap.utils).forEach(([util, func]) => { dumbymap.utils[util] = func.bind(dumbymap) @@ -155,7 +155,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => { // LeaderLine {{{ Array.from(container.querySelectorAll(docLinkSelector)).filter( - utils.createDocLink + utils.createDocLink, ) // Add GeoLinks @@ -177,7 +177,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => { showcase.checkVisibility({ contentVisibilityAuto: true, opacityProperty: true, - visibilityProperty: true + visibilityProperty: true, }) if (focus) { @@ -217,12 +217,12 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => { // Resume rect from Semantic HTML to Showcase, with animation animateRectTransition(target, placeholder.getBoundingClientRect(), { duration: 300, - resume: true + resume: true, }) } else if (showcase.contains(target)) { // Check placeholder is inside Semantic HTML const placeholder = htmlHolder.querySelector( - `[data-placeholder="${target.id}"]` + `[data-placeholder="${target.id}"]`, ) if (!placeholder) { throw Error(`Cannot find placeholder for map "${target.id}"`) } @@ -234,7 +234,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => { // animation from Showcase to placeholder animateRectTransition(target, placeholder.getBoundingClientRect(), { - duration: 300 + duration: 300, }).finished.finally(afterAnimation) } }) @@ -277,7 +277,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => { attributes: true, attributeFilter: ['data-layout'], attributeOldValue: true, - characterDataOldValue: true + characterDataOldValue: true, }) onRemove(htmlHolder, () => layoutObserver.disconnect()) @@ -303,7 +303,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => { observer.observe(mapElement, { attributes: true, attributeFilter: ['class'], - attributeOldValue: true + attributeOldValue: true, }) onRemove(dumbymap.htmlHolder, () => { observer.disconnect() @@ -329,7 +329,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => { // Render each code block with "language-map" class const elementsWithMapConfig = Array.from( - container.querySelectorAll(mapBlockSelector) ?? [] + container.querySelectorAll(mapBlockSelector) ?? [], ) /** * updateAttributeByStep. @@ -338,7 +338,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => { */ const updateAttributeByStep = ({ results, target, steps }) => { let passNum = results.filter( - r => r.type === 'render' && r.state.match(/success|skip/) + r => r.type === 'render' && r.state.match(/success|skip/), ).length const total = steps.length passNum += `/${total}` @@ -367,9 +367,9 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => { ...config, aliases: { ...defaultAliases, - ...(config.aliases ?? {}) + ...(config.aliases ?? {}), }, - stepCallback: updateAttributeByStep + stepCallback: updateAttributeByStep, }) const render = renderWith(configConverter) let order = 0 @@ -422,7 +422,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => { } }) }, - delay ?? 1000 + delay ?? 1000, ) onRemove(htmlHolder, () => { clearTimeout(timer) @@ -497,7 +497,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => { } document.addEventListener('click', actionOutsideMenu) onRemove(htmlHolder, () => - document.removeEventListener('click', actionOutsideMenu) + document.removeEventListener('click', actionOutsideMenu), ) // }}} return Object.seal(dumbymap) diff --git a/src/editor.mjs b/src/editor.mjs index 3714327..55c6267 100644 --- a/src/editor.mjs +++ b/src/editor.mjs @@ -3,12 +3,12 @@ import { markdown2HTML, generateMaps } from './dumbymap' import { defaultAliases, parseConfigsFromYaml } from 'mapclay' import * as menuItem from './MenuItem' -import { shiftByWindow } from './utils.mjs' import { addAnchorByPoint } from './dumbyUtils.mjs' +import { shiftByWindow } from './utils.mjs' import LeaderLine from 'leader-line' // Set up Containers {{{ - +/** Variables about dumbymap and editor **/ const url = new URL(window.location) const context = document.querySelector('[data-mode]') const dumbyContainer = document.querySelector('.DumbyMap') @@ -27,7 +27,6 @@ const appendRefLink = ({ cm, ref, link }) => { refLinks.push({ ref, link }) } - /** * Watch for changes of editing mode * @@ -43,11 +42,10 @@ new window.MutationObserver(() => { }).observe(context, { attributes: true, attributeFilter: ['data-mode'], - attributeOldValue: true + attributeOldValue: true, }) - /** - * toggle editing mode + * toggleEditing: toggle editing mode */ const toggleEditing = () => { const mode = context.getAttribute('data-mode') @@ -55,9 +53,7 @@ const toggleEditing = () => { } // }}} // Set up EasyMDE {{{ - -// Content values for editor - +/** Contents for tutorial **/ const defaultContent = `
@@ -105,12 +101,13 @@ If you want know more, take a look at subjects below: [Editor]: #This%20is%20editor! "=>.editor" [subject]: placeholder` +/** Editor from EasyMDE **/ const editor = new EasyMDE({ element: textArea, initialValue: defaultContent, autosave: { enabled: true, - uniqueId: 'dumbymap' + uniqueId: 'dumbymap', }, indentWithTabs: false, lineNumbers: true, @@ -123,21 +120,21 @@ const editor = new EasyMDE({ map: 'Ctrl-Alt-M', debug: 'Ctrl-Alt-D', toggleUnorderedList: null, - toggleOrderedList: null + toggleOrderedList: null, }, toolbar: [ { name: 'roll', title: 'Roll a Dice', text: '\u{2684}', - action: () => addMapRandomlyByPreset() + action: () => addMapRandomlyByPreset(), }, { name: 'export', title: 'Export current page', text: '\u{1F4BE}', action: () => { - } + }, }, { name: 'hash', @@ -150,59 +147,59 @@ const editor = new EasyMDE({ window.location.search = '' navigator.clipboard.writeText(window.location.href) window.alert('URL updated in address bar, you can save current page as bookmark') - } + }, }, '|', { name: 'undo', title: 'Undo last editing', text: '\u27F2', - action: EasyMDE.undo + action: EasyMDE.undo, }, { name: 'redo', text: '\u27F3', title: 'Redo editing', - action: EasyMDE.redo + action: EasyMDE.redo, }, '|', { name: 'heading-1', text: 'H1', title: 'Big Heading', - action: EasyMDE['heading-1'] + action: EasyMDE['heading-1'], }, { name: 'heading-2', text: 'H2', title: 'Medium Heading', - action: EasyMDE['heading-2'] + action: EasyMDE['heading-2'], }, '|', { name: 'link', text: '\u{1F517}', title: 'Create Link', - action: EasyMDE.drawLink + action: EasyMDE.drawLink, }, { name: 'image', text: '\u{1F5BC}', title: 'Create Image', - action: EasyMDE.drawImage + action: EasyMDE.drawImage, }, '|', { name: 'Bold', text: '\u{1D401}', title: 'Bold', - action: EasyMDE.toggleBold + action: EasyMDE.toggleBold, }, { name: 'Italic', text: '\u{1D43C}', title: 'Italic', - action: EasyMDE.toggleItalic + action: EasyMDE.toggleItalic, }, '|', { @@ -213,13 +210,14 @@ const editor = new EasyMDE({ editor.value(defaultContent) refLinks = getRefLinks() updateDumbyMap() - } - } - ] + }, + }, + ], }) - +/** CodeMirror Instance **/ const cm = editor.codemirror +/** Ref Links **/ const getRefLinks = () => editor.value() .split('\n') .map(line => { @@ -244,7 +242,6 @@ const getStateFromHash = hash => { return {} } } - /** * get editor content from hash string * @@ -254,7 +251,9 @@ const getContentFromHash = hash => { const state = getStateFromHash(hash) return state.content } +/** Hash and Query Parameters in URL **/ const contentFromHash = getContentFromHash(window.location.hash) +window.location.hash = '' if (url.searchParams.get('content') === 'tutorial') { editor.value(defaultContent) @@ -263,12 +262,10 @@ if (url.searchParams.get('content') === 'tutorial') { editor.cleanup() editor.value(contentFromHash) } - -window.location.hash = '' - // }}} // Set up logic about editor content {{{ +/** Sync scroll from HTML to CodeMirror **/ const htmlOnScroll = (ele) => () => { if (textArea.dataset.scrollLine) return @@ -288,12 +285,11 @@ const htmlOnScroll = (ele) => () => { } } -// Sync CodeMirror LineNumber with HTML Contents new window.MutationObserver(() => { clearTimeout(dumbyContainer.timer) dumbyContainer.timer = setTimeout( () => delete dumbyContainer.dataset.scrollLine, - 50 + 50, ) const line = dumbyContainer.dataset.scrollLine @@ -306,7 +302,7 @@ new window.MutationObserver(() => { } }).observe(dumbyContainer, { attributes: true, - attributeFilter: ['data-scroll-line'] + attributeFilter: ['data-scroll-line'], }) const setScrollLine = () => { @@ -318,12 +314,12 @@ const setScrollLine = () => { } cm.on('scroll', setScrollLine) -// Sync HTML Contents with CodeMirror LineNumber +/** Sync scroll from CodeMirror to HTML **/ new window.MutationObserver(() => { clearTimeout(textArea.timer) textArea.timer = setTimeout( () => delete textArea.dataset.scrollLine, - 1000 + 1000, ) const line = textArea.dataset.scrollLine @@ -345,11 +341,9 @@ new window.MutationObserver(() => { dumbymap.htmlHolder.scrollBy(0, top - coords.top + 30) }).observe(textArea, { attributes: true, - attributeFilter: ['data-scroll-line'] + attributeFilter: ['data-scroll-line'], }) -markdown2HTML(dumbyContainer, editor.value()) - /** * addClassToCodeLines. Quick hack to style lines inside code block */ @@ -444,7 +438,7 @@ const menuForEditor = (event, menu) => { if (context.dataset.mode !== 'editing') { const switchToEditingMode = new menuItem.Item({ innerHTML: 'EDIT', - onclick: () => (context.dataset.mode = 'editing') + onclick: () => (context.dataset.mode = 'editing'), }) menu.appendChild(switchToEditingMode) } @@ -456,7 +450,7 @@ const menuForEditor = (event, menu) => { onclick: (event) => { const { ref, link } = addAnchorByPoint({ point: event, map, validateAnchorName }) appendRefLink({ cm, ref, link }) - } + }, }) menu.insertBefore(item, menu.firstChild) } @@ -468,7 +462,7 @@ const menuForEditor = (event, menu) => { const updateDumbyMap = () => { markdown2HTML(dumbyContainer, editor.value()) // debounceForMap(dumbyContainer, afterMapRendered) - dumbymap = generateMaps(dumbyContainer, { renderCallback }) + dumbymap = generateMaps(dumbyContainer, {}) // Set onscroll callback const htmlHolder = dumbymap.htmlHolder htmlHolder.onscroll = htmlOnScroll(htmlHolder) @@ -521,7 +515,7 @@ new window.MutationObserver(() => { } }).observe(menu, { attributes: true, - attributeFilter: ['style'] + attributeFilter: ['style'], }) document.body.append(menu) @@ -613,7 +607,7 @@ const getSuggestionsForOptions = (optionTyped, validOptions) => { let suggestOptions = [] const matchedOptions = validOptions.filter(o => - o.valueOf().toLowerCase().includes(optionTyped.toLowerCase()) + o.valueOf().toLowerCase().includes(optionTyped.toLowerCase()), ) if (matchedOptions.length > 0) { @@ -627,8 +621,8 @@ const getSuggestionsForOptions = (optionTyped, validOptions) => { new menuItem.Suggestion({ text: `${o.valueOf()}ⓘ`, replace: `${o.valueOf()}: `, - cm - }) + cm, + }), ) } // }}} @@ -647,7 +641,7 @@ const getSuggestionFromMapOption = option => { return new menuItem.Suggestion({ text, replace: `${option.valueOf()}: ${option.example ?? ''}`, - cm + cm, }) } // }}} @@ -663,7 +657,7 @@ const getSuggestionsFromAliases = option => return new menuItem.Suggestion({ text: `${alias}${valueString}`, replace: `${option.valueOf()}: ${valueString}`, - cm + cm, }) }) ?? [] // }}} @@ -694,7 +688,7 @@ const getSuggestions = anchor => { // Clear marks on text cm.findMarks({ ...anchor, ch: 0 }, { ...anchor, ch: text.length }).forEach( - m => m.clear() + m => m.clear(), ) // Mark user input invalid by case @@ -704,7 +698,7 @@ const getSuggestions = anchor => { .markText( { ...anchor, ch: 0 }, { ...anchor, ch: text.length }, - { className: 'invalid-input' } + { className: 'invalid-input' }, ) // Check if "use: " is set @@ -732,7 +726,7 @@ const getSuggestions = anchor => { .catch(_ => { markInputIsInvalid(lineWithRenderer) console.warn( - `Fail to get valid options from Renderer typed: ${renderer}` + `Fail to get valid options from Renderer typed: ${renderer}`, ) }) return [] @@ -765,7 +759,7 @@ const getSuggestions = anchor => { if (!valueTyped) { return [ getSuggestionFromMapOption(matchedOption), - ...getSuggestionsFromAliases(matchedOption) + ...getSuggestionsFromAliases(matchedOption), ].filter(s => s instanceof menuItem.Suggestion) } if (valueTyped && !isValidValue) { @@ -787,19 +781,19 @@ const getSuggestions = anchor => { new menuItem.Suggestion({ text: `use: ${renderer}ⓘ`, replace: `use: ${renderer}`, - cm - }) + cm, + }), ) return rendererSuggestions.length === 0 ? [] : [ - ...rendererSuggestions, - new menuItem.Item({ - innerHTML: 'More...', - className: ['suggestion'], - onclick: () => window.open('https://github.com/outdoorsafetylab/mapclay#renderer', '_blank') - }) - ] + ...rendererSuggestions, + new menuItem.Item({ + innerHTML: 'More...', + className: ['suggestion'], + onclick: () => window.open('https://github.com/outdoorsafetylab/mapclay#renderer', '_blank'), + }), + ] } return [] } @@ -943,7 +937,7 @@ new window.MutationObserver(mutaions => { }).observe(dumbyContainer, { attributes: true, attributeFilter: ['data-layout'], - attributeOldValue: true + attributeOldValue: true, }) // }}} @@ -954,7 +948,7 @@ const addMapRandomlyByPreset = () => { const yamlText = [ 'apply: dist/default.yml', 'width: 85%', - 'height: 200px' + 'height: 200px', ] const order = [ 'id', @@ -964,12 +958,12 @@ const addMapRandomlyByPreset = () => { 'height', 'center', 'XYZ', - 'zoom' + 'zoom', ] const aliasesEntries = Object.entries(aliasesForMapOptions) .filter(([key, _]) => order.includes(key) && - !yamlText.find(text => text.startsWith(key)) + !yamlText.find(text => text.startsWith(key)), ) if (aliasesEntries.length === 0) return @@ -997,12 +991,12 @@ const addMapRandomlyByPreset = () => { }) yamlText.sort((a, b) => - order.indexOf(a.split(':')[0]) > order.indexOf(b.split(':')[0]) + order.indexOf(a.split(':')[0]) > order.indexOf(b.split(':')[0]), ) const anchor = cm.getCursor() cm.replaceRange( '\n```map\n' + yamlText.join('\n') + '\n```\n', - anchor + anchor, ) } @@ -1068,6 +1062,7 @@ document.addEventListener('selectionchange', () => { } }) +/** Drag/Drop on map for new reference style link */ dumbyContainer.onmousedown = (e) => { // Check should start drag event for GeoLink const selection = document.getSelection() @@ -1087,14 +1082,13 @@ dumbyContainer.onmousedown = (e) => { lineEnd.style.cssText = `position: absolute; left: ${e.clientX}px; top: ${e.clientY}px;` document.body.appendChild(lineEnd) - menu.style.display = 'block' const line = new LeaderLine({ start: geoLink, end: lineEnd, - path: 'magnet' + path: 'magnet', }) - function onMouseMove(event) { + function onMouseMove (event) { lineEnd.style.left = event.clientX + 'px' lineEnd.style.top = event.clientY + 'px' line.position() @@ -1102,7 +1096,7 @@ dumbyContainer.onmousedown = (e) => { } dumbyContainer.onmousemove = onMouseMove - dumbyContainer.onmouseup = function(e) { + dumbyContainer.onmouseup = function (e) { dumbyContainer.onmousemove = null dumbyContainer.onmouseup = null line?.remove() @@ -1122,16 +1116,14 @@ dumbyContainer.onmousedown = (e) => { return } - const {ref, link} = refLink + const { ref, link } = refLink appendRefLink({ cm, ref, link }) if (selection === ref) { cm.replaceSelection(`[${selection}]`) } else { cm.replaceSelection(`[${selection}][${ref}]`) } - }; + } } dumbyContainer.ondragstart = () => false - -// vim: sw=2 ts=2 foldmethod=marker foldmarker={{{,}}} diff --git a/src/utils.mjs b/src/utils.mjs index dba023a..d408b3d 100644 --- a/src/utils.mjs +++ b/src/utils.mjs @@ -39,7 +39,7 @@ export const animateRectTransition = (element, rect, options = {}) => { width: w2, height: h2, left: x2, - top: y2 + top: y2, } = element.getBoundingClientRect() const rw = (w1 ?? w2) / w2 @@ -55,13 +55,13 @@ export const animateRectTransition = (element, rect, options = {}) => { const transform2 = `translate(${dx}px, ${dy}px) scale(${rw}, ${rh})` const keyframes = [ { transform: transform1, opacity: 1 }, - { transform: transform2, opacity: 0.3 } + { transform: transform2, opacity: 0.3 }, ] if (options.resume === true) keyframes.reverse() return element.animate(keyframes, { duration: options.duration ?? 500, - easing: 'ease-in-out' + easing: 'ease-in-out', }) } @@ -81,7 +81,7 @@ export function throttle (func, delay) { timerFlag = setTimeout( () => (timerFlag = null), - typeof delay === 'function' ? delay.call(context) : delay + typeof delay === 'function' ? delay.call(context) : delay, ) return func.call(context, ...args) -- cgit v1.2.3-70-g09d2