Integration of the tldraw into the new column board

src/components/feature-board/card/CardHost.vue

@@ -52,7 +52,7 @@
 						</BoardMenuAction>
 					</BoardMenu>
 				</div>
-
+				<ContentElementIframe :iframeSrc="iframeSrc" />
 				<ContentElementList
 					:elements="card.elements"
 					:isEditMode="isEditMode"
@@ -65,6 +65,7 @@
 					@add-element="onAddElement"
 					v-if="isEditMode"
 				></CardAddElementMenu>
+				<link />
 			</template>
 		</VCard>
 		<FilePicker
@@ -97,6 +98,7 @@ import CardAddElementMenu from "./CardAddElementMenu.vue";
 import CardHostInteractionHandler from "./CardHostInteractionHandler.vue";
 import CardSkeleton from "./CardSkeleton.vue";
 import CardTitle from "./CardTitle.vue";
+import ContentElementIframe from "../content-elements/tldraw-iframe-element/ContentElementIframe.vue";
 import {
 	DragAndDropKey,
 	ElementMove,
@@ -114,6 +116,7 @@ export default defineComponent({
 		CardAddElementMenu,
 		CardHostInteractionHandler,
 		FilePicker,
+		ContentElementIframe,
 	},
 	props: {
 		height: { type: Number, required: true },
@@ -213,6 +216,7 @@ export default defineComponent({
 		);
 
 		return {
+			iframeSrc: "http://localhost:3046",
 			boardMenuClasses,
 			isLoading,
 			card,

src/components/feature-board/content-elements/tldraw-iframe-element/ContentElementIframe.vue

@@ -0,0 +1,93 @@
+<template>
+	<div>
+		<!-- <iframe
+      :src="iframeSrc"
+			:width="iframeWidth"
+			:height="iframeHeight"
+      frameborder="0"
+		></iframe> -->
+		<button class="tldraw-button" @click="openLink" target="_blank">
+			<tldrawIcon class="svg-icon" />
+			<span class="button-text">{{ buttonText }}</span>
+		</button>
+	</div>
+</template>
+<script>
+import tldrawIcon from "../../../icons/custom/tldraw-icon.vue";
+export default {
+	props: {
+		iframeSrc: {
+			type: String,
+			required: true,
+		},
+		iframeWidth: {
+			type: String,
+			default: "100%",
+		},
+		iframeHeight: {
+			type: String,
+			default: "270px",
+		},
+		buttonText: {
+			type: String,
+			default: "Whiteboard",
+		},
+	},
+	components: {
+		tldrawIcon,
+	},
+	methods: {
+		openLink() {
+			const savedRoomID = localStorage.getItem("roomID");
+
+			if (savedRoomID) {
+				const urlWithRoom = `${this.iframeSrc}?roomName=${savedRoomID}`;
+				window.open(urlWithRoom, "_blank");
+			} else {
+				const newRoomID = this.generateRandomRoomID();
+
+				localStorage.setItem("roomID", newRoomID);
+
+				const urlWithRoom = `${this.iframeSrc}?roomName=${newRoomID}`;
+				window.open(urlWithRoom, "_blank");
+			}
+		},
+		generateRandomRoomID() {
+			const randomNumber = Math.random();
+
+			const randomString = randomNumber.toString().substring(2);
+
+			const roomID = "room_" + randomString;
+
+			return roomID;
+		},
+	},
+};
+</script>
+<style>
+.tldraw-button {
+	display: flex;
+	align-items: center;
+	gap: 5px;
+	padding: 10px 20px;
+	color: #fff;
+	border: 1px solid #e0e0e0;
+	border-radius: 4px;
+	cursor: pointer;
+	height: 70px;
+	width: 330px;
+	margin: 8px;
+}
+
+.tldraw-button:hover {
+	background-color: #54616e1a;
+}
+.button-text {
+	color: #1b1b1b;
+	margin-left: 10px;
+}
+.svg-icon {
+	width: 20px;
+	height: 20px;
+}
+</style>

src/components/feature-board/shared/BoardApi.composable.ts

@@ -103,6 +103,13 @@ export const useBoardApi = () => {
 			};
 		}
 
+		if (element.type === ContentElementType.TldrawBoard) {
+			return {
+				content: element.content as FileElementContent,
+				type: ContentElementType.TldrawBoard,
+			};
+		}
+
 		throw new Error("element.type mapping is undefined for updateElementCall");
 	};
 

src/components/feature-board/shared/ElementTypeSelection.composable.ts

@@ -1,5 +1,5 @@
 import { ContentElementType } from "@/serverApi/v3";
-import { mdiFormatText, mdiTrayArrowUp } from "@mdi/js";
+import { mdiDrawingBox, mdiFormatText, mdiTrayArrowUp } from "@mdi/js";
 import { ref } from "vue";
 import { AddCardElement } from "../state/CardState.composable";
 import { useSelectedFile } from "./SelectedFile.composable";
@@ -47,6 +47,12 @@ export const useElementTypeSelection = (addElementFunction: AddCardElement) => {
 			action: onFileElementClick,
 			testId: "create-element-file",
 		},
+		{
+			icon: mdiDrawingBox,
+			label: "components.elementTypeSelection.elements.fileElement.subtitle",
+			action: () => onElementClick(ContentElementType.TldrawBoard),
+			testId: "create-element-tldraw-board",
+		},
 	];
 
 	const askType = () => {

src/components/icons/custom/index.ts

@@ -39,6 +39,7 @@ import taskOpenFilled from "./task-open-filled.vue";
 import tasks from "./tasks.vue";
 import teacher from "./teacher.vue";
 import thr from "./thr.vue";
+import tldrawIcon from "./tldraw-icon.vue";
 
 const customIcons = {
 	brb: {
@@ -164,6 +165,9 @@ const customIcons = {
 	thr: {
 		component: thr,
 	},
+	tldrawIcon: {
+		component: tldrawIcon,
+	},
 };
 
 export default customIcons;

src/components/icons/custom/tldraw-icon.vue

@@ -0,0 +1,14 @@
+<template>
+	<svg
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M2 3H10C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3H22V5H21V16H15.25L17 22H15L13.25 16H10.75L9 22H7L8.75 16H3V5H2V3ZM5 5V14H19V5H5Z"
+			fill="#54616E"
+		/>
+	</svg>
+</template>

src/components/organisms/vCustomDialog.vue

@@ -2,7 +2,7 @@
 	<v-dialog
 		ref="vDialog"
 		:value="isOpen"
-		:max-width="size"
+		:max-width="410"
 		@click:outside="$emit('dialog-closed', false)"
 		@keydown.esc="$emit('dialog-closed', false)"
 	>
@@ -91,10 +91,6 @@ export default {
 			type: Boolean,
 			required: true,
 		},
-		size: {
-			type: Number,
-			default: 480,
-		},
 		hasButtons: {
 			type: Boolean,
 		},

src/pages/administration/ldap-activate.unit.js

@@ -265,7 +265,7 @@ describe("ldap/activate", () => {
 					short_name,
 				},
 				$router: { push: routerPushStub },
-				$route: { query: {}},
+				$route: { query: {} },
 			},
 		});
 		const section = wrapper.find(`[data-testid="migrateUsersSection"]`);

src/pages/drawing-tool/DrawingTool.page.vue

@@ -0,0 +1,29 @@
+<template>
+	<div class="d-flex flex-column">
+		<p>TLDRAW</p>
+		<a :href="`http://localhost:3000/${$route.params.id}`" target="_blank"
+			>NEW WINDOW</a
+		>
+		<!--		<a href="/tldraw-test" target="_blank">NEW WINDOW</a>-->
+		<!--		<iframe src="/tldraw-test" width="600px" height="600px"></iframe>-->
+		<iframe
+			:src="`http://localhost:3000/${$route.params.id}`"
+			width="600px"
+			height="600px"
+		></iframe>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			urlParams: new URLSearchParams(window.location.search),
+		};
+	},
+	render() {
+		return h("div", "elo");
+	},
+};
+</script>
+<style lang="scss" scoped></style>

