Tweaks & improvements to polygon editor

bin/style.css

@@ -792,12 +792,30 @@ input[type=checkbox]:checked:after {
   color: white;
   mix-blend-mode: overlay;
 }
+/* Poly editor */
+.poly-editor .description {
+  margin: 5px;
+  background-color: black;
+  outline: 4px solid #4a4a4a;
+  padding: 2px;
+}
+.poly-editor .point-list input {
+  width: 70px;
+}
+.poly-editor .point-list .deletePoint {
+  width: 20px;
+  margin-left: 8px;
+}
+.poly-editor .poly-vector2 {
+  display: block;
+  padding: 5px;
+}
 /* Terrain editor */
 .terrain-brushModeDescription {
   margin: 5px;
   background-color: black;
   outline: 4px solid #4a4a4a;
-  padding: 1px;
+  padding: 2px;
 }
 .terrain-brushModeContainer {
   padding: 1px;

hide/prefab/PolygonEditor.hx

@@ -18,6 +18,22 @@ class Edge{
 	}
 }
 
+class SphereHandle extends h3d.scene.Mesh {
+	public function new(prim, mat, parent) {
+		super(prim, mat, parent);
+	}
+	override function sync(ctx:h3d.scene.RenderContext) {
+		var cam = ctx.camera;
+		var gpos = getAbsPos().getPosition();
+		var distToCam = cam.pos.sub(gpos).length();
+		var engine = h3d.Engine.getCurrent();
+		var ratio = 18 / engine.height;
+		setScale(ratio * distToCam * Math.tan(cam.fovY * 0.5 * Math.PI / 180.0));
+		calcAbsPos();
+		super.sync(ctx);
+	}
+}
+
 class MovablePoint {
 
 	public var showDebug : Bool;
@@ -29,9 +45,10 @@ class MovablePoint {
 
 	public function new(point : h2d.col.Point, ctx : Context){
 		this.point = point;
-		mesh = new h3d.scene.Mesh(h3d.prim.Sphere.defaultUnitSphere(), null, ctx.local3d);
+		mesh = new SphereHandle(h3d.prim.Cube.defaultUnitCube(), null, ctx.local3d);
 		mesh.name = "_movablePoint";
 		mesh.material.setDefaultProps("ui");
+		mesh.material.mainPass.depthTest = Always;
 		mesh.scale(0.1);
 		mesh.setPosition(point.x, point.y, 0);
 		localPosText = createText(ctx);
@@ -78,7 +95,7 @@ class MovablePoint {
 
 	public function updateColor(){
 		switch(colorState){
-			case None : mesh.material.color.set(1,1,1);
+			case None : mesh.material.color.set(0,0,0);
 			case Overlapped : mesh.material.color.set(1,1,0);
 			case OverlappedForDelete : mesh.material.color.set(1,0,0);
 			case Selected : mesh.material.color.set(0,0,1);
@@ -307,7 +324,7 @@ class PolygonEditor {
 			lineGraphics.material.mainPass.setPassName("overlay");
 			lineGraphics.material.mainPass.depth(false, LessEqual);
 			selectedEdgeGraphic = new h3d.scene.Graphics(ctx.local3d);
-			selectedEdgeGraphic.lineStyle(6, 0xFFFF00, 0.5);
+			selectedEdgeGraphic.lineStyle(3, 0xFFFF00, 0.5);
 			selectedEdgeGraphic.material.mainPass.setPassName("overlay");
 			selectedEdgeGraphic.material.mainPass.depth(false, LessEqual);
 			triangleGraphics = new h3d.scene.Graphics(ctx.local3d);
@@ -586,9 +603,11 @@ class PolygonEditor {
 			v.append('</div>');
 			container.append(v);
 		}
-
-		for(p in polygonPrefab.points){
-			createVector(p);
+		
+		if(polygonPrefab.points != null) {
+			for(p in polygonPrefab.points){
+				createVector(p);
+			}
 		}
 	}
 }

hide/prefab/l3d/Polygon.hx

@@ -13,7 +13,7 @@ class Polygon extends Object3D {
 
 	public var shape(default, null) : Shape = Quad;
 	public var debugColor : Int;
-	public var points : h2d.col.Polygon = [];
+	public var points : h2d.col.Polygon;
 	#if editor
 	public var editor : PolygonEditor;
 	#end
@@ -40,7 +40,8 @@ class Polygon extends Object3D {
 			case 1: shape = Type.createEnumIndex(Shape, obj.kind, obj.args);
 			case 2:
 				shape = Custom;
-				points = obj.points;
+				var list : Array<Dynamic> = obj.points;
+				points = [for(pt in list) new h2d.col.Point(pt.x, pt.y)];
 		}
 		debugColor = obj.debugColor != null ? obj.debugColor : 0xFFFFFF;
 	}
@@ -157,7 +158,7 @@ class Polygon extends Object3D {
 		ctx = ctx.clone(this);
 		var primitive = makePrimitive();
 		var mesh = new h3d.scene.Mesh(primitive, ctx.local3d);
-		mesh.material.props = h3d.mat.MaterialSetup.current.getDefaults("ui");
+		mesh.material.props = h3d.mat.MaterialSetup.current.getDefaults("overlay");
 		mesh.material.blendMode = Alpha;
 		mesh.material.mainPass.culling = None;
 		ctx.local3d = mesh;
@@ -183,7 +184,7 @@ class Polygon extends Object3D {
 		if( points != null ){
 			var indexes = points.fastTriangulate();
 			var idx : hxd.IndexBuffer = new hxd.IndexBuffer();
-			for( i in indexes ) if( i != null ) idx.push(i);
+			for( i in indexes ) #if js if( i != null ) #end idx.push(i);
 			var pts = [for( p in points ) new h3d.col.Point(p.x, p.y, 0)];
 			polyPrim = new h3d.prim.Polygon(pts, idx);
 			polyPrim.addNormals();
@@ -257,25 +258,8 @@ class Polygon extends Object3D {
 			<dt>Angle</dt><dd><input field="angle" type="range" min="0" max="360" /></dd>');
 
 		group.append(discProps);
-		var editorProps = editor.addProps(ctx);
-
-		function updateProps() {
-			discProps.hide();
-			editorProps.hide();
-			switch(viewModel.kind){
-				case "Quad":
-				case "Disc": discProps.show();
-				case "Custom":
-					editorProps.show();
-					setSelected(ctx.getContext(this), true);
-				default:
-			}
-		}
 
-		ctx.properties.add( new hide.Element('
-			<div class="group" name="Params">
-				<dl><dt>Color</dt><dd><input type="color" field="debugColor"/></dd> </dl>
-			</div>'), this, function(pname) { ctx.onChange(this, pname); });
+		var updateProps = null;
 
 		ctx.properties.add(group, viewModel, function(pname) {
 			if( pname == "kind" ) {
@@ -300,7 +284,35 @@ class Polygon extends Object3D {
 			switch( viewModel.kind ) {
 				case "Quad": shape = Quad;
 				case "Disc": shape = Disc(viewModel.segments, viewModel.angle, viewModel.innerRadius, viewModel.rings);
-				case "Custom": shape = Custom;
+				case "Custom":
+					shape = Custom;
+					if(points == null) {
+						if(prevKind == Quad) {
+							var prevScale = [scaleX, scaleY];
+							function apply() {
+								points = [
+									new Point(-scaleX/2, -scaleY/2),
+									new Point(-scaleX/2, scaleY/2),
+									new Point(scaleX/2, scaleY/2),
+									new Point(scaleX/2, -scaleY/2)
+								];
+								scaleX = 1.0; scaleY = 1.0;
+							}
+							ctx.properties.undo.change(Custom(function(undo) {
+								if(undo) {
+									scaleX = prevScale[0];
+									scaleY = prevScale[1];
+									points = null;
+								}
+								else apply();
+								ctx.onChange(this, null);
+							}));
+							apply();
+							ctx.onChange(this, null);
+						}
+						else 
+							points = [];
+					}
 				default: shape = Quad;
 			}
 
@@ -308,6 +320,27 @@ class Polygon extends Object3D {
 			ctx.onChange(this, pname);
 		});
 
+
+		var editorProps = editor.addProps(ctx);
+
+		updateProps = function() {
+			discProps.hide();
+			editorProps.hide();
+			switch(viewModel.kind){
+				case "Quad":
+				case "Disc": discProps.show();
+				case "Custom":
+					editorProps.show();
+					setSelected(ctx.getContext(this), true);
+				default:
+			}
+		}
+
+		ctx.properties.add( new hide.Element('
+			<div class="group" name="Params">
+				<dl><dt>Color</dt><dd><input type="color" field="debugColor"/></dd> </dl>
+			</div>'), this, function(pname) { ctx.onChange(this, pname); });
+
 		updateProps();
 
 	}