This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

preface

The current popular Vite + Vue3 + Ts technology stack is selected

Last year, I began to take charge of the secondary development of the large screen and low code platform in the company. The source code was avue’s visual large screen. I changed many bugs in the original code of the large screen, and added the encapsulation of animation and graphics components Vue-sketch-ruler, this plug-in allows operators to freely zoom in and out, drag and drop the page (the drag and drop function needs to be written by themselves), as well as the standard line function, which is quite useful. Before, THIS plug-in has not been used for avue large screen. I incidentally mentioned a wave of PR to the author, and added the operation record of the page to cancel and redo, and the final effect is also As shown in the avue large screen link, this process is not covered in this article

This year, we upgraded the original project to VUe3 + Vite, and then used vue-Sketch-ruler, it can’t be used, because it was originally written by VUe2, but the author hasn’t upgraded vuE3 edition (there has been no maintenance for two years), it can’t wait for others to do it, so try to do it by yourself!

First, please post the effect picture of vuE3-Sketch -ruler after renovation

Demonstration effect

After the release of this plug-in, it was renamed as Vue3-Sketch-ruler. Within one month of release, 200 downloads have been achieved, which is quite good. It proves that there are a lot of people who need to use this plug-in, and it also gives me the power to continue to optimize and add new functions👉👉 See the source code herevue3-sketch-ruler

Transformation process

  1. Start by downloading a vite+ TS scaffolding project
  2. Put the source code in there
  3. Configure eslint+stylelint to format source code
  4. Fix syntax differences in VUe3, such as emit events
  5. Ts transformation
  6. NPM is distributed as a package

Problems occurred during ts transformation

Ts is also the first to use, and a wave of National Day learning, feel the most difficult is a generic piece, other parameter types and return type is relatively simple, ts the strongest feeling is a type error prompt, method and there is a hint, so suddenly like, it’s no wonder that so many new plug-ins using ts

  1. The props type check has been reported as an error. The props type check has been reported as an error. The props type check has been reported as an error

import { ExtractPropTypes } from 'vue'
export const lineProps = {
  scale: Number.thick: Number.palette: Object.index: Number.start: Number.vertical: Boolean.value: Number.isShowReferLine: Boolean
}
export type LineProps = ExtractPropTypes<typeof lineProps>
Copy the code

The advantage of doing this is that you don’t have to write the props type definition again in vue.

  1. How does the type of TS package into NPM and take effect?

Vite -plugin-dts, install vite-plugin-dts, install vite-plugin-dts, install vite-plugin-dts, install vite-plugin-dts, install vite-plugin-dts, install vite-plugin-dts, install vite-plugin-dts “Typings “: “lib/types/index.d.ts” will be referenced in packge.json

To optimize the

I wouldn’t have to write this article if I had just taken a look at the plugin. The goal of this open source project is to be able to optimize the code and add new features later to make the plugin more usable.

Future supported features

  • [] 0 Configures the use of plug-ins
  • [] Added canvas mouse drag function
  • [] Corner support event
  • [] There is a mouse in the lower right corner of the zoom function
  • [] in the upper left corner of the eye, click to control the red line development
  • [] Add unit testing

There are a lot of things that need to be configured. The following is the original configuration by the author. You can see that there are a lot of parameters and events that need to be passed

And more, even if the transfer, that is, the page style difficult to move, wide high several places to take care of processing, to do adaptation of different size, style problem (location), is also a trouble, I hope I can do is zero configuration, plug-in plug-in just ruler gauge, inside pages to fit container width is high, is to calculate, don’t need me to pass, after modification to be this way

The wrapper div is what you need to scale. You only need to specify the wrapper and Congtent styles. You can pass or not pass other parameters,handleScroll, etc Right out of the box, I also implemented the drag and drop of the canvas and the zoom button on the page, as shown in the picture below. This component was also self-written at the time and showed the button when the mouse moved over the edit area. Click on the right side of the adaptive middle edit area size, that is, no matter how big, how small to display can be the most appropriate scale ratio of the initial display, this operation I think should also be handled by the plug-in itself, how troublesome it is to write, do you think? Have the same feeling, everyone little little finger, hee hee!!

Behind some function will also add to the 2 x, 1 x to leave the plug-in functionality, do not do big adjustment, convenient like I this person, has written the function, just migrated to vue3 (with small changes, has shown in update records), if it is a new project, so it is highly recommended in 2 x out of the box

1X uses V-model to optimize the internal component of the source code, reduce the event back, eliminate some useless methods (estimated before the author wanted to add new functions), integrate the method of drawing rulers, reduce the amount of packaging code

In writing this article 2X still have small bug to fix, when finished will be released, please look forward to!!

The last

This is an open source amateur function. If you are interested in enhancing the plugin, you are welcome to join, and also welcome to propose pr or issue

Vue3-sketch ruler: 👉👉