From 8f7eb3e67f7bc73a3efea8505dbff386e55b31f4 Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Sun, 27 Nov 2022 20:11:29 +0800 Subject: [PATCH 1/8] feat:content block core --- src/editor/assets/css/block/block.css | 7 +++ src/editor/assets/css/date/datePicker.css | 1 + src/editor/assets/css/index.css | 1 + src/editor/core/draw/Draw.ts | 12 +++++ .../core/draw/particle/block/BlockParticle.ts | 47 +++++++++++++++++ .../draw/particle/block/modules/BaseBlock.ts | 51 +++++++++++++++++++ .../particle/block/modules/IFrameBlock.ts | 28 ++++++++++ src/editor/dataset/constant/Element.ts | 3 +- src/editor/dataset/enum/Block.ts | 3 ++ src/editor/dataset/enum/Element.ts | 3 +- src/editor/index.ts | 4 +- src/editor/interface/Block.ts | 10 ++++ src/editor/interface/Element.ts | 6 +++ src/editor/utils/element.ts | 2 +- src/mock.ts | 16 +++++- 15 files changed, 189 insertions(+), 5 deletions(-) create mode 100644 src/editor/assets/css/block/block.css create mode 100644 src/editor/core/draw/particle/block/BlockParticle.ts create mode 100644 src/editor/core/draw/particle/block/modules/BaseBlock.ts create mode 100644 src/editor/core/draw/particle/block/modules/IFrameBlock.ts create mode 100644 src/editor/dataset/enum/Block.ts create mode 100644 src/editor/interface/Block.ts diff --git a/src/editor/assets/css/block/block.css b/src/editor/assets/css/block/block.css new file mode 100644 index 0000000..6f6e177 --- /dev/null +++ b/src/editor/assets/css/block/block.css @@ -0,0 +1,7 @@ +.block-item { + position: absolute; + z-index: 0; + overflow: hidden; + border-radius: 8px; + border: 1px solid rgb(235 236 240); +} \ No newline at end of file diff --git a/src/editor/assets/css/date/datePicker.css b/src/editor/assets/css/date/datePicker.css index 6cd740d..be44cc4 100644 --- a/src/editor/assets/css/date/datePicker.css +++ b/src/editor/assets/css/date/datePicker.css @@ -5,6 +5,7 @@ left: 0; right: 0; position: absolute; + z-index: 1; color: #606266; background: #ffffff; border-radius: 4px; diff --git a/src/editor/assets/css/index.css b/src/editor/assets/css/index.css index 161fa99..1189064 100644 --- a/src/editor/assets/css/index.css +++ b/src/editor/assets/css/index.css @@ -1,5 +1,6 @@ @import './control/select.css'; @import './date/datePicker.css'; +@import './block/block.css'; .inputarea { width: 0; diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index c6adc84..7faa74d 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -46,6 +46,7 @@ import { WorkerManager } from '../worker/WorkerManager' import { Previewer } from './particle/previewer/Previewer' import { DateParticle } from './particle/date/DateParticle' import { IMargin } from '../../interface/Margin' +import { BlockParticle } from './particle/block/BlockParticle' export class Draw { @@ -86,6 +87,7 @@ export class Draw { private superscriptParticle: SuperscriptParticle private subscriptParticle: SubscriptParticle private checkboxParticle: CheckboxParticle + private blockParticle: BlockParticle private control: Control private workerManager: WorkerManager @@ -138,6 +140,7 @@ export class Draw { this.superscriptParticle = new SuperscriptParticle() this.subscriptParticle = new SubscriptParticle() this.checkboxParticle = new CheckboxParticle(this) + this.blockParticle = new BlockParticle(this) this.control = new Control(this) new ScrollObserver(this) @@ -707,6 +710,11 @@ export class Draw { metrics.height = defaultSize * scale metrics.boundingBoxDescent = 0 metrics.boundingBoxAscent = metrics.height + } else if (element.type === ElementType.BLOCK) { + metrics.width = element.width! * scale + metrics.height = element.height! * scale + metrics.boundingBoxDescent = metrics.height + metrics.boundingBoxAscent = 0 } else { // 设置上下标真实字体尺寸 const size = element.size || this.options.defaultSize @@ -739,6 +747,7 @@ export class Draw { const preElement = elementList[i - 1] if ( preElement?.type === ElementType.TABLE + || preElement?.type === ElementType.BLOCK || preElement?.imgDisplay === ImageDisplay.INLINE || element.imgDisplay === ImageDisplay.INLINE || curRow.width + metrics.width > innerWidth @@ -880,6 +889,9 @@ export class Draw { // 如果是两端对齐，因canvas目前不支持letterSpacing需单独绘制文本 this.textParticle.record(ctx, element, x, y + offsetY) this._drawRichText(ctx) + } else if (element.type === ElementType.BLOCK) { + this._drawRichText(ctx) + this.blockParticle.render(pageNo, element, x, y) } else { this.textParticle.record(ctx, element, x, y + offsetY) } diff --git a/src/editor/core/draw/particle/block/BlockParticle.ts b/src/editor/core/draw/particle/block/BlockParticle.ts new file mode 100644 index 0000000..74b1d09 --- /dev/null +++ b/src/editor/core/draw/particle/block/BlockParticle.ts @@ -0,0 +1,47 @@ +import { IRowElement } from '../../../../interface/Row' +import { Draw } from '../../Draw' +import { BaseBlock } from './modules/BaseBlock' + +export class BlockParticle { + + private draw: Draw + private container: HTMLDivElement + private blockContainer: HTMLDivElement + private blockMap: Map + + constructor(draw: Draw) { + this.draw = draw + this.container = draw.getContainer() + this.blockMap = new Map() + this.blockContainer = this._createBlockContainer() + this.container.append(this.blockContainer) + } + + private _createBlockContainer(): HTMLDivElement { + const blockContainer = document.createElement('div') + blockContainer.classList.add('block-container') + return blockContainer + } + + public getDraw(): Draw { + return this.draw + } + + public getBlockContainer(): HTMLDivElement { + return this.blockContainer + } + + public render(pageNo: number, element: IRowElement, x: number, y: number) { + const id = element.id! + const cacheBlock = this.blockMap.get(id) + if (cacheBlock) { + cacheBlock.setClientRects(pageNo, x, y) + } else { + const newBlock = new BaseBlock(this, element) + newBlock.render() + newBlock.setClientRects(pageNo, x, y) + this.blockMap.set(id, newBlock) + } + } + +} \ No newline at end of file diff --git a/src/editor/core/draw/particle/block/modules/BaseBlock.ts b/src/editor/core/draw/particle/block/modules/BaseBlock.ts new file mode 100644 index 0000000..f9e87cc --- /dev/null +++ b/src/editor/core/draw/particle/block/modules/BaseBlock.ts @@ -0,0 +1,51 @@ +import { BlockType } from '../../../../../dataset/enum/Block' +import { IRowElement } from '../../../../../interface/Row' +import { Draw } from '../../../Draw' +import { BlockParticle } from '../BlockParticle' +import { IFrameBlock } from './IFrameBlock' + +export class BaseBlock { + + private draw: Draw + private element: IRowElement + private block: IFrameBlock | null + private blockContainer: HTMLDivElement + private blockItem: HTMLDivElement + + constructor(blockParticle: BlockParticle, element: IRowElement) { + this.draw = blockParticle.getDraw() + this.blockContainer = blockParticle.getBlockContainer() + this.element = element + this.block = null + this.blockItem = this._createBlockItem() + this.blockContainer.append(this.blockItem) + } + + private _createBlockItem(): HTMLDivElement { + const blockItem = document.createElement('div') + blockItem.classList.add('block-item') + return blockItem + } + + public render() { + const block = this.element.block! + if (block.type === BlockType.IFRAME) { + this.block = new IFrameBlock(this.element) + this.block.render(this.blockItem) + } + } + + public setClientRects(pageNo: number, x: number, y: number) { + const scale = this.draw.getOptions().scale + const height = this.draw.getHeight() + const pageGap = this.draw.getPageGap() + const preY = pageNo * (height + pageGap) + // 尺寸 + this.blockItem.style.width = `${this.element.width! * scale}px` + this.blockItem.style.height = `${this.element.height! * scale}px` + // 位置 + this.blockItem.style.left = `${x}px` + this.blockItem.style.top = `${preY + y}px` + } + +} \ No newline at end of file diff --git a/src/editor/core/draw/particle/block/modules/IFrameBlock.ts b/src/editor/core/draw/particle/block/modules/IFrameBlock.ts new file mode 100644 index 0000000..b1cc2f8 --- /dev/null +++ b/src/editor/core/draw/particle/block/modules/IFrameBlock.ts @@ -0,0 +1,28 @@ +import { IRowElement } from '../../../../../interface/Row' + +export class IFrameBlock { + + private static readonly sandbox = [ + 'allow-forms', + 'allow-scripts', + 'allow-same-origin', + 'allow-popups' + ] + private element: IRowElement + + constructor(element: IRowElement) { + this.element = element + } + + public render(blockItemContainer: HTMLDivElement) { + const block = this.element.block! + const iframe = document.createElement('iframe') + iframe.sandbox.add(...IFrameBlock.sandbox) + iframe.style.border = 'none' + iframe.style.width = '100%' + iframe.style.height = '100%' + iframe.src = block.iframeBlock?.src || '' + blockItemContainer.append(iframe) + } + +} \ No newline at end of file diff --git a/src/editor/dataset/constant/Element.ts b/src/editor/dataset/constant/Element.ts index 4725e30..1c9a17a 100644 --- a/src/editor/dataset/constant/Element.ts +++ b/src/editor/dataset/constant/Element.ts @@ -50,7 +50,8 @@ export const EDITOR_ELEMENT_ZIP_ATTR: Array = [ 'valueList', 'control', 'checkbox', - 'dateFormat' + 'dateFormat', + 'block' ] export const TEXTLIKE_ELEMENT_TYPE: ElementType[] = [ diff --git a/src/editor/dataset/enum/Block.ts b/src/editor/dataset/enum/Block.ts new file mode 100644 index 0000000..c89ecbf --- /dev/null +++ b/src/editor/dataset/enum/Block.ts @@ -0,0 +1,3 @@ +export enum BlockType { + IFRAME = 'iframe' +} \ No newline at end of file diff --git a/src/editor/dataset/enum/Element.ts b/src/editor/dataset/enum/Element.ts index 972654f..a248245 100644 --- a/src/editor/dataset/enum/Element.ts +++ b/src/editor/dataset/enum/Element.ts @@ -11,5 +11,6 @@ export enum ElementType { CHECKBOX = 'checkbox', LATEX = 'latex', TAB = 'tab', - DATE = 'date' + DATE = 'date', + BLOCK = 'block' } \ No newline at end of file diff --git a/src/editor/index.ts b/src/editor/index.ts index 2339e0a..49079ef 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -26,6 +26,7 @@ import { DeepRequired } from './interface/Common' import { INavigateInfo } from './core/draw/interactive/Search' import { Shortcut } from './core/shortcut/Shortcut' import { KeyMap } from './dataset/enum/KeyMap' +import { BlockType } from './dataset/enum/Block' export default class Editor { @@ -125,7 +126,8 @@ export { PageMode, ImageDisplay, Command, - KeyMap + KeyMap, + BlockType } // 对外类型 diff --git a/src/editor/interface/Block.ts b/src/editor/interface/Block.ts new file mode 100644 index 0000000..c6f7064 --- /dev/null +++ b/src/editor/interface/Block.ts @@ -0,0 +1,10 @@ +import { BlockType } from '../dataset/enum/Block' + +export interface IIFrameBlock { + src: string; +} + +export interface IBlock { + type: BlockType; + iframeBlock?: IIFrameBlock; +} \ No newline at end of file diff --git a/src/editor/interface/Element.ts b/src/editor/interface/Element.ts index 66c34ff..bdd3ead 100644 --- a/src/editor/interface/Element.ts +++ b/src/editor/interface/Element.ts @@ -1,6 +1,7 @@ import { ControlComponent, ImageDisplay } from '../dataset/enum/Control' import { ElementType } from '../dataset/enum/Element' import { RowFlex } from '../dataset/enum/Row' +import { IBlock } from './Block' import { ICheckbox } from './Checkbox' import { IControl } from './Control' import { IColgroup } from './table/Colgroup' @@ -78,6 +79,10 @@ export interface IImageElement { imgDisplay?: ImageDisplay } +export interface IBlockElement { + block?: IBlock; +} + export type IElement = IElementBasic & IElementStyle & ITable @@ -89,6 +94,7 @@ export type IElement = IElementBasic & ILaTexElement & IDateElement & IImageElement + & IBlockElement export interface IElementMetrics { width: number; diff --git a/src/editor/utils/element.ts b/src/editor/utils/element.ts index 65f771c..061a3ea 100644 --- a/src/editor/utils/element.ts +++ b/src/editor/utils/element.ts @@ -237,7 +237,7 @@ export function formatElementList(elementList: IElement[], options: IFormatEleme if (el.value === '\n') { el.value = ZERO } - if (el.type === ElementType.IMAGE) { + if (el.type === ElementType.IMAGE || el.type === ElementType.BLOCK) { el.id = getUUID() } if (el.type === ElementType.LATEX) { diff --git a/src/mock.ts b/src/mock.ts index 0924fcc..d3d0bcc 100644 --- a/src/mock.ts +++ b/src/mock.ts @@ -1,4 +1,4 @@ -import { ControlType, ElementType, IEditorOption, IElement, RowFlex } from './editor' +import { BlockType, ControlType, ElementType, IEditorOption, IElement, RowFlex } from './editor' const text = `人民医院门诊病历\n主诉：\n发热三天，咳嗽五天。\n现病史：\n患者于三天前无明显诱因，感冒后发现面部水肿，无皮疹，尿量减少，出现乏力，在外治疗无好转，现来我院就诊。\n既往史：\n有糖尿病10年，有高血压2年，有传染性疾病1年。报告其他既往疾病。\n流行病史：\n否认14天内接触过确诊患者、疑似患者、无症状感染者及其密切接触者；否认14天内去过以下场所：水产、肉类批发市场，农贸市场，集市，大型超市，夜市；否认14天内与以下场所工作人员密切接触：水产、肉类批发市场，农贸市场，集市，大型超市；否认14天内周围（如家庭、办公室）有2例以上聚集性发病；否认14天内接触过有发热或呼吸道症状的人员；否认14天内自身有发热或呼吸道症状；否认14天内接触过纳入隔离观察的人员及其他可能与新冠肺炎关联的情形；陪同家属无以上情况。\n体格检查：\nT：39.5℃，P：80bpm，R：20次/分，BP：120/80mmHg；\n辅助检查：\n2020年6月10日，普放：血细胞比容36.50%（偏低）40～50；单核细胞绝对值0.75*10/L（偏高）参考值：0.1～0.6；\n门诊诊断：\n1.高血压\n2.糖尿病\n3.病毒性感冒\n4.过敏性鼻炎\n5.过敏性鼻息肉\n处置治疗：\n1.超声引导下甲状腺细针穿刺术；\n2.乙型肝炎表面抗体测定；\n3.膜式病变细胞采集术、后颈皮下肤层；\n电子签名：【】\n其他记录：` @@ -289,6 +289,20 @@ elementList.push(...[{ value: `2022-08-10 17:30:01` }], type: ElementType.DATE +}]) + +// 内容快 +elementList.push(...[{ + value: '', + type: ElementType.BLOCK, + width: 520, + height: 400, + block: { + type: BlockType.IFRAME, + iframeBlock: { + src: 'https://hufe.club' + } + } }, { value: '\n' }]) From 3543e3983ed53541e2a6428af46525fcdf1c3d8d Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Sun, 27 Nov 2022 21:01:22 +0800 Subject: [PATCH 2/8] feat:add content block menu --- index.html | 3 +++ src/assets/images/block.svg | 1 + src/main.ts | 47 ++++++++++++++++++++++++++++++++++++- src/mock.ts | 16 +------------ src/style.css | 4 ++++ 5 files changed, 55 insertions(+), 16 deletions(-) create mode 100644 src/assets/images/block.svg diff --git a/index.html b/index.html index fc8d3cb..ea30d9b 100644 --- a/index.html +++ b/index.html @@ -188,6 +188,9 @@ +
+ +
diff --git a/src/assets/images/block.svg b/src/assets/images/block.svg new file mode 100644 index 0000000..38b1704 --- /dev/null +++ b/src/assets/images/block.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 380a73f..8ef14cb 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,7 +1,7 @@ import { data, options } from './mock' import './style.css' import prism from 'prismjs' -import Editor, { Command, ControlType, EditorMode, ElementType, IElement, KeyMap, PageMode } from './editor' +import Editor, { BlockType, Command, ControlType, EditorMode, ElementType, IElement, KeyMap, PageMode } from './editor' import { Dialog } from './components/dialog/Dialog' import { formatPrismToken } from './utils/prism' import { Signature } from './components/signature/Signature' @@ -612,6 +612,51 @@ window.onload = function () { }]) } + const blockDom = document.querySelector('.menu-item__block')! + blockDom.onclick = function () { + console.log('block') + new Dialog({ + title: '内容块', + data: [{ + type: 'number', + label: '宽度', + name: 'width', + placeholder: '请输入宽度' + }, { + type: 'number', + label: '宽度', + name: 'height', + placeholder: '请输入宽度' + }, { + type: 'textarea', + label: '地址', + height: 100, + name: 'value', + placeholder: '请输入地址' + }], + onConfirm: (payload) => { + const value = payload.find(p => p.name === 'value')?.value + if (!value) return + const width = payload.find(p => p.name === 'width')?.value + if (!width) return + const height = payload.find(p => p.name === 'height')?.value + if (!height) return + instance.command.executeInsertElementList([{ + type: ElementType.BLOCK, + value: '', + width: Number(width), + height: Number(height), + block: { + type: BlockType.IFRAME, + iframeBlock: { + src: value + } + } + }]) + } + }) + } + // 5. | 搜索&替换 | 打印 | const searchCollapseDom = document.querySelector('.menu-item__search__collapse')! const searchInputDom = document.querySelector('.menu-item__search__collapse__search input')! diff --git a/src/mock.ts b/src/mock.ts index d3d0bcc..0924fcc 100644 --- a/src/mock.ts +++ b/src/mock.ts @@ -1,4 +1,4 @@ -import { BlockType, ControlType, ElementType, IEditorOption, IElement, RowFlex } from './editor' +import { ControlType, ElementType, IEditorOption, IElement, RowFlex } from './editor' const text = `人民医院门诊病历\n主诉：\n发热三天，咳嗽五天。\n现病史：\n患者于三天前无明显诱因，感冒后发现面部水肿，无皮疹，尿量减少，出现乏力，在外治疗无好转，现来我院就诊。\n既往史：\n有糖尿病10年，有高血压2年，有传染性疾病1年。报告其他既往疾病。\n流行病史：\n否认14天内接触过确诊患者、疑似患者、无症状感染者及其密切接触者；否认14天内去过以下场所：水产、肉类批发市场，农贸市场，集市，大型超市，夜市；否认14天内与以下场所工作人员密切接触：水产、肉类批发市场，农贸市场，集市，大型超市；否认14天内周围（如家庭、办公室）有2例以上聚集性发病；否认14天内接触过有发热或呼吸道症状的人员；否认14天内自身有发热或呼吸道症状；否认14天内接触过纳入隔离观察的人员及其他可能与新冠肺炎关联的情形；陪同家属无以上情况。\n体格检查：\nT：39.5℃，P：80bpm，R：20次/分，BP：120/80mmHg；\n辅助检查：\n2020年6月10日，普放：血细胞比容36.50%（偏低）40～50；单核细胞绝对值0.75*10/L（偏高）参考值：0.1～0.6；\n门诊诊断：\n1.高血压\n2.糖尿病\n3.病毒性感冒\n4.过敏性鼻炎\n5.过敏性鼻息肉\n处置治疗：\n1.超声引导下甲状腺细针穿刺术；\n2.乙型肝炎表面抗体测定；\n3.膜式病变细胞采集术、后颈皮下肤层；\n电子签名：【】\n其他记录：` @@ -289,20 +289,6 @@ elementList.push(...[{ value: `2022-08-10 17:30:01` }], type: ElementType.DATE -}]) - -// 内容快 -elementList.push(...[{ - value: '', - type: ElementType.BLOCK, - width: 520, - height: 400, - block: { - type: BlockType.IFRAME, - iframeBlock: { - src: 'https://hufe.club' - } - } }, { value: '\n' }]) diff --git a/src/style.css b/src/style.css index d9a9507..f2f3520 100644 --- a/src/style.css +++ b/src/style.css @@ -463,6 +463,10 @@ ul { width: 150px; } +.menu-item__block i { + background-image: url('./assets/images/block.svg'); +} + .menu-item .menu-item__control .options { width: 55px; } From 867195a526d49c603ce9c44263a5662049a02727 Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Sun, 27 Nov 2022 23:06:00 +0800 Subject: [PATCH 3/8] feat:delete block particle --- src/editor/core/draw/Draw.ts | 10 ++++++++-- .../core/draw/particle/block/BlockParticle.ts | 20 +++++++++++++++++++ .../draw/particle/block/modules/BaseBlock.ts | 8 ++++++++ 3 files changed, 36 insertions(+), 2 deletions(-) diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 7faa74d..a47352b 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -984,13 +984,19 @@ export class Draw { return { x, y, index } } + private _clearPage(pageNo: number) { + const ctx = this.ctxList[pageNo] + const pageDom = this.pageList[pageNo] + ctx.clearRect(0, 0, pageDom.width, pageDom.height) + this.blockParticle.clear() + } + private _drawPage(positionList: IElementPosition[], rowList: IRow[], pageNo: number) { const { pageMode } = this.options const margins = this.getMargins() const innerWidth = this.getInnerWidth() const ctx = this.ctxList[pageNo] - const pageDom = this.pageList[pageNo] - ctx.clearRect(0, 0, pageDom.width, pageDom.height) + this._clearPage(pageNo) // 绘制背景 this.background.render(ctx) // 绘制页边距 diff --git a/src/editor/core/draw/particle/block/BlockParticle.ts b/src/editor/core/draw/particle/block/BlockParticle.ts index 74b1d09..d55c9fe 100644 --- a/src/editor/core/draw/particle/block/BlockParticle.ts +++ b/src/editor/core/draw/particle/block/BlockParticle.ts @@ -1,3 +1,4 @@ +import { ElementType } from '../../../../dataset/enum/Element' import { IRowElement } from '../../../../interface/Row' import { Draw } from '../../Draw' import { BaseBlock } from './modules/BaseBlock' @@ -44,4 +45,23 @@ export class BlockParticle { } } + public clear() { + if (!this.blockMap.size) return + const elementList = this.draw.getElementList() + const blockElementIds: string[] = [] + for (let e = 0; e < elementList.length; e++) { + const element = elementList[e] + if (element.type === ElementType.BLOCK) { + blockElementIds.push(element.id!) + } + } + this.blockMap.forEach(block => { + const id = block.getBlockElement().id! + if (!blockElementIds.includes(id)) { + block.remove() + this.blockMap.delete(id) + } + }) + } + } \ No newline at end of file diff --git a/src/editor/core/draw/particle/block/modules/BaseBlock.ts b/src/editor/core/draw/particle/block/modules/BaseBlock.ts index f9e87cc..c5ae750 100644 --- a/src/editor/core/draw/particle/block/modules/BaseBlock.ts +++ b/src/editor/core/draw/particle/block/modules/BaseBlock.ts @@ -21,6 +21,10 @@ export class BaseBlock { this.blockContainer.append(this.blockItem) } + public getBlockElement(): IRowElement { + return this.element + } + private _createBlockItem(): HTMLDivElement { const blockItem = document.createElement('div') blockItem.classList.add('block-item') @@ -48,4 +52,8 @@ export class BaseBlock { this.blockItem.style.top = `${preY + y}px` } + public remove() { + this.blockItem.remove() + } + } \ No newline at end of file From 5ba1c02f1f912e96cb47749f32f26ab2114cbeb4 Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Mon, 28 Nov 2022 21:23:35 +0800 Subject: [PATCH 4/8] feat:add video block core --- .../draw/particle/block/modules/BaseBlock.ts | 6 ++++- .../draw/particle/block/modules/VideoBlock.ts | 23 +++++++++++++++++++ src/editor/dataset/enum/Block.ts | 3 ++- src/editor/interface/Block.ts | 5 ++++ 4 files changed, 35 insertions(+), 2 deletions(-) create mode 100644 src/editor/core/draw/particle/block/modules/VideoBlock.ts diff --git a/src/editor/core/draw/particle/block/modules/BaseBlock.ts b/src/editor/core/draw/particle/block/modules/BaseBlock.ts index c5ae750..cfa70d7 100644 --- a/src/editor/core/draw/particle/block/modules/BaseBlock.ts +++ b/src/editor/core/draw/particle/block/modules/BaseBlock.ts @@ -3,12 +3,13 @@ import { IRowElement } from '../../../../../interface/Row' import { Draw } from '../../../Draw' import { BlockParticle } from '../BlockParticle' import { IFrameBlock } from './IFrameBlock' +import { VideoBlock } from './VideoBlock' export class BaseBlock { private draw: Draw private element: IRowElement - private block: IFrameBlock | null + private block: IFrameBlock | VideoBlock | null private blockContainer: HTMLDivElement private blockItem: HTMLDivElement @@ -36,6 +37,9 @@ export class BaseBlock { if (block.type === BlockType.IFRAME) { this.block = new IFrameBlock(this.element) this.block.render(this.blockItem) + } else if (block.type === BlockType.VIDEO) { + this.block = new VideoBlock(this.element) + this.block.render(this.blockItem) } } diff --git a/src/editor/core/draw/particle/block/modules/VideoBlock.ts b/src/editor/core/draw/particle/block/modules/VideoBlock.ts new file mode 100644 index 0000000..eb0a30c --- /dev/null +++ b/src/editor/core/draw/particle/block/modules/VideoBlock.ts @@ -0,0 +1,23 @@ +import { IRowElement } from '../../../../../interface/Row' + +export class VideoBlock { + + private element: IRowElement + + constructor(element: IRowElement) { + this.element = element + } + + public render(blockItemContainer: HTMLDivElement) { + const block = this.element.block! + const video = document.createElement('video') + video.style.width = '100%' + video.style.height = '100%' + video.style.objectFit = 'contain' + video.src = block.videoBlock?.src || '' + video.controls = true + video.crossOrigin = 'anonymous' + blockItemContainer.append(video) + } + +} \ No newline at end of file diff --git a/src/editor/dataset/enum/Block.ts b/src/editor/dataset/enum/Block.ts index c89ecbf..125c6b5 100644 --- a/src/editor/dataset/enum/Block.ts +++ b/src/editor/dataset/enum/Block.ts @@ -1,3 +1,4 @@ export enum BlockType { - IFRAME = 'iframe' + IFRAME = 'iframe', + VIDEO = 'video' } \ No newline at end of file diff --git a/src/editor/interface/Block.ts b/src/editor/interface/Block.ts index c6f7064..75ebb1e 100644 --- a/src/editor/interface/Block.ts +++ b/src/editor/interface/Block.ts @@ -4,7 +4,12 @@ export interface IIFrameBlock { src: string; } +export interface IVideoBlock { + src: string; +} + export interface IBlock { type: BlockType; iframeBlock?: IIFrameBlock; + videoBlock?: IVideoBlock; } \ No newline at end of file From 9f924b4e0ab32577aff60dc1dfbf82391ab1fac8 Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Mon, 28 Nov 2022 21:59:00 +0800 Subject: [PATCH 5/8] feat:add video block menu --- src/components/dialog/Dialog.ts | 19 +++++++++++++---- src/components/dialog/dialog.css | 3 ++- src/editor/index.ts | 4 +++- src/main.ts | 35 +++++++++++++++++++++++++------- 4 files changed, 48 insertions(+), 13 deletions(-) diff --git a/src/components/dialog/Dialog.ts b/src/components/dialog/Dialog.ts index 6b27572..e2093b8 100644 --- a/src/components/dialog/Dialog.ts +++ b/src/components/dialog/Dialog.ts @@ -6,6 +6,7 @@ export interface IDialogData { label?: string; name: string; value?: string; + options?: { label: string; value: string; }[]; placeholder?: string; width?: number; height?: number; @@ -29,7 +30,7 @@ export class Dialog { private options: IDialogOptions private mask: HTMLDivElement | null private container: HTMLDivElement | null - private inputList: (HTMLInputElement | HTMLTextAreaElement)[] + private inputList: (HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement)[] constructor(options: IDialogOptions) { this.options = options @@ -85,8 +86,16 @@ export class Dialog { optionItemContainer.append(optionName) } // 选项输入框 - let optionInput: HTMLInputElement | HTMLTextAreaElement - if (option.type === 'textarea') { + let optionInput: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement + if (option.type === 'select') { + optionInput = document.createElement('select') + option.options?.forEach(item => { + const optionItem = document.createElement('option') + optionItem.value = item.value + optionItem.label = item.label + optionInput.append(optionItem) + }) + } else if (option.type === 'textarea') { optionInput = document.createElement('textarea') } else { optionInput = document.createElement('input') @@ -100,7 +109,9 @@ export class Dialog { } optionInput.name = option.name optionInput.value = option.value || '' - optionInput.placeholder = option.placeholder || '' + if (!(optionInput instanceof HTMLSelectElement)) { + optionInput.placeholder = option.placeholder || '' + } optionItemContainer.append(optionInput) optionContainer.append(optionItemContainer) this.inputList.push(optionInput) diff --git a/src/components/dialog/dialog.css b/src/components/dialog/dialog.css index 8fef1fe..5f63203 100644 --- a/src/components/dialog/dialog.css +++ b/src/components/dialog/dialog.css @@ -64,7 +64,8 @@ } .dialog-option__item input, -.dialog-option__item textarea { +.dialog-option__item textarea, +.dialog-option__item select { width: 276px; height: 30px; border-radius: 2px; diff --git a/src/editor/index.ts b/src/editor/index.ts index 49079ef..cd84525 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -27,6 +27,7 @@ import { INavigateInfo } from './core/draw/interactive/Search' import { Shortcut } from './core/shortcut/Shortcut' import { KeyMap } from './dataset/enum/KeyMap' import { BlockType } from './dataset/enum/Block' +import { IBlock } from './interface/Block' export default class Editor { @@ -138,5 +139,6 @@ export type { IContextMenuContext, IRegisterContextMenu, IWatermark, - INavigateInfo + INavigateInfo, + IBlock } \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 8ef14cb..f151db3 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,7 +1,7 @@ import { data, options } from './mock' import './style.css' import prism from 'prismjs' -import Editor, { BlockType, Command, ControlType, EditorMode, ElementType, IElement, KeyMap, PageMode } from './editor' +import Editor, { BlockType, Command, ControlType, EditorMode, ElementType, IBlock, IElement, KeyMap, PageMode } from './editor' import { Dialog } from './components/dialog/Dialog' import { formatPrismToken } from './utils/prism' import { Signature } from './components/signature/Signature' @@ -618,6 +618,18 @@ window.onload = function () { new Dialog({ title: '内容块', data: [{ + type: 'select', + label: '类型', + name: 'type', + value: 'iframe', + options: [{ + label: '网址', + value: 'iframe' + }, { + label: '视频', + value: 'video' + }] + }, { type: 'number', label: '宽度', name: 'width', @@ -635,23 +647,32 @@ window.onload = function () { placeholder: '请输入地址' }], onConfirm: (payload) => { + const type = payload.find(p => p.name === 'type')?.value + if (!type) return const value = payload.find(p => p.name === 'value')?.value if (!value) return const width = payload.find(p => p.name === 'width')?.value if (!width) return const height = payload.find(p => p.name === 'height')?.value if (!height) return + const block: IBlock = { + type: type + } + if (block.type === BlockType.IFRAME) { + block.iframeBlock = { + src: value + } + } else if (block.type === BlockType.VIDEO) { + block.videoBlock = { + src: value + } + } instance.command.executeInsertElementList([{ type: ElementType.BLOCK, value: '', width: Number(width), height: Number(height), - block: { - type: BlockType.IFRAME, - iframeBlock: { - src: value - } - } + block }]) } }) From 67d69e9b7420b69f743a9315d3a11a4c3b3740d4 Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Mon, 28 Nov 2022 22:17:40 +0800 Subject: [PATCH 6/8] test:add block test case --- cypress/integration/menus/block.spec.ts | 41 +++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 cypress/integration/menus/block.spec.ts diff --git a/cypress/integration/menus/block.spec.ts b/cypress/integration/menus/block.spec.ts new file mode 100644 index 0000000..4459896 --- /dev/null +++ b/cypress/integration/menus/block.spec.ts @@ -0,0 +1,41 @@ +import Editor from '../../../src/editor' + +describe('菜单-内容块', () => { + const url = 'http://localhost:3000/canvas-editor/' + + beforeEach(() => { + cy.visit(url) + + cy.get('canvas').first().as('canvas').should('have.length', 1) + }) + + + it('内容块', () => { + cy.getEditor().then((editor: Editor) => { + editor.listener.saved = function (payload) { + const data = payload.data + + expect(data[0].type).to.eq('block') + + expect(data[0].block?.iframeBlock?.src).to.eq(url) + } + + editor.command.executeSelectAll() + + editor.command.executeBackspace() + + cy.get('.menu-item__block').click() + + cy.get('.dialog-option__item [name="width"]').type('500') + + cy.get('.dialog-option__item [name="height"]').type('300') + + cy.get('.dialog-option__item [name="value"]').type(url) + + cy.get('.dialog-menu button').eq(1).click() + + cy.get('@canvas').type('{ctrl}s') + }) + }) + +}) From c79f647bc764783a7a65741fedfc15badc02fb07 Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Tue, 29 Nov 2022 21:23:31 +0800 Subject: [PATCH 7/8] feat:optimize add content block --- src/components/dialog/Dialog.ts | 4 ++++ src/components/dialog/dialog.css | 9 +++++++ src/editor/assets/css/block/block.css | 1 + src/editor/core/command/CommandAdapt.ts | 4 +++- src/editor/utils/element.ts | 13 +++++++--- src/main.ts | 32 +++++++++++++++++++------ 6 files changed, 52 insertions(+), 11 deletions(-) diff --git a/src/components/dialog/Dialog.ts b/src/components/dialog/Dialog.ts index e2093b8..0586462 100644 --- a/src/components/dialog/Dialog.ts +++ b/src/components/dialog/Dialog.ts @@ -10,6 +10,7 @@ export interface IDialogData { placeholder?: string; width?: number; height?: number; + required?: boolean; } export interface IDialogConfirm { @@ -84,6 +85,9 @@ export class Dialog { const optionName = document.createElement('span') optionName.append(document.createTextNode(option.label)) optionItemContainer.append(optionName) + if (option.required) { + optionName.classList.add('dialog-option__item--require') + } } // 选项输入框 let optionInput: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement diff --git a/src/components/dialog/dialog.css b/src/components/dialog/dialog.css index 5f63203..10f5187 100644 --- a/src/components/dialog/dialog.css +++ b/src/components/dialog/dialog.css @@ -61,6 +61,7 @@ margin-right: 12px; font-size: 14px; color: #3d4757; + position: relative; } .dialog-option__item input, @@ -84,6 +85,14 @@ border-color: #4991f2; } +.dialog-option__item--require::before { + content: "*"; + color: #f56c6c; + margin-right: 4px; + position: absolute; + left: -8px; +} + .dialog-menu { display: flex; align-items: center; diff --git a/src/editor/assets/css/block/block.css b/src/editor/assets/css/block/block.css index 6f6e177..d889140 100644 --- a/src/editor/assets/css/block/block.css +++ b/src/editor/assets/css/block/block.css @@ -3,5 +3,6 @@ z-index: 0; overflow: hidden; border-radius: 8px; + background-color: #ffffff; border: 1px solid rgb(235 236 240); } \ No newline at end of file diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts index 122f729..3a9457f 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/src/editor/core/command/CommandAdapt.ts @@ -430,7 +430,9 @@ export class CommandAdapt { trList } // 格式化element - formatElementList([element]) + formatElementList([element], { + editorOptions: this.options + }) const curIndex = startIndex + 1 if (startIndex === endIndex) { elementList.splice(curIndex, 0, element) diff --git a/src/editor/utils/element.ts b/src/editor/utils/element.ts index 061a3ea..7352aab 100644 --- a/src/editor/utils/element.ts +++ b/src/editor/utils/element.ts @@ -9,10 +9,10 @@ import { ControlComponent, ControlType } from '../dataset/enum/Control' interface IFormatElementListOption { isHandleFirstElement?: boolean; - editorOptions?: Required; + editorOptions: Required; } -export function formatElementList(elementList: IElement[], options: IFormatElementListOption = {}) { +export function formatElementList(elementList: IElement[], options: IFormatElementListOption) { const { isHandleFirstElement, editorOptions } = { isHandleFirstElement: true, ...options @@ -237,9 +237,16 @@ export function formatElementList(elementList: IElement[], options: IFormatEleme if (el.value === '\n') { el.value = ZERO } - if (el.type === ElementType.IMAGE || el.type === ElementType.BLOCK) { + if (el.type === ElementType.IMAGE) { el.id = getUUID() } + if (el.type === ElementType.BLOCK) { + el.id = getUUID() + if (!el.width) { + const { editorOptions: { width, margins } } = options + el.width = width - margins[1] - margins[3] + } + } if (el.type === ElementType.LATEX) { const { svg, width, height } = LaTexParticle.convertLaTextToSVG(el.value) el.width = el.width || width diff --git a/src/main.ts b/src/main.ts index f151db3..50727c9 100644 --- a/src/main.ts +++ b/src/main.ts @@ -273,11 +273,13 @@ window.onload = function () { type: 'text', label: '文本', name: 'name', + required: true, placeholder: '请输入文本' }, { type: 'text', label: '链接', name: 'url', + required: true, placeholder: '请输入链接' }], onConfirm: (payload) => { @@ -340,16 +342,19 @@ window.onload = function () { type: 'text', label: '内容', name: 'data', + required: true, placeholder: '请输入内容' }, { type: 'color', label: '颜色', name: 'color', + required: true, value: '#AEB5C0' }, { type: 'number', label: '字体大小', name: 'size', + required: true, value: '120' }], onConfirm: (payload) => { @@ -435,6 +440,7 @@ window.onload = function () { type: 'text', label: '占位符', name: 'placeholder', + required: true, placeholder: '请输入占位符' }, { type: 'text', @@ -469,6 +475,7 @@ window.onload = function () { type: 'text', label: '占位符', name: 'placeholder', + required: true, placeholder: '请输入占位符' }, { type: 'text', @@ -479,6 +486,7 @@ window.onload = function () { type: 'textarea', label: '值集', name: 'valueSets', + required: true, height: 100, placeholder: `请输入值集JSON，例：\n[{\n"value":"有",\n"code":"98175"\n}]` }], @@ -514,6 +522,7 @@ window.onload = function () { type: 'textarea', label: '值集', name: 'valueSets', + required: true, height: 100, placeholder: `请输入值集JSON，例：\n[{\n"value":"有",\n"code":"98175"\n}]` }], @@ -622,6 +631,7 @@ window.onload = function () { label: '类型', name: 'type', value: 'iframe', + required: true, options: [{ label: '网址', value: 'iframe' @@ -633,17 +643,19 @@ window.onload = function () { type: 'number', label: '宽度', name: 'width', - placeholder: '请输入宽度' + placeholder: '请输入宽度（默认页面内宽度）' }, { type: 'number', - label: '宽度', + label: '高度', name: 'height', - placeholder: '请输入宽度' + required: true, + placeholder: '请输入高度' }, { type: 'textarea', label: '地址', height: 100, name: 'value', + required: true, placeholder: '请输入地址' }], onConfirm: (payload) => { @@ -652,7 +664,6 @@ window.onload = function () { const value = payload.find(p => p.name === 'value')?.value if (!value) return const width = payload.find(p => p.name === 'width')?.value - if (!width) return const height = payload.find(p => p.name === 'height')?.value if (!height) return const block: IBlock = { @@ -667,13 +678,16 @@ window.onload = function () { src: value } } - instance.command.executeInsertElementList([{ + const blockElement: IElement = { type: ElementType.BLOCK, value: '', - width: Number(width), height: Number(height), block - }]) + } + if (width) { + blockElement.width = Number(width) + } + instance.command.executeInsertElementList([blockElement]) } }) } @@ -798,24 +812,28 @@ window.onload = function () { type: 'text', label: '上边距', name: 'top', + required: true, value: `${topMargin}`, placeholder: '请输入上边距' }, { type: 'text', label: '下边距', name: 'bottom', + required: true, value: `${bottomMargin}`, placeholder: '请输入下边距' }, { type: 'text', label: '左边距', name: 'left', + required: true, value: `${leftMargin}`, placeholder: '请输入左边距' }, { type: 'text', label: '右边距', name: 'right', + required: true, value: `${rightMargin}`, placeholder: '请输入右边距' }], From 59c6a6eac2e2d2bb2734b6a3f19e900d312560ac Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Tue, 29 Nov 2022 21:29:02 +0800 Subject: [PATCH 8/8] fix:hyperlink popup zIndex --- src/editor/assets/css/index.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/editor/assets/css/index.css b/src/editor/assets/css/index.css index 1189064..751c963 100644 --- a/src/editor/assets/css/index.css +++ b/src/editor/assets/css/index.css @@ -443,6 +443,7 @@ padding: 16px; white-space: nowrap; position: absolute; + z-index: 1; text-align: center; display: none; }