Vue3

Overview These are notes on how to create an inline marker tool with Editor.js. References The following pages were helpful: https://editorjs.io/creating-an-inline-tool/ https://note.com/eveningmoon_lab/n/n638b9541c47c For writing in TypeScript, the following was helpful: https://github.com/codex-team/editor.js/issues/900 Implementation Implemented with Nuxt. Create the following marker.ts: i c } e m l x p a b s a t c s } s } c } r } s } w } u } c } p o s u t p a l t t o e u r n h o r s t a i g a a r } a r n t t t t t n t t t t r r i } t a c c m m r t w c c m r e c t i } } r t t t : : s 静 t e ; イ t e s h h h h h ボ d h h h h e 選 r f h テ p o o a a a h < r o o a a ツ c o h f t M o e s 的 i t m } ン i t t i i i i i タ e i i i i t 択 o t r i キ ( n n r r n i m a n n r n ー k n i t e t t a n : A s : メ c u a , ラ c u r s s s s s ン r s s s < s u さ u ( h e s ス r s s k k g s a p s s k g ル S s s ( h l h d y r : P t ソ r r c イ r u . . . . . 要 ( . . . s . r れ n t i t . ト a t t . . e . r ( t t ? e の t t . t i s i e p k b I r s ッ g n k l ン g n c a b s t c 素 ) b b b v b n た d h s u w を n c a . a k r . . 状 a s h s e s f e e n o ; i t ド e : a ツ e t p u t a l を u u u g u テ ( i . r r g s m l p i p > a m t r i 態 t m t i . . a r u o n r で t { s ー t t o i t a g a 作 { t t t t t キ r s u n a < e e a a p n i n a e e n を e a a s b { b u { T l l g i 許 { s ル r r t t s 成 t t t w t h ス a . n ; p m : l r s e s . タ g r x m s チ ( r t . u u l o l e ; n 可 s : と i u ( = o e = s し o o o i o i ト n s w ( a e k s n e s グ e k t o e ェ ) k e s t t t A o a g さ a し s e { n 、 n n n d n s を g t r r r R c N d r e を : v r ッ t t t P l | n ; れ n " て I ; a = " = S . . t . . e a a a k a t = a C t l 解 = = e t ク { = = a o o M I ; る i c の n a p = M V = t i h c b < : t p n > n e m h N e 除 R ( N t n n a { H H t d 振 l p i f A " G y n = l u m e ( g g d d e i o c a t r ) o t ! e ? ? r } T T i x る i i ; n a R c ア d p n " a t a R ) r e タ e T o l d t n h a ; d h ! ) . . k M M z - 舞 n u l K d イ o e e 2 s t r a a ) グ ) e c = d e i g i n e i m c c e f L L e m い e } l s " x コ c r 0 s o k n { n ; で x u ( ( o e s g ( s a { l l r r B タ ( a を ( : l e ; - ン u = H " L n > g g ラ { t m t s m n ) . e t . r a a T o u グ ) r 定 ) ; ; m を m T i ; e e ッ e h e a . a . e a k s s o m t と k 義 { a 設 e " M h s タ ) ) プ = n i l r e { p e x p ; s s o t 属 { e { r 定 n b L e t グ ; t s e k x i x t i L L l " o 性 r a k t u i . で { r . . c ) p . t ) . i i ; @ n を " p e . t = g a 囲 a c c t ; a s r ; s s s e E 指 , i r c t h d む n r l e n e a e t t d l 定 : " r o t d g e a d d l c l . . i e ; e n = ( e a s T T e t e a r t m A a " " t . t s e o c C c d e o e P t ; 1 h e e ; x T t o t d m r n I e 8 i x E t a i n i ( o j t E " s t l ) g o t o " v s ; } l > . r e ; ( n e n c e / ) e < a a m m . n . d ( e m p p c e c a f t f x " d { e a i t n l r i s i - c i n t . C t a k n ( n m d t t h s o ( s ) d ) d a x o ( t n t s ; P ; P r - r " d y t h a a k m j b = l e i 属 r r e a s u " e n s 性 e e r r " t M s t . の n n - k ; t 1 . s t 追 t t - e o 0 i ( a 加 T T a r n . n ) g a a c - " 4 l ; ) g g t - ) 5 i ; ( ( i a ; 8 n t t v c e h h e t 1 T i i " i 2 o s s ) v . o . . ; e 0 l t t " 4 B a a ) l u g g ; 2 t ) , . t ; 9 o t 1 n h 9 ) i ; s 1 . . c 6 l 8 a 6 s s . ) 7 ; 8 1 1 . 4 1 7 . 9 8 4 . 0 3 . 9 7 4 1 . 6 8 7 H 8 . 6 7 4 l 1 . 4 9 - 2 . 5 8 3 . 5 0 8 . 7 7 5 . 8 0 2 - 1 . 4 0 1 z m . 5 4 6 . 9 5 2 l 3 . 6 2 4 - 6 . 3 2 7 a 1 . 5 9 7 1 . 5 9 7 0 0 1 2 . 1 8 2 . 5 9 1 . 6 3 2 1 . 6 3 2 0 0 1 . 6 1 5 2 . 2 0 1 l - 3 . 5 1 9 6 . 3 9 1 - 2 . 9 0 2 - 1 . 6 7 5 z m - 7 . 7 3 3 . 4 6 7 h 3 . 4 6 5 a 1 . 1 2 3 1 . 1 2 3 0 1 1 0 2 . 2 4 7 H 3 . 2 7 3 a 1 . 1 2 3 1 . 1 2 3 0 1 1 0 - 2 . 2 4 7 z " / > < / s v g > ' ; Call it as follows: ...

