Merge branch 'feature/select_gap_size'

tommy44458 · Jul 11, 2023 · 971e5a0 · 971e5a0
2 parents 306bc81 + 9f991ef
commit 971e5a0
Show file tree

Hide file tree

Showing 23 changed files with 530 additions and 155 deletions.
diff --git a/index.html b/index.html
@@ -4,9 +4,9 @@
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
- <meta name="description" content="ewod chip designer">
- <meta name="application-name" content="EWOD-chip online design tool">
- <meta name="apple-mobile-web-app-title" content="EWOD-chip online design tool">
+ <meta name="description" content="DMF chip designer">
+ <meta name="application-name" content="DMF chip online design tool">
+ <meta name="apple-mobile-web-app-title" content="DMF chip online design tool">
  <meta name="theme-color" content="#ffffff">
 
  <!-- global stylesheets -->
@@ -21,7 +21,7 @@
  <link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#2b6a73">
  <link rel="shortcut icon" href="/static/favicon.ico">
 
- <title>EWOD-chip online design tool - EDrop, the EWOD cybermanufacturing ecosystem</title>
+ <title>DMF chip online design tool - eDroplets, the DMF cybermanufacturing ecosystem</title>
  </head>
  <body>
  <div id="app">
@@ -31,7 +31,7 @@
  </div>
  <div class="loader-wrapper">
  <img src="/static/edrop_logo.png" height="140"/>
- <h1>EWOD-chip online design tool</h1>
+ <h1>DMF chip online design tool</h1>
  </div>
  <!-- This content will be replaced, once the Root Vue app is loaded -->
  </div>

diff --git a/src/assets/icons/system/edroplets_logo.js b/src/assets/icons/system/edroplets_logo.js
@@ -0,0 +1,40 @@
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+ 'system/edroplets_logo': {
+ width: 5332,
+ height: 1433,
+ viewBox: '0 0 5332 1433',
+ data: `<defs>
+ <style>
+ .cls-1 {
+ fill: #fff;
+ }
+
+ .cls-2 {
+ letter-spacing: -.01em;
+ }
+
+ .cls-3 {
+ font-family: Questrial-Regular, Questrial;
+ font-size: 1100px;
+ }
+
+ .cls-4 {
+ stroke: #325785;
+ stroke-miterlimit: 10;
+ stroke-width: 15px;
+ }
+
+ .cls-4, .cls-5 {
+ fill: #325785;
+ }
+ </style>
+ </defs>
+ <text class="cls-3" transform="translate(978.68 1111.49)"><tspan x="0" y="0">D</tspan><tspan class="cls-2" x="773.29" y="0">r</tspan><tspan x="1138.49" y="0">oplets</tspan></text>
+ <path class="cls-4" d="m531.64,1183.98c-209.19,0-338.67-132.91-355.86-303.93-3.42-34.01-.22-77.42,9.55-123.37,11.32-53.21,24.53-87.31,41.82-123.67.25-.53.5-1.06.76-1.6,54.28-114.72,122.47-222.34,202.94-320.47l100.79-122.9,100.79,122.9c80.48,98.13,148.66,205.75,202.94,320.47.25.54.51,1.07.76,1.6,17.29,36.36,30.5,70.45,41.82,123.67,9.77,45.95,12.97,89.36,9.55,123.37-17.19,171.02-146.67,303.93-355.86,303.93Z"/>
+ <path class="cls-1" d="m335.64,881.17c2.87,14.68,23.76,25.71,36.86,31.87,57.15,25.17,144.92,35.73,206.99,28.88,5.05-.65,10.04-1.48,14.9-2.63,5.12-1.38,10.54-2.98,15.57-4.6,61.67-19.72,107.68-55.99,101.46-125.21-3.39-50.62-32.96-98.17-76.66-123.86-36.03-21.71-77.75-26.58-118.65-18.32-63.41,12.09-119.44,55.91-147.04,114.29-34.48,70.34-23.3,156,18.27,220.96,42.97,68.13,116.15,116.17,195.43,129.82,149.09,26.77,282.19-76.66,305.22-224.8,16.29-99.45-10.99-200.65-50.41-291.72,0,0,2.74-1.37,2.74-1.37,25.32,44.54,46.52,91.98,60.61,141.38,10.67,37.68,17.28,76.59,17.79,115.83,5.39,190.96-152.28,341.83-344.22,316.26-96.92-12.37-187.8-67.81-242.7-148.89-57.41-83.44-72.88-195.38-30.33-288.63,35.78-81.09,111.61-142.79,198.49-161,59.46-13.47,123.73-5.51,176.33,26.05,53.14,31.08,93.13,83.73,108.31,143.45,20.95,81.28-.97,163.72-73.52,210.85-30.33,20.02-63.98,31.84-98.78,39.49-1.93.4-4.46.93-6.27,1.2-75.8,11.41-192.64-11.2-258.77-49.87-27.37-15.67-58.64-43.83-56.56-79.64,0,0,44.97.2,44.97.2h0Z"/>
+ <path class="cls-5" d="m670.68,1165.53c-117.33,48-261.08,31.22-363.04-46.52-35.97-26.8-66.79-60.45-92.27-97.3,0,0,81.66-46.07,81.66-46.07,7.2,16.45,15.46,32.45,24.98,47.74,1.3,2,4.26,6.61,5.49,8.52,1.04,1.77,8.43,11.88,9.77,13.81,74.58,100.91,211,144.12,333.41,119.83h0Z"/>
+ `
+ }
+})
diff --git a/src/assets/icons/system/index.js b/src/assets/icons/system/index.js
@@ -12,6 +12,7 @@ require('./editor')
 require('./elements')
 require('./expand')
 require('./gh_logo')
