feat: add smooth freehand drawing with continuous drawing mode

.github/workflows/npm-publish.yml

@@ -28,6 +28,6 @@ jobs:
           cache: pnpm
           registry-url: https://registry.npmjs.org/
       - run: pnpm install && pnpm run build
-      - run: npm publish
+      - run: npm publish --tag latest
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.gitignore

@@ -7,3 +7,5 @@
 /docs/node_modules
 
 .npmrc
+
+.DS_Store

docs/.vitepress/config/index.js

@@ -1,3 +1,4 @@
+import { fileURLToPath, URL } from 'node:url'
 import fs from 'fs'
 import path from 'path'
 import { defineConfig } from 'vitepress'
@@ -18,6 +19,16 @@ function config () {
       },
       define: {
         'process.env': JSON.stringify(process.env)
+      },
+      resolve: {
+        alias: [
+          {
+            find: /^.*\/VPNavBarTitle\.vue$/,
+            replacement: fileURLToPath(
+              new URL('../../@components/NavbarTitle.vue', import.meta.url)
+            )
+          }
+        ]
       }
     },
     cleanUrls: true,
@@ -37,7 +48,7 @@ function config () {
       languages: ['js', 'jsx', 'ts', 'tsx']
     },
     head: [
-      ['link', { rel: 'icon', type: 'image/svg+xml', href: '/images/logo.svg' }],
+      ['link', { rel: 'icon', type: 'image/x-icon', href: '/images/fav.png' }],
       ['script', {}, `${klinecharts}`],
       [
         'script',

docs/.vitepress/config/share.js

@@ -49,6 +49,8 @@ export function getInstanceApiMenus (lang = '') {
     { text: 'setRightMinVisibleBarCount', link: `${prefix}/setRightMinVisibleBarCount` },
     { text: 'setBarSpace', link: `${prefix}/setBarSpace` },
     { text: 'getBarSpace', link: `${prefix}/getBarSpace` },
+    { text: 'setBarSpaceLimit', link: `${prefix}/setBarSpaceLimit` },
+    { text: 'getBarSpaceLimit', link: `${prefix}/getBarSpaceLimit` },
     { text: 'setSymbol', link: `${prefix}/setSymbol` },
     { text: 'getSymbol', link: `${prefix}/getSymbol` },
     { text: 'setPeriod', link: `${prefix}/setPeriod` },
@@ -67,10 +69,10 @@ export function getInstanceApiMenus (lang = '') {
     { text: 'removeOverlay', link: `${prefix}/removeOverlay` },
     { text: 'setPaneOptions', link: `${prefix}/setPaneOptions` },
     { text: 'getPaneOptions', link: `${prefix}/getPaneOptions` },
-    { text: 'setZoomEnabled', link: `${prefix}/setZoomEnabled` },
     { text: 'setZoomAnchor', link: `${prefix}/setZoomAnchor` },
-    { text: 'isZoomEnabled', link: `${prefix}/isZoomEnabled` },
     { text: 'getZoomAnchor', link: `${prefix}/getZoomAnchor` },
+    { text: 'setZoomEnabled', link: `${prefix}/setZoomEnabled` },
+    { text: 'isZoomEnabled', link: `${prefix}/isZoomEnabled` },
     { text: 'setScrollEnabled', link: `${prefix}/setScrollEnabled` },
     { text: 'isScrollEnabled', link: `${prefix}/isScrollEnabled` },
     { text: 'scrollByDistance', link: `${prefix}/scrollByDistance` },

docs/.vitepress/theme/style.css

@@ -17,17 +17,17 @@
 :root {
   --light-c-text-1: #09090B;
   --light-c-text-2: #71717A;
-  --light-c-text-3: #71717A;
+  --light-c-text-3: #A1A1AA;
   --light-c-bg: #FFFFFF;
 
   --dark-c-text-1: #FAFAFA;
   --dark-c-text-2: #A1A1AA;
-  --dark-c-text-3: #A1A1AA;
+  --dark-c-text-3: #828282;
   --dark-c-bg: #09090B;
 
   --vp-c-indigo-1: #E6AC00;
-  --vp-c-indigo-2: #d6ac2e;
-  --vp-c-indigo-3: #c9aa4e;
+  --vp-c-indigo-2: #ebbc33;
+  --vp-c-indigo-3: #f0cd66;
 
   --vp-c-text-1: var(--light-c-text-1);
   --vp-c-text-2: var(--light-c-text-2);
@@ -41,22 +41,12 @@
 
   --vp-c-indigo-soft: rgb(22, 119, 255, 0.14);
 
-  --custom-red: #F92855;
-  --custom-green: #2DC08E;
-
   --vp-c-bg-soft: #F5F5F5;
   --vp-code-bg: var(--vp-c-bg-soft);
   --vp-code-color: var(--vp-c-text-1);
 
   --vp-nav-height: 60px;
 
-  --vp-button-brand-border: var(--vp-c-indigo-2);
-  --vp-button-brand-bg: var(--vp-c-indigo-1);
-  --vp-button-brand-hover-border: var(--vp-c-indigo-2);
-  --vp-button-brand-hover-bg: var(--vp-c-indigo-2);
-  --vp-button-brand-active-border: var(--vp-c-indigo-2);
-  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
-
   --vp-sidebar-bg-color: var(--vp-c-bg);
   --vp-c-divider: #EFEFEF;
   --vp-c-border: var(--vp-c-divider);
@@ -66,7 +56,8 @@
   --vp-font-family-mono: SourceCode, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --vp-font-family-base: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Arial", "sans-serif";
 
-  --vp-home-hero-bg: linear-gradient(180deg, rgba(238, 238, 238, 0) 0%, rgba(234, 204, 117, 0.2) 52%, rgba(230, 172, 0, 0) 100%);
+  --custom-c-warn: #E6AC00;
+  --vp-custom-block-warning-bg: #f5dd99;
 }
 
 .dark {
@@ -79,18 +70,18 @@
   --vp-c-divider: #27272A;
 
   --vp-c-bg-alt: #161616;
+  --vp-c-bg-elv: #161616;
 
   --vp-c-bg-soft: #262626;
 
   --vp-local-search-bg: var(--vp-c-bg-alt);
-
-  --vp-home-hero-bg: linear-gradient(180deg, rgba(238, 238, 238, 0) 0%, rgba(234, 204, 117, 0.15) 52%, rgba(230, 172, 0, 0) 100%);
 }
 
 body {
   font-feature-settings: normal;
   font-variation-settings: normal;
   line-height: 1.6;
+  overflow: hidden;
 }
 
 .VPFeatures .VPFeature {

docs/@components/ChartPreview.vue

@@ -23,7 +23,6 @@ import SmoothExpand from './SmoothExpand.vue'
 
 const { isDark, lang } = useData()
 
-
 const href = ref()
 
 const props = defineProps(['title', 'chartId', 'chartHeight', 'code'])
@@ -33,6 +32,7 @@ const loading = ref(true)
 const showCode = ref(!props.chartId)
 
 const chartContainer = ref(null)
+const chartInitializedFlag = ref(false)
 
 const observer = ref(null)
 const codeHtml = ref(null)
@@ -166,50 +166,58 @@ onMounted(() => {
       defaultColor: 'light'
     })
   }
+
   if (props.code) {
     highlightCode()
     if (!!props.chartId) {
-      const transformJs = props.code + '\n' + `window['chart_${props.chartId}'] = chart`
-      const ast = parse(transformJs, { sourceType: 'module' })
-
-      traverse(ast, {
-        CallExpression(path) {
-          if (
-            t.isCallExpression(path.node) &&
-            t.isIdentifier(path.node.callee, { name: 'callback' })
-          ) {
-            const postMessageFun = t.expressionStatement(
-              t.callExpression(
-                t.memberExpression(t.identifier('window'), t.identifier('postMessage')),
-                [t.stringLiteral(props.chartId)]
-              )
-            )
-            path.insertBefore(postMessageFun)
-          }
-        }
-      })
-
       window.addEventListener('message', handlerMessage, false);
-
-      const { code } = transform(generator(ast, {}, transformJs).code, {
-        presets: [
-          'es2015',
-          ['stage-3', { decoratorsBeforeExport: true }],
-        ],
-        plugins: ['transform-modules-umd'],
-      })
-      const chartDom = document.createElement('div')
-      const height = `${props.chartHeight || 350}px`
-      chartDom.style.height = height
-      chartDom.id = props.chartId
-      chartContainer.value.appendChild(chartDom)
-      const script = document.createElement('script')
-      script.innerHTML = code
-      chartContainer.value.appendChild(script)
-      window[`chart_${props.chartId}`].setStyles(isDark.value ? 'dark' : 'light')
-
       observer.value = new ResizeObserver(_ => {
-        window[`chart_${props.chartId}`].resize()
+        if (!chartInitializedFlag.value) {
+          const bounding = chartContainer.value.getBoundingClientRect()
+          if (bounding.width === 0 || bounding.height === 0) {
+            return
+          }
+          chartInitializedFlag.value = true
+          const transformJs = props.code + '\n' + `window['chart_${props.chartId}'] = chart`
+          const ast = parse(transformJs, { sourceType: 'module' })
+
+          traverse(ast, {
+            CallExpression(path) {
+              if (
+                t.isCallExpression(path.node) &&
+                t.isIdentifier(path.node.callee, { name: 'callback' })
+              ) {
+                const postMessageFun = t.expressionStatement(
+                  t.callExpression(
+                    t.memberExpression(t.identifier('window'), t.identifier('postMessage')),
+                    [t.stringLiteral(props.chartId)]
+                  )
+                )
+                path.insertBefore(postMessageFun)
+              }
+            }
+          })
+
+          const { code } = transform(generator(ast, {}, transformJs).code, {
+            presets: [
+              'es2015',
+              ['stage-3', { decoratorsBeforeExport: true }],
+            ],
+            plugins: ['transform-modules-umd'],
+          })
+          const chartDom = document.createElement('div')
+          const height = `${props.chartHeight || 350}px`
+          chartDom.style.height = height
+          chartDom.id = props.chartId
+          chartContainer.value.appendChild(chartDom)
+          const script = document.createElement('script')
+          script.innerHTML = code
+          chartContainer.value.appendChild(script)
+          window[`chart_${props.chartId}`].setStyles(isDark.value ? 'dark' : 'light')
+        } else {
+          window[`chart_${props.chartId}`]?.resize()
+        }
+
       })
       observer.value.observe(chartContainer.value)
     }
@@ -229,7 +237,7 @@ watch(isDark, (newValue) => {
 onUnmounted(() => {
   if (!!props.chartId) {
     if (observer.value && chartContainer.value) {
-    observer.value.unobserve(chartContainer.value)
+      observer.value.unobserve(chartContainer.value)
     }
     if (window.klinecharts) {
       window.klinecharts.dispose(props.chartId)
@@ -245,7 +253,7 @@ onUnmounted(() => {
     <div
       ref="chartContainer"
       class="content-item chart">
-      <Loading v-if="loading"/>
+      <Loading v-if="loading" className="loading"/>
     </div>
     <div
       class="code-action-container"
@@ -339,6 +347,12 @@ h3 + .chart-preview {
   min-height: 350px;
 }
 
+.loading {
+  background-color: var(--vp-code-block-bg);
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+
 .code-action-container {
   display: flex;
   align-items: center;

docs/@components/Loading.vue

@@ -1,11 +1,25 @@
 <template>
-  <div class="loading">
+  <div :class="rootClass">
     <div class="loader"/>
   </div>
 </template>
 
-<style scoped>
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  className: {
+    type: String,
+    default: ''
+  }
+})
 
+const rootClass = computed(() => {
+  return props.className ? `loading ${props.className}` : 'loading'
+})
+</script>
+
+<style scoped>
 .loading {
   display: flex;
   position: absolute;
@@ -16,25 +30,35 @@
   top: 0;
   width: 100%;
   height: 100%;
-  z-index: 10;
-  background-color: var(--vp-code-block-bg);
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
+  z-index: 100;
+  color: var(--vp-c-indigo-1);
 }
 
 .loader {
   width: 14px;
   aspect-ratio: 1;
   border-radius: 50%;
-  background: var(--custom-red);
+  background-color: currentColor;
   animation: l2 1.5s infinite;
 }
 @keyframes l2 {
   0%,
-  100%{transform:translate(-35px);box-shadow:  0     0 var(--vp-c-indigo-1), 0     0 var(--custom-green)}
-  40% {transform:translate( 35px);box-shadow: -15px  0 var(--vp-c-indigo-1), -30px  0 var(--custom-green)}
-  50% {transform:translate( 35px);box-shadow:  0     0 var(--vp-c-indigo-1), 0     0 var(--custom-green)}
-  90% {transform:translate(-35px);box-shadow:  15px  0 var(--vp-c-indigo-1), 30px  0 var(--custom-green)}
+  100% {
+    transform: translate(-32px);
+    box-shadow:  0 0 currentColor, 0 0 currentColor;
+  }
+  40% {
+    transform:translate(32px);
+    box-shadow: -18px 0 currentColor, -36px 0 currentColor;
+  }
+  50% {
+    transform:translate(32px);
+    box-shadow:  0 0 currentColor, 0 0 currentColor;
+  }
+  90% {
+    transform:translate(-32px);
+    box-shadow: 18px 0 currentColor, 36px 0 currentColor;
+  }
 }
 </style>
 

docs/@components/Logo.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg
+    :width="props.size"
+    :height="props.size"
+    fill="var(--vp-c-indigo-1)"
+    viewBox="0 0 60 60">
+    <path d="M27.70969009399414,17.502239227294922L32.70968869399414,17.502239227294922L32.70968869399414,42.49776122729492L27.70969009399414,42.49776122729492L27.70969009399414,17.502239227294922Z"/>
+    <path d="M43.591396,4.343317L43.591396,3.2574797C39.505386,1.1825904,34.892475,0,29.999985,0C13.430093,0,0,13.427691,0,29.994619C0,39.724049,4.6344047,48.356907,11.806443,53.839802L11.806443,47.131336C7.591393,42.659016,4.9999919,36.627853,4.9999919,29.994619C4.9999919,16.190645,16.193541,4.9990978,29.999985,4.9990978C33.021488,4.9990978,35.913963,5.5366359,38.59137,6.5257206L38.59137,26.844654L43.591362,26.844654L43.591396,4.343317Z"/>
+    <path d="M48.591386797485356,6.46121883392334L48.591386797485356,13.28795953392334C52.58062179748535,17.71726783392334,54.999978797485355,23.57644783392334,54.999978797485355,29.99465283392334C54.999978797485355,43.79862883392334,43.80642879748535,54.99017583392334,29.999984797485354,54.99017583392334C27.129003797485353,54.99017583392334,24.37631849748535,54.50637683392334,21.806443697485353,53.61407783392334L21.806443697485353,33.08011683392334L16.80645179748535,33.08011683392334L16.80645179748535,55.58145383392334L16.80645179748535,56.94678783392334C20.784941897485353,58.90343383392334,25.26880929748535,60.00000283392334,29.999984797485354,60.00000283392334C46.56987579748535,60.00000283392334,59.999967797485354,46.57231083392334,59.999967797485354,30.00538183392334C60.01073279748535,20.44793783392334,55.54837579748535,11.95484253392334,48.591386797485356,6.46121883392334Z"/>
+  </svg>
+</template>
+
+<script setup>
+const props = defineProps({
+  size: {
+    type: Number,
+    default: 60
+  }
+})
+</script>
+