Overview When using Editor.js, large margins appear on the left and right sides by default. This article introduces how to solve this issue. Method The following was helpful. https://github.com/codex-team/editor.js/issues/1328 Specifically, add the following CSS. . . } . } c c c e e m d m - - a x a b t x - x l o - b - o o w l w c l i o i k b d c d _ a t k t _ r h h c _ : { : o _ n c c 1 t o a 0 e n l 0 n t c % t e ( , n 1 ! t 0 i 0 m { % p o - r t 8 a 0 n p t x ; ) ! i m p o r t a n t ; The full source code is as follows. ...

Overview In the following article, I introduced how to use Leaflet Marker Cluster with Nuxt 3. This time, I updated it to use the Composition API, so here are my notes. Installation Install the following: n n p p m m i i l - e D a f @ l t e y t p e l s e / a l f e l a e f t l . e m t a r @ k t e y r p c e l s u / s l t e e a r f l @ e v t u . e m - a l r e k a e f r l c e l t u / s v t u e e r - l e a f l e t Source Code Please refer to the following: ...

Overview I added a Cytoscape demo to a sample repository using Nuxt3 and Vuetify. https://github.com/nakamura196/nuxt3-demo You can check it working on the following page. https://nakamura196.github.io/nuxt3-demo/ Installation I ran the following. n n p p m m i i c @ y t t y o p s e c s a / p c e y t o s c a p e Source Code < t e < i l c c } o } < # } m / s m e o o ; n ) / s c / p < t c p t n n c ] M c } ; s t y w h p b s l d / e r o s s y ) o y ) c y i e o a t a i < d m i r c t t . { } { } ; u c b a s e } l } ; r l { d i s c y t v d i p p t y a , , n = o o u t l , a , i e t g i k l e - i v l t : c a d g d p g d t n x t y . . . } . . } e n ] e ] y n d p p h h t g e > i b v > a c o d d r a o r a e c t S o l s s c ) s c ) m o , d , o a i a t s : t i r > d t t s y a u d ( o t s o t d y a e u e t e s h w " " " " c " e s w " " " " , e d { { { { { { { { g { { { { { { { u m r d > c : o o = n i e e t n n N [ u a i u a ( t i l n : y l s e i b b b b o t l s i t l t c n e e t e e d o 1 n u " d > t o y t o p : t p : ( o n e s l e ( i d a o o o n e e ( d a i a u t s d d d d d d d d s d d d d d d d : : c i p 0 8 : n v c = u s : d : i : ) s e c e c e c { g t c r r r t x c { t r n r r s : a a a a a a a a : a a a a a a a t n e 0 0 d i l " p c = e { o { c r t l y s t h h k d d d e t t h g e g v : t t t t t t t t t t t t t t t { " e g d % % a - e a c a n " n " = a : i e t h o t : g e e e n - o : e - e e [ a a a a a a a a [ a a a a a a a b d : > ; ; b c w s y l p n u = n i : e i > p o c o e r : r r r r t v r t c t - { : : : : : : : : : : : : : : : r : s o " s " a e u m o d d d e d n t s e ( 8 o - - - : a ( 6 - o - s e 1 o l > = > n l b d : { g : { ( o E i c t " 8 0 u c w o l " , a l a t { { { { { { { { { { { { { { { a t 0 l o " < g f l e e e { c n f a ( n 0 , n o i p " i e r o r y d r , u r m / = r ; r s " x s " u a y p ) o , d l d a d g d r r r l i i i i i i i i s s s s s s s t u t : a d " o = " n : " e m b : e d - o t c a n g o " o e d d d d d d d d o o o o o o o h e e - i t m = > , o , d e l e f r h i t " e w : w " : : : : : : : : u u u u u u u f , ; l 4 v s d 3 g n e t " i " " t a : " - - : r r r r r r r i i " > " " 0 { e 0 e t d r ) t : : y ( ) s " c " " " " " " " " c c c c c c c r g > c = ; " 0 " . : u " " n " h # o " c b l a r g p w e e e e e e e s h c y , g e : " 3 : a c a f l b a i a p o r l h : : : : : : : t t o t r + + e f , # , m e p f o e t r d h s a a e " c l o e y t a " 0 0 e n e a r z " d y i e s n a " " " " " " " , y o s f c : c E l c 0 . ) t " a " i " b d " s t t c b b g g l a a r c ( = o o l s o 0 5 " e : a : e } u " h " " a i i r r a p n = a n u 2 u e e v " , , r a r } g } o t r r a a d h ; " p u r n 0 n m , e , " " " " " } " } p } } " d d s s y i p e l e t 0 t e r , t , # , , } } p , " " s s b d r " l f , n " r f , } } , e } } , , h h u " i ; ) ( } } t , i f , r , , t o o g , m ; 0 , , s B a a } " a t t p p " a ) o y n a , r a a p p , t r ; u I g a } g r r e e a y / r d l a e g g r r t r " r c ( e " } t e e " " a g e / e " " , , : t t , , r e a r : c , : : g t c e y " t t e : o t a " " b " " a a t n i c n ) i l g r r : " : v t o , r a r g g r c e i d d d a e e " o l ( v e " y s t t a s i { e " b s : : p e c } ( } u h h " k ) 0 + g o " " i = ; ) } " p p w d } " ; c , p l h " a o } e a e } d / u r n a } , d : n } " t t N t , " " } o a , } , d n } } e y t } " a , } } > r , , p g u e s t h : < / " v c - a b t t " n > } , Summary I hope this is helpful. ...

