update

io.sc.engine.rule.core/src/main/java/io/sc/engine/rule/core/code/impl/support/processor/MathFormula.java

@@ -85,11 +85,64 @@ public class MathFormula {
     public static void main(String[] args)throws Exception {
         String xml ="<math>\n" +
                 "  <mspace/>\n" +
-                "  <mi>x</mi>\n" +
+                "  <mfrac>\n" +
+                "    <mrow>\n" +
+                "      <mspace/>\n" +
+                "      <mfrac>\n" +
+                "        <mrow>\n" +
+                "          <mspace/>\n" +
+                "          <mn>1</mn>\n" +
+                "          <mspace/>\n" +
+                "        </mrow>\n" +
+                "        <mrow>\n" +
+                "          <mspace/>\n" +
+                "          <mn>1</mn>\n" +
+                "          <mspace/>\n" +
+                "          <mo>+</mo>\n" +
+                "          <mspace/>\n" +
+                "          <msup>\n" +
+                "            <mrow>\n" +
+                "              <mspace/>\n" +
+                "              <mn>e</mn>\n" +
+                "              <mspace/>\n" +
+                "            </mrow>\n" +
+                "            <mrow>\n" +
+                "              <mspace/>\n" +
+                "              <mi>  主营业务增长率_Slope</mi>\n" +
+                "              <mspace/>\n" +
+                "              <mo>×</mo>\n" +
+                "              <mspace/>\n" +
+                "              <mi>(</mi>\n" +
+                "              <mspace/>\n" +
+                "              <mi> 主营业务增长率_Center</mi>\n" +
+                "              <mspace/>\n" +
+                "              <mo style=\"padding-top: 5px; padding-bottom: 5px;\">-</mo>\n" +
+                "              <mspace/>\n" +
+                "              <mi> 主营业务收入增长率</mi>\n" +
+                "              <mspace/>\n" +
+                "              <mi>)</mi>\n" +
+                "              <mspace/>\n" +
+                "            </mrow>\n" +
+                "          </msup>\n" +
+                "          <mspace/>\n" +
+                "        </mrow>\n" +
+                "      </mfrac>\n" +
+                "      <mspace/>\n" +
+                "      <mo style=\"padding-top: 5px; padding-bottom: 5px;\">-</mo>\n" +
+                "      <mspace/>\n" +
+                "      <mi> 主营业务增长率_LogitMeanAfterLmp</mi>\n" +
+                "      <mspace/>\n" +
+                "    </mrow>\n" +
+                "    <mrow>\n" +
+                "      <mspace/>\n" +
+                "      <mi> 主营业务增长率_LogitStDevAfterLmp</mi>\n" +
+                "      <mspace/>\n" +
+                "    </mrow>\n" +
+                "  </mfrac>\n" +
                 "  <mspace/>\n" +
-                "  <mo>+</mo>\n" +
+                "  <mo>×</mo>\n" +
                 "  <mspace/>\n" +
-                "  <mn>c</mn>\n" +
+                "  <mn>50</mn>\n" +
                 "  <mspace/>\n" +
                 "</math>";
         Reader reader = new StringReader(xml);

io.sc.engine.rule.core/src/main/java/io/sc/engine/rule/core/code/impl/support/processor/NumberRange.java

@@ -1,5 +1,6 @@
 package io.sc.engine.rule.core.code.impl.support.processor;
 
+import java.math.BigDecimal;
 import java.util.ArrayList;
 import java.util.List;
 
@@ -20,8 +21,8 @@ import com.fasterxml.jackson.core.type.TypeReference;
 @JsonIgnoreProperties(ignoreUnknown=true)
 public class NumberRange {
 	private Boolean minIncluded;
-	private Double min;
-	private Double max;
+	private BigDecimal min;
+	private BigDecimal max;
 	private Boolean maxIncluded;
 	private String value;
 	
@@ -218,16 +219,16 @@ public class NumberRange {
 	public void setMinIncluded(Boolean minIncluded) {
 		this.minIncluded = minIncluded;
 	}
-	public Double getMin() {
+	public BigDecimal getMin() {
 		return min;
 	}
-	public void setMin(Double min) {
+	public void setMin(BigDecimal min) {
 		this.min = min;
 	}
-	public Double getMax() {
+	public BigDecimal getMax() {
 		return max;
 	}
-	public void setMax(Double max) {
+	public void setMax(BigDecimal max) {
 		this.max = max;
 	}
 	public Boolean getMaxIncluded() {

io.sc.engine.rule.frontend/src/views/resources/designer/Processor.vue

@@ -723,6 +723,7 @@
               },
               type: 'w-grid',
               height: 300,
+              dbClickOperation: 'edit',
               autoFetchData: false,
               denseBody: true,
               draggable: true,
@@ -776,8 +777,8 @@
                     }
                   },
                 },
-                { width: 100, name: 'min', label: $t('minValue'), align: 'right', sortable: false },
-                { width: 100, name: 'max', label: $t('maxValue'), align: 'right', sortable: false },
+                { width: 150, name: 'min', label: $t('minValue'), align: 'right', sortable: false },
+                { width: 150, name: 'max', label: $t('maxValue'), align: 'right', sortable: false },
                 {
                   width: 60,
                   name: 'maxIncluded',
@@ -802,9 +803,9 @@
                   colsNum: 4,
                   fields: [
                     { name: 'uuid', label: 'uuid', hidden: true, colSpan: 4 },
-                    { name: 'min', label: $t('minValue'), type: 'text', colSpan: 3 },
+                    { name: 'min', label: $t('minValue'), type: 'number', colSpan: 3 },
                     { name: 'minIncluded', label: $t('include'), type: 'checkbox' },
-                    { name: 'max', label: $t('maxValue'), type: 'text', colSpan: 3 },
+                    { name: 'max', label: $t('maxValue'), type: 'number', colSpan: 3 },
                     { name: 'maxIncluded', label: $t('include'), type: 'checkbox' },
                     { name: 'value', label: $t('value'), type: 'number', colSpan: 3 },
                   ],
@@ -832,6 +833,7 @@
               },
               type: 'w-grid',
               height: 300,
+              dbClickOperation: 'edit',
               autoFetchData: false,
               denseBody: true,
               draggable: true,

io.sc.platform.core.frontend/src/platform/components/expression/editor/VariableEditor.vue

@@ -16,6 +16,7 @@
   >
     <w-code-mirror
       v-model="modelValueRef"
+      :toolbar="false"
       lang="java"
       :rows="2"
       :placeholder="true"

io.sc.platform.core.frontend/src/platform/components/expression/toolbar/Toolbar.vue

@@ -170,6 +170,7 @@ const zoomModelValueRef = defineModel('zoom', { type: Number, default: ZoomLevel
 
 const props = defineProps({
   sourceCodeEditor: { type: Object, default: undefined },
+  type: { type: String, default: 'math' },
 });
 
 const undoManager = new UndoManager();

io.sc.platform.core.frontend/src/platform/components/expression/toolbar/base/Const.vue

@@ -1,7 +1,7 @@
 <template>
   <q-btn :title="$t('math.toolbar.base.const')" stretch flat size="16px" padding="0px 10px" draggable="true" @dragstart="dragstart" @click="append">
     <math display="inline">
-      <mn>c</mn>
+      <mn>n</mn>
     </math>
   </q-btn>
 </template>

io.sc.platform.core.frontend/src/platform/components/form/elements/WCodeMirror.vue

@@ -66,7 +66,7 @@ import { sql } from '@codemirror/lang-sql';
 import { xml, xmlLanguage } from '@codemirror/lang-xml';
 
 import PlaceholderPlugin from './w-code-mirror/PlaceholderPlugin';
-import Toolbar from '@/platform/components/expression/toolbar/Toolbar.vue';
+import Toolbar from '@/platform/components/math/toolbar/Toolbar.vue';
 
 const modelValueRef = defineModel({ type: String, default: '' });
 

io.sc.platform.core.frontend/src/platform/components/index.ts

@@ -50,6 +50,7 @@ import WSelectAssigneeDialog from './workflow/WSelectAssigneeDialog.vue';
 
 import WEcharts from './echarts/WEcharts.vue';
 import WExpression from './expression/WExpression.vue';
+import WMath from './math/WMath.vue';
 
 import WHtmlA from './html/WHtmlA.vue';
 
@@ -105,6 +106,7 @@ export default {
 
     app.component('WEcharts', WEcharts);
     app.component('WExpression', WExpression);
+    app.component('WMath', WMath);
     app.component('WHtmlA', WHtmlA);
   },
 };
@@ -147,6 +149,7 @@ export {
   WSelectAssigneeDialog,
   WEcharts,
   WExpression,
+  WMath,
   WHtmlA,
 };
 

io.sc.platform.core.frontend/src/platform/components/math/WMath.vue

@@ -0,0 +1,282 @@
+<template>
+  <div v-show="showIfComputed" :class="readOnly ? '' : 'border border-gray-200'" style="min-width: 600px">
+    <div v-if="!readOnly" class="row py-1 border-b border-b-gray-200">
+      <Toolbar v-model="modelValueRef" v-model:zoom="zoomModelValueRef"></Toolbar>
+    </div>
+    <div style="overflow: auto">
+      <math
+        ref="mathEditorRef"
+        display="inline"
+        :class="`math p-2 select-none text-${zoom}`"
+        @contextmenu="contextmenu"
+        @mouseover="mouseover"
+        @mouseout="mouseout"
+        @dblclick="dblclick"
+        @dragover="dragover"
+        @dragleave="dragleave"
+        @drop="drop"
+      >
+      </math>
+    </div>
+    <ContextMenu ref="contextMenuRef" @changed="contentChanged"></ContextMenu>
+    <NumberEditorDialog ref="numberEditorDialogRef" @changed="contentChanged"></NumberEditorDialog>
+    <VariableEditorDialog ref="variableEditorDialogRef" :auto-completion="autoCompletion" @changed="contentChanged"></VariableEditorDialog>
+  </div>
+</template>
+<script setup lang="ts">
+import { onMounted, onUpdated, ref, computed, getCurrentInstance, watch } from 'vue';
+import { ZoomLevels } from '@/platform/components/math/utils/ZoomLevels';
+import { VueTools } from '@/platform';
+import Toolbar from './toolbar/Toolbar.vue';
+import ContextMenu from './context-menu/ContextMenu.vue';
+import NumberEditorDialog from './dialog/NumberEditorDialog.vue';
+import VariableEditorDialog from './dialog/VariableEditorDialog.vue';
+
+const props = defineProps({
+  readOnly: { type: Boolean, default: false },
+  required: { type: Boolean, default: false },
+  restore: { type: Boolean, default: false },
+  form: { type: Object, default: undefined },
+  onChange: {
+    type: Function,
+    default: () => {},
+  },
+  showIf: {
+    type: Function,
+    default: () => {
+      return true;
+    },
+  },
+  requiredIf: {
+    type: Function,
+    default: undefined,
+  },
+  readOnlyIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  disableIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  autoCompletion: {
+    type: Function,
+    default: undefined,
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const zoomModelValueRef = defineModel('zoom', { type: Number, default: ZoomLevels.defaultLevel });
+
+const mathEditorRef = ref();
+const contextMenuRef = ref();
+const numberEditorDialogRef = ref();
+const variableEditorDialogRef = ref();
+const selectedElementClass = '';
+const selectedElementHighLightClass = 'bg-gray-300';
+const mathMsSpaceClass = 'mathMsSpaceClass';
+const mathMsSpaceHighLightClass = 'mathMsSpaceHighLightClass';
+
+const showIfComputed = computed(() => {
+  return props.showIf({
+    value: modelValueRef.value.innerHTML,
+    form: props.form,
+  });
+});
+
+const requiredIfComputed = computed(() => {
+  if (props.requiredIf) {
+    return (
+      props.requiredIf({
+        value: modelValueRef.value.innerHTML,
+        form: props.form,
+      }) || false
+    );
+  } else if (props.required) {
+    return true;
+  }
+  return false;
+});
+
+const readonlyIfComputed = computed(() => {
+  if (props.form && props.form.getStatus() === 'view') {
+    return true;
+  }
+  return props.readOnlyIf({
+    value: modelValueRef.value.innerHTML,
+    form: props.form,
+  });
+});
+
+const disableIfComputed = computed(() => {
+  return props.disableIf({
+    value: modelValueRef.value.innerHTML,
+    form: props.form,
+  });
+});
+
+const contextmenu = (event) => {
+  if (props.readOnly) {
+    return;
+  }
+  event.preventDefault();
+  contextMenuRef.value.show(event.srcElement);
+};
+
+const dblclick = (event) => {
+  if (props.readOnly) {
+    return;
+  }
+  const tagName = event.target.tagName.toLowerCase();
+  if (tagName === 'mi') {
+    variableEditorDialogRef.value.open(event.srcElement);
+  } else if (tagName === 'mn') {
+    const element = event.srcElement;
+    if (element.innerHTML !== 'e' && element.innerHTML !== 'π') {
+      numberEditorDialogRef.value.open(event.srcElement);
+    }
+  }
+};
+
+const mouseover = (event) => {
+  if (props.readOnly) {
+    return;
+  }
+  event.preventDefault();
+  const tagName = event.target.tagName.toLowerCase();
+  if (tagName === 'math' || tagName === 'mspace') {
+    return;
+  }
+  if (tagName === 'mo' && event.target.innerHTML === '-') {
+    event.target.style.paddingTop = 5;
+    event.target.style.paddingBottom = 5;
+  }
+  event.target.className = selectedElementHighLightClass;
+};
+
+const mouseout = (event) => {
+  if (props.readOnly) {
+    return;
+  }
+  event.preventDefault();
+  const tagName = event.target.tagName.toLowerCase();
+  if (tagName === 'math' || tagName === 'mspace') {
+    return;
+  }
+  event.target.className = selectedElementClass;
+};
+
+const dragover = (event) => {
+  if (props.readOnly) {
+    return;
+  }
+  event.preventDefault();
+  const tagName = event.target.tagName.toLowerCase();
+  if (tagName === 'mspace') {
+    event.target.className = mathMsSpaceHighLightClass;
+  }
+};
+
+const dragleave = (event) => {
+  if (props.readOnly) {
+    return;
+  }
+  event.preventDefault();
+  const tagName = event.target.tagName.toLowerCase();
+  if (tagName === 'mspace') {
+    console.log('dragleave');
+    event.target.className = mathMsSpaceClass;
+  }
+};
+
+const drop = (event) => {
+  if (props.readOnly) {
+    return;
+  }
+  event.preventDefault();
+  const tagName = event.target.tagName.toLowerCase();
+  if (tagName === 'math') {
+    return;
+  }
+  event.target.outerHTML = event.dataTransfer.getData('math');
+  event.target.className = '';
+  modelValueRef.value = mathEditorRef.value.innerHTML;
+  setTimeout(refresh, 100);
+};
+
+const init = () => {
+  const font = ZoomLevels.getStyle(zoomModelValueRef.value);
+  mathEditorRef.value.style.fontSize = font['font-size'];
+  mathEditorRef.value.style.lineHeight = font['line-height'];
+  mathEditorRef.value.innerHTML = modelValueRef.value || '<mspace></mspace>';
+  refresh();
+};
+
+const getElementLevel = (element): number => {
+  let level = 0;
+  let parent = element.parentElement;
+  while (parent.nodeName !== 'math') {
+    if (parent.nodeName !== 'mrow') {
+      level++;
+    }
+    parent = parent.parentElement;
+  }
+  return level;
+};
+
+const refresh = () => {
+  setTimeout(() => {
+    const style = ZoomLevels.getStyle(zoomModelValueRef.value);
+    mathEditorRef.value.style.fontSize = style['font-size'];
+    mathEditorRef.value.style.lineHeight = style['line-height'];
+    const mspaces = mathEditorRef.value.getElementsByTagName('mspace');
+    const pixels = style.pixels;
+    for (const mspace of mspaces) {
+      const level = getElementLevel(mspace);
+      const pixel = pixels[level];
+      mspace.className = mathMsSpaceClass;
+      mspace.setAttribute('height', pixel + 'px');
+    }
+  }, 0);
+};
+
+const contentChanged = () => {
+  modelValueRef.value = mathEditorRef.value.innerHTML;
+};
+
+onMounted(() => {
+  init();
+  watch(
+    () => zoomModelValueRef.value,
+    (newVal, oldVal) => {
+      refresh();
+    },
+  );
+});
+
+onUpdated(() => {
+  init();
+});
+
+defineExpose({
+  refresh,
+});
+
+const instance = getCurrentInstance();
+VueTools.expose2Instance(instance);
+</script>
+<style>
+.mathMsSpaceClass {
+  width: 4px;
+}
+.mathMsSpaceHighLightClass {
+  background-color: red;
+  width: 4px;
+}
+</style>

io.sc.platform.core.frontend/src/platform/components/math/context-menu/ContextMenu.vue

@@ -0,0 +1,42 @@
+<template>
+  <q-menu ref="contextMenuRef" context-menu>
+    <q-list dense style="min-width: 100px">
+      <q-item v-close-popup clickable @click="remove">
+        <q-item-section>{{ $t('delete') }}</q-item-section>
+      </q-item>
+    </q-list>
+  </q-menu>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const emit = defineEmits(['changed']);
+
+const contextMenuRef = ref();
+let targetElement = null;
+
+const show = (element) => {
+  targetElement = element;
+  contextMenuRef.value.show();
+};
+
+const remove = (element) => {
+  if (targetElement) {
+    const previous = targetElement.previousElementSibling;
+    if (previous?.tagName === 'mspace') {
+      previous.outerHTML = '';
+    }
+    const next = targetElement.nextElementSibling;
+    if (next?.tagName === 'mspace') {
+      next.outerHTML = '';
+    }
+    targetElement.outerHTML = '<mspace></mspace>';
+    emit('changed');
+  }
+};
+
+defineExpose({
+  show,
+  remove,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/dialog/NumberEditorDialog.vue

@@ -0,0 +1,45 @@
+<template>
+  <w-dialog
+    ref="dialogRef"
+    :title="$t('math.toolbar.base.number')"
+    width="300px"
+    :can-maximize="false"
+    :buttons="[
+      {
+        label: $t('confirm'),
+        noCaps: true,
+        click: () => {
+          targetElementRef.innerHTML = modelValueRef;
+          emit('changed');
+          close();
+        },
+      },
+    ]"
+  >
+    <q-input v-model="modelValueRef" type="number" dense outlined></q-input>
+  </w-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const emit = defineEmits(['changed']);
+
+const dialogRef = ref();
+const targetElementRef = ref();
+const modelValueRef = ref();
+
+const open = (element) => {
+  targetElementRef.value = element;
+  modelValueRef.value = element.innerHTML;
+  dialogRef.value.show();
+};
+
+const close = () => {
+  dialogRef.value.hide();
+};
+
+defineExpose({
+  open,
+  close,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/dialog/VariableEditorDialog.vue

@@ -0,0 +1,63 @@
+<template>
+  <w-dialog
+    ref="dialogRef"
+    :title="$t('math.toolbar.base.variable')"
+    width="600px"
+    :can-maximize="false"
+    :buttons="[
+      {
+        label: $t('confirm'),
+        noCaps: true,
+        click: () => {
+          let string = modelValueRef;
+          string = string.replace(/\$\{(.+?)\}/g, '$1');
+          targetElementRef.innerHTML = string;
+          emit('changed');
+          close();
+        },
+      },
+    ]"
+  >
+    <w-code-mirror
+      v-model="modelValueRef"
+      :toolbar="false"
+      lang="java"
+      :rows="2"
+      :placeholder="true"
+      :line-wrap="true"
+      :line-break="false"
+      :auto-completion="autoCompletion"
+    ></w-code-mirror>
+  </w-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps({
+  autoCompletion: {
+    type: Function,
+    default: undefined,
+  },
+});
+
+const emit = defineEmits(['changed']);
+
+const dialogRef = ref();
+const targetElementRef = ref();
+const modelValueRef = ref();
+
+const open = (element) => {
+  targetElementRef.value = element;
+  modelValueRef.value = '${' + element.innerHTML.trim() + '}';
+  dialogRef.value.show();
+};
+
+const close = () => {
+  dialogRef.value.hide();
+};
+
+defineExpose({
+  open,
+  close,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/dialog/XmlDialog.vue

@@ -0,0 +1,36 @@
+<template>
+  <w-dialog ref="dialogRef" :title="$t('xml')" width="800px" :can-maximize="false">
+    <div class="py-1"></div>
+    <w-code-mirror v-model="xmlRef" outlined :rows="20" lang="xml" line-number />
+  </w-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Tools } from '@/platform';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const dialogRef = ref();
+const xmlRef = ref();
+
+const open = () => {
+  const xmlDom = Tools.xml2Dom('<math>' + modelValueRef.value + '</math>');
+  if (xmlDom) {
+    const elements = xmlDom.querySelectorAll('*');
+    for (const element of elements) {
+      element.removeAttribute('position');
+      element.removeAttribute('height');
+      element.removeAttribute('class');
+    }
+    let xml = Tools.dom2xml(xmlDom);
+    if (xml) {
+      xml = Tools.xmlFormat(xml);
+      xmlRef.value = xml;
+    }
+  }
+  dialogRef.value.show();
+};
+
+defineExpose({
+  open,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/Toolbar.vue

@@ -0,0 +1,159 @@
+<template>
+  <q-toolbar style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px">
+    <input style="width: 0px" /><!--采用宽度为0的输入框,避免第一按钮默认获得焦点-->
+    <template v-if="!sourceCodeEditor">
+      <!-- 操作 -->
+      <Xml v-model="modelValueRef"></Xml>
+      <Clean v-model="modelValueRef"></Clean>
+      <q-separator vertical />
+      <ZoomIn v-model:zoom="zoomModelValueRef"></ZoomIn>
+      <ZoomOut v-model:zoom="zoomModelValueRef"></ZoomOut>
+      <q-separator vertical />
+      <Undo v-model="modelValueRef" :undo-manager="undoManager"></Undo>
+      <Redo v-model="modelValueRef" :undo-manager="undoManager"></Redo>
+      <q-separator vertical />
+    </template>
+
+    <!-- 基本 -->
+    <Variable v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Variable>
+    <NumberConst v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></NumberConst>
+    <Addition v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Addition>
+    <Subtraction v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Subtraction>
+    <Multiply v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Multiply>
+    <Division v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Division>
+    <LeftParenthesis v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></LeftParenthesis>
+    <RightParenthesis v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></RightParenthesis>
+    <Comma v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Comma>
+    <q-separator vertical />
+
+    <!-- 数学 -->
+    <q-btn :label="$t('math.toolbar.math')" stretch flat dense padding="0px 10px" icon-right="arrow_drop_down">
+      <q-menu>
+        <q-list dense>
+          <q-item v-close-popup clickable>
+            <q-item-section><Pi v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Pi></q-item-section>
+          </q-item>
+          <q-item v-close-popup clickable>
+            <q-item-section><E v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></E></q-item-section>
+          </q-item>
+          <q-separator inset spaced />
+          <q-item v-close-popup clickable>
+            <q-item-section><Power2 v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Power2></q-item-section>
+          </q-item>
+          <q-item v-close-popup clickable>
+            <q-item-section><Exp v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Exp></q-item-section>
+          </q-item>
+          <q-item v-close-popup clickable>
+            <q-item-section><Power v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Power></q-item-section>
+          </q-item>
+          <q-separator inset spaced />
+          <q-item v-close-popup clickable>
+            <q-item-section><Sqrt v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Sqrt></q-item-section>
+          </q-item>
+          <q-item v-close-popup clickable>
+            <q-item-section><Root v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Root></q-item-section>
+          </q-item>
+          <q-separator inset spaced />
+          <q-item v-close-popup clickable>
+            <q-item-section><Lg v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Lg></q-item-section>
+          </q-item>
+          <q-item v-close-popup clickable>
+            <q-item-section><Ln v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Ln></q-item-section>
+          </q-item>
+          <q-item v-close-popup clickable>
+            <q-item-section><Log v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Log></q-item-section>
+          </q-item>
+        </q-list>
+      </q-menu>
+    </q-btn>
+
+    <!-- 函数 -->
+    <q-btn :label="$t('math.toolbar.functions')" stretch flat dense padding="0px 10px" icon-right="arrow_drop_down">
+      <q-menu>
+        <q-list>
+          <!-- 特殊值值处理函数 -->
+          <SpecialValue v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></SpecialValue>
+          <q-separator inset spaced />
+          <!-- 数值处理函数 -->
+          <Digit v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Digit>
+          <q-separator inset spaced />
+          <!-- 字符串处理函数 -->
+          <StringVue v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></StringVue>
+          <q-separator inset spaced />
+          <!-- 日期处理函数 -->
+          <Date v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Date>
+          <q-separator inset spaced />
+          <!-- 三角函数 -->
+          <Trigonometric v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Trigonometric>
+          <q-separator inset spaced />
+          <!-- 概率函数 -->
+          <Probability v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Probability>
+          <q-separator inset spaced />
+          <!-- 格式化函数 -->
+          <Formater v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Formater>
+        </q-list>
+      </q-menu>
+    </q-btn>
+  </q-toolbar>
+</template>
+<script setup lang="ts">
+import { onMounted, onUpdated, watch } from 'vue';
+import { UndoManager } from '@/platform';
+import { ZoomLevels } from '@/platform/components/math/utils/ZoomLevels';
+
+import Xml from './actions/Xml.vue';
+import Clean from './actions/Clean.vue';
+import ZoomIn from './actions/ZoomIn.vue';
+import ZoomOut from './actions/ZoomOut.vue';
+import Undo from './actions/Undo.vue';
+import Redo from './actions/Redo.vue';
+
+import NumberConst from './base/NumberConst.vue';
+import Variable from './base/Variable.vue';
+import Addition from './base/Addition.vue';
+import Subtraction from './base/Subtraction.vue';
+import Multiply from './base/Multiply.vue';
+import Division from './base/Division.vue';
+import LeftParenthesis from './base/LeftParenthesis.vue';
+import RightParenthesis from './base/RightParenthesis.vue';
+
+import Comma from './base/Comma.vue';
+
+import E from './math/E.vue';
+import Root from './math/Root.vue';
+import Lg from './math/Lg.vue';
+import Ln from './math/Ln.vue';
+import Log from './math/Log.vue';
+import Pi from './math/Pi.vue';
+import Power from './math/Power.vue';
+import Power2 from './math/Power2.vue';
+import Exp from './math/Exp.vue';
+import Sqrt from './math/Sqrt.vue';
+
+import SpecialValue from './functions/SpecialValue.vue';
+import Digit from './functions/Digit.vue';
+import StringVue from './functions/String.vue';
+import Date from './functions/Date.vue';
+import Trigonometric from './functions/Trigonometric.vue';
+import Probability from './functions/Probability.vue';
+import Formater from './functions/Formater.vue';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const zoomModelValueRef = defineModel('zoom', { type: Number, default: ZoomLevels.defaultLevel });
+
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+  type: { type: String, default: 'math' },
+});
+
+const undoManager = new UndoManager();
+
+onMounted(() => {
+  watch(
+    () => modelValueRef.value,
+    (newVal, oldVal) => {
+      undoManager.setValue(newVal);
+    },
+  );
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/actions/Clean.vue

@@ -0,0 +1,15 @@
+<template>
+  <q-btn :title="$t('math.toolbar.actions.clean')" stretch flat no-caps icon="sym_o_cleaning_services" padding="4px 10px" @click="clean"></q-btn>
+</template>
+<script setup lang="ts">
+import { $t, DialogManager } from '@/platform';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+
+const clean = () => {
+  // DialogManager.confirm($t('math.toolbar.actions.clean.confirm'), () => {
+  //   modelValueRef.value = '<mspace></mspace>';
+  // });
+  modelValueRef.value = '<mspace></mspace>';
+};
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/actions/Redo.vue

@@ -0,0 +1,20 @@
+<template>
+  <q-btn :title="$t('math.toolbar.actions.redo')" stretch flat no-caps icon="redo" padding="4px 10px" @click="redo"></q-btn>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  undoManager: {
+    type: Object,
+    default: () => {
+      return undefined;
+    },
+  },
+});
+
+const modelValueRef = defineModel({ type: String, default: '' });
+
+const redo = () => {
+  const value = props.undoManager?.redo();
+  modelValueRef.value = value;
+};
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/actions/Undo.vue

@@ -0,0 +1,20 @@
+<template>
+  <q-btn :title="$t('math.toolbar.actions.undo')" stretch flat no-caps icon="undo" padding="4px 10px" @click="undo"></q-btn>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  undoManager: {
+    type: Object,
+    default: () => {
+      return undefined;
+    },
+  },
+});
+
+const modelValueRef = defineModel({ type: String, default: '' });
+
+const undo = () => {
+  const value = props.undoManager?.undo();
+  modelValueRef.value = value;
+};
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/actions/Xml.vue

@@ -0,0 +1,16 @@
+<template>
+  <q-btn :title="$t('math.toolbar.actions.xml')" stretch flat no-caps icon="bi-filetype-xml" @click="openXmlDialog"></q-btn>
+  <XmlDialog ref="xmlDialogRef" v-model="modelValueRef"></XmlDialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import XmlDialog from '@/platform/components/expression/dialog/XmlDialog.vue';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+
+const xmlDialogRef = ref();
+
+const openXmlDialog = () => {
+  xmlDialogRef.value.open();
+};
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/actions/ZoomIn.vue

@@ -0,0 +1,19 @@
+<template>
+  <q-btn :title="$t('math.toolbar.actions.zoomIn')" stretch flat no-caps icon="bi-zoom-in" padding="4px 10px" @click="zoomIn"></q-btn>
+</template>
+<script setup lang="ts">
+import { ZoomLevels } from '@/platform/components/expression/utils/ZoomLevels';
+
+const zoomModelValueRef = defineModel('zoom', { type: Number, default: ZoomLevels.defaultLevel });
+
+const zoomIn = () => {
+  let zoomLevel = zoomModelValueRef.value;
+  console.log(zoomLevel);
+  zoomLevel++;
+  if (zoomLevel > ZoomLevels.getLength() - 1) {
+    zoomLevel = ZoomLevels.getLength() - 1;
+  }
+  zoomModelValueRef.value = zoomLevel;
+  console.log(zoomModelValueRef.value);
+};
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/actions/ZoomOut.vue

@@ -0,0 +1,17 @@
+<template>
+  <q-btn :title="$t('math.toolbar.actions.zoomOut')" stretch flat no-caps icon="bi-zoom-out" padding="4px 10px" @click="zoomOut"></q-btn>
+</template>
+<script setup lang="ts">
+import { ZoomLevels } from '@/platform/components/expression/utils/ZoomLevels';
+
+const zoomModelValueRef = defineModel('zoom', { type: Number, default: ZoomLevels.defaultLevel });
+
+const zoomOut = () => {
+  let zoomLevel = zoomModelValueRef.value;
+  zoomLevel--;
+  if (zoomLevel < 0) {
+    zoomLevel = 0;
+  }
+  zoomModelValueRef.value = zoomLevel;
+};
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Addition.vue

@@ -0,0 +1,31 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.addition')" stretch flat size="16px" padding="0px 6px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mrow>
+        <mo>+</mo>
+      </mrow>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mo>+</mo>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('+'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/And.vue

@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.and')" stretch flat padding="0px 2px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mo>&&</mo>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mo>&&</mo>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('&&'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Comma.vue

@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.comma')" stretch flat size="16px" padding="0px 6px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mo>,</mo>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mo>,</mo>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection(','));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Division.vue

@@ -0,0 +1,51 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.division')" stretch flat size="16px" padding="0px 10px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mfrac>
+        <mrow>
+          <mspace></mspace>
+          <mi>x</mi>
+          <mspace></mspace>
+        </mrow>
+        <mrow>
+          <mspace></mspace>
+          <mi>y</mi>
+          <mspace></mspace>
+        </mrow>
+      </mfrac>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mfrac>
+    <mrow>
+      <mspace></mspace>
+      <mi>x</mi>
+      <mspace></mspace>
+    </mrow>
+    <mrow>
+      <mspace></mspace>
+      <mi>y</mi>
+      <mspace></mspace>
+    </mrow>
+  </mfrac>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('/'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Equals.vue

@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.equals')" stretch flat padding="0px 6px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mo>=</mo>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mo>=</mo>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('=='));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Ge.vue

@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.ge')" stretch flat padding="0px 6px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mo>&#x2265;</mo>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mo>&#x2265;</mo>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('>='));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Gt.vue

@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.gt')" stretch flat padding="0px 6px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mo>&gt;</mo>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mo>&gt;</mo>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('>'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Le.vue

@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.le')" stretch flat padding="0px 6px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mo>&#x2264;</mo>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mo>&#x2264;</mo>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('<='));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/LeftParenthesis.vue

@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.leftParenthesis')" stretch flat size="16px" padding="0px 10px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mi>(</mi>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mi>(</mi>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('('));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Lt.vue

@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.lt')" stretch flat padding="0px 6px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mo>&lt;</mo>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mo>&lt;</mo>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('<'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Multiply.vue

@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.multiply')" stretch flat size="16px" padding="0px 6px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mo>&#xD7;</mo>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mo>&#xD7;</mo>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('*'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Not.vue

@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.not')" stretch flat padding="0px 10px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mo>!</mo>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mo>!</mo>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('!'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/NumberConst.vue

@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.number')" stretch flat size="16px" padding="0px 10px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mn>N</mn>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mn>N</mn>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('N'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Or.vue

@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.or')" stretch flat padding="0px 10px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mo>||</mo>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mo>||</mo>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('||'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/RightParenthesis.vue

@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.rightParenthesis')" stretch flat size="16px" padding="0px 10px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mi>)</mi>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mi>)</mi>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection(')'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Subtraction.vue

@@ -0,0 +1,31 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.subtraction')" stretch flat size="16px" padding="0px 6px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mrow>
+        <mo>-</mo>
+      </mrow>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mo>-</mo>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('-'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Variable.vue

@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.variable')" stretch flat size="16px" padding="0px 10px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mi>x</mi>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mi>x</mi>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('${x}'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/Date.vue

@@ -0,0 +1,28 @@
+<template>
+  <q-item clickable>
+    <q-item-section>
+      <q-item-label>{{ $t('math.toolbar.functions.date') }}</q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <q-icon name="keyboard_arrow_right" />
+    </q-item-section>
+    <q-menu anchor="top end" self="top start">
+      <q-list>
+        <q-item v-close-popup clickable :title="$t('math.toolbar.functions.date.now')" draggable="true" @dragstart="nowRef?.dragstart" @click="nowRef?.append">
+          <q-item-section><Now ref="nowRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Now></q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </q-item>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import Now from './date/Now.vue';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const nowRef = ref();
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/Digit.vue

@@ -0,0 +1,171 @@
+<template>
+  <q-item clickable>
+    <q-item-section>
+      <q-item-label>{{ $t('math.toolbar.functions.number') }}</q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <q-icon name="keyboard_arrow_right" />
+    </q-item-section>
+    <q-menu anchor="top end" self="top start">
+      <q-list dense>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.number.abs')"
+          draggable="true"
+          @dragstart="absRef?.dragstart"
+          @click="absRef?.append"
+        >
+          <q-item-section><Abs ref="absRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Abs></q-item-section>
+        </q-item>
+        <q-separator inset spaced />
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.number.max')"
+          draggable="true"
+          @dragstart="maxRef?.dragstart"
+          @click="maxRef?.append"
+        >
+          <q-item-section><Max ref="maxRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Max></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.number.min')"
+          draggable="true"
+          @dragstart="minRef?.dragstart"
+          @click="minRef?.append"
+        >
+          <q-item-section><Min ref="minRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Min></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.number.sum')"
+          draggable="true"
+          @dragstart="sumRef?.dragstart"
+          @click="sumRef?.append"
+        >
+          <q-item-section><Sum ref="sumRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Sum></q-item-section>
+        </q-item>
+        <q-separator inset spaced />
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.number.rint')"
+          draggable="true"
+          @dragstart="rintRef?.dragstart"
+          @click="rintRef?.append"
+        >
+          <q-item-section><Rint ref="rintRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Rint></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.number.ceil')"
+          draggable="true"
+          @dragstart="ceilRef?.dragstart"
+          @click="ceilRef?.append"
+        >
+          <q-item-section><Ceil ref="ceilRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Ceil></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.number.floor')"
+          draggable="true"
+          @dragstart="floorRef?.dragstart"
+          @click="floorRef?.append"
+        >
+          <q-item-section><Floor ref="floorRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Floor></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.number.round')"
+          draggable="true"
+          @dragstart="roundRef?.dragstart"
+          @click="roundRef?.append"
+        >
+          <q-item-section><Round ref="roundRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Round></q-item-section>
+        </q-item>
+        <q-separator inset spaced />
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.number.randomInt')"
+          draggable="true"
+          @dragstart="randomIntRef?.dragstart"
+          @click="randomIntRef?.append"
+        >
+          <q-item-section><RandomInt ref="randomIntRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></RandomInt></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.number.random')"
+          draggable="true"
+          @dragstart="randomRef?.dragstart"
+          @click="randomRef?.append"
+        >
+          <q-item-section><Random ref="randomRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Random></q-item-section>
+        </q-item>
+        <q-separator inset spaced />
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.number.mod')"
+          draggable="true"
+          @dragstart="modRef?.dragstart"
+          @click="modRef?.append"
+        >
+          <q-item-section><Mod ref="modRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Mod></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.number.remainder')"
+          draggable="true"
+          @dragstart="remainderRef?.dragstart"
+          @click="remainderRef?.append"
+        >
+          <q-item-section><Remainder ref="remainderRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Remainder></q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </q-item>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import Abs from './digit/Abs.vue';
+import Max from './digit/Max.vue';
+import Min from './digit/Min.vue';
+import Sum from './digit/Sum.vue';
+import Ceil from './digit/Ceil.vue';
+import Floor from './digit/Floor.vue';
+import Mod from './digit/Mod.vue';
+import Random from './digit/Random.vue';
+import RandomInt from './digit/RandomInt.vue';
+import Remainder from './digit/Remainder.vue';
+import Rint from './digit/Rint.vue';
+import Round from './digit/Round.vue';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const absRef = ref();
+const maxRef = ref();
+const minRef = ref();
+const sumRef = ref();
+const rintRef = ref();
+const ceilRef = ref();
+const floorRef = ref();
+const roundRef = ref();
+const randomIntRef = ref();
+const randomRef = ref();
+const modRef = ref();
+const remainderRef = ref();
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/Formater.vue

@@ -0,0 +1,59 @@
+<template>
+  <q-item clickable>
+    <q-item-section>
+      <q-item-label>{{ $t('math.toolbar.functions.formater') }}</q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <q-icon name="keyboard_arrow_right" />
+    </q-item-section>
+    <q-menu anchor="top end" self="top start">
+      <q-list dense>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.formater.precision')"
+          draggable="true"
+          @dragstart="decimalRef?.dragstart"
+          @click="decimalRef?.append"
+        >
+          <q-item-section><Decimal ref="decimalRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Decimal></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.formater.comma')"
+          draggable="true"
+          @dragstart="commaRef?.dragstart"
+          @click="commaRef?.append"
+        >
+          <q-item-section><Comma ref="commaRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Comma></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.formater.percent')"
+          draggable="true"
+          @dragstart="percentRef?.dragstart"
+          @click="percentRef?.append"
+        >
+          <q-item-section><Percent ref="percentRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Percent></q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </q-item>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import Decimal from './formater/Decimal.vue';
+import Comma from './formater/Comma.vue';
+import Percent from './formater/Percent.vue';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const decimalRef = ref();
+const commaRef = ref();
+const percentRef = ref();
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/Probability.vue

@@ -0,0 +1,47 @@
+<template>
+  <q-item clickable>
+    <q-item-section>
+      <q-item-label>{{ $t('math.toolbar.functions.probability') }}</q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <q-icon name="keyboard_arrow_right" />
+    </q-item-section>
+    <q-menu anchor="top end" self="top start">
+      <q-list dense>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.probability.normal')"
+          draggable="true"
+          @dragstart="normalRef?.dragstart"
+          @click="normalRef?.append"
+        >
+          <q-item-section><Normal ref="normalRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Normal></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.probability.inverseNormal')"
+          draggable="true"
+          @dragstart="inverseNormalRef?.dragstart"
+          @click="inverseNormalRef?.append"
+        >
+          <q-item-section><InverseNormal ref="inverseNormalRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></InverseNormal></q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </q-item>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import Normal from './probability/Normal.vue';
+import InverseNormal from './probability/InverseNormal.vue';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const normalRef = ref();
+const inverseNormalRef = ref();
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/SpecialValue.vue

@@ -0,0 +1,121 @@
+<template>
+  <q-item clickable>
+    <q-item-section>
+      <q-item-label>{{ $t('math.toolbar.functions.specialValue') }}</q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <q-icon name="keyboard_arrow_right" />
+    </q-item-section>
+    <q-menu anchor="top end" self="top start">
+      <q-list dense>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.specialValue.isNil')"
+          draggable="true"
+          @dragstart="isNilRef?.dragstart"
+          @click="isNilRef?.append"
+        >
+          <q-item-section><IsNil ref="isNilRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></IsNil></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.specialValue.isZero')"
+          draggable="true"
+          @dragstart="isZeroRef?.dragstart"
+          @click="isZeroRef?.append"
+        >
+          <q-item-section><IsZero ref="isZeroRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></IsZero></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.specialValue.isNan')"
+          draggable="true"
+          @dragstart="isNanRef?.dragstart"
+          @click="isNanRef?.append"
+        >
+          <q-item-section><IsNan ref="isNanRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></IsNan></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.specialValue.isInfinite')"
+          draggable="true"
+          @dragstart="isInfiniteRef?.dragstart"
+          @click="isInfiniteRef?.append"
+        >
+          <q-item-section><IsInfinite ref="isInfiniteRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></IsInfinite></q-item-section>
+        </q-item>
+        <q-separator inset spaced />
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.specialValue.nil')"
+          draggable="true"
+          @dragstart="nilRef?.dragstart"
+          @click="nilRef?.append"
+        >
+          <q-item-section><Nil ref="nilRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Nil></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.specialValue.zero')"
+          draggable="true"
+          @dragstart="zeroRef?.dragstart"
+          @click="zeroRef?.append"
+        >
+          <q-item-section><Zero ref="zeroRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Zero></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.specialValue.nan')"
+          draggable="true"
+          @dragstart="nanRef?.dragstart"
+          @click="nanRef?.append"
+        >
+          <q-item-section><Nan ref="nanRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Nan></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.specialValue.infinite')"
+          draggable="true"
+          @dragstart="infiniteRef?.dragstart"
+          @click="infiniteRef?.append"
+        >
+          <q-item-section><Infinite ref="infiniteRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Infinite></q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </q-item>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import IsNil from './specialValue/IsNil.vue';
+import IsZero from './specialValue/IsZero.vue';
+import IsNan from './specialValue/IsNan.vue';
+import IsInfinite from './specialValue/IsInfinite.vue';
+import Nil from './specialValue/Nil.vue';
+import Zero from './specialValue/Zero.vue';
+import Nan from './specialValue/Nan.vue';
+import Infinite from './specialValue/Infinite.vue';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const isNilRef = ref();
+const isZeroRef = ref();
+const isNanRef = ref();
+const isInfiniteRef = ref();
+
+const nilRef = ref();
+const zeroRef = ref();
+const nanRef = ref();
+const infiniteRef = ref();
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/String.vue

@@ -0,0 +1,121 @@
+<template>
+  <q-item clickable>
+    <q-item-section>
+      <q-item-label>{{ $t('math.toolbar.functions.string') }}</q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <q-icon name="keyboard_arrow_right" />
+    </q-item-section>
+    <q-menu anchor="top end" self="top start">
+      <q-list dense>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.string.length')"
+          draggable="true"
+          @dragstart="lengthRef?.dragstart"
+          @click="lengthRef?.append"
+        >
+          <q-item-section><Length ref="lengthRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Length></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.string.trim')"
+          draggable="true"
+          @dragstart="trimRef?.dragstart"
+          @click="trimRef?.append"
+        >
+          <q-item-section><Trim ref="trimRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Trim></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.string.upperCase')"
+          draggable="true"
+          @dragstart="upperCaseRef?.dragstart"
+          @click="upperCaseRef?.append"
+        >
+          <q-item-section><UpperCase ref="upperCaseRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></UpperCase></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.string.lowerCase')"
+          draggable="true"
+          @dragstart="lowerCaseRef?.dragstart"
+          @click="lowerCaseRef?.append"
+        >
+          <q-item-section><LowerCase ref="lowerCaseRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></LowerCase></q-item-section>
+        </q-item>
+        <q-separator inset spaced />
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.string.contains')"
+          draggable="true"
+          @dragstart="containsRef?.dragstart"
+          @click="containsRef?.append"
+        >
+          <q-item-section><Contains ref="containsRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Contains></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.string.startsWith')"
+          draggable="true"
+          @dragstart="startsWithRef?.dragstart"
+          @click="startsWithRef?.append"
+        >
+          <q-item-section><StartsWith ref="startsWithRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></StartsWith></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.string.endsWith')"
+          draggable="true"
+          @dragstart="endsWithRef?.dragstart"
+          @click="endsWithRef?.append"
+        >
+          <q-item-section><EndsWith ref="endsWithRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></EndsWith></q-item-section>
+        </q-item>
+        <q-separator inset spaced />
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.string.join')"
+          draggable="true"
+          @dragstart="joinRef?.dragstart"
+          @click="joinRef?.append"
+        >
+          <q-item-section><Join ref="joinRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Join></q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </q-item>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import Length from './string/Length.vue';
+import Trim from './string/Trim.vue';
+import UpperCase from './string/UpperCase.vue';
+import LowerCase from './string/LowerCase.vue';
+import Contains from './string/Contains.vue';
+import StartsWith from './string/StartsWith.vue';
+import EndsWith from './string/EndsWith.vue';
+import Join from './string/Join.vue';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const lengthRef = ref();
+const trimRef = ref();
+const upperCaseRef = ref();
+const lowerCaseRef = ref();
+const containsRef = ref();
+const startsWithRef = ref();
+const endsWithRef = ref();
+const joinRef = ref();
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/Trigonometric.vue

@@ -0,0 +1,56 @@
+<template>
+  <q-item clickable>
+    <q-item-section>
+      <q-item-label>{{ $t('math.toolbar.functions.trigonometric') }}</q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <q-icon name="keyboard_arrow_right" />
+    </q-item-section>
+    <q-menu anchor="top end" self="top start">
+      <q-list dense>
+        <Trigonometric v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Trigonometric>
+        <InverseTrigonometric v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></InverseTrigonometric>
+        <Hyperbolic v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Hyperbolic>
+        <InverseHyperbolic v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></InverseHyperbolic>
+        <q-separator inset spaced />
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.degrees')"
+          draggable="true"
+          @dragstart="degreesRef?.dragstart"
+          @click="degreesRef?.append"
+        >
+          <q-item-section><Degrees ref="degreesRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Degrees></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.radians')"
+          draggable="true"
+          @dragstart="radiansRef?.dragstart"
+          @click="radiansRef?.append"
+        >
+          <q-item-section><Radians ref="radiansRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Radians></q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </q-item>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import Trigonometric from './trigonometric/trigonometric/Trigonometric.vue';
+import InverseTrigonometric from './trigonometric/inverseTrigonometric/InverseTrigonometric.vue';
+import Hyperbolic from './trigonometric/hyperbolic/Hyperbolic.vue';
+import InverseHyperbolic from './trigonometric/inverseHyperbolic/InverseHyperbolic.vue';
+import Degrees from './trigonometric/Degrees.vue';
+import Radians from './trigonometric/Radians.vue';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const degreesRef = ref();
+const radiansRef = ref();
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/date/Now.vue

@@ -0,0 +1,40 @@
+<template>
+  <math display="inline">
+    <mrow>
+      <mo>now</mo>
+      <mi>(</mi>
+      <mi>)</mi>
+    </mrow>
+  </math>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>now</mo>
+    <mi>(</mi>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('now()'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Abs.vue

@@ -0,0 +1,50 @@
+<template>
+  <span>
+    <math display="inline">
+      <mspace></mspace>
+      <mrow>
+        <mo>abs</mo>
+        <mi>(</mi>
+        <mspace></mspace>
+        <mi>x</mi>
+        <mspace></mspace>
+        <mi>)</mi>
+      </mrow>
+      <mspace></mspace>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>abs</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('abs(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Ceil.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>ceil</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>ceil</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('ceil(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Floor.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>floor</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>floor</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('floor(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Max.vue

@@ -0,0 +1,59 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>max</mo>
+        <mi>(</mi>
+        <mi>a</mi>
+        <mo>,</mo>
+        <mi>b</mi>
+        <mo>,</mo>
+        <mo>...</mo>
+        <mi>n</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>max</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>a</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>b</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>n</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('max(a,b,n)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Min.vue

@@ -0,0 +1,59 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>min</mo>
+        <mi>(</mi>
+        <mi>a</mi>
+        <mo>,</mo>
+        <mi>b</mi>
+        <mo>,</mo>
+        <mo>...</mo>
+        <mi>n</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>min</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>a</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>b</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>n</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('min(a,b,n)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Mod.vue

@@ -0,0 +1,52 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>mod</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mo>,</mo>
+        <mi>y</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>mod</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>y</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('mod(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Random.vue

@@ -0,0 +1,42 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>random</mo>
+        <mi>(</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>random</mo>
+    <mi>(</mi>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('random()'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/RandomInt.vue

@@ -0,0 +1,42 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>randomInt</mo>
+        <mi>(</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>randomInt</mo>
+    <mi>(</mi>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('randomInt'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Remainder.vue

@@ -0,0 +1,52 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>remainder</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mo>,</mo>
+        <mi>y</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>remainder</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>y</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('remainder(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Rint.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>rint</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>rint</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('rint(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Round.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>round</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>round</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('round(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Sum.vue

@@ -0,0 +1,59 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>sum</mo>
+        <mi>(</mi>
+        <mi>a</mi>
+        <mo>,</mo>
+        <mi>b</mi>
+        <mo>,</mo>
+        <mo>...</mo>
+        <mi>n</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>sum</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>a</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>b</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>n</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('sum(a,b,n)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/formater/Comma.vue

@@ -0,0 +1,52 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>comma</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mo>,</mo>
+        <mi>y</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>comma</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>y</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('comma(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/formater/Decimal.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <math display="inline">
+      <mrow>
+        <mo>decimal</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mo>,</mo>
+        <mi>y</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </div>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>decimal</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>y</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('decimal(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/formater/Percent.vue

@@ -0,0 +1,52 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>percent</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mo>,</mo>
+        <mi>y</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>percent</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>y</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('percent(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/probability/InverseNormal.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>iG</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>iG</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('iG(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/probability/Normal.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>G</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>G</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('G(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/Infinite.vue

@@ -0,0 +1,52 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>infinite</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mo>,</mo>
+        <mi>y</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>infinite</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>y</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('infinite(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/IsInfinite.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>isInfinite</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>isInfinite</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('isInfinite(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/IsNan.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="isNan">
+      <mrow>
+        <mo>isNan</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>isNan</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('isNan(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/IsNil.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>isNil</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>isNil</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('isNil(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/IsZero.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>isZero</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>isZero</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('isZero(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/Nan.vue

@@ -0,0 +1,52 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>nan</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mo>,</mo>
+        <mi>y</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>nan</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>y</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('nan(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/Nil.vue

@@ -0,0 +1,52 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>nil</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mo>,</mo>
+        <mi>y</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>nil</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>y</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('nil(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/Zero.vue

@@ -0,0 +1,52 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>zero</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mo>,</mo>
+        <mi>y</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>zero</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>y</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('zero(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/Contains.vue

@@ -0,0 +1,52 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>contains</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mo>,</mo>
+        <mi>y</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>contains</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>y</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('contains(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/EndsWith.vue

@@ -0,0 +1,52 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>endsWith</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mo>,</mo>
+        <mi>y</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>endsWith</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>y</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('endsWith(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/Join.vue

@@ -0,0 +1,64 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>join</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mo>,</mo>
+        <mi>a</mi>
+        <mo>,</mo>
+        <mi>b</mi>
+        <mo>,</mo>
+        <mi>n</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>join</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>a</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>b</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>n</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('join(x,a,b,n)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/Length.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>length</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>length</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('length(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/LowerCase.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>lowerCase</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>lowerCase</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('lowerCase(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/StartsWith.vue

@@ -0,0 +1,52 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>startsWith</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mo>,</mo>
+        <mi>y</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>startsWith</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>y</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('startsWith(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/Trim.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>trim</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>trim</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('trim(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/UpperCase.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>upperCase</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>upperCase</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('upperCase(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/Degrees.vue

@@ -0,0 +1,44 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>degrees</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>degrees</mo>
+    <mi>(</mi>
+    <mi>x</mi>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('degress(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/Radians.vue

@@ -0,0 +1,44 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>radians</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>radians</mo>
+    <mi>(</mi>
+    <mi>x</mi>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('radians(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Cosh.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>cosh</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>cosh</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('cosh(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Coth.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>coth</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>coth</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('coth(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Csch.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>csch</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>csch</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('csch(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Hyperbolic.vue

@@ -0,0 +1,95 @@
+<template>
+  <q-item clickable>
+    <q-item-section>
+      <q-item-label>{{ $t('math.toolbar.functions.trigonometric.hyperbolic') }}</q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <q-icon name="keyboard_arrow_right" />
+    </q-item-section>
+    <q-menu anchor="top end" self="top start">
+      <q-list>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.hyperbolic.sinh')"
+          draggable="true"
+          @dragstart="sinhRef?.dragstart"
+          @click="sinhRef?.append"
+        >
+          <q-item-section><Sinh ref="sinhRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Sinh></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.hyperbolic.cosh')"
+          draggable="true"
+          @dragstart="coshRef?.dragstart"
+          @click="coshRef?.append"
+        >
+          <q-item-section><Cosh ref="coshRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Cosh></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.hyperbolic.tanh')"
+          draggable="true"
+          @dragstart="tanhRef?.dragstart"
+          @click="tanhRef?.append"
+        >
+          <q-item-section><Tanh ref="tanhRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Tanh></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.hyperbolic.coth')"
+          draggable="true"
+          @dragstart="cothRef?.dragstart"
+          @click="cothRef?.append"
+        >
+          <q-item-section><Coth ref="cothRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Coth></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.hyperbolic.sech')"
+          draggable="true"
+          @dragstart="sechRef?.dragstart"
+          @click="sechRef?.append"
+        >
+          <q-item-section><Sech ref="sechRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Sech></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.hyperbolic.csch')"
+          draggable="true"
+          @dragstart="cschRef?.dragstart"
+          @click="cschRef?.append"
+        >
+          <q-item-section><Csch ref="cschRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Csch></q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </q-item>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import Sinh from './Sinh.vue';
+import Cosh from './Cosh.vue';
+import Tanh from './Tanh.vue';
+import Coth from './Coth.vue';
+import Sech from './Sech.vue';
+import Csch from './Csch.vue';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const sinhRef = ref();
+const coshRef = ref();
+const tanhRef = ref();
+const cothRef = ref();
+const sechRef = ref();
+const cschRef = ref();
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Sech.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>sech</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>sech</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('sech(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Sinh.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>sinh</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>sinh</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('sinh(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Tanh.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>tanh</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>tanh</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('tanh(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/ArcCosh.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>arccosh</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>arccosh</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('arccosh(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/ArcCoth.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>arccoth</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>arccoth</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('arccoth(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/ArcCsch.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>arccsch</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>arccsch</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('arccsch(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/ArcSech.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>arcsech</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>arcsech</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('arcsech(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/ArcSinh.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>arcsinh</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>arcsinh</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('arcsinh(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/ArcTanh.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>arctanh</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>arctanh</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('arctanh(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/InverseHyperbolic.vue

@@ -0,0 +1,95 @@
+<template>
+  <q-item clickable>
+    <q-item-section>
+      <q-item-label>{{ $t('math.toolbar.functions.trigonometric.inverseHyperbolic') }}</q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <q-icon name="keyboard_arrow_right" />
+    </q-item-section>
+    <q-menu anchor="top end" self="top start">
+      <q-list>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.arcSinh')"
+          draggable="true"
+          @dragstart="arcSinhRef?.dragstart"
+          @click="arcSinhRef?.append"
+        >
+          <q-item-section><ArcSinh ref="arcSinhRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></ArcSinh></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.arcCosh')"
+          draggable="true"
+          @dragstart="arcCoshRef?.dragstart"
+          @click="arcCoshRef?.append"
+        >
+          <q-item-section><ArcCosh ref="arcCoshRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></ArcCosh></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.arcTanh')"
+          draggable="true"
+          @dragstart="arcTanhRef?.dragstart"
+          @click="arcTanhRef?.append"
+        >
+          <q-item-section><ArcTanh ref="arcTanhRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></ArcTanh></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.arcCoth')"
+          draggable="true"
+          @dragstart="arcCothRef?.dragstart"
+          @click="arcCothRef?.append"
+        >
+          <q-item-section><ArcCoth ref="arcCothRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></ArcCoth></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.arcSech')"
+          draggable="true"
+          @dragstart="arcSechRef?.dragstart"
+          @click="arcSechRef?.append"
+        >
+          <q-item-section><ArcSech ref="arcSechRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></ArcSech></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.arcCsch')"
+          draggable="true"
+          @dragstart="arcCschRef?.dragstart"
+          @click="arcCschRef?.append"
+        >
+          <q-item-section><ArcCsch ref="arcCschRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></ArcCsch></q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </q-item>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import ArcSinh from './ArcSinh.vue';
+import ArcCosh from './ArcCosh.vue';
+import ArcTanh from './ArcTanh.vue';
+import ArcCoth from './ArcCoth.vue';
+import ArcSech from './ArcSech.vue';
+import ArcCsch from './ArcCsch.vue';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const arcSinhRef = ref();
+const arcCoshRef = ref();
+const arcTanhRef = ref();
+const arcCothRef = ref();
+const arcSechRef = ref();
+const arcCschRef = ref();
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/ArcCos.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>arccos</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>arccos</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('arccos(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/ArcCot.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>arccot</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>arccot</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('arccot(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/ArcCsc.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>arccsc</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>arccsc</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('arccsc(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/ArcSec.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>arcsec</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>arcsec</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('arcsec(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/ArcSin.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>arcsin</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>arcsin</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('arcsin(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/ArcTan.vue

@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>arctan</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>arctan</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('arctan(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>