Skip to content

Commit

Permalink
Merge pull request #1 from LinkunGao/release/v2.1.9
Browse files Browse the repository at this point in the history
Release/v2.1.9
  • Loading branch information
LinkunGao authored Oct 24, 2022
2 parents 39795cb + 8d374a6 commit 4157ea6
Show file tree
Hide file tree
Showing 5 changed files with 146 additions and 8 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"preview": "vite preview"
},
"dependencies": {
"copper3d_visualisation": "^1.11.31",
"copper3d_visualisation": "^1.11.33",
"element-plus": "^2.2.17",
"sass": "^1.55.0",
"vue": "^3.2.37"
Expand Down
17 changes: 16 additions & 1 deletion src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -24,17 +24,21 @@
:immediate-slice-num="immediateSliceNum"
:contrast-index="contrastNum"
:is-axis-clicked="isAxisClicked"
:init-slice-index="initSliceIndex"
@on-slice-change="getSliceChangedNum"
@reset-main-area-size="resetMainAreaSize"
@on-change-orientation="resetSlicesOrientation"
@on-open-dialog="onOpenDialog"
></NavBar>
<Upload :dialog="dialog" @on-close-dialog="onCloseDialog"></Upload>
</div>
</template>
<script setup lang="ts">
import { GUI } from "dat.gui";
import * as Copper from "copper3d_visualisation";
import "copper3d_visualisation/dist/css/style.css";
import NavBar from "./components/NavBar.vue";
import Upload from "./components/Upload.vue";
import { getCurrentInstance, onMounted, ref, watchEffect } from "vue";
// let refs = null;
Expand All @@ -43,6 +47,7 @@ let max = ref(0);
let immediateSliceNum = ref(0);
let contrastNum = ref(0);
let fileNum = ref(0);
let initSliceIndex = ref(0);
let base_container = ref<HTMLDivElement>();
let intro = ref<HTMLDivElement>();
Expand All @@ -62,10 +67,11 @@ let readyC3 = ref(false);
let readyC4 = ref(false);
let allSlices: Array<any> = [];
let isAxisClicked = ref(false);
let dialog = ref(false);
onMounted(() => {
console.log(
"%cNRRD Segmentation App %cBeta:v2.1.7",
"%cNRRD Segmentation App %cBeta:v2.1.9",
"padding: 3px;color:white; background:#d94607",
"padding: 3px;color:white; background:#219EBC"
);
Expand Down Expand Up @@ -101,6 +107,13 @@ onMounted(() => {
appRenderer.animate();
});
const onOpenDialog = (flag: boolean) => {
dialog.value = flag;
};
const onCloseDialog = (flag: boolean) => {
dialog.value = flag;
};
const resetSlicesOrientation = (axis: "x" | "y" | "z") => {
nrrdTools.setSliceOrientation(axis);
const status = nrrdTools.getIsShowContrastState();
Expand Down Expand Up @@ -140,6 +153,7 @@ watchEffect(() => {
});
nrrdTools.setAllSlices(allSlices);
const getSliceNum = (index: number, contrastindex: number) => {
immediateSliceNum.value = index;
contrastNum.value = contrastindex;
Expand All @@ -151,6 +165,7 @@ watchEffect(() => {
nrrdTools.draw(scene as Copper.copperScene, gui);
scene?.addPreRenderCallbackFunction(nrrdTools.start);
initSliceIndex.value = nrrdTools.getCurrentSliceIndex();
max.value = nrrdTools.getMaxSliceNum()[0];
}
Expand Down
24 changes: 22 additions & 2 deletions src/components/NavBar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@
<span @click="onSwitchSliceOrientation('y')"
><img class="image" src="../assets/images/y.ico" alt=""
/></span>
<span @click="openDialog">
<ion-icon name="cloud-upload-outline"></ion-icon>
</span>
</div>
</div>
</div>
Expand All @@ -35,6 +38,7 @@ type Props = {
fileNum: number;
min?: number;
max?: number;
initSliceIndex?: number;
immediateSliceNum?: number;
contrastIndex?: number;
isAxisClicked?: boolean;
Expand All @@ -47,19 +51,25 @@ let p = withDefaults(defineProps<Props>(), {
isAxisClicked: false,
});
const state = reactive(p);
const { max, immediateSliceNum, contrastIndex, isAxisClicked } = toRefs(state);
const { max, immediateSliceNum, contrastIndex, isAxisClicked, initSliceIndex } =
toRefs(state);
const sliceNum = ref(0);
let preViousSliceNum = p.min;
let previousMax = 0;
let isShowContrast = false;
let count = 0;
let magnification = 1;
let initFlag = false;
const emit = defineEmits([
"onSliceChange",
"resetMainAreaSize",
"onChangeOrientation",
"onOpenDialog",
]);
const openDialog = () => {
emit("onOpenDialog", true);
};
const onSwitchSliceOrientation = (axis: string) => {
emit("onChangeOrientation", axis);
Expand All @@ -85,6 +95,11 @@ const onChangeSlider = () => {
preViousSliceNum += step;
};
watchEffect(() => {
initSliceIndex?.value && (sliceNum.value = initSliceIndex.value);
initFlag = true;
});
watchEffect(() => {
if (isShowContrast) {
sliceNum.value = immediateSliceNum.value * p.fileNum + contrastIndex.value;
Expand All @@ -107,12 +122,16 @@ watchEffect(() => {
preViousSliceNum = sliceNum.value;
previousMax = max.value;
}
if (initFlag) {
sliceNum.value = initSliceIndex?.value as number;
initFlag = false;
}
});
</script>

<style scoped>
.el-slider {
max-width: 30vw;
max-width: 35vw;
margin-right: 10px;
--el-slider__bar-bg-color: red !important;
}
Expand Down Expand Up @@ -140,6 +159,7 @@ watchEffect(() => {
box-shadow: 0 30px 30px rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
justify-content: center;
}
.nav .content .arrows {
display: flex;
Expand Down
103 changes: 103 additions & 0 deletions src/components/Upload.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
<template>
<div v-if="dialog" @click="closeDialog" class="upload_container">
<el-upload
:auto-upload="false"
@change="loaded"
class="upload-demo"
drag
action="/"
multiple
>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
Drop file here or <em>click to upload</em>
</div>
<template #tip>
<div class="el-upload__tip">
jpg/png files with a size less than 500kb
</div>
</template>
</el-upload>
</div>
</template>

<script setup lang="ts">
import { UploadFilled } from "@element-plus/icons-vue";
import type { UploadFile } from "element-plus";
import { ref, reactive, toRefs, shallowReactive } from "vue";
type Props = {
dialog?: boolean;
};
withDefaults(defineProps<Props>(), {
dialog: false,
});
let files: Array<File> = [];
const emit = defineEmits(["onCloseDialog"]);
const closeDialog = (e: MouseEvent) => {
let e1 = e.currentTarget;
let e2 = e.target;
if (e1 === e2) {
// openDialog.value = false;
console.log(files);
emit("onCloseDialog", false);
}
};
const loaded = (uploadFile: UploadFile) => {
// console.log(uploadFile);
// console.log(uploadFile.name);
// console.log(uploadFile.raw);
console.log(1);
// let filename = uploadFile.name;
// let file: File | undefined;
// if (filename.match(/\.(nrrd)$/)) {
// file = uploadFile.raw as File;
// files.push(file);
// }
// if (!file) {
// onError("No .nrrd asset found!");
// }
};
/**
* @param {Error} error
*/
const onError = (error: string | Error) => {
let message = ((error as Error) || {}).message || error.toString();
if (message.match(/ProgressEvent/)) {
message =
"Unable to retrieve this file. Check JS console and browser network tab.";
} else if (message.match(/Unexpected token/)) {
message = `Unable to parse file content. Verify that this file is valid. Error: "${message}"`;
} else if (
error &&
(error as any).target &&
(error as any).target instanceof Image
) {
message = "Missing texture: " + (error as any).target.src.split("/").pop();
}
window.alert(message);
console.error(error);
};
</script>

<style scoped>
.upload_container {
position: fixed;
z-index: 1000;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
}
.upload-demo {
width: 60vw;
}
</style>
8 changes: 4 additions & 4 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -286,10 +286,10 @@ copper3d_plugin_heartjs_config@^1.0.7:
resolved "https://registry.npmjs.org/copper3d_plugin_heartjs_config/-/copper3d_plugin_heartjs_config-1.0.7.tgz"
integrity sha512-rWhe19DQjC7Ap96uPKmQNy+IBihXTHelAowr5VdgHee+LDTLTLJ75IHsbBxi5ls1LHMxsXhGmWmT3Oy+pgva+Q==

copper3d_visualisation@^1.11.31:
version "1.11.31"
resolved "https://registry.yarnpkg.com/copper3d_visualisation/-/copper3d_visualisation-1.11.31.tgz#1581fe466721c7db0478c0066d77b9d0db38a772"
integrity sha512-851sZQho5Ga1FnbBtAnd/btOxdHOxatwhaw2zarEy+Bs3hoTSt2+Xbn7F/Kk+xj0BUdMuzaKng7SK9vihtga+w==
copper3d_visualisation@^1.11.33:
version "1.11.33"
resolved "https://registry.yarnpkg.com/copper3d_visualisation/-/copper3d_visualisation-1.11.33.tgz#203f7fd0570c5d2a875a54d1abf3cf313cea0351"
integrity sha512-QF87k3SBgsXDfpTeLPp9SCUmEYMJCB2osaeJKsMvWzIRxcsM5dKmrhkWvtna6IpCYVcIFVhmRm9Phxc4fDgzoA==
dependencies:
"@types/dat.gui" "^0.7.7"
"@types/three" "^0.140.0"
Expand Down

0 comments on commit 4157ea6

Please sign in to comment.