Splitpanes is a Vue.js library that enables pane splitting and resizing, as shown below. https://github.com/antoniandre/splitpanes When using this library, I encountered an issue where resizing did not work properly when a pane contained an iframe element. A solution was described in the following pull request. https://github.com/antoniandre/splitpanes/pull/162 As described there, adding the following CSS resolved the issue and allowed correct resize operations even with panes containing iframe elements. . } s p l i p t o p i a n n t e e s r - - - e d v r e a n g t g s i : n g n o . n s e p ; l i t p a n e s _ _ p a n e { I hope this helps anyone experiencing the same issue. ...

Overview This is a personal note on using VueUse for implementing text selection functionality with Nuxt 3 (Vue 3). https://vueuse.org/ Demo You can try it from the following page. https://nuxt3-demo-git-main-nakamura196.vercel.app/textSelection The source code is at the following URL. https://github.com/nakamura196/nuxt3-demo/blob/main/pages/textSelection.vue Installation Method The installation instructions are described on the following page. https://vueuse.org/guide/ The specific steps are as follows. n p m i - D @ v u e u s e / n u x t @ v u e u s e / c o r e e } x ) p m ] n o o , u r d ' x t u @ t l v . d e u c e s e o f : u n a s f u [ e i l / g t n . u t d x s e t f ' i , n e N u x t C o n f i g ( { Summary In addition to text selection, there seem to be many other useful features available, so I would like to continue trying them out. ...

Overview In the following article, I created a program for interaction between Vue 3 and Babylon.js. This time, as an advanced version of the above, the mesh to be passed to the scene is specified from Vue. You can check the content at the following link. (There are some parts where meshes are not properly deleted. This is planned to be fixed in the future.) https://youtu.be/-dyQp-QX42I Demo Site https://nakamura196.github.io/nuxt3-babylonjs/10 ...

Overview I prototyped a program for bidirectional interaction between Vue 3 and Babylon.js. You can check the content at the following link. https://youtube.com/shorts/BIdj-3T2_z8 Demo Site https://nakamura196.github.io/nuxt3-babylonjs/9 Source Code https://github.com/nakamura196/nuxt3-babylonjs/blob/main/pages/9/index.vue Summary We hope this serves as a useful reference.

I had the opportunity to try Leaflet Marker Cluster with Nuxt 3. The implementation example is as follows. https://nuxt3-demo-nine.vercel.app/map-cluster For this implementation, I referenced the following page. https://codesandbox.io/s/ns238 The source code is at the following URL. https://github.com/nakamura196/nuxt3-demo As of March 2023, it appears to be at the POC (Proof of Concept) stage. I hope this serves as a useful reference.

Overview I created a Custom OpenSeaDragon Viewer intended for use in TEI viewers. Background In developing a viewer that links TEI and IIIF as shown below, a viewer with the following capabilities was needed. https://www.hi.u-tokyo.ac.jp/collection/digitalgallery/wakozukan/tei/ Ability to load IIIF manifest files. Ability to track page navigation within the viewer component from outside the component. Ability to highlight partial regions of images. Since I could not find an existing IIIF-compatible viewer that met all of the above requirements, I attempted to develop a custom viewer. I also tried publishing it as an npm package. ...

I created a repository introducing a usage example of Leaflet with Vue 3 (including coordinate range retrieval). The working example is available here: https://static.ldas.jp/vue3-leaflet/ The source code is available here: https://github.com/ldasjp8/vue3-leaflet As a Vue 3 beginner, there may be errors, but we hope this serves as a useful reference.

I created a sample repository for using OpenSeadragon with Vue3. Here is a working example. https://static.ldas.jp/vue3-osd/ The source code is available below. https://github.com/ldasjp8/vue3-osd As I am a Vue3 beginner, there may be some errors, but I hope this is helpful.