src/pages/drawing-tool/DrawingToolDashboard.page.vue

@@ -0,0 +1,30 @@
+/* eslint-disable */
+<template>
+	<div class="d-flex flex-column">
+		<p>TLDRAW</p>
+		<a :href="`http://localhost:3046/${$route.params.id}`" target="_blank">
+			NEW WINDOW
+		</a>
+		<!--		<a href="/tldraw-test" target="_blank">NEW WINDOW</a>-->
+		<!--		<iframe src="/tldraw-test" width="600px" height="600px"></iframe>-->
+		<iframe
+			:src="`http://localhost:3046/${$route.params.id}`"
+			width="600px"
+			height="600px"
+		></iframe>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			urlParams: new URLSearchParams(window.location.search),
+		};
+	},
+	render() {
+		return h("div", "elo");
+	},
+};
+</script>
+<style lang="scss" scoped></style>

src/router/routes.ts

@@ -282,6 +282,17 @@ export const routes: Array<RouteConfig> = [
 			contextType: route.query.contextType,
 		}),
 	},
+	{
+		path: `/tldraw/:id(${REGEX_ID})`,
+		component: () => import("../pages/drawing-tool/DrawingTool.page.vue"),
+		name: "tldraw-room",
+	},
+	{
+		path: `/tldraw`,
+		component: () =>
+			import("../pages/drawing-tool/DrawingToolDashboard.page.vue"),
+		name: "tldraw",
+	},
 	{
 		// deprecated?
 		path: "/termsofuse",

src/router/server-route.js

@@ -5,6 +5,10 @@ const isFileStorage = (path) => {
 	return path.startsWith("/api/v3/file");
 };
 
+const isTldrawClient = (path) => {
+	return path.startsWith("/tldraw-client");
+};
+
 /**
  * @param {string} path
  */
@@ -16,4 +20,5 @@ module.exports = {
 	isServer,
 	isFileStorage,
 	isH5pEditor,
+	isTldrawClient,
 };

src/router/vue-client-route.js

@@ -49,6 +49,8 @@ const vueRoutes = [
 	`^/migration/success/?$`,
 	`^/migration/error/?$`,
 	`^/tools/context/tool-configuration/?$`,
+	`^/tldraw/?$`,
+	`^/tldraw/${mongoId}?$`,
 ];
 
 const isVueClient = (path) => {

src/serverApi/v3/api.ts

@@ -643,6 +643,7 @@ export interface ConsentSessionResponse {
 export enum ContentElementType {
     File = 'file',
     RichText = 'richText',
+    TldrawBoard = 'board',
     SubmissionContainer = 'submissionContainer'
 }
 

webpack-config/dev-server-config.js

@@ -4,6 +4,7 @@ const {
 	isServer,
 	isFileStorage,
 	isH5pEditor,
+	isTldrawClient
 } = require("../src/router/server-route");
 const url = require("url");
 
@@ -39,11 +40,20 @@ const createH5pEditorProxy = () => {
 	return h5pEditorProxy;
 };
 
+const createTldrawClientProxy = () => {
+	const clientProxy = createProxyMiddleware({
+		target: "http://localhost:3046",
+		changeOrigin: true,
+	});
+	return clientProxy;
+};
+
 const createDevServerConfig = () => {
 	const legacyClientProxy = createLegacyClientProxy();
 	const serverProxy = createServerProxy();
 	const fileStorageProxy = createFileStorageProxy();
 	const h5pEditorProxy = createH5pEditorProxy();
+	const tldrawClientProxy = createTldrawClientProxy();
 
 	const devServerConfig = {
 		port: 4000,
@@ -63,6 +73,8 @@ const createDevServerConfig = () => {
 						h5pEditorProxy(req, res, next);
 					} else if (isServer(path)) {
 						serverProxy(req, res, next);
+					} else if (isTldrawClient(path)) {
+						tldrawClientProxy(req, res, next);
 					} else if (isVueClient(path)) {
 						next();
 					} else {
@@ -85,4 +97,5 @@ module.exports = {
 	createDevServerConfig,
 	createFileStorageProxy,
 	createH5pEditorProxy,
+	createTldrawClientProxy,
 };