Issue/15 implement 3 d model page route

package.json

@@ -4,19 +4,23 @@
     "cleanName": "labeling"
   },
   "version": "1.0.4",
+  "type": "module",
   "scripts": {
     "start": "webpack-dev-server",
-    "build": "webpack -p",
+    "build": "webpack",
     "build-dev": "webpack",
     "test": "echo 'tests not implemented'",
     "test-ci": "echo 'tests not implemented'"
   },
   "dependencies": {
     "html-webpack-plugin": "^3.2.0",
-    "materia-widget-development-kit": "2.4.2",
+    "materia-widget-development-kit": "2.5.2",
     "meta-marked": "^0.4.2"
   },
   "license": "AGPL-3.0",
   "description": "Students select items from a bank and use them to label associated parts of an image. Designed for use in Materia.",
-  "author": "University of Central Florida, Center for Distributed Learning"
+  "author": "University of Central Florida, Center for Distributed Learning",
+  "devDependencies": {
+    "@babel/preset-env": "^7.15.4"
+  }
 }

src/creator.coffee → src/coffeeBag/creator.coffee

@@ -19,6 +19,8 @@ Namespace('Labeling').Creator = do ->
 
 	_defaultLabel = '[label title]'
 
+	_curvature = 50;
+
 	initNewWidget = (widget, baseUrl) ->
 		$('#image').hide()
 		$('#chooseimage').show()
@@ -255,8 +257,8 @@ Namespace('Labeling').Creator = do ->
 
 			# drawLine handles the curves and such; run it for inner
 			# and outer stroke
-			Labeling.Draw.drawLine(_context, dotx + _offsetX, doty + _offsetY, labelx + _offsetX, labely + _offsetY, 6, '#fff')
-			Labeling.Draw.drawLine(_context, dotx + _offsetX, doty + _offsetY, labelx + _offsetX, labely + _offsetY, 2, '#000')
+			Labeling.Draw.drawLine(_context, dotx + _offsetX, doty + _offsetY, labelx + _offsetX, labely + _offsetY, 6, '#fff', _curvature)
+			Labeling.Draw.drawLine(_context, dotx + _offsetX, doty + _offsetY, labelx + _offsetX, labely + _offsetY, 2, '#000', _curvature)
 
 	# Add term to the list, called by the click event
 	_addTerm = (e) ->

src/draw.coffee → src/coffeeBag/draw.coffee

@@ -1,8 +1,9 @@
+
 Namespace('Labeling').Draw = do ->
 	# draw a stylized line connecting to a term, with curvature
 	# shared between player and creator, since it MUST be consistent
 	# between the two
-	drawLine: (ctx,x1,y1,x2,y2,width,color) ->
+	drawLine: (ctx,x1,y1,x2,y2,width,color, curvature) ->
 		ctx.beginPath()
 
 		# move lines
@@ -33,10 +34,16 @@ Namespace('Labeling').Draw = do ->
 				lineResultX = -10
 				lineCurveOffsetX = -60
 
-		ctx.lineTo(x2 + labelOffsetX + lineCurveOffsetX, y2 + lineCurveOffsetY)
-		ctx.lineTo(x2 + labelOffsetX + lineResultX, y2 + labelOffsetY)
+		# Creates a curve Line
+		ctx.quadraticCurveTo(
+			x2 + labelOffsetX + lineCurveOffsetX + curvature,
+			y2 + lineCurveOffsetY + curvature,
+			x2 + labelOffsetX + lineResultX,
+			y2 + labelOffsetY
+		)
+
+
 		ctx.lineWidth = width
 		ctx.strokeStyle = color
 		ctx.lineCap = 'round'
 		ctx.stroke()
-

src/player.coffee → src/coffeeBag/player.coffee

@@ -441,8 +441,8 @@ Namespace('Labeling').Engine = do ->
 
 	# draw a stroked line (one big line, one smaller on top)
 	_drawStrokedLine = (x1,y1,x2,y2,color1,color2,context = _context) ->
-		Labeling.Draw.drawLine(context, x1 + _offsetX, y1 + _offsetY, x2 + _offsetX, y2 + _offsetY, 6, color1)
-		Labeling.Draw.drawLine(context, x1 + _offsetX, y1 + _offsetY, x2 + _offsetX, y2 + _offsetY, 2, color2)
+		Labeling.Draw.drawLine(context, x1 + _offsetX, y1 + _offsetY, x2 + _offsetX, y2 + _offsetY, 6, color1, 50)
+		Labeling.Draw.drawLine(context, x1 + _offsetX, y1 + _offsetY, x2 + _offsetX, y2 + _offsetY, 2, color2, 50)
 
 	# render the canvas frame
 	_drawBoard = (mouseX=0,mouseY=0) ->