SEECBC/FrontEnd/components/playground/nn/Editor.vue

<template>
  <div>
    <div class="codemirror">
      <codemirror
        ref="inputCm"
        v-model="formData.functionScript"
        :options="inputCmOptions"
        @ready="onCmReady"
        @focus="onCmFocus"
        @input="onCmCodeChange"
      />
    </div>
    <Button @click.native.prevent="commitCode" />
    <div class="codemirror">
      <codemirror
        ref="outputCm"
        :options="outputCmOptions"
        @ready="onCmReady"
        @focus="onCmFocus"
        @input="onCmCodeChange"
      />
    </div>
  </div>
</template>
<script>
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable no-console */
import Button from './Button.vue'
export default {
  name: 'Editor',
  components: { Button },
  data() {
    return {
      formData: {
        functionScript: ''
      },
      inputCmOptions: {
        autoCloseBrackets: true,
        tabSize: 4, // tab字符的宽度，默认为4
        styleActiveLine: true, // 当前行背景高亮
        lineNumbers: true, // 显示行数
        line: true,
        mode: 'text/x-python',
        theme: 'lesser-dark'
      },
      outputCmOptions: {
        autoCloseBrackets: true,
        tabSize: 4, // tab字符的宽度，默认为4
        styleActiveLine: true, // 当前行背景高亮
        lineNumbers: true, // 显示行数
        line: true,
        readOnly: true,
        mode: 'text/x-python',
        theme: 'paraiso-light'
      },
      code: ''
    }
  },
  computed: {
    codemirror() {
      return this.$refs.inputCm.codemirror
    }
  },

  mounted() {
    this.initCode()
  },

  methods: {
    initCode() {
      this.$refs.inputCm.codemirror.setValue(
       	'class CurveFp(object):\n'+  
	'	def __init__(self, p, a, b):\n'+
	'		""" y^2 = x^3 + a*x + b (mod p)."""\n'+
	'		self.p = p\n'+
	'		self.a = a\n'+
	'		self.b = b\n'+
	"class Point(object):\n"+
        "    def __init__(self, curve, x, y, order=None):\n"+
        "        self.curve = curve\n"+
        "        self.x = x\n"+
        "        self.y = y\n"+
        "        self.order = order\n"+
	"def add(point1,point2):\n"+
	    '	"""to be done"""\n'+
	"def mul(n,point0):\n"+
	    '	"""to be done"""\n'	
      )
    },

    onCmReady(cm) {
      // console.log('the editor is readied!', cm)
      // this.codemirror.setSize(('900px','full'))
      this.$refs.inputCm.codemirror.setSize('full', '500px')
    },
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    onCmFocus(cm) {
      // console.log('the editor is focus!', cm)
    },
    onCmCodeChange(newCode) {
      /* console.log('this is new code', newCode)
        this.formData.functionScript = newCode
        this.$emit('codeChange', this.formData.functionScript) */
      this.code = newCode
    },

    /*      commitCode(){
        console.log(this.code)
      }, */

    async commitCode() {
      const commitCodes = this.$refs.inputCm.codemirror.getValue()
      console.log(commitCodes)
      const _this = this
      await this.$axios
        .post('/api/commit', {
          code: commitCodes,
          level: 1
        })
        .then(function (res) {
          console.log(res)
          _this.code = res.data
          console.log(_this.code)
        })
      this.$refs.outputCm.codemirror.setValue(this.code.toString())
    }
  }
}
</script>
<style></style>