Add line simple object and selection for all (#141)

- enhance managing coordinates for simple objects
- add line
- add line simple object
- add hover and selection

Co-authored-by: Andrei Mazol <[email protected]>

example/config/webpack.config.js

@@ -11,6 +11,7 @@ const gitRevisionPlugin = new GitRevisionPlugin({
   commithashCommand: `rev-list v${config.version}..HEAD --count`
 })
 const buildNumber = gitRevisionPlugin.commithash()
+
 module.exports = override(
   addBundleVisualizer({}, true),
   addWebpackModuleRule({

example/yarn.lock

@@ -4176,6 +4176,11 @@ electron-to-chromium@^1.3.378, electron-to-chromium@^1.3.585:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.588.tgz#c6515571737bfb42678115a5eaa818384593a9a5"
   integrity sha512-0zr+ZfytnLeJZxGgmEpPTcItu5Mm4A5zHPZXLfHcGp0mdsk95rmD7ePNewYtK1yIdLbk8Z1U2oTRRfOtR4gbYg==
 
+element-closest-polyfill@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/element-closest-polyfill/-/element-closest-polyfill-1.0.2.tgz#272c217d60effe76a0509a911cde5fcdd78da5a6"
+  integrity sha512-+3cNhtv8YIyk/oDSlBv+zqUjQFcF9puLp4TFIk2w0Gqd6IL2uZnnu0jvDdOaI7dsK1bIA9gG69KIvkEyUFVGRg==
+
 elliptic@^6.5.3:
   version "6.5.3"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.3.tgz#cb59eb2efdaf73a0bd78ccd7015a62ad6e0f93d6"

src/icons/index.tsx

@@ -84,6 +84,8 @@ import ZoomInIcon from './files/zoom-in.svg'
 import ZoomOutIcon from './files/zoom-out.svg'
 import ShapeCircleIcon from './files/shape-circle.svg'
 import ShapeRectangleIcon from './files/shape-rectangle.svg'
+import ShapePolylineIcon from './files/shape-polyline.svg'
+import ShapeLineIcon from './files/shape-line.svg'
 
 const icons = {
   about: AboutIcon,
@@ -156,7 +158,9 @@ const icons = {
   'zoom-in': ZoomInIcon,
   'zoom-out': ZoomOutIcon,
   'shape-circle': ShapeCircleIcon,
-  'shape-rectangle': ShapeRectangleIcon
+  'shape-rectangle': ShapeRectangleIcon,
+  'shape-polyline': ShapePolylineIcon,
+  'shape-line': ShapeLineIcon
 }
 
 function emptyIcon() {

src/script/chem/struct/index.js

@@ -457,10 +457,9 @@ Struct.prototype.rxnArrowSetPos = function (id, pp) {
   item.pp = pp
 }
 
-Struct.prototype.simpleObjectSetPos = function (id, p0, p1) {
+Struct.prototype.simpleObjectSetPos = function (id, pos) {
   const item = this.simpleObjects.get(id)
-  item.p0 = p0
-  item.p1 = p1
+  item.pos = pos
 }
 
 /**
@@ -781,14 +780,14 @@ Struct.prototype.findLoops = function () {
   const bondsToMark = new Pile()
 
   /*
-	 	Starting from each half-bond not known to be in a loop yet,
-	 	follow the 'next' links until the initial half-bond is reached or
-	 	the length of the sequence exceeds the number of half-bonds available.
-	 	In a planar graph, as long as every bond is a part of some "loop" -
-	 	either an outer or an inner one - every iteration either yields a loop
-	 	or doesn't start at all. Thus this has linear complexity in the number
-	 	of bonds for planar graphs.
-	 */
+      Starting from each half-bond not known to be in a loop yet,
+      follow the 'next' links until the initial half-bond is reached or
+      the length of the sequence exceeds the number of half-bonds available.
+      In a planar graph, as long as every bond is a part of some "loop" -
+      either an outer or an inner one - every iteration either yields a loop
+      or doesn't start at all. Thus this has linear complexity in the number
+      of bonds for planar graphs.
+   */
 
   let hbIdNext, c, loop, loopId
   this.halfBonds.forEach((hb, hbId) => {
@@ -1045,8 +1044,12 @@ RxnPlus.prototype.clone = function () {
 
 function SimpleObject(params) {
   params = params || {}
-  this.p0 = params.p0 ? new Vec2(params.p0) : new Vec2()
-  this.p1 = params.p1 ? new Vec2(params.p1) : new Vec2()
+  this.pos = []
+
+  if (params.pos)
+    for (let i = 0; i < params.pos.length; i++)
+      this.pos[i] = params.pos[i] ? new Vec2(params.pos[i]) : new Vec2()
+
   this.mode = params.mode
 }
 
@@ -1057,10 +1060,10 @@ SimpleObject.prototype.clone = function () {
 SimpleObject.prototype.center = function () {
   switch (this.mode) {
     case 'rectangle': {
-      return Vec2.centre(this.p0, this.p1)
+      return Vec2.centre(this.pos[0], this.pos[1])
     }
     default:
-      return this.p0
+      return this.pos[0]
   }
 }
 

src/script/editor/actions/paste.js

@@ -110,8 +110,7 @@ export function fromPaste(restruct, pstruct, point, angle = 0) {
   pstruct.simpleObjects.forEach(simpleObject => {
     action.addOp(
       new op.SimpleObjectAdd(
-        simpleObject.p0.add(offset),
-        simpleObject.p1.add(offset),
+        simpleObject.pos.map(p => p.add(offset)),
         simpleObject.mode
       ).perform(restruct)
     )

src/script/editor/actions/simpleobject.js

@@ -22,9 +22,9 @@ export function fromSimpleObjectDeletion(restruct, id) {
   return action.perform(restruct)
 }
 
-export function fromSimpleObjectAddition(restruct, p0, p1, mode) {
+export function fromSimpleObjectAddition(restruct, pos, mode) {
   var action = new Action()
-  action.addOp(new op.SimpleObjectAdd(p0, p1, mode))
+  action.addOp(new op.SimpleObjectAdd(pos, mode))
   return action.perform(restruct)
 }
 

src/script/editor/operations/op.js

@@ -934,8 +934,9 @@ function RestoreDescriptorsPosition(history) {
 }
 RestoreDescriptorsPosition.prototype = new Base()
 
-function SimpleObjectAdd(p0, p1, mode) {
-  this.data = { id: null, p0, p1, mode }
+function SimpleObjectAdd(pos, mode) {
+  this.data = { id: null, pos, mode }
+
   let performed = false
   this.execute = function (restruct) {
     const struct = restruct.molecule
@@ -953,8 +954,7 @@ function SimpleObjectAdd(p0, p1, mode) {
 
     struct.simpleObjectSetPos(
       this.data.id,
-      new Vec2(this.data.p0),
-      new Vec2(this.data.p1)
+      this.data.pos.map(p => new Vec2(p))
     )
 
     invalidateItem(restruct, 'simpleObjects', this.data.id, 1)
@@ -969,14 +969,13 @@ function SimpleObjectAdd(p0, p1, mode) {
 SimpleObjectAdd.prototype = new Base()
 
 function SimpleObjectDelete(id) {
-  this.data = { id, p0: null, p1: null, item: null }
+  this.data = { id, pos: null, item: null }
   let performed = false
   this.execute = function (restruct) {
     const struct = restruct.molecule
     if (!performed) {
       const item = struct.simpleObjects.get(this.data.id)
-      this.data.p0 = item.p0
-      this.data.p1 = item.p1
+      this.data.pos = item.pos
       this.data.mode = item.mode
     }
 
@@ -1004,8 +1003,7 @@ function SimpleObjectMove(id, d, noinvalidate) {
     const id = this.data.id
     const d = this.data.d
     const item = struct.simpleObjects.get(id)
-    item.p0.add_(d)
-    item.p1.add_(d)
+    item.pos.forEach(p => p.add_(d))
     restruct.simpleObjects
       .get(id)
       .visel.translate(scale.obj2scaled(d, restruct.render.options))
@@ -1029,7 +1027,9 @@ function SimpleObjectResize(id, d, noinvalidate) {
     const id = this.data.id
     const d = this.data.d
     const item = struct.simpleObjects.get(id)
-    item.p1.add_(d)
+
+    //JA: TODO
+    if (d) item.pos[1].add_(d)
     restruct.simpleObjects
       .get(id)
       .visel.translate(scale.obj2scaled(d, restruct.render.options))

src/script/editor/shared/closest.js

@@ -36,8 +36,7 @@ function findClosestSimpleObject(restruct, pos) {
   let ret = null
 
   restruct.simpleObjects.forEach((simpleObject, id) => {
-    const p = simpleObject.item.center()
-    const dist = Math.max(Math.abs(pos.x - p.x), Math.abs(pos.y - p.y))
+    const dist = simpleObject.calcDistance(pos)
 
     if (dist < 0.3 && (!ret || dist < minDist)) {
       minDist = dist

src/script/editor/tool/helper/locate.js

@@ -72,10 +72,10 @@ function getElementsInRectangle(restruct, p0, p1) {
 
   restruct.simpleObjects.forEach((item, id) => {
     if (
-      item.item.p0.x > x0 &&
-      item.item.p0.x < x1 &&
-      item.item.p0.y > y0 &&
-      item.item.p0.y < y1
+      item.item.pos[0].x > x0 &&
+      item.item.pos[0].x < x1 &&
+      item.item.pos[0].y > y0 &&
+      item.item.pos[0].y < y1
     )
       simpleObjectsList.push(id)
   })
@@ -144,7 +144,7 @@ function getElementsInPolygon(restruct, rr) {
   })
 
   restruct.simpleObjects.forEach((item, id) => {
-    if (isPointInPolygon(r, item.item.p0)) simpleObjectsList.push(id)
+    if (isPointInPolygon(r, item.item.pos[0])) simpleObjectsList.push(id)
   })
 
   const enhancedFlagList = []

src/script/editor/tool/simpleobject.js

@@ -33,6 +33,7 @@ SimpleObjectTool.prototype.mousedown = function (event) {
   var rnd = this.editor.render
   const p0 = rnd.page2obj(event)
   this.dragCtx = { p0 }
+
   var ci = this.editor.findItem(event, ['simpleObjects'])
   if (ci && ci.map === 'simpleObjects') {
     this.editor.hover(null)
@@ -61,8 +62,7 @@ SimpleObjectTool.prototype.mousemove = function (event) {
       if (!this.dragCtx.action) {
         const action = fromSimpleObjectAddition(
           rnd.ctab,
-          this.dragCtx.p0,
-          this.dragCtx.p0,
+          [this.dragCtx.p0, this.dragCtx.p0],
           this.mode
         )
         //TODO: need to rework  actions/operations logic
@@ -74,6 +74,7 @@ SimpleObjectTool.prototype.mousemove = function (event) {
       } else {
         this.dragCtx.action.perform(rnd.ctab)
       }
+
       this.dragCtx.action = fromSimpleObjectResizing(
         rnd.ctab,
         this.dragCtx.itemId,
@@ -98,8 +99,7 @@ SimpleObjectTool.prototype.mouseup = function (event) {
       )
       this.dragCtx.action = fromSimpleObjectAddition(
         rnd.ctab,
-        this.dragCtx.p0,
-        this.dragCtx.previous,
+        [this.dragCtx.p0, this.dragCtx.previous],
         this.mode
       )
     }

src/script/format/chemGraph/toGraph/prepare.js

@@ -71,11 +71,10 @@ export function prepareStructForGraph(struct) {
   struct.simpleObjects.forEach(item => {
     graphNodes.push({
       type: 'simpleObject',
-      center: item.p0,
+      center: item.pos[0],
       data: {
         mode: item.mode,
-        p0: item.p0,
-        p1: item.p1
+        pos: item.pos
       }
     })
   })

src/script/format/schemes/simpleObjectSchema.js

@@ -34,32 +34,25 @@ const schema = {
         mode: {
           type: 'string'
         },
-        p0: {
-          type: 'object',
-          properties: {
-            x: {
-              type: 'integer'
-            },
-            y: {
-              type: 'integer'
+        pos: {
+          type: 'array',
+          items: [
+            {
+              type: 'object',
+              properties: {
+                x: {
+                  type: 'integer'
+                },
+                y: {
+                  type: 'integer'
+                }
+              },
+              required: ['x', 'y']
             }
-          },
-          required: ['x', 'y']
-        },
-        p1: {
-          type: 'object',
-          properties: {
-            x: {
-              type: 'integer'
-            },
-            y: {
-              type: 'integer'
-            }
-          },
-          required: ['x', 'y']
+          ]
         }
       },
-      required: ['type', 'mode', 'p0', 'p1']
+      required: ['type', 'mode', 'pos']
     }
   }
 }

src/script/render/draw.js

@@ -20,18 +20,30 @@ import Raphael from '../raphael-ext'
 
 const tfx = util.tfx
 
-function rectangle(paper, p0, p1, options) {
+function rectangle(paper, pos, options) {
   return paper.rect(
-    tfx(Math.min(p0.x, p1.x)),
-    tfx(Math.min(p0.y, p1.y)),
-    tfx(Math.abs(p1.x - p0.x)),
-    tfx(Math.abs(p1.y - p0.y))
+    tfx(Math.min(pos[0].x, pos[1].x)),
+    tfx(Math.min(pos[0].y, pos[1].y)),
+    tfx(Math.abs(pos[1].x - pos[0].x)),
+    tfx(Math.abs(pos[1].y - pos[0].y))
   )
 }
 
-function circle(paper, p0, p1, options) {
-  let rad = Math.sqrt(Math.pow(p0.x - p1.x, 2), Math.pow(p0.y - p1.y, 2))
-  return paper.circle(p0.x, p0.y, rad)
+function circle(paper, pos, options) {
+  const rad = Vec2.dist(pos[0], pos[1])
+  return paper.circle(pos[0].x, pos[0].y, rad)
+}
+
+function polyline(paper, pos, options) {
+  let path = ['M', pos[0].x, pos[0].y]
+  for (let i = 1; i < pos.length; i++) path.push('L', pos[i].x, pos[i].y)
+  return paper.path(path)
+}
+
+function line(paper, pos, options) {
+  let path = ['M', pos[0].x, pos[0].y]
+  path.push('L', pos[1].x, pos[1].y)
+  return paper.path(path)
 }
 
 function arrow(paper, a, b, options) {
@@ -394,5 +406,7 @@ export default {
   selectionPolygon,
   selectionLine,
   circle,
-  rectangle
+  rectangle,
+  polyline,
+  line
 }

src/script/render/options.js

@@ -86,6 +86,12 @@ function defaultOptions(opt) {
       stroke: 'gray',
       'stroke-width': '1px'
     },
+    highlightStyleSimpleObject: {
+      stroke: '#0c0',
+      'stroke-width': scaleFactor / 4,
+      'stroke-linecap': 'round',
+      'stroke-opacity': 0.6
+    },
     atomSelectionPlateRadius: labelFontSize * 1.2
   }