fix: get width, height from base64 image CloudOrc#61

nutsjian · Aug 4, 2023 · a306bdc · a306bdc
1 parent 8df7c53
commit a306bdc
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 35 deletions.
diff --git a/solidui-web/config/env.js b/solidui-web/config/env.js
@@ -22,7 +22,7 @@ const productionVariable = [
 const developmentVariable = [
     { name: "NODE_ENV", default: "development" },
     { name: "BASE_ENV", default: "" },
-    { name: "PROXY_SERVER", default: "http://localhost:1234" },
+    { name: "PROXY_SERVER", default: "http://localhost:12345" },
     { name: "SERVER_PORT", default: 3000 },
 ]
 

diff --git a/solidui-web/src/views/SolidView.tsx b/solidui-web/src/views/SolidView.tsx
@@ -49,10 +49,6 @@ export default abstract class SolidView<
 > extends React.Component<T, S> {
 	dataSheet: any[] = [];
 
-	// xs: { label: string }[] = [];
-
-	// ys: { label: string }[] = [];
-
 	private viewRef = React.createRef<HTMLDivElement>();
 
 	private vm: SolidViewDataType;
@@ -68,19 +64,14 @@ export default abstract class SolidView<
 		this.eventbus = props.eventbus;
 		this.vm = this.props.viewModel || {};
 
-		// abstract methods
 		this.renderView = this.renderView.bind(this);
 		this.baseViewDidMount = this.baseViewDidMount.bind(this);
 		this.baseViewWillUnmount = this.baseViewWillUnmount.bind(this);
 
-		// private methods
 		this.fetchDataAndReRender = this.fetchDataAndReRender.bind(this);
-		// this.reRender = this.reRender.bind(this);
 		this.fetchData = this.fetchData.bind(this);
 	}
 
-	/// / ------------------------------------------------------------------
-	/// / abstract methods
 	protected abstract baseViewDidMount(): void;
 
 	protected abstract baseViewWillUnmount(): void;
@@ -91,8 +82,6 @@ export default abstract class SolidView<
 
 	protected abstract renderView(): React.ReactNode;
 
-	/// / ------------------------------------------------------------------
-	/// / protected methods
 	protected renderTitle(): React.ReactNode {
 		const viewModel = this.vm;
 		const options = viewModel.options || {};
@@ -113,9 +102,6 @@ export default abstract class SolidView<
 		return this.vm;
 	}
 
-	/// / ------------------------------------------------------------------
-	/// / private methods
-
 	private readonly fetchData = async () => {
 		const viewModel = this.vm;
 		const data = viewModel.data || {};
@@ -225,7 +211,6 @@ export default abstract class SolidView<
 					width: "100%",
 					height: "100%",
 					zIndex: 1,
-					padding: 5,
 					background: "#fff",
 					...style,
 				}}

diff --git a/solidui-web/src/views/images/Base64ImageSolidView.tsx b/solidui-web/src/views/images/Base64ImageSolidView.tsx
@@ -66,17 +66,17 @@ export default class Base64ImageSolidView<
 		if (!isNil(options)) {
 			const { imageType, imageData } = options;
 			if (imageType && imageData) {
-				// const img = new Image();
-				// const imageSrc = `data:"${imageType}";base64,${imageData}`;
-				// const self = this;
-				// img.onload = function () {
-				// 	const viewRef = self.getViewRef().current;
-				// 	if (viewRef) {
-				// 		viewRef.style.height = `${img.height + 20}px`;
-				// 		viewRef.style.width = `${img.width + 50}px}`;
-				// 	}
-				// };
-				// img.src = imageSrc;
+				const i = new Image();
+				const containerViewRef = this.getViewRef();
+				i.onload = function () {
+					vm.size.height = i.height;
+					vm.size.width = i.width;
+					if (containerViewRef.current) {
+						containerViewRef.current.style.width = `${i.width}px`;
+						containerViewRef.current.style.height = `${i.height}px`;
+					}
+				};
+				i.src = `data:"${imageType}";base64,${imageData}`;
 
 				this.setState({
 					imageType,
@@ -90,14 +90,7 @@ export default class Base64ImageSolidView<
 		window.removeEventListener("resize", this.resize);
 	}
 
-	/// / ------------------------------------------------------------------
-	/// / protected methods
-	resize(): void {
-		// if (this.resizeTimer) {
-		// 	clearTimeout(this.resizeTimer);
-		// }
-		// this.resizeTimer = setTimeout(() => {}, 50);
-	}
+	resize(): void {}
 
 	protected renderView(): React.ReactNode {
 		if (isNil(this.state)) {