一款非常好用的开源画图软件 geditor (可以自己 DIY 定制开发)

geditor

Introduction

A Graph Editor implementing by Spring Boot, Kotlin, Java, based on jgraphx.

Quick Start

Environment requirements

Java 8
Maven 3

Configuration

server:
port: 9999

management:
endpoints:
web:
exposure:
include: "*"

spring:
groovy:
template:
suffix: .groovy
cache: false
configuration:
auto-new-line: true
auto-indent: true

Step 1 Clone Code

git clone https://github.com/to-be-architect/geditor

Step 2 Run Application

mvn spring-boot:run

Step 3 Visit geditor

http://localhost:9999/

Github 源码地址

https://github.com/to-be-architect/geditor

后端技术栈:

Spring Boot

Kotlin

Groovy Template Engine

pom.xml 里面添加:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-groovy-templates</artifactId>
</dependency>

application.yaml

server:
  port: 9999
management:
  endpoints:
    web:
      exposure:
        include: "*"
spring:
  groovy:
    template:
      suffix: .groovy
      cache: false
      configuration:
        auto-new-line: true
        auto-indent: true

MainController.kt

package com.light.sword

import org.springframework.stereotype.Controller
import org.springframework.ui.Model
import org.springframework.web.bind.annotation.GetMapping
import org.springframework.web.servlet.ModelAndView
@Controller
class MainController {
    @GetMapping(value = ["/", ""])
    fun main(model: Model): ModelAndView {
        return ModelAndView("index")
    }
    @GetMapping(value = ["/open.html"])
    fun open(model: Model): ModelAndView {
        return ModelAndView("open")
    }
}

index.groovy

yieldUnescaped '<!DOCTYPE html>'
html {
    head {
        title("Ge")
        meta('http-equiv': 'Content-Type', content: 'text/html; charset=utf-8')
        meta('name': "viewport", content: "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no")
        link(rel: 'icon', href: 'favicon.ico', type: "image/x-icon")
        link(rel: "stylesheet", type: "text/css", href: "styles/grapheditor.css")
        script(src: '/js/urlParams.js') {}
        script(src: '/js/App.js') {}
        script(src: '/js/Init.js') {}
        script(src: '/js/pako.min.js') {}
        script(src: '/js/base64.js') {}
        script(src: '/js/jscolor.js') {}
        script(src: '/js/sanitizer.min.js') {}
        script(src: '/js/mxClient.js') {}
        script(src: '/js/EditorUi.js') {}
        script(src: '/js/Editor.js') {}
        script(src: '/js/Sidebar.js') {}
        script(src: '/js/Graph.js') {}
        script(src: '/js/Format.js') {}
        script(src: '/js/Shapes.js') {}
        script(src: '/js/Actions.js') {}
        script(src: '/js/Menus.js') {}
        script(src: '/js/Toolbar.js') {}
        script(src: '/js/Dialogs.js') {}
    }
    body(class: 'geEditor') {
        script(src: '/js/geEditor.js') {}
    }
}

open.groovy

yieldUnescaped '<!DOCTYPE html>'
html {
    head {
        title("Ge")
        meta('http-equiv': 'Content-Type', content: 'text/html; charset=utf-8')
        meta('name': "viewport", content: "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no")
        link(rel: 'icon', href: 'favicon.ico', type: "image/x-icon")
        link(rel: "stylesheet", type: "text/css", href: "styles/grapheditor.css")
        script(src: '/js/Open.js') {}
    }
    body(onload: 'main();') {
        form(method: "POST",
                enctype: "multipart/form-data",
                action: "",
                name: "openForm",
                id: "openForm",
                onsubmit: "return handleSubmit();",
                'accept-charset': "UTF-8") {
            table(style: "width:100%;") {
                tr(style: "height:40px;vertical-align:top;", colspan: "2") {
                    td(style: "height:40px;vertical-align:top;", colspan: "2") {
                        input(type: "file", name: "upfile", onchange: "fileChanged()") {}
                    }
                }
                tr {
                    td(colspan: "2", height: "120px", id: "openSupported", style: "font-family:arial;color:grey;font-size:9pt;vertical-align:top;text-align:left;") {
                    }
                }
                tr {
                    td {}
                    td(style: "vertical-align:middle;text-align:right;white-space:nowrap;") {
                        input(type: "button",
                                id: "closeButton",
                                class: "geBtn",
                                value: "Cancel",
                                onclick: "hideWindow(true);") {
                        }
                        input(type: "submit",
                                id: "openButton",
                                class: "geBtn gePrimaryBtn",
                                value: "Open",
                                disabled: "disabled") {}
                    }
                }
            }
        }
    }
}

剩下的就是核心的前端 js 代码了, 在 graph-editor/src/main/resources/static/js  目录下面.

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章