|
@ -74,7 +74,10 @@ const { height } = dom; |
|
|
const mathEditorRef = ref(); |
|
|
const mathEditorRef = ref(); |
|
|
const contextMenuRef = ref(); |
|
|
const contextMenuRef = ref(); |
|
|
const editorRef = ref(); |
|
|
const editorRef = ref(); |
|
|
const highLightBgColor = 'bg-orange-500'; |
|
|
const selectedElementClass = ''; |
|
|
|
|
|
const selectedElementHighLightClass = 'bg-gray-300'; |
|
|
|
|
|
const mspaceClass = 'bg-blue-200'; |
|
|
|
|
|
const mspaceHighLightClass = 'bg-red-500'; |
|
|
|
|
|
|
|
|
const contextmenu = (event) => { |
|
|
const contextmenu = (event) => { |
|
|
event.preventDefault(); |
|
|
event.preventDefault(); |
|
@ -82,7 +85,10 @@ const contextmenu = (event) => { |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const dblclick = (event) => { |
|
|
const dblclick = (event) => { |
|
|
editorRef.value.show(event.srcElement); |
|
|
const tagName = event.target.tagName.toLowerCase(); |
|
|
|
|
|
if (tagName === 'mi' || tagName === 'mo') { |
|
|
|
|
|
editorRef.value.show(event.srcElement); |
|
|
|
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const mouseover = (event) => { |
|
|
const mouseover = (event) => { |
|
@ -91,7 +97,11 @@ const mouseover = (event) => { |
|
|
if (tagName === 'math' || tagName === 'mspace') { |
|
|
if (tagName === 'math' || tagName === 'mspace') { |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
event.target.className = highLightBgColor; |
|
|
if (tagName === 'mo' && event.target.innerHTML === '-') { |
|
|
|
|
|
event.target.style.paddingTop = 5; |
|
|
|
|
|
event.target.style.paddingBottom = 5; |
|
|
|
|
|
} |
|
|
|
|
|
event.target.className = selectedElementHighLightClass; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const mouseout = (event) => { |
|
|
const mouseout = (event) => { |
|
@ -100,14 +110,14 @@ const mouseout = (event) => { |
|
|
if (tagName === 'math' || tagName === 'mspace') { |
|
|
if (tagName === 'math' || tagName === 'mspace') { |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
event.target.className = ''; |
|
|
event.target.className = selectedElementClass; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const dragover = (event) => { |
|
|
const dragover = (event) => { |
|
|
event.preventDefault(); |
|
|
event.preventDefault(); |
|
|
const tagName = event.target.tagName.toLowerCase(); |
|
|
const tagName = event.target.tagName.toLowerCase(); |
|
|
if (tagName === 'mspace') { |
|
|
if (tagName === 'mspace') { |
|
|
event.target.className = 'bg-red-900'; |
|
|
event.target.className = mspaceHighLightClass; |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
@ -117,7 +127,7 @@ const dragleave = (event) => { |
|
|
if (tagName === 'math') { |
|
|
if (tagName === 'math') { |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
event.target.className = ''; |
|
|
event.target.className = mspaceClass; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const drop = (event) => { |
|
|
const drop = (event) => { |
|
@ -126,7 +136,7 @@ const drop = (event) => { |
|
|
if (tagName === 'math') { |
|
|
if (tagName === 'math') { |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
event.target.outerHTML = event.target.outerHTML + event.dataTransfer.getData('math'); |
|
|
event.target.outerHTML = event.dataTransfer.getData('math'); |
|
|
event.target.className = ''; |
|
|
event.target.className = ''; |
|
|
setTimeout(refresh, 100); |
|
|
setTimeout(refresh, 100); |
|
|
}; |
|
|
}; |
|
@ -142,24 +152,22 @@ const init = () => { |
|
|
|
|
|
|
|
|
const refresh = () => { |
|
|
const refresh = () => { |
|
|
setTimeout(() => { |
|
|
setTimeout(() => { |
|
|
//zoomLevel = Tools.isEmpty(zoomLevel) ? ZoomLevelMap[props.zoom] : zoomLevel; |
|
|
const w = 8; |
|
|
//const w = zoomLevel > 10 ? 10 : zoomLevel > 8 ? 8 : zoomLevel > 6 ? 6 : zoomLevel > 4 ? 4 : 2; |
|
|
|
|
|
const w = 2; |
|
|
|
|
|
const mspaces = mathEditorRef.value.getElementsByTagName('mspace'); |
|
|
const mspaces = mathEditorRef.value.getElementsByTagName('mspace'); |
|
|
for (const mspace of mspaces) { |
|
|
for (const mspace of mspaces) { |
|
|
let h = 30; |
|
|
let h = 30; |
|
|
let element = null; |
|
|
let element = null; |
|
|
const position = mspace.getAttribute('position'); |
|
|
const position = mspace.getAttribute('position'); |
|
|
if (position === 'left') { |
|
|
if (position === 'right') { |
|
|
element = mspace.nextElementSibling; |
|
|
|
|
|
} else if (position === 'right') { |
|
|
|
|
|
element = mspace.previousElementSibling; |
|
|
element = mspace.previousElementSibling; |
|
|
|
|
|
} else { |
|
|
|
|
|
element = mspace.nextElementSibling; |
|
|
} |
|
|
} |
|
|
if (element) { |
|
|
if (element) { |
|
|
h = window.Math.ceil(height(element)); |
|
|
h = window.Math.ceil(height(element)); |
|
|
} |
|
|
} |
|
|
h = h > 20 ? h : 20; |
|
|
h = h > 20 ? h : 20; |
|
|
mspace.className = highLightBgColor; |
|
|
mspace.className = mspaceClass; |
|
|
mspace.setAttribute('width', w + 'px'); |
|
|
mspace.setAttribute('width', w + 'px'); |
|
|
mspace.setAttribute('height', h + 'px'); |
|
|
mspace.setAttribute('height', h + 'px'); |
|
|
} |
|
|
} |
|
|