diff --git a/packages/viewer/src/header.ts b/packages/viewer/src/header.ts index 546c0dd..72219fc 100644 --- a/packages/viewer/src/header.ts +++ b/packages/viewer/src/header.ts @@ -14,9 +14,12 @@ * limitations under the License. */ +import { viewerOption } from "./utils/option" import printFrame from './utils/print' class Header { + private option: viewerOption = {} + private pages: HTMLElement[] private observer: IntersectionObserver @@ -33,9 +36,10 @@ class Header { private printButton: HTMLElement | null = null - constructor(view: HTMLElement, content: HTMLElement, pages: HTMLElement[]) { + constructor(view: HTMLElement, content: HTMLElement, pages: HTMLElement[], option: viewerOption) { this.content = content this.pages = pages + this.option = option this.container = this.drawContainer(view) this.modal = this.drawModal(view) @@ -235,7 +239,8 @@ class Header { draw() { this.drawPageNumber() - this.drawPrintIcon() + if (this.option.utility?.presentation) this.drawPresentationIcon() + if (this.option.utility?.print) this.drawPrintIcon() this.drawInfoIcon() } } diff --git a/packages/viewer/src/utils/option.ts b/packages/viewer/src/utils/option.ts new file mode 100644 index 0000000..4d01ba2 --- /dev/null +++ b/packages/viewer/src/utils/option.ts @@ -0,0 +1,23 @@ +import { CFB$ParsingOptions } from "cfb/types" + +export interface viewerOption { + parser?: CFB$ParsingOptions; + utility?: { + print?: boolean; + presentation?: boolean; + } +} + +export const defaultOption: viewerOption = { + parser: { + type: 'binary' + }, + utility: { + print: true, + presentation: true + } +} + +export function formatOption(option: viewerOption) { + return Object.assign(defaultOption, option) +} diff --git a/packages/viewer/src/viewer.ts b/packages/viewer/src/viewer.ts index 3ee97f1..d92d189 100644 --- a/packages/viewer/src/viewer.ts +++ b/packages/viewer/src/viewer.ts @@ -30,8 +30,8 @@ import parse, { isPicture, RGB, } from '@hwp.js/parser' -import { CFB$ParsingOptions } from 'cfb/types' +import { formatOption, viewerOption } from "./utils/option" import parsePage from './parsePage' import Header from './header' @@ -80,9 +80,12 @@ class HWPViewer { private header: Header | null = null - constructor(container: HTMLElement, data: Uint8Array, option: CFB$ParsingOptions = { type: 'binary' }) { + private option: viewerOption = {} + + constructor(container: HTMLElement, data: Uint8Array, option: viewerOption = {}) { + this.option = formatOption(option) this.container = container - this.hwpDocument = parsePage(parse(data, option)) + this.hwpDocument = parsePage(parse(data, this.option.parser)) this.draw() } @@ -126,7 +129,7 @@ class HWPViewer { return page } - private getRGBStyle(rgb: RGB) { + private static getRGBStyle(rgb: RGB) { const [red, green, blue] = rgb return `rgb(${red}, ${green}, ${blue})` } @@ -149,10 +152,10 @@ class HWPViewer { const borderFill = this.hwpDocument.info.borderFills[borderFillID] - target.style.borderTopColor = this.getRGBStyle(borderFill.style.top.color) - target.style.borderRightColor = this.getRGBStyle(borderFill.style.right.color) - target.style.borderBottomColor = this.getRGBStyle(borderFill.style.bottom.color) - target.style.borderLeftColor = this.getRGBStyle(borderFill.style.left.color) + target.style.borderTopColor = HWPViewer.getRGBStyle(borderFill.style.top.color) + target.style.borderRightColor = HWPViewer.getRGBStyle(borderFill.style.right.color) + target.style.borderBottomColor = HWPViewer.getRGBStyle(borderFill.style.bottom.color) + target.style.borderLeftColor = HWPViewer.getRGBStyle(borderFill.style.left.color) target.style.borderTopWidth = BORDER_WIDTH[borderFill.style.top.width] target.style.borderRightWidth = BORDER_WIDTH[borderFill.style.right.width] @@ -165,7 +168,7 @@ class HWPViewer { target.style.borderLeftStyle = BORDER_STYLE[borderFill.style.left.type] if (borderFill.backgroundColor) { - target.style.backgroundColor = this.getRGBStyle(borderFill.backgroundColor) + target.style.backgroundColor = HWPViewer.getRGBStyle(borderFill.backgroundColor) } } @@ -321,7 +324,7 @@ class HWPViewer { span.style.lineBreak = 'anywhere' span.style.whiteSpace = 'pre-wrap' - span.style.color = this.getRGBStyle(color) + span.style.color = HWPViewer.getRGBStyle(color) const fontFace = this.hwpDocument.info.fontFaces[fontId[0]] span.style.fontFamily = fontFace.getFontFamily() @@ -374,7 +377,7 @@ class HWPViewer { this.drawSection(content, section, index) }) - this.header = new Header(this.viewer, this.container, this.pages) + this.header = new Header(this.viewer, this.container, this.pages, this.option) this.viewer.appendChild(content) this.container.appendChild(this.viewer) diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 7ecd3ed..e6ac207 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -34,7 +34,7 @@ function IndexPage() { .then(res => { const array = new Uint8Array(res) setIsLoading(false) - new HWPViewer(viewerRef.current, array, { type: 'array' }) + new HWPViewer(viewerRef.current, array, { parser: { type: 'array' }}) }) .catch(() => { setIsLoading(false)