Spline: add loop and spline resolution data to edit

bin/style.css

@@ -1819,19 +1819,6 @@ input[type=checkbox]:checked:after {
 .editModeEnabled {
   outline: 4px solid #5897fb;
 }
-.spline-editor .editModeButton {
-  margin: 10px;
-  outline: 4px solid #fd5151;
-}
-.spline-editor .editModeEnabled {
-  outline: 4px solid #5897fb;
-}
-.spline-editor .description {
-  margin: 5px;
-  background-color: #303030;
-  outline: 4px solid #4a4a4a;
-  padding: 2px;
-}
 /* Mesh Generator */
 .meshGenerator-thumbnail {
   display: inline-block;
@@ -3865,73 +3852,74 @@ hide-popover hide-content {
   color: black;
   border-radius: 3px;
 }
-.points-inspector {
+/* Spline inspector */
+.spline-editor .points-inspector {
   width: 100%;
   margin-top: 10px;
 }
-.points-inspector .content {
+.spline-editor .points-inspector .content {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   flex-direction: row-reverse;
 }
-.points-inspector .content .buttons {
+.spline-editor .points-inspector .content .buttons {
   background: #222222;
   border-radius: 5px 5px 0 0;
   padding: 3px 10px 3px 10px;
   cursor: pointer;
 }
-.points-inspector .content .buttons div {
+.spline-editor .points-inspector .content .buttons div {
   margin: 0 2px 0 2px;
 }
-.points-inspector .content .buttons div:hover {
+.spline-editor .points-inspector .content .buttons div:hover {
   color: #535353;
 }
-.points-inspector .content .points-container {
+.spline-editor .points-inspector .content .points-container {
   min-height: 10px;
   width: 100%;
   border-radius: 5px 0 5px 5px;
   background: #222222;
   padding: 3px;
 }
-.points-inspector .content .points-container .point {
+.spline-editor .points-inspector .content .points-container .point {
   margin-bottom: 1px;
 }
-.points-inspector .content .points-container .point .header {
+.spline-editor .points-inspector .content .points-container .point .header {
   padding: 3px 0px 3px 8px;
   background-color: #414141;
   border-radius: 5px;
   cursor: pointer;
   display: flex;
 }
-.points-inspector .content .points-container .point .header .icon {
+.spline-editor .points-inspector .content .points-container .point .header .icon {
   align-self: center;
   margin-right: 5px;
   cursor: pointer;
 }
-.points-inspector .content .points-container .point .header .icon:hover {
+.spline-editor .points-inspector .content .points-container .point .header .icon:hover {
   color: #ececec;
 }
-.points-inspector .content .points-container .point .header p {
+.spline-editor .points-inspector .content .points-container .point .header p {
   margin: 0;
 }
-.points-inspector .content .points-container .point .header:hover {
+.spline-editor .points-inspector .content .points-container .point .header:hover {
   background-color: #686868;
 }
-.points-inspector .content .points-container .point .body {
+.spline-editor .points-inspector .content .points-container .point .body {
   padding-bottom: 15px;
   white-space: nowrap;
 }
-.points-inspector .content .points-container .point .body dd input {
+.spline-editor .points-inspector .content .points-container .point .body dd input {
   width: 28%;
   margin-right: 1px;
 }
-.points-inspector .content .points-container .point.folded .body {
+.spline-editor .points-inspector .content .points-container .point.folded .body {
   display: none;
 }
-.points-inspector .content .points-container .point.selected .header {
+.spline-editor .points-inspector .content .points-container .point.selected .header {
   background-color: #2c5d87;
 }
-.points-inspector .content .points-container .point.selected .body {
+.spline-editor .points-inspector .content .points-container .point.selected .body {
   background-color: #4f657f;
 }

bin/style.less

@@ -2033,23 +2033,6 @@ input[type=checkbox] {
 	outline: 4px solid #5897fb;
 }
 
-// Spline editor
-.spline-editor{
-	.editModeButton{
-		margin: 10px;
-		outline: 4px solid #fd5151;
-	}
-	.editModeEnabled {
-		outline: 4px solid #5897fb;
-	}
-	.description{
-		margin: 5px;
-		background-color: #303030;
-		outline: 4px solid #4a4a4a;
-		padding : 2px;
-	}
-}
-
 /* Mesh Generator */
 .meshGenerator-thumbnail {
 	display: inline-block;
@@ -4529,94 +4512,97 @@ hide-popover {
 	}
 }
 
-.points-inspector {
-	@background-color : #222222;
-	@background-color-highlight : #535353;
+/* Spline inspector */
+.spline-editor {
+	.points-inspector {
+		@background-color : #222222;
+		@background-color-highlight : #535353;
 
-	width: 100%;
-	margin-top: 10px;
-
-	.content {
 		width: 100%;
-		display: flex;
-		flex-wrap: wrap;
-		flex-direction: row-reverse;
+		margin-top: 10px;
 
-		.buttons {
-			background: @background-color;
-			border-radius: 5px 5px 0 0;
-			padding: 3px 10px 3px 10px;
-			cursor: pointer;
+		.content {
+			width: 100%;
+			display: flex;
+			flex-wrap: wrap;
+			flex-direction: row-reverse;
 
-			div {
-				margin: 0 2px 0 2px;
-			}
+			.buttons {
+				background: @background-color;
+				border-radius: 5px 5px 0 0;
+				padding: 3px 10px 3px 10px;
+				cursor: pointer;
 
-			div:hover {
-				color: @background-color-highlight;
-			}
-		}
+				div {
+					margin: 0 2px 0 2px;
+				}
 
-		.points-container {
-			min-height: 10px;
-			width: 100%;
-			border-radius: 5px 0 5px 5px;
-			background: @background-color;
-			padding: 3px;
+				div:hover {
+					color: @background-color-highlight;
+				}
+			}
 
-			.point {
-				margin-bottom: 1px;
+			.points-container {
+				min-height: 10px;
+				width: 100%;
+				border-radius: 5px 0 5px 5px;
+				background: @background-color;
+				padding: 3px;
 
-				.header {
-					padding: 3px 0px 3px 8px;
-					background-color: #414141;
-					border-radius: 5px;
-					cursor: pointer;
-					display: flex;
+				.point {
+					margin-bottom: 1px;
 
-					.icon {
-						align-self: center;
-						margin-right: 5px;
+					.header {
+						padding: 3px 0px 3px 8px;
+						background-color: #414141;
+						border-radius: 5px;
 						cursor: pointer;
-					}
-
-					.icon:hover {
-						color: #ececec;
-					}
+						display: flex;
 
-					p {
-						margin: 0;
-					}
-				}
+						.icon {
+							align-self: center;
+							margin-right: 5px;
+							cursor: pointer;
+						}
 
-				.header:hover {
-					background-color: #686868;
-				}
+						.icon:hover {
+							color: #ececec;
+						}
 
-				.body {
-					padding-bottom: 15px;
-					white-space: nowrap;
-					dd {
-						input {
-							width: 28%;
-							margin-right: 1px;
+						p {
+							margin: 0;
 						}
 					}
-				}
 
-				&.folded {
+					.header:hover {
+						background-color: #686868;
+					}
+
 					.body {
-						display: none;
+						padding-bottom: 15px;
+						white-space: nowrap;
+						dd {
+							input {
+								width: 28%;
+								margin-right: 1px;
+							}
+						}
 					}
-				}
 
-				&.selected {
-					.header {
-						background-color: #2c5d87;
+					&.folded {
+						.body {
+							display: none;
+						}
 					}
 
-					.body {
-						background-color: #4f657f;
+					&.selected {
+						.header {
+							background-color: #2c5d87;
+						}
+
+						.body {
+							background-color: #4f657f;
+						}
 					}
 				}
 			}

hrt/prefab/l3d/Spline.hx

@@ -630,7 +630,7 @@ class Spline extends hrt.prefab.Object3D {
 		super.edit(ctx);
 
 		var props = new hide.Element('
-			<div class="group" name="Spline">
+			<div class="group" name="Spline" class="spline">
 				<dl>
 					<dt>Type</dt>
 					<dd>
@@ -641,6 +641,10 @@ class Spline extends hrt.prefab.Object3D {
 						</select>
 					</dd>
 				</dl>
+				<dl><dt>Loop</dt><dd><input type="checkbox" field="loop"/></dd></dl>
+				<dl><dt>Sample resolution</dt><dd><input type="range" field="sampleResolution" step="1"></dd></dl>
+			</div>
+			<div class="group spline-editor" name="Spline Editor">
 				<div align="center">
 					<input type="button" value="Edit Mode : Disabled" class="editModeButton" />
 				</div>