tweak client
This commit is contained in:
		
							parent
							
								
									ca6afd40ad
								
							
						
					
					
						commit
						9ac526b6b6
					
				
					 3 changed files with 17 additions and 7 deletions
				
			
		|  | @ -1,6 +1,6 @@ | ||||||
| <template> | <template> | ||||||
| <div class="root"> | <div ref="rootEl" class="root"> | ||||||
| 	<canvas :id="idForCanvas" ref="canvasEl" class="canvas" width="300" height="300"></canvas> | 	<canvas :id="idForCanvas" ref="canvasEl" class="canvas" :width="width" height="300" @contextmenu.prevent="() => {}"></canvas> | ||||||
| 	<div :id="idForTags" ref="tagsEl" class="tags"> | 	<div :id="idForTags" ref="tagsEl" class="tags"> | ||||||
| 		<ul> | 		<ul> | ||||||
| 			<slot></slot> | 			<slot></slot> | ||||||
|  | @ -21,8 +21,10 @@ const computedStyle = getComputedStyle(document.documentElement); | ||||||
| const idForCanvas = Array.from(Array(16)).map(() => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join(''); | const idForCanvas = Array.from(Array(16)).map(() => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join(''); | ||||||
| const idForTags = Array.from(Array(16)).map(() => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join(''); | const idForTags = Array.from(Array(16)).map(() => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join(''); | ||||||
| let available = $ref(false); | let available = $ref(false); | ||||||
|  | let rootEl = $ref<HTMLElement | null>(null); | ||||||
| let canvasEl = $ref<HTMLCanvasElement | null>(null); | let canvasEl = $ref<HTMLCanvasElement | null>(null); | ||||||
| let tagsEl = $ref<HTMLElement | null>(null); | let tagsEl = $ref<HTMLElement | null>(null); | ||||||
|  | let width = $ref(300); | ||||||
| 
 | 
 | ||||||
| watch($$(available), () => { | watch($$(available), () => { | ||||||
| 	window.TagCanvas.Start(idForCanvas, idForTags, { | 	window.TagCanvas.Start(idForCanvas, idForTags, { | ||||||
|  | @ -45,6 +47,8 @@ watch($$(available), () => { | ||||||
| }); | }); | ||||||
| 
 | 
 | ||||||
| onMounted(() => { | onMounted(() => { | ||||||
|  | 	width = rootEl.offsetWidth; | ||||||
|  | 
 | ||||||
| 	if (loaded) { | 	if (loaded) { | ||||||
| 		available = true; | 		available = true; | ||||||
| 	} else { | 	} else { | ||||||
|  | @ -58,6 +62,12 @@ onMounted(() => { | ||||||
| onBeforeUnmount(() => { | onBeforeUnmount(() => { | ||||||
| 	window.TagCanvas.Delete(idForCanvas); | 	window.TagCanvas.Delete(idForCanvas); | ||||||
| }); | }); | ||||||
|  | 
 | ||||||
|  | defineExpose({ | ||||||
|  | 	update: () => { | ||||||
|  | 		window.TagCanvas.Update(idForCanvas); | ||||||
|  | 	}, | ||||||
|  | }); | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||||
|  |  | ||||||
|  | @ -116,6 +116,10 @@ onMounted(() => { | ||||||
| 		}, { passive: true }); | 		}, { passive: true }); | ||||||
| 	} | 	} | ||||||
| }); | }); | ||||||
|  | 
 | ||||||
|  | defineExpose({ | ||||||
|  | 	showMenu: $$(showMenu), | ||||||
|  | }); | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
| <style> | <style> | ||||||
|  |  | ||||||
|  | @ -1,5 +1,5 @@ | ||||||
| <template> | <template> | ||||||
| <MkContainer :naked="widgetProps.transparent" :show-header="widgetProps.showHeader" class="mkw-instance-cloud"> | <MkContainer :naked="widgetProps.transparent" class="mkw-instance-cloud"> | ||||||
| 	<div class=""> | 	<div class=""> | ||||||
| 		<MkTagCloud v-if="activeInstances"> | 		<MkTagCloud v-if="activeInstances"> | ||||||
| 			<li v-for="instance in activeInstances"> | 			<li v-for="instance in activeInstances"> | ||||||
|  | @ -28,10 +28,6 @@ const widgetPropsDef = { | ||||||
| 		type: 'boolean' as const, | 		type: 'boolean' as const, | ||||||
| 		default: false, | 		default: false, | ||||||
| 	}, | 	}, | ||||||
| 	showHeader: { |  | ||||||
| 		type: 'boolean' as const, |  | ||||||
| 		default: true, |  | ||||||
| 	}, |  | ||||||
| }; | }; | ||||||
| 
 | 
 | ||||||
| type WidgetProps = GetFormResultType<typeof widgetPropsDef>; | type WidgetProps = GetFormResultType<typeof widgetPropsDef>; | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue