Merge pull request #25 from DylanHojnoski/3d

3D Graph

main.ts

@@ -1,7 +1,7 @@
 import { loadMathJax, Plugin } from 'obsidian';
-import { Board, boards, JSXGraph } from 'jsxgraph';
+import { boards,  JSXGraph } from 'jsxgraph';
 import { renderError } from 'src/error';
-import { GraphInfo, JSXElement } from 'src/types';
+import { Graph, GraphInfo } from 'src/types';
 import "./src/theme/obsidian.ts"
 import { DEFAULT_SETTINGS, ObsidianGraphsSettings, ObsidianGraphsSettingsTab } from 'src/settings';
 import { Utils } from 'src/utils';
@@ -83,7 +83,7 @@ export default class ObsidianGraphs extends Plugin {
 				return;
 			}
 
-			let board: Board;
+			let graph: Graph;
 
 			// if the current file name is undefined need to get the current file
 			if (this.currentFileName == undefined) {
@@ -101,19 +101,17 @@ export default class ObsidianGraphs extends Plugin {
 
 			try {
 				// create the board
-				board = this.utils.createBoard(graphDiv, graphInfo);
+				graph = this.utils.createBoard(graphDiv, graphInfo);
 			} catch (e) {
 				renderError(e,element);
 				return;
 			}
 
-			const createdElements: JSXElement[] = [];
-
 			if (graphInfo.elements != undefined) {
 				// add every element to the graph 
 				for (let i = 0; i < graphInfo.elements.length; i++) {
 					try {
-						this.utils.addElement(board, graphInfo.elements[i], createdElements);
+						this.utils.addElement(graph, graphInfo.elements[i]);
 					} catch (e) {
 						renderError(e,element);
 						return;

src/theme/obsidian.ts

@@ -23,6 +23,46 @@ JXG.themes['obsidian'] = {
 		highlightStrokeColor: interactiveAccentHover,
 	},
 
+	view3d: {
+		xAxis: {
+			strokeColor: "var(--color-orange)",
+		},
+		yAxis: {
+			strokeColor: "var(--color-green)",
+		},
+		zAxis: {
+			strokeColor: "var(--color-blue)",
+		},
+		xPlaneRear: {
+			fillColor: textMuted,
+		},
+		yPlaneRear: {
+			fillColor: textMuted,
+		},
+		zPlaneRear: {
+			fillColor: textMuted,
+		},
+	},
+
+	point3d: {
+		fillColor: interactiveAccent,
+		strokeColor: interactiveAccent,
+	},
+
+	line3d: {
+		strokeColor: interactiveAccent,
+	},
+
+	sphere3d: {
+		fillColor: interactiveAccent,
+		strokeColor: interactiveAccent,
+		gradient: 'radial',
+		gradientSecondColor: interactiveAccent,
+		gradientFX: 0.7,
+		gradientFY: 0.3,
+		fillOpacity: 0.4
+	},
+
 	ellipse: {
 		strokeColor: interactiveAccent,
 		fillColor: interactiveAccent,

src/types.ts

@@ -1,4 +1,4 @@
-import { GeometryElement } from "jsxgraph";
+import { Board, GeometryElement, View3D } from "jsxgraph";
 
 export interface JSXElement {
 	name: string,
@@ -27,15 +27,54 @@ export interface GraphInfo {
 	// plugin specific settings
 	height: number | undefined,
 	width: number | undefined,
+	bounds3d: [
+		[ x1: number, y1: number ],
+		[ x2: number, y2: number ],
+		[ x3: number, y3: number ],
+	] | undefined,
+	att3d: Att3d | undefined,
+}
+	export interface Att3d {
+		axisPosition: string,
+
+		xAxis: Attributes ,
+		xPlaneFront: Attributes,
+		xPlaneFrontYAxis: Attributes,
+		xPlaneFrontZAxis: Attributes,
+		xPlaneRear: Attributes,
+		xPlaneRearYAxis: Attributes,
+		xPlaneRearZAxis: Attributes,
+
+		yAxis: Attributes,
+		yPlaneFront: Attributes,  
+		yPlaneFrontXAxis: Attributes,
+		yPlaneFrontZAxis: Attributes,
+		yPlaneRear: Attributes,
+		yPlaneRearXAxis: Attributes,
+		yPlaneRearZAxis: Attributes,
+
+		zAxis: Attributes,
+		zPlaneFront: Attributes,
+		zPlaneFrontXAxis: Attributes,
+		zPlaneFrontYAxis: Attributes,
+		zPlaneRear: Attributes,
+		zPlaneRearXAxis: Attributes,
+		zPlaneRearYAxis: Attributes,
+	}
+
+export interface Graph {
+	board: Board,
+	createdElements: JSXElement[],
+	view3d: View3D | undefined
 }
 
 export interface ElementInfo {
 	type: string,
 	def: any[],
-	att: Attributes,
+	att: Attributes | Att3d | undefined,
 }
 
-export type  Attributes = {
+export interface Attributes {
 	name: string,
 	inverse: boolean,
 	chartStyle: string,
@@ -59,29 +98,39 @@ export enum Types {
 	Boxplot = "boxplot",
 	Chart = "chart",
 	Cicumcircle = "circumcircle",
+	Circle3D = "circle3d",
 	Circle = "circle",
 	Circumcenter = "circumcenter",
 	CircumcircleArc = "circumcirclearc",
+	Curve3D = "curve3d",
 	Curve = "curve",
 	CurveDifference  = "curvedifference",
 	CurveIntersection = "curveintersection",
 	CurveUnion = "curveunion",
 	Derivaative = "derivative",
 	Ellipse = "ellipse",
+	Function3D = "functiongraph3d",
 	Function = "functiongraph",
 	Glider = "glider",
 	Incenter = "incenter",
 	Inequality = "inequality",
 	Integral = "integral",
+	IntersectionCircle3D = "intersectioncircle3d",
 	Intersection = "intersection",
+	IntersectionLine3D = "intersectionline3d",
 	Label = "label",
+	Line3D = "line3d",
 	Line = "line",
 	Parabola = "parabola",
 	Parallel = "parallel",
+	ParametricSurface3D = "parametricsurface3d",
 	Perpendicular = "perpendicular",
+	Plane3D = "plane3d",
+	Point3D = "point3d",
 	Point = "point",
-	Polygon = "polygon",
+	Polygon3D = "polygon3d",
 	PolygonalChain = "polygonalchain",
+	Polygon = "polygon",
 	RegularPolygon = "regularpolygon",
 	Riemannsum = "riemannsum",
 	Sector = "sector",
@@ -90,9 +139,11 @@ export enum Types {
 	Slider = "slider",
 	SlopeField = "slopefield",
 	SlopeTriangle = "slopetriangle",
+	Sphere3D = "sphere3d",
 	Stepfunction = "stepfunction",
 	Tangent = "tangent",
 	Tapemeasure = "tapemeasure",
 	Text = "text",
+	Vectorfield3D = "vectorfield3d",
 	VectorField = "vectorfield",
 }