+require('./edroplets_logo')
 require('./home')
 require('./more_vert')
 require('./page')

diff --git a/src/assets/svgs/raw/system/edroplets_logo.svg b/src/assets/svgs/raw/system/edroplets_logo.svg
diff --git a/src/components/editor/common/ContextMenu/index.vue b/src/components/editor/common/ContextMenu/index.vue
@@ -33,6 +33,12 @@ export default {
  },
  zoom: {
  type: Number
+ },
+ clipboardLength: {
+ type: Number
+ },
+ selectedElementsLength: {
+ type: Number
  }
  },
  data: function () {
@@ -67,9 +73,18 @@ export default {
  menu () {
  if (this.specialState) {
  return [ { name: 'select', action: 'select' } ]
+ } else if (this.selectedElementsLength === 0) {
+ if (this.clipboardLength > 0) {
+ return [
+ { name: 'draw', action: 'draw' },
+ { name: 'paste', action: 'paste' }
+ ]
+ }
+ return [
+ { name: 'draw', action: 'draw' }
+ ]
  }
  return [
- { name: 'select', action: 'select' },
  { name: 'copy', action: 'copy' },
  { name: 'paste', action: 'paste' },
  { name: 'cut', action: 'cut' },
@@ -85,6 +100,9 @@ export default {
  case 'select':
  this.$emit('clearState')
  break
+ case 'draw':
+ this.$emit('draw')
+ break
  case 'copy':
  this.$emit('copy')
  break

diff --git a/src/components/editor/common/SidebarMenu/index.vue b/src/components/editor/common/SidebarMenu/index.vue
@@ -1,19 +1,27 @@
 <template>
  <div class="sidebar">
- <div class="sidebar-content">
+ <div v-if="substrate === 'glass'" class="sidebar-content">
  <p>Square electrode size:</p>
  <span>
  <input type="number" :min="gridUnit.current" :step="gridUnit.current" onkeydown="return false" v-model.number="squareSize"/>
  <span>um</span>
  </span>
  </div>
- <div class="sidebar-content">
+ <div v-if="substrate === 'glass'" class="sidebar-content">
  <p>Snapping grids distance:</p>
  <span>
  <input type="number" min="1" step="1" onkeydown="return false" :value="snappingDistance" @change="changeSnappingDistance"/>
  <span>grids</span>
  </span> 
  </div>
+ <div class="sidebar-content">
+ <p>Routing resolution:</p>
+ <span>
+ <input style="width: 65%;" type="range" id="res" name="res" min="0" max="1" step="0.01" :value="routingUnit" @change="changeRoutingResolution"/>
+ <input style="width: 25%;" type="number" min="0" max="1" step="0.01" :value="routingUnit" @change="changeRoutingResolution"/>
+ <span>Higher resolution takes more time routing</span>
+ </span>
+ </div>
  </div>
 </template>
 
@@ -25,7 +33,9 @@ export default {
  computed: {
  ...mapFields([
  'app.gridUnit',
- 'app.squareSize'
+ 'app.squareSize',
+ 'app.routingUnit',
+ 'app.substrate'
  ]),
  snappingDistance () {
  return this.gridUnit.current / this.gridUnit.origin
@@ -34,6 +44,9 @@ export default {
  methods: {
  changeSnappingDistance (e) {
  this.gridUnit.current = e.target.value * this.gridUnit.origin
+ },
+ changeRoutingResolution (e) {
+ this.routingUnit = e.target.value
  }
  }
 }

diff --git a/src/components/editor/common/mr-vue/MrContainer.vue b/src/components/editor/common/mr-vue/MrContainer.vue
@@ -2,7 +2,7 @@
  <div data-mr-container="true"
  class="mr-container"
  tabindex="0"
- @click="openContextMenu = false"
+ @click="$emit('closeContextMenu')"
  @click.right.stop.prevent="mouseRightClickHandler"
  @mousedown.capture="mouseDownHandler"
  @mouseup.capture="$root.$emit('paint-electrodes-disable')"
@@ -67,7 +67,6 @@ export default {
  },
  computed: {
  ...mapFields([
- 'app.openContextMenu',
  'app.gridUnit',
  'app.edit.paint',
  'app.edit.moveStage',
@@ -86,10 +85,10 @@ export default {
 
  mouseDownHandler (e) {
  let isMrs = false
- this.initialAbsPos = this.currentAbsPos = this.getMouseAbsPoint(e)
- this.initialRelPos = this.currentRelPos = this.getMouseRelPoint(e)
+ this.initialAbsPos = this.getMouseAbsPoint(e)
+ this.initialRelPos = this.getMouseRelPoint(e)
 
- if (e.target.dataset.mrContainer) {
+ if (this.paint || e.target.dataset.mrContainer) {
  if (!e.shiftKey) {
  this.$emit('clearselection')
  }
@@ -106,15 +105,6 @@ export default {
  }
 
  if (isMrs) {
- if (this.activeElements.length > 0 && this.offsetX === null && this.offsetY === null) {
- const unit = this.gridUnit.current / 10
- const posX = this.currentRelPos.x
- const posY = this.currentRelPos.y
- const unitX = parseInt((posX / this.zoom) / unit)
- const unitY = parseInt((posY / this.zoom) / unit)
- this.offsetX = parseInt(this.activeElements[0].left / unit) - unitX
- this.offsetY = parseInt(this.activeElements[0].top / unit) - unitY
- }
  document.documentElement.addEventListener('mousemove', this.mouseMoveHandler, true)
  document.documentElement.addEventListener('mouseup', this.mouseUpHandler, true)
  }
@@ -153,22 +143,15 @@ export default {
  mouseMoveHandler (e) {
  const lastAbsX = this.currentAbsPos.x
  const lastAbsY = this.currentAbsPos.y
- let offX = 0
- let offY = 0
- let posX = 0
- let posY = 0
 
  // const elCompStyle = window.getComputedStyle(mrEl)
-
- offX = this.getMouseAbsPoint(e).x - lastAbsX
+ const offX = this.getMouseAbsPoint(e).x - lastAbsX
  this.currentAbsPos.x = this.getMouseAbsPoint(e).x
- this.currentRelPos.x = this.getMouseRelPoint(e).x
- posX = this.currentRelPos.x
+ const posX = this.currentRelPos.x = this.getMouseRelPoint(e).x
 
- offY = this.getMouseAbsPoint(e).y - lastAbsY
+ const offY = this.getMouseAbsPoint(e).y - lastAbsY
  this.currentAbsPos.y = this.getMouseAbsPoint(e).y
- this.currentRelPos.y = this.getMouseRelPoint(e).y
- posY = this.currentRelPos.y
+ const posY = this.currentRelPos.y = this.getMouseRelPoint(e).y
 
  if (this.resizing) {
  this.mrElements.map(mrEl => {
@@ -329,9 +312,9 @@ export default {
  lastElPos.push([acEl.left, acEl.top])
  offsetEl.push([parseInt(this.activeElements[0].left / unit) - acElX, parseInt(this.activeElements[0].top / unit) - acElY])
  })
- const offsetX = this.offsetX
- const offsetY = this.offsetY
- this.$emit('mousemove', {offsetEl, unitX, unitY, lastElPos, offsetX, offsetY})
+ const initMousePosX = this.initialRelPos.x
+ const initMousePosY = this.initialRelPos.y
+ this.$emit('mousemove', {offsetEl, unitX, unitY, lastElPos, initMousePosX, initMousePosY})
  },
 
  fixPosition (el, val, prop) {

diff --git a/src/components/editor/common/mr-vue/MrEl.vue b/src/components/editor/common/mr-vue/MrEl.vue
@@ -1,7 +1,33 @@
 <template>
- <div data-mr-el="true"
+ <div
+ v-if="paint || moveStage"
+ data-mr-el="true"
  class="mr-el"
  :style="style"
+ >
+ <!-- IMPORTANT! KEEP SLOT AS FIRST CHILD -->
+ <slot></slot>
+ <!-- IMPORTANT! KEEP SLOT AS FIRST CHILD -->
+
+ <div v-if="resizable">
+ <div 
+ data-mr-handle="true"
+ v-for="handle in handles"
+ :key="handle"
+ class="handle" :class="handle"
+ :style="{ display: active ? 'block' : 'none'}">
+ </div>
+ </div>
+ <div v-if="!resizable"
+ class="selection-box"
+ :style="{ display: active ? 'block' : 'none'}">
+ </div>
+ </div>
+ <div
+ v-else
+ data-mr-el="true"
+ class="mr-el mr-el-no-stage"
+ :style="style"
  @mousedown.exact="e => $emit('activated', e)"
  @mousedown.meta.capture="e => $emit('activated', e)"
  @mousedown.ctrl.capture="e => $emit('activated', e)"
@@ -28,6 +54,8 @@
 </template>
 
 <script>
+import { mapFields } from 'vuex-map-fields'
+
 export default {
  name: 'mr-el',
  props: {
@@ -116,14 +144,20 @@ export default {
  zIndex: this.zIndex,
  minWidth: this.minWidth + 'px',
  minHeight: this.minHeight + 'px',
- top: (typeof this.top === 'number') ? (this.top + 'px') : this.top,
- left: (typeof this.left === 'number') ? (this.left + 'px') : this.left,
+ top: (typeof this.top === 'number') ? (Math.round(this.top / (this.gridUnit.current / 10)) * (this.gridUnit.current / 10) + 'px') : this.top,
+ left: (typeof this.left === 'number') ? (Math.round(this.left / (this.gridUnit.current / 10)) * (this.gridUnit.current / 10) + 'px') : this.left,
  bottom: (typeof this.bottom === 'number') ? (this.bottom + 'px') : this.bottom,
  right: (typeof this.right === 'number') ? (this.right + 'px') : this.right,
  width: (typeof this.width === 'number') ? (this.width + 'px') : this.width,
  height: (typeof this.height === 'number') ? (this.height + 'px') : this.height
  }
- }
+ },
+
+ ...mapFields([
+ 'app.edit.moveStage',
+ 'app.edit.paint',
+ 'app.gridUnit'
+ ])
  }
 }
 </script>
@@ -134,7 +168,7 @@ export default {
  position: absolute;
  box-sizing: border-box;
 }
-.mr-el:hover {
+.mr-el-no-stage:hover {
  cursor: move;
 }
 .mr-el > * {