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> | ||||
| <div class="root"> | ||||
| 	<canvas :id="idForCanvas" ref="canvasEl" class="canvas" width="300" height="300"></canvas> | ||||
| <div ref="rootEl" class="root"> | ||||
| 	<canvas :id="idForCanvas" ref="canvasEl" class="canvas" :width="width" height="300" @contextmenu.prevent="() => {}"></canvas> | ||||
| 	<div :id="idForTags" ref="tagsEl" class="tags"> | ||||
| 		<ul> | ||||
| 			<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 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 rootEl = $ref<HTMLElement | null>(null); | ||||
| let canvasEl = $ref<HTMLCanvasElement | null>(null); | ||||
| let tagsEl = $ref<HTMLElement | null>(null); | ||||
| let width = $ref(300); | ||||
| 
 | ||||
| watch($$(available), () => { | ||||
| 	window.TagCanvas.Start(idForCanvas, idForTags, { | ||||
|  | @ -45,6 +47,8 @@ watch($$(available), () => { | |||
| }); | ||||
| 
 | ||||
| onMounted(() => { | ||||
| 	width = rootEl.offsetWidth; | ||||
| 
 | ||||
| 	if (loaded) { | ||||
| 		available = true; | ||||
| 	} else { | ||||
|  | @ -58,6 +62,12 @@ onMounted(() => { | |||
| onBeforeUnmount(() => { | ||||
| 	window.TagCanvas.Delete(idForCanvas); | ||||
| }); | ||||
| 
 | ||||
| defineExpose({ | ||||
| 	update: () => { | ||||
| 		window.TagCanvas.Update(idForCanvas); | ||||
| 	}, | ||||
| }); | ||||
| </script> | ||||
| 
 | ||||
| <style lang="scss" scoped> | ||||
|  |  | |||
|  | @ -116,6 +116,10 @@ onMounted(() => { | |||
| 		}, { passive: true }); | ||||
| 	} | ||||
| }); | ||||
| 
 | ||||
| defineExpose({ | ||||
| 	showMenu: $$(showMenu), | ||||
| }); | ||||
| </script> | ||||
| 
 | ||||
| <style> | ||||
|  |  | |||
|  | @ -1,5 +1,5 @@ | |||
| <template> | ||||
| <MkContainer :naked="widgetProps.transparent" :show-header="widgetProps.showHeader" class="mkw-instance-cloud"> | ||||
| <MkContainer :naked="widgetProps.transparent" class="mkw-instance-cloud"> | ||||
| 	<div class=""> | ||||
| 		<MkTagCloud v-if="activeInstances"> | ||||
| 			<li v-for="instance in activeInstances"> | ||||
|  | @ -28,10 +28,6 @@ const widgetPropsDef = { | |||
| 		type: 'boolean' as const, | ||||
| 		default: false, | ||||
| 	}, | ||||
| 	showHeader: { | ||||
| 		type: 'boolean' as const, | ||||
| 		default: true, | ||||
| 	}, | ||||
| }; | ||||
| 
 | ||||
| type WidgetProps = GetFormResultType<typeof widgetPropsDef>; | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue