• Home
• com.xlrit.gears.scripts
• diagram-viewer
• 0.9.2
• source code

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

rs.scripts.diagram-viewer.0.9.2.source-code.index.ts Maven / Gradle / Ivy

// SPDX-License-Identifier: Apache-2.0
// Copyright 2019 XLRIT (https://www.xlrit.com/)
import $ from 'jquery'

import pckg from '../package.json'
import * as util from './util'
import MenuRenderer from './menu.renderer'
import EntityGraphRenderer from './entityGraph.renderer'
import DependsGraphRenderer from './dependsGraph.renderer'
import ProcessDesignRenderer from './processDesign.renderer'

console.log(`${pckg.name} ${pckg.version}`)
const _global = window as any

var entityDiagram: EntityGraphRenderer
var dependsGraphRenderer: DependsGraphRenderer
var processDesignRenderer: ProcessDesignRenderer
var entityRelationDiagram: EntityGraphRenderer

_global.DiagramViewer = {
  index: function(json: any) {
    const $menu = $('#menu')
    new MenuRenderer($menu).render(json)
  },
  entities: function(json: any) {
    const $paper = $('
')
      .appendTo($('#entityGraph-diagrams'))
    const options = {
      showStandardRelations:  localStorage.getItem('showStandardRelations') === 'true',
      showAttributes:         localStorage.getItem('showAttributes') === 'true', 
      showStandardAttributes: localStorage.getItem('showStandardAttributes') === 'true',
    }
    entityDiagram = new EntityGraphRenderer($paper, json, options)
    entityDiagram.render()
  },
  dependsGraph: function(json: any) {
    const enabled = isEnabled('#btn-dependsGraph')
    const $paper = $('
')
      .appendTo($('#dependsGraph-diagrams'))
      .toggleClass('hidden', !enabled)
    
    dependsGraphRenderer = new DependsGraphRenderer($paper, json)
    if (enabled) {
      dependsGraphRenderer.initialize().then(
        value => { console.log('dependsGraphRenderer initialized', value) }, 
        err => { console.log(err) }
      )
    }
    console.log('dependsGraphRenderer created')
  },
  processDesign: function(json: any) {
    const enabled = isEnabled('#btn-processDesign')
    const $paper = $('
')
      .appendTo($('#processDesign-diagrams'))
      .toggleClass('hidden', !enabled)

    processDesignRenderer = new ProcessDesignRenderer($paper, json)
    if (enabled) {
      processDesignRenderer.initialize().then(
        value => { console.log('processDesignRenderer initialized', value) }, 
        err => { console.log(err) }
      )
    }
    console.log('processDesignRenderer created')
  },
  localEntities: function(json: any) {
    const enabled = isEnabled('#btn-entityRelationDiagram')
    const $paper = $('
')
      .appendTo($('#entityRelationDiagram-diagrams'))
      .toggleClass('hidden', !enabled)
    
    const options = {
      showStandardRelations:  localStorage.getItem('showStandardRelations') === 'true',
      showAttributes:         localStorage.getItem('showAttributes') === 'true', 
      showStandardAttributes: localStorage.getItem('showStandardAttributes') === 'true',
    }

    entityRelationDiagram = new EntityGraphRenderer($paper, json, options)
    if (enabled) {
      entityRelationDiagram.render()
    }
    console.log('entityGraphRenderer created')
  },
}

function isEnabled(btnSel: string) {
  return $(btnSel).hasClass('on')
}

function initToggleButton(btnSel: string, initial: boolean, update: (state: boolean) => any) {
  const button = $(btnSel)
  const storageKey = btnSel + '-state'
  function updateState() {
    const state = button.hasClass('on')
    update(state)
    localStorage.setItem(storageKey, '' + state)
  }
  button.click(() => {
    button.toggleClass('on')
    updateState()
  })
  const state = localStorage.getItem(storageKey) || '' + initial
  button.toggleClass('on', state == 'true')
  updateState()
}

function initToggleUndoButton() {
  const button = $('#btn-toggle-undo')
  console.log(button)
  button.on('click', () => {
    processDesignRenderer.toggleUndo()
  })
}

function initExportSvgButton() {
  const button = $('#btn-export-svg')
  button.click(() => {
    if (entityDiagram !== undefined && entityDiagram.hasDrawn && !entityDiagram.paper.$el.hasClass("hidden")) {
      const svgDoc = entityDiagram.paper.svg.cloneNode(true) as SVGElement
      util.fixSVGStyle(svgDoc, entityDiagram.paper.getArea())
      const svgString = new XMLSerializer().serializeToString(svgDoc)
      const blob = new Blob([svgString])
      download("Project entity diagram.svg", blob).then(
        _value => { }, 
        err => { console.log(err) }
      )
    }
    const name = document.getElementById("processName")?.textContent
    if (dependsGraphRenderer !== undefined && dependsGraphRenderer.initialized && !dependsGraphRenderer.paper.$el.hasClass("hidden")) {
      const svgDoc = dependsGraphRenderer.paper.svg.cloneNode(true) as SVGElement
      util.fixSVGStyle(svgDoc, dependsGraphRenderer.paper.getArea())
      const svgString = new XMLSerializer().serializeToString(svgDoc)
      const blob = new Blob([svgString])
      download(name + " dependency graph.svg", blob).then(
        _value => { }, 
        err => { console.log(err) }
      )
    }
    if (processDesignRenderer !== undefined && processDesignRenderer.initialized && !processDesignRenderer.paper.$el.hasClass("hidden")) {
      const svgDoc = processDesignRenderer.paper.svg.cloneNode(true) as SVGElement
      util.fixSVGStyle(svgDoc, processDesignRenderer.paper.getArea())
      const svgString = new XMLSerializer().serializeToString(svgDoc)
      const blob = new Blob([svgString])
      download(name + " process design.svg", blob).then(
        _value => { }, 
        err => { console.log(err) }
      )
    }
    if (entityRelationDiagram !== undefined && entityRelationDiagram.hasDrawn && !entityRelationDiagram.paper.$el.hasClass("hidden")) {
      const svgDoc = entityRelationDiagram.paper.svg.cloneNode(true) as SVGElement
      const area = entityRelationDiagram.paper.getArea()
      util.fixSVGStyle(svgDoc, area)
      const svgString = new XMLSerializer().serializeToString(svgDoc)
      const blob = new Blob([svgString])
      download(name + " entity relation diagram.svg", blob).then(
          _value => { }, 
          err => { console.log(err) }
        )
    }
  })
}

function initExportPngButton() {
  const button = $('#btn-export-png')
  const canvas = document.getElementById('canvas') as HTMLCanvasElement;
  const ctx = canvas.getContext('2d');
  const DOMURL = window.URL || window.webkitURL || window;
  button.click(() => {
    if (entityDiagram !== undefined && entityDiagram.hasDrawn && !entityDiagram.paper.$el.hasClass("hidden")) {
      const svgDoc = entityDiagram.paper.svg
      const area = entityDiagram.paper.getArea()
      svgDoc.setAttribute("width", `${area.width}px`)
      svgDoc.setAttribute("height", `${area.height}px`)
      const svgString = new XMLSerializer().serializeToString(svgDoc)
      const blob = new Blob([svgString], {type: 'image/svg+xml'})
      const url = DOMURL.createObjectURL(blob)
      const image = new Image(area.width, area.height)
      image.onload = function() {
        canvas.width = area.width
        canvas.height = area.height
        ctx?.drawImage(image, 0, 0);
        canvas.toBlob(
          function(pngBlob) {
            if (pngBlob === null) {
              console.error("Png download failed")
              return
            }
            download("Project entity diagram.png", pngBlob).then(
              _value => { },
              err => { console.log(err) }
            )
          }
        )
        ctx?.clearRect(0, 0, canvas.width, canvas.height)
        DOMURL.revokeObjectURL(url)
      }
      image.src = url
    }
    const name = document.getElementById("processName")?.textContent
    if (dependsGraphRenderer !== undefined && dependsGraphRenderer.initialized && !dependsGraphRenderer.paper.$el.hasClass("hidden")) {
      const svgDoc = dependsGraphRenderer.paper.svg
      const area = dependsGraphRenderer.paper.getArea()
      svgDoc.setAttribute("width", `${area.width}px`)
      svgDoc.setAttribute("height", `${area.height}px`)
      const svgString = new XMLSerializer().serializeToString(svgDoc)
      const blob = new Blob([svgString], {type: 'image/svg+xml'})
      const url = DOMURL.createObjectURL(blob)
      const image = new Image(area.width, area.height)
      image.onload = function() {
        canvas.width = area.width
        canvas.height = area.height
        ctx?.drawImage(image, 0, 0);
        canvas.toBlob(
          function(pngBlob) {
            if (pngBlob === null) {
              console.error("Png download failed")
              return
            }
            download(name + " dependency graph.png", pngBlob).then(
              _value => { },
              err => { console.log(err) }
            )
          }
        )
        ctx?.clearRect(0, 0, canvas.width, canvas.height)
        DOMURL.revokeObjectURL(url)
      }
      image.src = url
    }
    if (processDesignRenderer !== undefined && processDesignRenderer.initialized && !processDesignRenderer.paper.$el.hasClass("hidden")) {
      const svgDoc = processDesignRenderer.paper.svg
      const area = processDesignRenderer.paper.getArea()
      svgDoc.setAttribute("width", `${area.width}px`)
      svgDoc.setAttribute("height", `${area.height}px`)
      const svgString = new XMLSerializer().serializeToString(svgDoc)
      const blob = new Blob([svgString], {type: 'image/svg+xml'})
      const url = DOMURL.createObjectURL(blob)
      const image = new Image(area.width, area.height)
      image.onload = function() {
        canvas.width = area.width
        canvas.height = area.height
        ctx?.drawImage(image, 0, 0);
        canvas.toBlob(
          function(pngBlob) {
            if (pngBlob === null) {
              console.error("Png download failed")
              return
            }
            download(name + " process design.png", pngBlob).then(
              _value => { },
              err => { console.log(err) }
            )
          }
        )
        ctx?.clearRect(0, 0, canvas.width, canvas.height)
        DOMURL.revokeObjectURL(url)
      }
      image.src = url
    }
    if (entityRelationDiagram !== undefined && entityRelationDiagram.hasDrawn && !entityRelationDiagram.paper.$el.hasClass("hidden")) {
      const svgDoc = entityRelationDiagram.paper.svg
      const area = entityRelationDiagram.paper.getArea()
      svgDoc.setAttribute("width", `${area.width}px`)
      svgDoc.setAttribute("height", `${area.height}px`)
      const svgString = new XMLSerializer().serializeToString(svgDoc)
      const blob = new Blob([svgString], {type: 'image/svg+xml'})
      const url = DOMURL.createObjectURL(blob)
      const image = new Image(area.width, area.height)
      image.onload = function() {
        canvas.width = area.width
        canvas.height = area.height
        ctx?.drawImage(image, 0, 0);
        canvas.toBlob(
          function(pngBlob) {
            if (pngBlob === null) {
              console.error("Png download failed")
              return
            }
            download(name + " entity relation diagram.png", pngBlob).then(
              _value => { },
              err => { console.log(err) }
            )
          }
        )
        ctx?.clearRect(0, 0, canvas.width, canvas.height)
        DOMURL.revokeObjectURL(url)
      }
      image.src = url
    }
  })
}

async function download(filename: string, blob: Blob) {
  const a: HTMLAnchorElement = document.createElement('a');
  a.style.display = 'none';
  document.body.appendChild(a);

  const url: string = window.URL.createObjectURL(blob);

  a.href = url;
  a.download = filename;

  a.click();

  window.URL.revokeObjectURL(url);
  a.parentElement?.removeChild(a);
};

function resizeable(containerSel: string, gripSel: string) {
  const container = $(containerSel)
  const grip = $(gripSel)
  
  // restore width from localStorage (if set)
  const width = parseInt(localStorage.getItem(containerSel + '-width') || '')
  if (!Number.isNaN(width)) container.width(width)

  var state = { d: false, x: 0, y: 0 }
  grip.mousedown(e => {
    state = { d: true, x: e.clientX, y: e.clientY }
    e.preventDefault()
  })
  
  $(document)
    .mousemove(e => {
      if (state.d) {
        const deltaX = e.clientX - state.x
        state = { d: true, x: e.clientX, y: e.clientY }
        container.width(Math.max(container.width()!, 50) + deltaX)
      }
      e.preventDefault()
    })
    .mouseup(e => {
      localStorage.setItem(containerSel + '-width', '' + container.width())
      state = { d: false, x: 0, y: 0 }
      e.preventDefault()
    })
}

initToggleButton('#btn-sidebar',               true,  state => $('#sidebar').toggleClass('hidden', !state))
initToggleButton('#btn-dependsGraph',          false, state => $('.dependsGraph').trigger('diagram:toggle', [state]))
initToggleButton('#btn-processDesign',         true,  state => $('.processDesign').trigger('diagram:toggle', [state]))
initToggleButton('#btn-entityRelationDiagram', false, state => $('.entityRelationDiagram').trigger('diagram:toggle', [state]))
initExportSvgButton()
initExportPngButton()
initToggleUndoButton()
resizeable('#sidebar', '#resize-grip') // make the menu width adjustable

$(document).ready(() => {
  util.loadJsonp('data/_index.jsonp')
})