jellies-draw 0.1.0

package/.eslintrc.js

@@ -0,0 +1,89 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    browser: true,
+    es6: true
+  },
+  extends: [
+    'plugin:vue/essential',
+    'eslint:recommended'
+  ],
+  globals: {
+    WeixinJSBridge : false
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      legacyDecorators: true
+    }
+  },
+  rules: {
+    "indent": ["error", 2, { "SwitchCase": 1 }],
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    "func-names": 0,
+    "one-var": [1, "never"],
+    "prefer-const": 1,
+    "prefer-arrow-callback": 2,
+    "arrow-body-style": 0,
+    "prefer-template": ["error"],
+    "consistent-return": "off",
+    "prefer-rest-params": 2,
+    "no-script-url": 0,
+    "no-console": [
+      2,
+      {
+        "allow": ["info", "error", "warn", "log"]
+      }
+    ],
+    "no-duplicate-imports": 2,
+    "eol-last": 2,
+    "no-useless-rename": 2,
+    "class-methods-use-this": 0,
+    "prefer-destructuring": 0,
+    "no-unused-vars": [2, {
+      // 允许声明未使用变量
+      "vars": "local",
+      // 参数不检查
+      "args": "none"
+    }],
+    "no-plusplus": 0,
+    "import/prefer-default-export": 0,
+    "no-use-before-define": [
+      "error",
+      {
+        "functions": false
+      }
+    ],
+    "@typescript-eslint/no-use-before-define": 0,
+    "object-shorthand": ["error", "always"],
+    "@typescript-eslint/explicit-function-return-type": 0,
+    "@typescript-eslint/interface-name-prefix": 0,
+    "no-invalid-this": 0,
+    "no-await-in-loop": "off",
+    "array-callback-return": "off",
+    "no-restricted-syntax": "off",
+    "@typescript-eslint/no-explicit-any": 0,
+    "import/no-extraneous-dependencies": 0,
+    "import/no-unresolved": 0,
+    "@typescript-eslint/explicit-member-accessibility": 0,
+    "@typescript-eslint/no-object-literal-type-assertion": 0,
+    "generator-star-spacing": "off",
+    "eqeqeq": 0,
+    "no-else-return": 2,
+    "arrow-parens": 0,
+    "space-before-function-paren": ["error", "never"],
+    "comma-dangle": [2, "never"]
+  },
+  overrides: [
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)'
+      ],
+      env: {
+        jest: true
+      }
+    }
+  ]
+}
+  

package/README.md

@@ -0,0 +1,24 @@
+# jellies-draw
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

package/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "jellies-draw",
+  "version": "0.1.0",
+  "description": "A drawer for jellies",
+  "private": false,
+  "main": "./src/index.js",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "webpack --display-error-details --config webpack.config.js",
+    "lint": "vue-cli-service lint"
+  },
+  "files": [
+    "src/*",
+    "package",
+    "public/*",
+    "*.json",
+    "*.js"
+  ],
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "konva": "^9.0.1",
+    "vue": "^2.6.11"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.1.1",
+    "@vue/cli-plugin-eslint": "^4.1.1",
+    "@vue/cli-service": "^4.1.1",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.5",
+    "css-loader": "^0.28.7",
+    "less": "^2.7.3",
+    "less-loader": "^4.0.5",
+    "sass": "^1.26.5",
+    "sass-loader": "^7.3.1",
+    "style-loader": "^0.19.0",
+    "url-loader": "^0.6.2",
+    "vue": "^2.5.9",
+    "vue-loader": "^13.5.0",
+    "vue-style-loader": "^3.0.3",
+    "vue-template-compiler": "^2.5.9",
+    "webpack": "^3.9.1"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package/src/App.vue

@@ -0,0 +1,93 @@
+<template>
+  <div id="app">
+    <div class="toolbar" v-show="isCanvasEnabled">
+      <tool-buttons :has-short-cuts="isCanvasEnabled" />
+      <div class="toolbar-divider"/>
+      <property-pickers />
+    </div>
+    <div class="demo-entry">
+      <input type="checkbox" v-model="isCanvasEnabled"/> Enable Canvas
+    </div>
+    <drawing-canvas
+      ref="drawingCanvas"
+      v-if="isCanvasCreated"
+      v-show="isCanvasVisible"
+    />
+  </div>
+</template>
+
+<script>
+import DrawingCanvas from './components/DrawingCanvas.vue'
+import ToolButtons from './components/ToolButtons.vue'
+import PropertyPickers from './components/PropertyPickers.vue'
+export default {
+  name: 'App',
+  components: {
+    DrawingCanvas,
+    ToolButtons,
+    PropertyPickers
+  },
+  data: () => ({
+    isCanvasCreated: false,
+    isCanvasVisible: false
+  }),
+  computed: {
+    isCanvasEnabled: {
+      get() {
+        return this.isCanvasCreated && this.isCanvasVisible
+      },
+      set(isEnabled) {
+        if (isEnabled) {
+          if (this.isCanvasCreated) {
+            this.isCanvasVisible = true
+          } else {
+            this.isCanvasCreated = true
+            this.isCanvasVisible = true
+          }
+        } else {
+          this.isCanvasVisible = false
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style>
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+#app {
+  height: 100%;
+  width: 100%;
+}
+.toolbar {
+  height: 40px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #EBEEF3;
+}
+.toolbar-divider {
+  height: 30px;
+  width: 1px;
+  background: rgba(0, 0, 0, 0.1);
+  margin: 0 7px 0 9px;
+}
+.demo-entry {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+}
+</style>

package/src/components/DrawingCanvas.vue

@@ -0,0 +1,66 @@
+<template>
+  <div
+    ref="container"
+    class="container"
+  >
+    <div
+      ref="whiteboard"
+      :class="[
+        'whiteboard',
+        {
+          'cursor-crosshair': isCrosshairCursorActive
+        }
+      ]"
+    />
+  </div>
+</template>
+
+<script>
+import Canvas from './functions/canvas';
+import Properties from './functions/properties';
+export default {
+  name: 'DrawingCanvas',
+  computed: {
+    canvas() {
+      return this.$refs.whiteboard
+    },
+    container() {
+      return this.$refs.container
+    },
+    isCrosshairCursorActive() {
+      return (Properties.isUsingDrawingTool && !Properties.isUsingText)
+    }
+  },
+  mounted() {
+    this.createStage();
+  },
+  beforeDestroy() {
+    this.destroyStage();
+  },
+  methods: {
+    createStage() {
+      Canvas.initialize(this.canvas, this.container)
+    },
+    destroyStage() {
+      Canvas.destroy()
+    }
+  }
+}
+</script>
+
+<style scoped>
+* {
+  margin: 0;
+  padding: 0;
+}
+.container {
+  width: 100%;
+  height: 100%;
+}
+.whiteboard {
+  background-color: yellow;
+}
+.cursor-crosshair {
+  cursor: crosshair;
+}
+</style>

package/src/components/PropertyPickers.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="property">
+    <div class="colors">
+      <div
+        class="color fill-color" 
+        :style="fillColorStyle"
+      >
+        <input
+          class="color-picker"
+          type="color"
+          v-model="fillColorValue"
+          @contextmenu="removeFillColor"
+        />
+      </div>
+      <div
+        class="color stroke-color"
+        :style="{
+          borderColor: strokeColor
+        }"
+      >
+        <input
+          class="color-picker"
+          type="color"
+          v-model="strokeColor"
+        />
+      </div>
+    </div>
+    <div class="size">
+      <span>{{ size }}</span>
+      <select
+        v-if="isUsingText"
+        v-model="fontSize"
+      >
+        <option
+          v-for="fontSizeOptionName, fontSizeOptionValue in fontSizeOptions"
+          :value="`${fontSizeOptionValue}`"
+          :key="fontSizeOptionValue"
+        >
+          {{ fontSizeOptionName }}
+        </option>
+      </select>
+      <select
+        v-else
+        v-model="strokeWidth"
+      >
+        <option
+          v-for="strokeWidthOptionName, strokeWidthOptionValue in strokeWidthOptions"
+          :value="`${strokeWidthOptionValue}`"
+          :key="strokeWidthOptionValue"
+        >
+          {{ strokeWidthOptionName }}
+        </option>
+      </select>
+    </div>
+  </div>
+</template>
+
+<script>
+import Properties from './functions/properties';
+export default {
+  name: 'PropertiesPicker',
+  data() {
+    return {
+      fontSizeOptions: {
+        15: 'S',
+        20: 'M',
+        35: 'L',
+        50: 'XL'
+      },
+      strokeWidthOptions: {
+        3: 'H',
+        4: 'HB',
+        5: 'B',
+        6: '2B'
+      }
+    }
+  },
+  computed: {
+    fillColor: {
+      get() {
+        return Properties.fillColor
+      },
+      set(newColor) {
+        Properties.fillColor = newColor
+      }
+    },
+    strokeColor: {
+      get() {
+        return Properties.strokeColor
+      },
+      set(newColor) {
+        Properties.strokeColor = newColor
+      }
+    },
+    strokeWidth: {
+      get() {
+        return Properties.strokeWidth
+      },
+      set(newWidth) {
+        Properties.strokeWidth = parseInt(newWidth)
+      }
+    },
+    fontSize: {
+      get() {
+        return Properties.fontSize
+      },
+      set(newSize) {
+        Properties.fontSize = parseInt(newSize)
+      }
+    },
+    fillColorValue: {
+      get() {
+        if (this.fillColor === 'transparent') {
+          return '#ffffff'
+        }
+        return this.fillColor
+      },
+      set(newColor) {
+        this.fillColor = newColor
+      }
+    },
+    fillColorStyle() {
+      if (this.fillColor !== 'transparent') {
+        return {
+          background: this.fillColor
+        }
+      }
+      return {
+        backgroundImage: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==)',
+        backgroundColor: 'white'
+      }
+    },
+    isUsingText() {
+      return Properties.isUsingText
+    },
+    size() {
+      if (Properties.isUsingText) {
+        return this.fontSizeOptions[this.fontSize]
+      }
+      return this.strokeWidthOptions[this.strokeWidth]
+    }
+  },
+  methods: {
+    removeFillColor(event) {
+      event.preventDefault()
+      this.fillColor = 'transparent'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.property {
+  background-color: #fff;
+  border-radius: 17px;
+  height: 34px;
+  margin: 3px;
+  padding: 8px;
+  box-sizing: border-box;
+  display: flex;
+}
+.colors {
+  height: 18px;
+  position: relative;
+  width: 30px;
+}
+.color {
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  top: 0;
+  border-radius: 10px;
+  border: 1px solid #eee;
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow: hidden;
+  left: 12px;
+}
+.stroke-color {
+  background: #fff;
+  left: 0;
+  border: 4px solid black;
+}
+.color-picker {
+  display: block;
+  width: 18px;
+  height: 18px;
+  opacity: 0;
+  margin: -1px 0 0 -1px;
+  cursor: pointer;
+}
+.stroke-color > .color-picker {
+  margin: -4px 0 0 -4px;
+}
+.size {
+  height: 18px;
+  width: 40px;
+  background: #ebeef3;
+  font-size: 12px;
+  line-height: 18px;
+  border-radius: 9px;
+  color: #333;
+  position: relative;
+  margin-left: 6px;
+}
+.size span {
+  display: block;
+  text-align: center;
+  position: absolute;
+  width: 40px;
+}
+.size select {
+  display: block;
+  position: absolute;
+  opacity: 0;
+}
+</style>

package/src/components/ToolButton.vue

@@ -0,0 +1,125 @@
+<template>
+  <div 
+  :class="[
+    'wrapper',
+    { active: isActive }
+  ]">
+    <button
+      :class="[
+        'jellies-draw-tool',
+        `tool-${action}`
+      ]"
+      @click="applyAction"
+    />
+    <span>{{ shortCut }}</span>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ToolButton',
+  props: {
+    action: {
+      type: String,
+      default: 'selector'
+    },
+    shortCut: {
+      type: Number,
+      default: 1
+    },
+    isActive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    applyAction() {
+      this.$emit('action-applied', this.action)
+    }
+  }
+}
+</script>
+<style scoped>
+@font-face {
+  font-family: "jellies-draw";
+  src: url('../assets/jellies-draw-tool.ttf') format('truetype');
+}
+button {
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  color: inherit;
+  outline: none;
+  background-color: transparent;
+  font-family: "jellies-draw", sans-serif !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.wrapper {
+  position: relative;
+  border-radius: 5px;
+  width: 34px;
+  height: 34px;
+  margin: 3px;
+  color: #555;
+  background-color: #fff;
+}
+.wrapper:hover {
+  box-shadow: 0 1px 0 0 rgba(30, 30, 30, 0.2);
+  margin-top: 2px;
+}
+.wrapper > span {
+  position: absolute;
+  bottom: 2px;
+  right: 4px;
+  font-size: 9px;
+  font-weight: bold;
+  color: #aaa;
+  pointer-events: none;
+}
+.wrapper.active {
+  background-color: #c6e2ff;
+  color: #399af4;
+}
+.wrapper.active:hover {
+  margin-top: 3px;
+  box-shadow: none;
+}
+.wrapper.active > span {
+  color: #399af4;
+}
+.tool-ellipse:before {
+  content: "\e654";
+}
+.tool-eraser:before {
+  content: "\e689";
+}
+.tool-text:before {
+  content: "\e69f";
+}
+.tool-image:before {
+  content: "\e6d8";
+}
+.tool-arrow:before {
+  content: "\e6f7";
+}
+.tool-line:before {
+  content: "\e70a";
+}
+.tool-selector:before {
+  content: "\e713";
+}
+.tool-pen:before {
+  content: "\e727";
+}
+.tool-rectangle:before {
+  content: "\e777";
+}
+.tool-clear:before {
+  content: "\e7a9";
+}
+</style>