├── docs ├── icon.vsdx ├── checklist.pdf ├── overview1.png ├── checklist.docx ├── Image-german-1.png ├── Image-navigation.png ├── image-1607204248615.png ├── image-1607204590659.png ├── image-1607204694682.png ├── image-1607204892246.png ├── overview1-1280x720.png ├── website-icons │ ├── icon.png │ ├── icon.svg │ ├── svgpublishwp.svg │ └── diagram-frame-icon-11.svg ├── DiagramFrameWebPart.pptx ├── release-notes-1.3.md ├── release-notes-1.2.md ├── release-notes-1.1.md ├── description-de.md ├── description-en.md ├── diagram-frame-icon-11.svg ├── partner-description-de.html └── partner-description-en.html ├── spfx-locale.xlsx ├── src ├── min-sp-controls-react │ ├── common │ │ ├── telemetry │ │ │ ├── version.ts │ │ │ └── index.ts │ │ ├── utilities │ │ │ ├── index.ts │ │ │ └── ThemeColorHelper.ts │ │ ├── Constants.ts │ │ ├── extensions │ │ │ └── String.extensions.ts │ │ └── SPEntities.ts │ ├── controls │ │ ├── fileTypeIcon │ │ │ ├── index.ts │ │ │ └── FileTypeIcon.module.scss │ │ ├── dragDropFiles │ │ │ ├── index.ts │ │ │ ├── DragDropFiles.module.scss │ │ │ └── IDragDropFiles.ts │ │ ├── filePicker │ │ │ ├── OneDriveFilesTab │ │ │ │ ├── OneDriveFilesTab.module.scss │ │ │ │ ├── index.ts │ │ │ │ ├── IOneDriveFilesTabProps.ts │ │ │ │ ├── OneDriveFilesTab.types.ts │ │ │ │ └── IOneDriveFilesTabState.ts │ │ │ ├── SiteFilePickerTab │ │ │ │ ├── SiteFilePickerTab.module.scss │ │ │ │ ├── index.ts │ │ │ │ ├── ISiteFilePickerTabState.ts │ │ │ │ └── ISiteFilePickerTabProps.ts │ │ │ ├── controls │ │ │ │ ├── FileBrowser │ │ │ │ │ ├── FileBrowser.types.ts │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── FileBrowser.module.scss │ │ │ │ │ ├── IFileBrowserProps.ts │ │ │ │ │ └── IFileBrowserState.ts │ │ │ │ ├── FolderTile │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── IFolderTileProps.ts │ │ │ │ │ ├── FolderTile.module.scss │ │ │ │ │ └── FolderTile.tsx │ │ │ │ ├── TilesList │ │ │ │ │ ├── index.ts │ │ │ │ │ └── ITilesListProps.ts │ │ │ │ ├── index.ts │ │ │ │ ├── DocumentTile │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── IDocumentTileProps.ts │ │ │ │ │ ├── DocumentTile.module.scss │ │ │ │ │ └── DocumentTile.tsx │ │ │ │ └── DocumentLibraryBrowser │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── IDocumentLibraryBrowserState.ts │ │ │ │ │ ├── IDocumentLibraryBrowserProps.ts │ │ │ │ │ ├── DocumentLibraryBrowser.module.scss │ │ │ │ │ └── DocumentLibraryBrowser.tsx │ │ │ ├── StockImagesTab │ │ │ │ ├── index.ts │ │ │ │ ├── IStockImagesProps.ts │ │ │ │ ├── StockImages.module.scss │ │ │ │ ├── StockImagesModel.ts │ │ │ │ └── StockImages.tsx │ │ │ ├── RecentFilesTab │ │ │ │ ├── index.ts │ │ │ │ ├── IRecentFilesTabProps.ts │ │ │ │ ├── IRecentFilesTabState.ts │ │ │ │ └── RecentFilesTab.module.scss │ │ │ ├── LinkFilePickerTab │ │ │ │ ├── index.ts │ │ │ │ ├── ILinkFilePickerTabState.ts │ │ │ │ ├── LinkFilePickerTab.module.scss │ │ │ │ ├── ILinkFilePickerTabProps.ts │ │ │ │ └── LinkFilePickerTab.tsx │ │ │ ├── UploadFilePickerTab │ │ │ │ ├── index.ts │ │ │ │ ├── IUploadFilePickerTabState.ts │ │ │ │ ├── IUploadFilePickerTabProps.ts │ │ │ │ ├── UploadFilePickerTab.module.scss │ │ │ │ └── UploadFilePickerTab.tsx │ │ │ ├── WebSearchTab │ │ │ │ ├── index.ts │ │ │ │ ├── IWebSearchTabProps.ts │ │ │ │ ├── IWebSearchTabState.ts │ │ │ │ ├── IBingSearchResult.ts │ │ │ │ └── WebSearchTab.types.ts │ │ │ ├── MultipleUploadFilePickerTab │ │ │ │ ├── index.ts │ │ │ │ ├── IMultipleUploadFilePickerTabState.ts │ │ │ │ ├── IMultipleUploadFilePickerTabProps.ts │ │ │ │ ├── MultipleUploadFilePickerTab.module.scss │ │ │ │ └── MultipleUploadFilePickerTab.tsx │ │ │ ├── index.ts │ │ │ ├── IFilePickerState.ts │ │ │ ├── FilePicker.types.ts │ │ │ └── IFilePickerProps.ts │ │ ├── placeholder │ │ │ ├── index.ts │ │ │ ├── IPlaceholderComponent.ts │ │ │ ├── PlaceholderComponent.module.scss │ │ │ └── PlaceholderComponent.tsx │ │ ├── folderExplorer │ │ │ ├── index.ts │ │ │ ├── NewFolder │ │ │ │ ├── index.ts │ │ │ │ ├── INewFolderState.ts │ │ │ │ ├── INewFolderProps.ts │ │ │ │ ├── NewFolder.module.scss │ │ │ │ └── NewFolder.tsx │ │ │ └── FolderExplorer │ │ │ │ ├── index.ts │ │ │ │ ├── IFolderExplorerState.ts │ │ │ │ ├── FolderExplorer.module.scss │ │ │ │ └── IFolderExplorerProps.ts │ │ └── errorMessage │ │ │ ├── ErrorMessage.module.scss │ │ │ └── ErrorMessage.tsx │ └── services │ │ ├── FileBrowserService.types.ts │ │ ├── IFolderExplorerService.ts │ │ ├── FilesSearchService.types.ts │ │ ├── OrgAssetsService.ts │ │ └── FolderExplorerService.ts ├── index.ts ├── WebPart │ ├── properties │ │ ├── IDefaultFolder.ts │ │ ├── PropertyPaneVersionField.tsx │ │ ├── PropertyPaneSizeField.tsx │ │ ├── PropertyPaneUrlField.tsx │ │ ├── Defaults.ts │ │ ├── PropertyPaneSizeFieldComponent.tsx │ │ ├── PropertyPaneUrlFieldComponent.tsx │ │ └── PropertyPaneConfiguration.ts │ ├── TopFrame.module.scss │ ├── IWebPartProps.ts │ ├── components │ │ └── ErrorPlaceholder.tsx │ ├── WebPart.manifest.json │ ├── WebPart.ts │ └── Utils.ts └── loc │ ├── strings.d.ts │ ├── en-us.js │ └── de-de.js ├── teams ├── eaf98c51-0b5e-4ab0-9eca-139671d32cf5_color.png └── eaf98c51-0b5e-4ab0-9eca-139671d32cf5_outline.png ├── config ├── copy-assets.json ├── write-manifests.json ├── serve.json ├── deploy-azure-storage.json ├── config.json └── package-solution.json ├── .vscode ├── settings.json └── launch.json ├── .gitignore ├── .editorconfig ├── eslint.json ├── tsconfig.json ├── README.md ├── LICENSE ├── package.json ├── DeploySPFxToAppCatalog.ps1 └── gulpfile.js /docs/icon.vsdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nbelyh/diagram-frame/HEAD/docs/icon.vsdx -------------------------------------------------------------------------------- /spfx-locale.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nbelyh/diagram-frame/HEAD/spfx-locale.xlsx -------------------------------------------------------------------------------- /docs/checklist.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nbelyh/diagram-frame/HEAD/docs/checklist.pdf -------------------------------------------------------------------------------- /docs/overview1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nbelyh/diagram-frame/HEAD/docs/overview1.png -------------------------------------------------------------------------------- /src/min-sp-controls-react/common/telemetry/version.ts: -------------------------------------------------------------------------------- 1 | export const version: string = "3.6.0"; -------------------------------------------------------------------------------- /docs/checklist.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nbelyh/diagram-frame/HEAD/docs/checklist.docx -------------------------------------------------------------------------------- /docs/Image-german-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nbelyh/diagram-frame/HEAD/docs/Image-german-1.png -------------------------------------------------------------------------------- /docs/Image-navigation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nbelyh/diagram-frame/HEAD/docs/Image-navigation.png -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | // A file is required to be in the root of the /src directory by the TypeScript compiler 2 | -------------------------------------------------------------------------------- /docs/image-1607204248615.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nbelyh/diagram-frame/HEAD/docs/image-1607204248615.png -------------------------------------------------------------------------------- /docs/image-1607204590659.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nbelyh/diagram-frame/HEAD/docs/image-1607204590659.png -------------------------------------------------------------------------------- /docs/image-1607204694682.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nbelyh/diagram-frame/HEAD/docs/image-1607204694682.png -------------------------------------------------------------------------------- /docs/image-1607204892246.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nbelyh/diagram-frame/HEAD/docs/image-1607204892246.png -------------------------------------------------------------------------------- /docs/overview1-1280x720.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nbelyh/diagram-frame/HEAD/docs/overview1-1280x720.png -------------------------------------------------------------------------------- /docs/website-icons/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nbelyh/diagram-frame/HEAD/docs/website-icons/icon.png -------------------------------------------------------------------------------- /docs/DiagramFrameWebPart.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nbelyh/diagram-frame/HEAD/docs/DiagramFrameWebPart.pptx -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/fileTypeIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from './IFileTypeIcon'; 2 | export * from './FileTypeIcon'; -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/dragDropFiles/index.ts: -------------------------------------------------------------------------------- 1 | export * from './IDragDropFiles'; 2 | export * from './DragDropFiles'; 3 | -------------------------------------------------------------------------------- /src/WebPart/properties/IDefaultFolder.ts: -------------------------------------------------------------------------------- 1 | 2 | export interface IDefaultFolder { 3 | name: string; 4 | relativeUrl: string; 5 | } 6 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/OneDriveFilesTab/OneDriveFilesTab.module.scss: -------------------------------------------------------------------------------- 1 | @import "../FilePicker.module.scss"; 2 | 3 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/SiteFilePickerTab/SiteFilePickerTab.module.scss: -------------------------------------------------------------------------------- 1 | @import "../FilePicker.module.scss"; 2 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/placeholder/index.ts: -------------------------------------------------------------------------------- 1 | export * from './IPlaceholderComponent'; 2 | export * from './PlaceholderComponent'; -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/controls/FileBrowser/FileBrowser.types.ts: -------------------------------------------------------------------------------- 1 | export type ViewType = 'list' | 'compact' | 'tiles'; 2 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/controls/FolderTile/index.ts: -------------------------------------------------------------------------------- 1 | export * from './FolderTile'; 2 | export * from './IFolderTileProps'; 3 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/controls/TilesList/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TilesList"; 2 | export * from "./ITilesListProps"; 3 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/controls/index.ts: -------------------------------------------------------------------------------- 1 | export * from './FileBrowser'; 2 | export * from './DocumentLibraryBrowser'; 3 | 4 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/controls/DocumentTile/index.ts: -------------------------------------------------------------------------------- 1 | export * from './DocumentTile'; 2 | export * from './IDocumentTileProps'; 3 | -------------------------------------------------------------------------------- /teams/eaf98c51-0b5e-4ab0-9eca-139671d32cf5_color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nbelyh/diagram-frame/HEAD/teams/eaf98c51-0b5e-4ab0-9eca-139671d32cf5_color.png -------------------------------------------------------------------------------- /src/min-sp-controls-react/common/utilities/index.ts: -------------------------------------------------------------------------------- 1 | // export * from './FieldRendererHelper'; 2 | export * from './GeneralHelper'; 3 | // export * from './SPHelper'; -------------------------------------------------------------------------------- /teams/eaf98c51-0b5e-4ab0-9eca-139671d32cf5_outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nbelyh/diagram-frame/HEAD/teams/eaf98c51-0b5e-4ab0-9eca-139671d32cf5_outline.png -------------------------------------------------------------------------------- /config/copy-assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json", 3 | "deployCdnPath": "temp/deploy" 4 | } 5 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/folderExplorer/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./FolderExplorer/index"; 2 | export {IFolder} from "../../services/IFolderExplorerService"; 3 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/StockImagesTab/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./StockImagesModel"; 2 | export * from "./IStockImagesProps"; 3 | export * from "./StockImages"; -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/folderExplorer/NewFolder/index.ts: -------------------------------------------------------------------------------- 1 | export * from './NewFolder'; 2 | export * from './INewFolderProps'; 3 | export * from './INewFolderState'; 4 | -------------------------------------------------------------------------------- /config/write-manifests.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json", 3 | "cdnBasePath": "" 4 | } 5 | -------------------------------------------------------------------------------- /docs/release-notes-1.3.md: -------------------------------------------------------------------------------- 1 | Release Notes 1.3 2 | ----- 3 | 4 | - Navigation option to enable external links in the new tab 5 | - Navigation option to open office files instead of downloading 6 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/RecentFilesTab/index.ts: -------------------------------------------------------------------------------- 1 | export * from './RecentFilesTab'; 2 | export * from './IRecentFilesTabProps'; 3 | export * from './IRecentFilesTabState'; 4 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/OneDriveFilesTab/index.ts: -------------------------------------------------------------------------------- 1 | export * from './OneDriveFilesTab'; 2 | export * from './IOneDriveFilesTabProps'; 3 | export * from './IOneDriveFilesTabState'; 4 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/LinkFilePickerTab/index.ts: -------------------------------------------------------------------------------- 1 | export * from './LinkFilePickerTab'; 2 | export * from './ILinkFilePickerTabProps'; 3 | export * from './ILinkFilePickerTabState'; 4 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/SiteFilePickerTab/index.ts: -------------------------------------------------------------------------------- 1 | export * from './SiteFilePickerTab'; 2 | export * from './ISiteFilePickerTabProps'; 3 | export * from './ISiteFilePickerTabState'; 4 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/UploadFilePickerTab/index.ts: -------------------------------------------------------------------------------- 1 | export * from './UploadFilePickerTab'; 2 | export * from './IUploadFilePickerTabProps'; 3 | export * from './IUploadFilePickerTabState'; 4 | -------------------------------------------------------------------------------- /docs/release-notes-1.2.md: -------------------------------------------------------------------------------- 1 | Release Notes 1.2 2 | ----- 3 | 4 | - German localization 5 | - Experimental support for navigation 6 | - Improved stability for file (hyperlink) navigation 7 | - CDN hosting by default (jsdelivr) 8 | -------------------------------------------------------------------------------- /src/WebPart/TopFrame.module.scss: -------------------------------------------------------------------------------- 1 | .root { 2 | overflow: hidden; 3 | display: flex; 4 | flex-direction: column, 5 | } 6 | 7 | .diagram { 8 | flex: 1; 9 | 10 | iframe { 11 | border: 0 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/folderExplorer/NewFolder/INewFolderState.ts: -------------------------------------------------------------------------------- 1 | export interface INewFolderState { 2 | folderName: string; 3 | showInput: boolean; 4 | loading: boolean; 5 | errorMessage?: string; 6 | } 7 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/WebSearchTab/index.ts: -------------------------------------------------------------------------------- 1 | export * from './WebSearchTab'; 2 | export * from './WebSearchTab.types'; 3 | export * from './IWebSearchTabProps'; 4 | export * from './IWebSearchTabState'; 5 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/controls/FileBrowser/index.ts: -------------------------------------------------------------------------------- 1 | export * from './FileBrowser'; 2 | export * from './FileBrowser.types'; 3 | export * from './IFileBrowserProps'; 4 | export * from './IFileBrowserState'; 5 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/controls/DocumentLibraryBrowser/index.ts: -------------------------------------------------------------------------------- 1 | export * from './DocumentLibraryBrowser'; 2 | export * from './IDocumentLibraryBrowserProps'; 3 | export * from './IDocumentLibraryBrowserState'; 4 | -------------------------------------------------------------------------------- /config/serve.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json", 3 | "port": 4321, 4 | "https": true, 5 | "initialPage": "https://svgpublish.sharepoint.com/_layouts/15/workbench.aspx" 6 | } 7 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/MultipleUploadFilePickerTab/index.ts: -------------------------------------------------------------------------------- 1 | export * from './MultipleUploadFilePickerTab'; 2 | export * from './IMultipleUploadFilePickerTabProps'; 3 | export * from './IMultipleUploadFilePickerTabState'; 4 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/controls/FileBrowser/FileBrowser.module.scss: -------------------------------------------------------------------------------- 1 | //@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss"; 2 | @import "../../SiteFilePickerTab/SiteFilePickerTab.module.scss"; 3 | 4 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./FilePicker"; 2 | export * from "./FilePicker.types"; 3 | export * from "./IFilePickerProps"; 4 | export * from "./IFilePickerState"; 5 | export { IIconProps } from "@fluentui/react"; 6 | -------------------------------------------------------------------------------- /config/deploy-azure-storage.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json", 3 | "workingDir": "./temp/deploy/", 4 | "account": "TODO", 5 | "container": "TODO", 6 | "accessKey": "TODO" 7 | } 8 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/IFilePickerState.ts: -------------------------------------------------------------------------------- 1 | export interface IFilePickerState { 2 | showFullNav?: boolean; // reserved for future use 3 | panelOpen?: boolean; 4 | selectedTab?: string; 5 | 6 | organisationAssetsEnabled?: boolean; 7 | } 8 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/folderExplorer/FolderExplorer/index.ts: -------------------------------------------------------------------------------- 1 | export * from './FolderExplorer'; 2 | export * from './IFolderExplorerProps'; 3 | export * from './IFolderExplorerState'; 4 | export { IBreadcrumbItem } from "@fluentui/react/lib/Breadcrumb"; 5 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/LinkFilePickerTab/ILinkFilePickerTabState.ts: -------------------------------------------------------------------------------- 1 | import { IFilePickerResult } from "../FilePicker.types"; 2 | 3 | export interface ILinkFilePickerTabState { 4 | filePickerResult?: IFilePickerResult; 5 | isValid: boolean; 6 | } 7 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/UploadFilePickerTab/IUploadFilePickerTabState.ts: -------------------------------------------------------------------------------- 1 | import { IFilePickerResult } from "../FilePicker.types"; 2 | 3 | export interface IUploadFilePickerTabState { 4 | filePickerResult: IFilePickerResult; 5 | filePreview?: string; 6 | } 7 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/controls/DocumentLibraryBrowser/IDocumentLibraryBrowserState.ts: -------------------------------------------------------------------------------- 1 | import { ILibrary } from "../../../../services/FileBrowserService.types"; 2 | 3 | export interface IDocumentLibraryBrowserState { 4 | isLoading: boolean; 5 | lists: ILibrary[]; 6 | } 7 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/folderExplorer/FolderExplorer/IFolderExplorerState.ts: -------------------------------------------------------------------------------- 1 | import { IFolder } from '../../../services/IFolderExplorerService'; 2 | 3 | export interface IFolderExplorerState { 4 | foldersLoading: boolean; 5 | folders: IFolder[]; 6 | selectedFolder: IFolder; 7 | } 8 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/MultipleUploadFilePickerTab/IMultipleUploadFilePickerTabState.ts: -------------------------------------------------------------------------------- 1 | import { IFilePickerResult } from "../FilePicker.types"; 2 | 3 | export interface IMultipleUploadFilePickerTabState { 4 | filePickerResult: IFilePickerResult[]; 5 | filePreview?: string; 6 | } 7 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/OneDriveFilesTab/IOneDriveFilesTabProps.ts: -------------------------------------------------------------------------------- 1 | import { IFilePickerTab } from "../FilePicker.types"; 2 | import { OneDriveService } from "../../../services/OneDriveService"; 3 | 4 | export interface IOneDriveFilesTabProps extends IFilePickerTab { 5 | oneDriveService: OneDriveService; 6 | } 7 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/OneDriveFilesTab/OneDriveFilesTab.types.ts: -------------------------------------------------------------------------------- 1 | import { IBreadcrumbItem } from "@fluentui/react/lib/Breadcrumb"; 2 | import { IFile } from "../../../services/FileBrowserService.types"; 3 | 4 | export interface OneDriveFilesBreadcrumbItem extends IBreadcrumbItem { 5 | folderdata?: IFile; 6 | } 7 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/errorMessage/ErrorMessage.module.scss: -------------------------------------------------------------------------------- 1 | .errorMessage { 2 | font-size: 12px; 3 | font-weight: 400; 4 | color: #a80000; 5 | margin: 0; 6 | padding-top: 5px; 7 | display: flex; 8 | align-items: center; 9 | } 10 | 11 | .errorIcon { 12 | font-size: 14px; 13 | margin-right: 5px; 14 | } 15 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/RecentFilesTab/IRecentFilesTabProps.ts: -------------------------------------------------------------------------------- 1 | import { IFilePickerTab } from "../FilePicker.types"; 2 | import { FilesSearchService } from "../../../services/FilesSearchService"; 3 | 4 | export interface IRecentFilesTabProps extends IFilePickerTab { 5 | fileSearchService: FilesSearchService; 6 | } 7 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/fileTypeIcon/FileTypeIcon.module.scss: -------------------------------------------------------------------------------- 1 | @import '~@fluentui/react/dist/sass/References.scss'; 2 | 3 | // Retrieve all the CSS classes for brand icons from Office UI Fabric 4 | :global { 5 | @import '~@fluentui/react/dist/sass/mixins/BrandIcon.Mixins'; 6 | @import '~@fluentui/react/dist/sass/BrandIcon'; 7 | } 8 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/StockImagesTab/IStockImagesProps.ts: -------------------------------------------------------------------------------- 1 | import { IFilePickerTab } from "../FilePicker.types"; 2 | import { FilesSearchService } from "../../../services/FilesSearchService"; 3 | 4 | export interface IStockImagesProps extends IFilePickerTab { 5 | language: string; 6 | fileSearchService: FilesSearchService; 7 | } 8 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/RecentFilesTab/IRecentFilesTabState.ts: -------------------------------------------------------------------------------- 1 | import { IFilePickerResult } from "../FilePicker.types"; 2 | import { IRecentFile } from "../../../services/FilesSearchService.types"; 3 | 4 | export interface IRecentFilesTabState { 5 | results: IRecentFile[]; 6 | isLoading: boolean; 7 | filePickerResult: IFilePickerResult; 8 | } 9 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/UploadFilePickerTab/IUploadFilePickerTabProps.ts: -------------------------------------------------------------------------------- 1 | import { IFilePickerResult, IFilePickerTab } from "../FilePicker.types"; 2 | 3 | export interface IUploadFilePickerTabProps extends IFilePickerTab { 4 | onChange: (value: IFilePickerResult[]) => void; 5 | renderCustomUploadTabContent: (filePickerResult: IFilePickerResult) => JSX.Element | null; 6 | } 7 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.module.scss: -------------------------------------------------------------------------------- 1 | @import "../FilePicker.module.scss"; 2 | 3 | .linkTextField { 4 | max-width: 640px; 5 | } 6 | 7 | .localTabSinglePreview { 8 | margin-bottom: 20px; 9 | } 10 | 11 | .localTabSinglePreviewImage { 12 | display: block; 13 | max-width: 100%; 14 | max-height: 220px; 15 | image-orientation: from-image; 16 | } 17 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/MultipleUploadFilePickerTab/IMultipleUploadFilePickerTabProps.ts: -------------------------------------------------------------------------------- 1 | import { IFilePickerResult, IFilePickerTab } from "../FilePicker.types"; 2 | 3 | export interface IMultipleUploadFilePickerTabProps extends IFilePickerTab { 4 | onChange: (value: IFilePickerResult[]) => void; 5 | renderCustomMultipleUploadTabContent: (filePickerResult: IFilePickerResult[]) => JSX.Element | null; 6 | } 7 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/WebSearchTab/IWebSearchTabProps.ts: -------------------------------------------------------------------------------- 1 | import { IFilePickerTab } from "../FilePicker.types"; 2 | import { ISearchSuggestion } from "./WebSearchTab.types"; 3 | import { FilesSearchService } from "../../../services/FilesSearchService"; 4 | 5 | export interface IWebSearchTabProps extends IFilePickerTab { 6 | bingSearchService: FilesSearchService; 7 | suggestions?: ISearchSuggestion[]; 8 | } 9 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/SiteFilePickerTab/ISiteFilePickerTabState.ts: -------------------------------------------------------------------------------- 1 | import { IFilePickerResult , FilePickerBreadcrumbItem} from "../FilePicker.types"; 2 | 3 | export interface ISiteFilePickerTabState { 4 | filePickerResult: IFilePickerResult; 5 | libraryAbsolutePath: string; 6 | libraryUrl: string; 7 | libraryPath: string; 8 | folderName: string; 9 | 10 | breadcrumbItems: FilePickerBreadcrumbItem[]; 11 | } 12 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/controls/FolderTile/IFolderTileProps.ts: -------------------------------------------------------------------------------- 1 | import { IDimensions } from "../../../../services/IOneDriveService"; 2 | import { IFile } from "../../../../services/FileBrowserService.types"; 3 | 4 | export interface IFolderTileProps { 5 | item: IFile; 6 | index: number; 7 | isSelected: boolean; 8 | pageWidth: number; 9 | onItemInvoked: (item: IFile) => void; 10 | tileDimensions: IDimensions; 11 | } 12 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/controls/DocumentLibraryBrowser/IDocumentLibraryBrowserProps.ts: -------------------------------------------------------------------------------- 1 | import { FileBrowserService } from "../../../../services/FileBrowserService"; 2 | import { ILibrary } from "../../../../services/FileBrowserService.types"; 3 | 4 | export interface IDocumentLibraryBrowserProps { 5 | fileBrowserService: FileBrowserService; 6 | onOpenLibrary: (selectedLibrary: ILibrary) => void; 7 | includePageLibraries?: boolean; 8 | } 9 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/StockImagesTab/StockImages.module.scss: -------------------------------------------------------------------------------- 1 | @import "../FilePicker.module.scss"; 2 | 3 | .stockImagesPickerContainer { 4 | width: 100%; 5 | height: 100%; 6 | } 7 | .stockImagesPicker { 8 | width: 100%; 9 | height: 100%; 10 | 11 | background-color: transparent; 12 | border: 0px none transparent; 13 | padding: 0px; 14 | overflow: hidden; 15 | 16 | //margin-top:-30px; 17 | //margin-left: -35px; 18 | } 19 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | // Configure glob patterns for excluding files and folders in the file explorer. 4 | "files.exclude": { 5 | "**/.git": true, 6 | "**/.DS_Store": true, 7 | "**/bower_components": true, 8 | "**/coverage": true, 9 | "**/lib-amd": true, 10 | "src/**/*.scss.ts": true 11 | }, 12 | "typescript.tsdk": ".\\node_modules\\typescript\\lib" 13 | } -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/LinkFilePickerTab/ILinkFilePickerTabProps.ts: -------------------------------------------------------------------------------- 1 | import { IFilePickerTab, IFilePickerResult } from "../FilePicker.types"; 2 | import { FilesSearchService } from "../../../services/FilesSearchService"; 3 | 4 | export interface ILinkFilePickerTabProps extends IFilePickerTab { 5 | allowExternalTenantLinks: boolean; 6 | fileSearchService: FilesSearchService; 7 | renderCustomLinkTabContent: (filePickerResult: IFilePickerResult) => JSX.Element | null; 8 | } 9 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/OneDriveFilesTab/IOneDriveFilesTabState.ts: -------------------------------------------------------------------------------- 1 | import { OneDriveFilesBreadcrumbItem } from "./OneDriveFilesTab.types"; 2 | import { IFilePickerResult } from "../FilePicker.types"; 3 | 4 | export interface IOneDriveFilesTabState { 5 | filePickerResult: IFilePickerResult; 6 | libraryAbsolutePath: string; 7 | libraryUrl: string; 8 | folderPath: string; 9 | folderName: string; 10 | 11 | breadcrumbItems: OneDriveFilesBreadcrumbItem[]; 12 | confirmationVisible: boolean; 13 | } 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Dependency directories 7 | node_modules 8 | 9 | # Build generated files 10 | dist 11 | lib 12 | !src/@pnp/spfx-controls-react/lib 13 | solution 14 | temp 15 | *.sppkg 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # OSX 21 | .DS_Store 22 | 23 | # Visual Studio files 24 | .ntvs_analysis.dat 25 | .vs 26 | bin 27 | obj 28 | 29 | # Resx Generated Code 30 | *.resx.ts 31 | 32 | # Styles Generated Code 33 | *.scss.ts 34 | release 35 | -------------------------------------------------------------------------------- /docs/release-notes-1.1.md: -------------------------------------------------------------------------------- 1 | Release Notes 1.1 2 | ----- 3 | 4 | - Support using as Full-Width Web Part 5 | - Support using as Teams Tab 6 | - Fix flickering on first load 7 | - Fix document library mess. Upload to "Documents" by default, or teams channel folder (if in teams), not to SiteAssets. Add explicit target folder for upload. 8 | - Improve error handling, show more reasonable error messages in case of any. 9 | - Properly support showing diagrams from different site 10 | - Warn about copying to /SiteAssets when using a private file from OneDrive 11 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/WebSearchTab/IWebSearchTabState.ts: -------------------------------------------------------------------------------- 1 | import { ImageSize, ImageAspect, ImageLicense } from "./WebSearchTab.types"; 2 | import { IFilePickerResult } from "../FilePicker.types"; 3 | import { ISearchResult } from "../../../services/FilesSearchService.types"; 4 | 5 | export interface IWebSearchTabState { 6 | isLoading: boolean; 7 | query?: string; 8 | size?: ImageSize; 9 | aspect?: ImageAspect; 10 | license?: ImageLicense; 11 | results: ISearchResult[]; 12 | filePickerResult: IFilePickerResult; 13 | } 14 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/controls/DocumentTile/IDocumentTileProps.ts: -------------------------------------------------------------------------------- 1 | import { IDimensions } from "../../../../services/IOneDriveService"; 2 | import { IFile } from "../../../../services/FileBrowserService.types"; 3 | import { FileBrowserService } from "../../../../services/FileBrowserService"; 4 | 5 | export interface IDocumentTileProps { 6 | fileBroserService: FileBrowserService; 7 | item: IFile; 8 | index: number; 9 | isSelected: boolean; 10 | pageWidth: number; 11 | tileDimensions: IDimensions; 12 | onItemInvoked: (item: IFile) => void; 13 | } 14 | -------------------------------------------------------------------------------- /src/WebPart/IWebPartProps.ts: -------------------------------------------------------------------------------- 1 | 2 | export interface IWebPartProps { 3 | url: string; 4 | startPage: string; 5 | width: string; 6 | height: string; 7 | hideToolbars: boolean; 8 | hideBorders: boolean; 9 | 10 | hideDiagramBoundary: boolean; 11 | disableHyperlinks: boolean; 12 | disablePan: boolean; 13 | disablePanZoomWindow: boolean; 14 | disableZoom: boolean; 15 | 16 | enableNavigation: boolean; 17 | enableNavigationHeader: boolean; 18 | 19 | openHyperlinksInNewWindow: boolean; 20 | forceOpeningOfficeFilesOnline: boolean; 21 | 22 | zoom: number; 23 | } 24 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/controls/FileBrowser/IFileBrowserProps.ts: -------------------------------------------------------------------------------- 1 | import { FileBrowserService } from "../../../../services/FileBrowserService"; 2 | import { IFile } from "../../../../services/FileBrowserService.types"; 3 | import { IFilePickerResult } from "../../FilePicker.types"; 4 | 5 | export interface IFileBrowserProps { 6 | fileBrowserService: FileBrowserService; 7 | libraryUrl: string; 8 | folderPath: string; 9 | accepts: string[]; 10 | onChange: (filePickerResult: IFilePickerResult) => void; 11 | onOpenFolder: (folder: IFile) => void; 12 | } 13 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | 10 | # change these settings to your own preference 11 | indent_style = space 12 | indent_size = 2 13 | 14 | # we recommend you to keep these unchanged 15 | end_of_line = lf 16 | charset = utf-8 17 | trim_trailing_whitespace = true 18 | insert_final_newline = true 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false 22 | 23 | [{package,bower}.json] 24 | indent_style = space 25 | indent_size = 2 -------------------------------------------------------------------------------- /eslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/eslintrc.json", 3 | "root": true, 4 | "ignorePatterns": ["*.js", "src/min-sp-controls-react"], 5 | "parser": "@typescript-eslint/parser", 6 | "parserOptions": { 7 | "ecmaVersion": 2020, 8 | "sourceType": "module" 9 | }, 10 | "plugins": [ 11 | "@typescript-eslint" 12 | ], 13 | "rules": { 14 | "@typescript-eslint/no-explicit-any": "off" 15 | }, 16 | "extends": [ 17 | "eslint:recommended", 18 | "plugin:@typescript-eslint/eslint-recommended", 19 | "plugin:@typescript-eslint/recommended" 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/dragDropFiles/DragDropFiles.module.scss: -------------------------------------------------------------------------------- 1 | .DragDropFilesArea { 2 | position: relative; 3 | min-height: 150px; 4 | } 5 | 6 | .DragDropFilesAreaLeave { 7 | position: relative; 8 | } 9 | 10 | .DragDropFilesAreaBorder { 11 | border: dashed grey 1px; 12 | background-color: rgba(255,255,255,.6); 13 | position: absolute; 14 | top: 0; 15 | bottom: 0; 16 | left: 0; 17 | right: 0; 18 | z-index: 1; 19 | } 20 | 21 | .DragDropFilesAreaZone { 22 | position: absolute; 23 | top: 35%; 24 | right: 0; 25 | left: 0; 26 | text-align: center; 27 | color: grey; 28 | font-size: 34px; 29 | } 30 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/controls/TilesList/ITilesListProps.ts: -------------------------------------------------------------------------------- 1 | import { FileBrowserService } from "../../../../services/FileBrowserService"; 2 | import { IFile } from "../../../../services/FileBrowserService.types"; 3 | import { Selection } from '@fluentui/react/lib/Selection'; 4 | import { IFilePickerResult } from "../../FilePicker.types"; 5 | 6 | export interface ITilesListProps { 7 | fileBrowserService: FileBrowserService; 8 | filePickerResult: IFilePickerResult; 9 | selection: Selection; 10 | items: IFile[]; 11 | 12 | onFolderOpen: (item: IFile) => void; 13 | onFileSelected: (item: IFile) => void; 14 | onNextPageDataRequest: () => void; 15 | } 16 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/SiteFilePickerTab/ISiteFilePickerTabProps.ts: -------------------------------------------------------------------------------- 1 | import { IFilePickerTab } from "../FilePicker.types"; 2 | import { FileBrowserService } from "../../../services/FileBrowserService"; 3 | import { IBreadcrumbItem } from "@fluentui/react/lib/Breadcrumb"; 4 | 5 | export interface ISiteFilePickerTabProps extends IFilePickerTab { 6 | fileBrowserService: FileBrowserService; 7 | 8 | /** 9 | * Represents the base node in the breadrumb navigation 10 | */ 11 | breadcrumbFirstNode?: IBreadcrumbItem; 12 | 13 | /** 14 | * Specifies a default folder to be active in the Site Files tab 15 | */ 16 | defaultFolderAbsolutePath?: string; 17 | 18 | includePageLibraries?: boolean; 19 | } 20 | -------------------------------------------------------------------------------- /config/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json", 3 | "version": "2.0", 4 | "bundles": { 5 | "spfxvisio": { 6 | "components": [ 7 | { 8 | "entrypoint": "./lib/WebPart/WebPart.js", 9 | "manifest": "./src/WebPart/WebPart.manifest.json" 10 | } 11 | ] 12 | } 13 | }, 14 | "externals": { 15 | "VisioEmbed": { 16 | "path": "node_modules/@microsoft/office-js/embedded/visio-web-embedded.js", 17 | "globalName": "Visio" 18 | } 19 | }, 20 | "localizedResources": { 21 | "WebPartStrings": "src/loc/{locale}.js", 22 | "ControlStrings": "src/min-sp-controls-react/loc/{locale}.js" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/dragDropFiles/IDragDropFiles.ts: -------------------------------------------------------------------------------- 1 | export interface IDragDropFilesProps { 2 | /** 3 | * Specifies the dropEffect, default is 'none' 4 | * https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/dropEffect 5 | */ 6 | dropEffect?: string; 7 | /** 8 | * Specifies the label of the file picker button 9 | */ 10 | labelMessage?: string; 11 | 12 | /** 13 | * Specifies the icon to display 14 | */ 15 | iconName?: string; 16 | /** 17 | * Handler to return the files from drag and drop. 18 | **/ 19 | onDrop?: any; 20 | /** 21 | * Specify if drag and drop option is enable. 22 | **/ 23 | enable?: boolean; 24 | } 25 | 26 | export interface IDragDropFilesState { 27 | dragStatus?: boolean; 28 | } 29 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/controls/FileBrowser/IFileBrowserState.ts: -------------------------------------------------------------------------------- 1 | import { ViewType } from "./FileBrowser.types"; 2 | import { IFile } from "../../../../services/FileBrowserService.types"; 3 | import { IColumn } from '@fluentui/react/lib/DetailsList'; 4 | import { IFilePickerResult } from "../../FilePicker.types"; 5 | 6 | export enum LoadingState { 7 | idle = 1, 8 | loading = 2, 9 | loadingNextPage 10 | } 11 | 12 | export interface IFileBrowserState { 13 | // isLoading: boolean; 14 | // isLoadingNextPage: boolean; 15 | loadingState: LoadingState; 16 | items: IFile[]; 17 | nextPageQueryString: string; 18 | // currentPath: string; 19 | filePickerResult: IFilePickerResult; 20 | columns: IColumn[]; 21 | selectedView: ViewType; 22 | } 23 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/folderExplorer/NewFolder/INewFolderProps.ts: -------------------------------------------------------------------------------- 1 | import { BaseComponentContext } from '@microsoft/sp-component-base'; 2 | import { IFolder } from '../../../services/IFolderExplorerService'; 3 | 4 | export interface INewFolderProps { 5 | /** 6 | * Current context 7 | */ 8 | context: BaseComponentContext; 9 | 10 | /** 11 | * The absolute url of the target site. Only required if not the current site 12 | */ 13 | siteAbsoluteUrl?: string; 14 | 15 | /** 16 | * Folder currently selected 17 | */ 18 | selectedFolder: IFolder; 19 | 20 | /** 21 | * Callback function called after the folder has been added 22 | * @argument newFolder The new folder created. Null if error occurred. 23 | */ 24 | addSubFolder: (newFolder: IFolder) => Promise; 25 | } 26 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/UploadFilePickerTab/UploadFilePickerTab.module.scss: -------------------------------------------------------------------------------- 1 | @import "../FilePicker.module.scss"; 2 | 3 | .localTabSinglePreview { 4 | margin-bottom: 20px; 5 | display: inline-block; 6 | text-align: center; 7 | } 8 | 9 | .localTabSinglePreviewImage { 10 | display: block; 11 | max-width: 100%; 12 | max-height: 220px; 13 | image-orientation: from-image; 14 | } 15 | 16 | .localTabFilename { 17 | color: "[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]"; 18 | } 19 | 20 | .localTabLabel { 21 | color: "[theme:themePrimary, default:#{$ms-color-themePrimary}]"; 22 | cursor: pointer; 23 | font-size: large; 24 | text-decoration: underline; 25 | } 26 | 27 | .localTabInput { 28 | width: 0.1px; 29 | height: 0.1px; 30 | opacity: 0; 31 | overflow: hidden; 32 | position: absolute; 33 | z-index: -1; 34 | } 35 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/StockImagesTab/StockImagesModel.ts: -------------------------------------------------------------------------------- 1 | export interface EventFlags { 2 | dataCategories: number; 3 | diagnosticLevel: number; 4 | } 5 | 6 | export interface DataField { 7 | name: string; 8 | dataType: number; 9 | value: string; 10 | classification: number; 11 | } 12 | 13 | export interface TelemetryProperties { 14 | ariaTenantToken: string; 15 | nexusTenantToken: number; 16 | } 17 | 18 | export interface EventValue { 19 | eventName: string; 20 | eventFlags: EventFlags; 21 | dataFields: DataField[]; 22 | telemetryProperties: TelemetryProperties; 23 | } 24 | export interface SubmitValue { 25 | action: string; 26 | contenttype: string; 27 | sourceUrl: string; 28 | caption: string; 29 | } 30 | 31 | export interface StockImagesEvent { 32 | MessageId: string; 33 | Values: EventValue | SubmitValue[]; 34 | SendTime: number; 35 | } -------------------------------------------------------------------------------- /config/package-solution.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json", 3 | "solution": { 4 | "developer": { 5 | "name": "Nikolay Belykh", 6 | "privacyUrl": "https://unmanagedvisio.com/products/diagram-frame-sharepoint-visio-web-part/privacy-policy", 7 | "termsOfUseUrl": "https://go.microsoft.com/fwlink/?linkid=2041178", 8 | "websiteUrl": "https://unmanagedvisio.com/products/diagram-frame-sharepoint-visio-web-part", 9 | "mpnId": "6213191" 10 | }, 11 | "name": "Diagram Frame WebPart", 12 | "id": "bc8110d6-2d34-408e-98c5-7f32eab887cb", 13 | "version": "1.0.0.0", 14 | "includeClientSideAssets": true, 15 | "isDomainIsolated": false, 16 | "skipFeatureDeployment": true 17 | }, 18 | "paths": { 19 | "zippedPackage": "solution/diagram-frame-webpart-no-cdn.sppkg" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | /** 3 | * Install Chrome Debugger Extension for Visual Studio Code to debug your components with the 4 | * Chrome browser: https://aka.ms/spfx-debugger-extensions 5 | */ 6 | "version": "0.2.0", 7 | "configurations": [{ 8 | "name": "Hosted workbench", 9 | "type": "chrome", 10 | "request": "launch", 11 | "url": "https://svgpublish.sharepoint.com/_layouts/15/workbench.aspx", 12 | "webRoot": "${workspaceRoot}", 13 | "sourceMaps": true, 14 | "sourceMapPathOverrides": { 15 | "webpack:///.././src/*": "${webRoot}/src/*", 16 | "webpack:///../../../src/*": "${webRoot}/src/*", 17 | "webpack:///../../../../src/*": "${webRoot}/src/*", 18 | "webpack:///../../../../../src/*": "${webRoot}/src/*" 19 | }, 20 | "runtimeArgs": [ 21 | "--remote-debugging-port=9222" 22 | ] 23 | } 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/MultipleUploadFilePickerTab/MultipleUploadFilePickerTab.module.scss: -------------------------------------------------------------------------------- 1 | @import "../FilePicker.module.scss"; 2 | 3 | .localTabSinglePreview { 4 | margin-bottom: 20px; 5 | display: inline-block; 6 | text-align: center; 7 | } 8 | 9 | .localTabSinglePreviewImage { 10 | display: block; 11 | max-width: 100%; 12 | max-height: 220px; 13 | image-orientation: from-image; 14 | } 15 | 16 | .localTabFilename { 17 | color: "[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]"; 18 | } 19 | 20 | .localTabLabel { 21 | color: "[theme:themePrimary, default:#{$ms-color-themePrimary}]"; 22 | cursor: pointer; 23 | } 24 | 25 | .localTabInput { 26 | width: 0.1px; 27 | height: 0.1px; 28 | opacity: 0; 29 | overflow: hidden; 30 | position: absolute; 31 | z-index: -1; 32 | } 33 | 34 | .localTabDragDropFile{ 35 | // width: 100%; 36 | border: 1px black dashed; 37 | text-align: center; 38 | padding: 75px; 39 | } 40 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./node_modules/@microsoft/rush-stack-compiler-5.3/includes/tsconfig-web.json", 3 | "compilerOptions": { 4 | "target": "es5", 5 | "forceConsistentCasingInFileNames": true, 6 | "module": "ESNext", 7 | "moduleResolution": "node", 8 | "jsx": "react", 9 | "declaration": true, 10 | "sourceMap": true, 11 | "inlineSources": false, 12 | "strictNullChecks": false, 13 | "noUnusedLocals": false, 14 | "experimentalDecorators": true, 15 | "skipLibCheck": true, 16 | "outDir": "lib", 17 | "typeRoots": [ 18 | "./node_modules/@types", 19 | "./node_modules/@microsoft" 20 | ], 21 | "types": [ 22 | "webpack-env", 23 | "office-js" 24 | ], 25 | "lib": [ 26 | "es5", 27 | "dom", 28 | "es2015" 29 | ] 30 | }, 31 | "include": [ 32 | "src/**/*.ts", 33 | "src/**/*.tsx", 34 | ], 35 | "exclude": [ 36 | "node_modules", 37 | "lib" 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /src/WebPart/properties/PropertyPaneVersionField.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDom from 'react-dom'; 3 | import { IPropertyPaneField, PropertyPaneFieldType, IPropertyPaneCustomFieldProps } from '@microsoft/sp-property-pane'; 4 | 5 | export function PropertyPaneVersionField(version: string): IPropertyPaneField { 6 | 7 | return { 8 | targetProperty: '', 9 | type: PropertyPaneFieldType.Custom, 10 | properties: { 11 | key: 'version', 12 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 13 | onRender: (parent: HTMLElement, context: any, changeCallback: (targetProperty: string, newValue: any) => void) => { 14 | const elem = ( 15 |
Version: {version}
16 | ); 17 | return ReactDom.render(elem, parent); 18 | }, 19 | 20 | onDispose(parent: HTMLElement): void { 21 | ReactDom.unmountComponentAtNode(parent); 22 | } 23 | } 24 | }; 25 | } 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Diagram Frame sharepoint Visio web part 2 | 3 | The web part is a specialized widget to display a Microsoft Visio diagram in a modern SharePoint page. It is somewhat similar to the classic "Visio Web Access" part in "classic" SharePoint. 4 | 5 | In the SharePoint Store: 6 | https://appsource.microsoft.com/en/product/office/WA200002491 7 | 8 | ![image](https://github.com/user-attachments/assets/5e866843-ca86-4b1a-98e0-a2553c2631a0) 9 | 10 | See the details on the website: 11 | https://unmanagedvisio.com/products/diagram-frame-sharepoint-visio-web-part/ 12 | 13 | ![image](https://github.com/user-attachments/assets/996da8ea-28ce-4862-b2d2-ef3751a136b8) 14 | 15 | You can add webpart as a standard building block: 16 | 17 | ![image](https://github.com/user-attachments/assets/03dc2e79-286f-492e-8e8f-23f3242a98d6) 18 | 19 | ## Features 20 | 21 | - File Browser 22 | - Start Page 23 | - Zoom 24 | - Full width and application page mode support 25 | - Support for custom width/height setting 26 | - Support disabling menu items 27 | - Support disabling some interactivity 28 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/services/FileBrowserService.types.ts: -------------------------------------------------------------------------------- 1 | import { IDimensions } from "./IOneDriveService"; 2 | 3 | export interface IFile { 4 | name: string; // FileName 5 | absoluteUrl: string; 6 | serverRelativeUrl: string; 7 | isFolder: boolean; 8 | modified: string; 9 | modifiedDate: Date; 10 | modifiedBy?: string; 11 | 12 | 13 | fileIcon: string; 14 | fileType: string; 15 | fileSize?: number; 16 | 17 | 18 | totalFileCount?: number; 19 | 20 | isShared?: boolean; 21 | dimensions?: IDimensions; 22 | thumbnail?: string; 23 | key?: string; 24 | 25 | // URL required to generate thumbnail preview 26 | spItemUrl: string; 27 | supportsThumbnail: boolean; 28 | } 29 | 30 | export interface IFolder extends Pick { 31 | 32 | } 33 | 34 | export interface ILibrary { 35 | title: string; 36 | absoluteUrl: string; 37 | serverRelativeUrl: string; 38 | webRelativeUrl?: string; 39 | iconPath?: string; 40 | } 41 | 42 | export interface FilesQueryResult { 43 | nextHref: string; 44 | items: IFile[]; 45 | } 46 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/common/telemetry/index.ts: -------------------------------------------------------------------------------- 1 | // import PnPTelemetry from "@pnp/telemetry-js"; 2 | import { version } from './version'; 3 | // import { Environment, EnvironmentType } from "@microsoft/sp-core-library"; 4 | import * as React from 'react'; 5 | 6 | const CONTROL_TYPE = "react"; 7 | 8 | /** 9 | * Track control information 10 | * 11 | * @param componentName 12 | * @param properties 13 | */ 14 | export function track(componentName: string, properties: any = {}): void { 15 | // const telemetry = PnPTelemetry.getInstance(); 16 | // telemetry.trackEvent(componentName, { 17 | // version, 18 | // controlType: CONTROL_TYPE, 19 | // debug: DEBUG ? "true" : "false", 20 | // environment: EnvironmentType[Environment.type], 21 | // ...properties 22 | // }); 23 | } 24 | 25 | export const useTelemetry = (componentName: string, properties: any = {}) => { 26 | const [hasBeenCalled, setHasBeenCalled] = React.useState(false); 27 | 28 | if (hasBeenCalled) { 29 | return; 30 | } 31 | 32 | track(componentName, properties); 33 | setHasBeenCalled(true); 34 | }; 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Nikolay Belykh 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/errorMessage/ErrorMessage.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import styles from './ErrorMessage.module.scss'; 3 | import { Icon } from '@fluentui/react/lib/Icon'; 4 | 5 | export interface IFieldErrorMessageProps { 6 | errorMessage: string; 7 | className?: string; 8 | } 9 | 10 | /** 11 | * Component that shows an error message when something went wront with the property control 12 | */ 13 | export default class FieldErrorMessage extends React.Component { 14 | public render(): JSX.Element { 15 | const { 16 | errorMessage, 17 | className 18 | } = this.props; 19 | if (errorMessage !== undefined && errorMessage !== null && errorMessage !== '') { 20 | return ( 21 |
22 |

23 | 24 | {errorMessage} 25 |

26 |
27 | ); 28 | } else { 29 | return null; 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/WebSearchTab/IBingSearchResult.ts: -------------------------------------------------------------------------------- 1 | interface IBingSearchResult { 2 | webSearchUrl: string; 3 | webSearchUrlPingSuffix: string; 4 | name: string; 5 | thumbnailUrl: string; 6 | datePublished: string; 7 | isFamilyFriendly: boolean; 8 | creativeCommons: string; 9 | contentUrl: string; 10 | contentUrlPingSuffix: string; 11 | hostPageUrl: string; 12 | hostPageUrlPingSuffix: string; 13 | contentSize: string; 14 | encodingFormat: string; 15 | hostPageDisplayUrl: string; 16 | width: number; 17 | height: number; 18 | thumbnail: Thumbnail; 19 | imageInsightsToken: string; 20 | insightsMetadata: InsightsMetadata; 21 | imageId: string; 22 | accentColor: string; 23 | } 24 | 25 | interface InsightsMetadata { 26 | pagesIncludingCount: number; 27 | availableSizesCount: number; 28 | recipeSourcesCount?: number; 29 | bestRepresentativeQuery?: BestRepresentativeQuery; 30 | } 31 | 32 | interface BestRepresentativeQuery { 33 | text: string; 34 | displayText: string; 35 | webSearchUrl: string; 36 | webSearchUrlPingSuffix: string; 37 | } 38 | 39 | interface Thumbnail { 40 | width: number; 41 | height: number; 42 | } 43 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/services/IFolderExplorerService.ts: -------------------------------------------------------------------------------- 1 | export interface IFolder { 2 | /** 3 | * Folder name 4 | */ 5 | Name: string; 6 | 7 | /** 8 | * Server relative url of the folder 9 | */ 10 | ServerRelativeUrl: string; 11 | } 12 | 13 | export interface IFolderExplorerService { 14 | 15 | /** 16 | * Get libraries within a given site 17 | * @param webAbsoluteUrl - the url of the target site 18 | */ 19 | GetDocumentLibraries(webAbsoluteUrl: string): Promise; 20 | 21 | 22 | /** 23 | * Get folders within a given library or sub folder 24 | * @param webAbsoluteUrl - the url of the target site 25 | * @param folderRelativeUrl - the relative url of the folder 26 | */ 27 | GetFolders(webAbsoluteUrl: string, folderRelativeUrl: string, orderby: string, orderAscending: boolean): Promise; 28 | 29 | /** 30 | * Create a new folder 31 | * @param webAbsoluteUrl - the url of the target site 32 | * @param folderRelativeUrl - the relative url of the base folder 33 | * @param name - the name of the folder to be created 34 | */ 35 | AddFolder(webAbsoluteUrl: string, folderRelativeUrl: string, name: string): Promise; 36 | } 37 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/folderExplorer/NewFolder/NewFolder.module.scss: -------------------------------------------------------------------------------- 1 | // @import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss"; 2 | @import '~@fluentui/react/dist/sass/References.scss'; 3 | 4 | .libraryItem { 5 | padding: 5px 0 5px 10px; 6 | cursor: pointer; 7 | min-height: 32px; 8 | line-height: 32px; 9 | border-width: 1px; 10 | display: flex; 11 | align-items: flex-start; 12 | } 13 | 14 | .libraryItem:hover { 15 | background-color: "[theme:neutralLighter, default:#{$ms-color-neutralLighter}]"; 16 | } 17 | 18 | .folderIcon { 19 | margin-right: 10px; 20 | color: "[theme:themeSecondary, default:#{$ms-color-themeSecondary}]"; 21 | } 22 | 23 | .defaultText { 24 | width: 100%; 25 | } 26 | 27 | .button { 28 | background-color: "[theme:themePrimary, default:#{$ms-color-themePrimary}]"; 29 | color: white; 30 | 31 | &:hover { 32 | background-color: "[theme:themeSecondary, default:#{$ms-color-themeSecondary}]"; 33 | color: white; 34 | } 35 | 36 | &:disabled { 37 | background-color: "[theme:neutralLighter, default:#{$ms-color-neutralLighter}]"; 38 | } 39 | 40 | & i { 41 | font-weight: bolder; 42 | } 43 | } 44 | 45 | .spinner { 46 | padding-right: 10px; 47 | } 48 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/folderExplorer/FolderExplorer/FolderExplorer.module.scss: -------------------------------------------------------------------------------- 1 | // @import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss"; 2 | @import '~@fluentui/react/dist/sass/References.scss'; 3 | 4 | .breadcrumbPath { 5 | 6 | & button { 7 | font-size: 18px; 8 | } 9 | 10 | & button[aria-current="page"] > div { 11 | font-weight: 600; 12 | color: "[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]"; 13 | } 14 | } 15 | 16 | .filterBox { 17 | margin-bottom: 10px; 18 | margin-top: 20px; 19 | padding-left: 8px; 20 | padding-right: 8px; 21 | max-width: 450px; 22 | } 23 | 24 | .libraryItem { 25 | padding: 5px 0 5px 8px; 26 | cursor: pointer; 27 | height: 30px; 28 | line-height: 30px; 29 | border-width: 1px; 30 | display: flex; 31 | align-items: center; 32 | &:hover { 33 | background-color: "[theme:neutralLighter, default:#{$ms-color-neutralLighter}]";; 34 | } 35 | } 36 | 37 | .folderIcon { 38 | margin-right: 10px; 39 | } 40 | 41 | .status { 42 | font-size: 14px; 43 | color: "[theme:neutralSecondary, default:#{$ms-color-neutralSecondary}]"; 44 | padding-top: 15px; 45 | padding-left: 30px; 46 | padding-bottom: 20px; 47 | padding-right: 40px; 48 | } 49 | -------------------------------------------------------------------------------- /src/WebPart/components/ErrorPlaceholder.tsx: -------------------------------------------------------------------------------- 1 | import { WebPartContext } from '@microsoft/sp-webpart-base'; 2 | import * as React from 'react'; 3 | import * as strings from 'WebPartStrings'; 4 | import { Placeholder } from '../../min-sp-controls-react/controls/placeholder'; 5 | 6 | export const ErrorPlaceholder = (props: { 7 | context: WebPartContext; 8 | isReadOnly: boolean; 9 | }) => { 10 | 11 | const isTeams = !!props.context.sdks?.microsoftTeams?.context; 12 | const isPropertyPaneOpen = props.context.propertyPane.isPropertyPaneOpen(); 13 | const onConfigure = () => props.context.propertyPane.open(); 14 | 15 | const placeholderDescription = isPropertyPaneOpen 16 | ? strings.placeholderIconTextPleaseclickBrowse 17 | : props.isReadOnly 18 | ? (isTeams 19 | ? strings.placeholderIconTextPleaseclickSettings 20 | : strings.placeholderIconTextPleaseclickEdit 21 | ) 22 | : strings.placeholderIconTextPleaseclickConfigure 23 | 24 | return ( 25 | 34 | ); 35 | }; 36 | -------------------------------------------------------------------------------- /src/WebPart/properties/PropertyPaneSizeField.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDom from 'react-dom'; 3 | import { IPropertyPaneField, PropertyPaneFieldType, IPropertyPaneCustomFieldProps } from '@microsoft/sp-property-pane'; 4 | 5 | import { PropertyPaneSizeFieldComponent } from './PropertyPaneSizeFieldComponent'; 6 | 7 | export function PropertyPaneSizeField(targetProperty: string, props: { 8 | value: string; 9 | label: string; 10 | getDefaultValue: () => Promise; 11 | description: string; 12 | screenUnits: string; 13 | }): IPropertyPaneField { 14 | 15 | return { 16 | targetProperty: targetProperty, 17 | type: PropertyPaneFieldType.Custom, 18 | properties: { 19 | key: targetProperty, 20 | 21 | onRender: (parent: HTMLElement, context: any, changeCallback: (targetProperty: string, newValue: any) => void) => { 22 | return ReactDom.render( 23 | changeCallback(targetProperty, val)} 30 | />, parent); 31 | }, 32 | 33 | onDispose(parent: HTMLElement): void { 34 | ReactDom.unmountComponentAtNode(parent); 35 | } 36 | } 37 | }; 38 | } 39 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/placeholder/IPlaceholderComponent.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Used to display a placeholder in case of no or temporary content. Button is optional. 3 | * 4 | */ 5 | export interface IPlaceholderProps { 6 | 7 | /** 8 | * Text description or component for the placeholder. Appears bellow the Icon and IconText. 9 | */ 10 | description: string | ((defaultClassNames: string) => React.ReactElement); 11 | /** 12 | * Icon name used for the className from the MDL2 set. Example: 'Add'. 13 | */ 14 | iconName: string; 15 | /** 16 | * Heading displayed against the Icon. 17 | */ 18 | iconText: string | ((defaultClassNames: string) => React.ReactElement); 19 | /** 20 | * Text label to be displayed on button below the description. 21 | * Optional: As the button is optional. 22 | */ 23 | buttonLabel?: string; 24 | /** 25 | * This className is applied to the root element of content. Use this to 26 | * apply custom styles to the placeholder. 27 | */ 28 | contentClassName?: string; 29 | /** 30 | * Specify if you want to hide the config button 31 | */ 32 | hideButton?: boolean; 33 | /** 34 | * Specify if you want to hide the config button 35 | */ 36 | disableButton?: boolean; 37 | /** 38 | * onConfigure handler for the button. 39 | * Optional: As the button is optional. 40 | */ 41 | onConfigure?: () => void; 42 | } 43 | 44 | export interface IPlaceholderState { 45 | width: number; 46 | } 47 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/FilePicker.types.ts: -------------------------------------------------------------------------------- 1 | import { BaseComponentContext } from '@microsoft/sp-component-base'; 2 | import { IBreadcrumbItem } from "@fluentui/react/lib/Breadcrumb"; 3 | import { IFile, IFolder, ILibrary } from "../../services/FileBrowserService.types"; 4 | 5 | export interface FilePickerBreadcrumbItem extends IBreadcrumbItem { 6 | librarydata?: ILibrary; 7 | folderdata?: IFolder; 8 | } 9 | 10 | export interface IFilePickerTab { 11 | context: BaseComponentContext; 12 | accepts: string[]; 13 | onSave: (value: IFilePickerResult[]) => void; 14 | onClose: () => void; 15 | } 16 | 17 | /** 18 | * Represents the result of the FilePicker. 19 | */ 20 | export interface IFilePickerResult { 21 | /** 22 | * Selected file name with extension. 23 | */ 24 | fileName: string; 25 | /** 26 | * Selected file name without extension. 27 | */ 28 | fileNameWithoutExtension: string; 29 | /** 30 | * Absolute file URL. Undefined in case of file upload. 31 | */ 32 | fileAbsoluteUrl: string; 33 | 34 | /** 35 | * Size of a selected file (in bytes). Undefined in all cases but file upload 36 | */ 37 | fileSize?: number; 38 | 39 | /** 40 | * Absolute not modified file SharePoint URL. 41 | */ 42 | spItemUrl?: string; 43 | 44 | /** 45 | * Downloads file picker result content. 46 | */ 47 | downloadFileContent: () => Promise; 48 | 49 | /** 50 | * Preview 51 | */ 52 | previewDataUrl?: string; 53 | } 54 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "visio-online-spfx-web-part", 3 | "version": "1.0.0", 4 | "private": true, 5 | "main": "lib/index.js", 6 | "scripts": { 7 | "build": "gulp bundle", 8 | "clean": "gulp clean", 9 | "ship": "gulp bundle --ship && gulp package-solution --ship", 10 | "start": "gulp serve", 11 | "test": "gulp test" 12 | }, 13 | "dependencies": { 14 | "@fluentui/react": "^8.122.16", 15 | "@microsoft/office-js": "^1.1.110", 16 | "@microsoft/sp-component-base": "1.21.1", 17 | "@microsoft/sp-core-library": "1.21.1", 18 | "@microsoft/sp-lodash-subset": "1.21.1", 19 | "@microsoft/sp-office-ui-fabric-core": "1.21.1", 20 | "@microsoft/sp-property-pane": "1.21.1", 21 | "@microsoft/sp-webpart-base": "1.21.1", 22 | "@pnp/sp": "^2.15.0", 23 | "react": "17.0.1", 24 | "react-dom": "17.0.1", 25 | "tslib": "2.3.1" 26 | }, 27 | "devDependencies": { 28 | "@microsoft/eslint-config-spfx": "1.21.1", 29 | "@microsoft/eslint-plugin-spfx": "1.21.1", 30 | "@microsoft/rush-stack-compiler-5.3": "0.1.0", 31 | "@microsoft/sp-build-web": "1.21.1", 32 | "@microsoft/sp-module-interfaces": "1.21.1", 33 | "@types/office-js": "^1.0.493", 34 | "@types/react": "17.0.45", 35 | "@types/react-dom": "17.0.17", 36 | "@types/webpack-env": "~1.15.2", 37 | "eslint": "8.57.1", 38 | "eslint-plugin-react-hooks": "4.3.0", 39 | "gulp": "4.0.2" 40 | }, 41 | "engines": { 42 | "node": ">=22.14.0 < 23.0.0" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/WebPart/properties/PropertyPaneUrlField.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDom from 'react-dom'; 3 | import { IPropertyPaneField, PropertyPaneFieldType, IPropertyPaneCustomFieldProps } from '@microsoft/sp-property-pane'; 4 | 5 | import '@pnp/sp/webs'; 6 | import '@pnp/sp/folders'; 7 | import '@pnp/sp/lists'; 8 | import '@pnp/sp/files'; 9 | import { WebPartContext } from '@microsoft/sp-webpart-base'; 10 | import { PropertyPaneUrlFieldComponent } from './PropertyPaneUrlFieldComponent'; 11 | import { IDefaultFolder } from './IDefaultFolder'; 12 | 13 | export function PropertyPaneUrlField(targetProperty: string, props: { 14 | url: string; 15 | context: WebPartContext; 16 | getDefaultFolder: () => Promise; 17 | }): IPropertyPaneField { 18 | 19 | return { 20 | targetProperty: targetProperty, 21 | type: PropertyPaneFieldType.Custom, 22 | properties: { 23 | key: targetProperty, 24 | 25 | onRender: (parent: HTMLElement, context: any, changeCallback: (targetProperty: string, newValue: any) => void) => { 26 | return ReactDom.render( 27 | changeCallback(targetProperty, url)} 31 | getDefaultFolder={props.getDefaultFolder} 32 | />, parent); 33 | }, 34 | 35 | onDispose(parent: HTMLElement): void { 36 | ReactDom.unmountComponentAtNode(parent); 37 | } 38 | } 39 | }; 40 | } 41 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/services/FilesSearchService.types.ts: -------------------------------------------------------------------------------- 1 | export interface IRecentFile { 2 | fileUrl: string; 3 | key: string; 4 | name: string; 5 | editedBy: string; 6 | } 7 | 8 | export interface BingQuerySearchParams { 9 | aspect: string; 10 | size: string; 11 | license: string; 12 | query: string; 13 | 14 | maxFileSize?: number; 15 | maxResults?: number; 16 | } 17 | 18 | export interface IBingSearchResult { 19 | webSearchUrl: string; 20 | webSearchUrlPingSuffix: string; 21 | name: string; 22 | thumbnailUrl: string; 23 | datePublished: string; 24 | isFamilyFriendly: boolean; 25 | creativeCommons: string; 26 | contentUrl: string; 27 | contentUrlPingSuffix: string; 28 | hostPageUrl: string; 29 | hostPageUrlPingSuffix: string; 30 | contentSize: string; 31 | encodingFormat: string; 32 | hostPageDisplayUrl: string; 33 | width: number; 34 | height: number; 35 | thumbnail: Thumbnail; 36 | imageInsightsToken: string; 37 | insightsMetadata: InsightsMetadata; 38 | imageId: string; 39 | accentColor: string; 40 | } 41 | 42 | export interface ISearchResult { 43 | thumbnailUrl: string; 44 | contentUrl: string; 45 | displayUrl: string; 46 | key: string; 47 | width: number; 48 | height: number; 49 | } 50 | 51 | 52 | export interface InsightsMetadata { 53 | pagesIncludingCount: number; 54 | availableSizesCount: number; 55 | recipeSourcesCount?: number; 56 | bestRepresentativeQuery?: BestRepresentativeQuery; 57 | } 58 | 59 | export interface BestRepresentativeQuery { 60 | text: string; 61 | displayText: string; 62 | webSearchUrl: string; 63 | webSearchUrlPingSuffix: string; 64 | } 65 | 66 | export interface Thumbnail { 67 | width: number; 68 | height: number; 69 | } 70 | -------------------------------------------------------------------------------- /src/WebPart/WebPart.manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json", 3 | "id": "eaf98c51-0b5e-4ab0-9eca-139671d32cf5", 4 | "alias": "DiagramFrameWebPart", 5 | "componentType": "WebPart", 6 | "version": "*", 7 | "manifestVersion": 2, 8 | "requiresCustomScript": false, 9 | "supportsFullBleed": true, 10 | "supportedHosts": [ 11 | "SharePointWebPart", 12 | "SharePointFullPage", 13 | "TeamsTab" 14 | ], 15 | "preconfiguredEntries": [ 16 | { 17 | "groupId": "5c03119e-3074-46fd-976b-c60198311f70", 18 | "group": { 19 | "default": "Other" 20 | }, 21 | "title": { 22 | "default": "Diagram Frame", 23 | "de-de": "Diagramm Frame" 24 | }, 25 | "description": { 26 | "default": "The Diagram Frame SharePoint Visio Web Part lets you embed and interact with Visio diagrams in SharePoint, Teams, or full-page apps. It supports hierarchical navigation, customizable start pages, zoom levels, and interface controls, allowing users to explore complex diagrams and tailor the viewing experience to their needs.", 27 | "de-de": "Das Diagram Frame SharePoint Visio Webpart ermöglicht das Einbetten und Interagieren mit Visio-Diagrammen in SharePoint, Teams oder als Vollseitenanwendung. Es unterstützt hierarchische Navigation, anpassbare Startseiten, Zoomstufen und Interface-Steuerungen, wodurch Nutzer komplexe Diagramme erkunden und die Ansicht individuell gestalten können." 28 | }, 29 | "fullPageAppIconImageUrl": "https://unmanagedvisio.com/upload/spfx/diagram-frame-icon-11.svg", 30 | "iconImageUrl": "https://unmanagedvisio.com/upload/spfx/diagram-frame-icon-11.svg", 31 | "properties": { 32 | "openHyperlinksInNewWindow": true, 33 | "forceOpeningOfficeFilesOnline": true, 34 | "enableNavigationHeader": true 35 | } 36 | } 37 | ] 38 | } 39 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/folderExplorer/FolderExplorer/IFolderExplorerProps.ts: -------------------------------------------------------------------------------- 1 | import { BaseComponentContext } from '@microsoft/sp-component-base'; 2 | import { IBreadcrumbItem } from "@fluentui/react/lib/Breadcrumb"; 3 | import { IFolder } from '../../../services/IFolderExplorerService'; 4 | 5 | 6 | export interface IFolderExplorerProps { 7 | /** 8 | * Current context 9 | */ 10 | context: BaseComponentContext; 11 | 12 | /** 13 | * The absolute url of the target site. Only required if not the current site 14 | */ 15 | siteAbsoluteUrl?: string; 16 | 17 | /** 18 | * The lowest level folder that can be explored. This can be the root folder of a library. 19 | * If site url is provided, it will allow the user to select a document library 20 | */ 21 | rootFolder: IFolder; 22 | 23 | /** 24 | * The default folder to be explored 25 | */ 26 | defaultFolder: IFolder; 27 | 28 | /** 29 | * Allow current user to create folders on the target location. If enabled, you need to ensure that the user has the required permissions 30 | */ 31 | canCreateFolders?: boolean; 32 | 33 | /** 34 | * Hide the breadcrumb control 35 | */ 36 | hiddenBreadcrumb?: boolean; 37 | 38 | /** 39 | * Additional items to be added to the beginning of the breadcrumb 40 | */ 41 | initialBreadcrumbItems?: IBreadcrumbItem[]; 42 | 43 | /** 44 | * Hide the filter box 45 | */ 46 | hiddenFilterBox?: boolean; 47 | 48 | /** 49 | * The name of the folder field on which to sort. Name will be used as default. Other examples: Name, TimeCreated, TimeLastModified 50 | */ 51 | orderby?: string; 52 | 53 | /** 54 | * If set to true, results will be sorted in ascending order. Otherwise, descending will be used as default 55 | */ 56 | orderAscending?: boolean; 57 | 58 | /** 59 | * Callback function called after a folder is selected 60 | * @argument folder The selected folder 61 | */ 62 | onSelect: (folder: IFolder) => void; 63 | 64 | /** 65 | * CSS class to apply to the folder picker. 66 | * @defaultvalue null 67 | */ 68 | className?: string; 69 | } 70 | -------------------------------------------------------------------------------- /DeploySPFxToAppCatalog.ps1: -------------------------------------------------------------------------------- 1 | ################# 2 | # Configuration # 3 | ################# 4 | $catalogSite = "https://unmanagedvisio.sharepoint.com/sites/apps" # => App Catalog site 5 | ####### 6 | # End # 7 | ####### 8 | 9 | Install-Module SharePointPnPPowerShellOnline 10 | 11 | Write-Host ***************************************** -ForegroundColor Yellow 12 | Write-Host * Uploading the sppkg on the AppCatalog * -ForegroundColor Yellow 13 | Write-Host ***************************************** -ForegroundColor Yellow 14 | $currentLocation = Get-Location | Select-Object -ExpandProperty Path 15 | Write-Host ($currentLocation + "\config\package-solution.json") 16 | $packageConfig = Get-Content -Raw -Path ($currentLocation + "\config\package-solution.json") | ConvertFrom-Json 17 | $packagePath = Join-Path ($currentLocation + "\sharepoint\") $packageConfig.paths.zippedPackage -Resolve #Join-Path "sharepoint/" $packageConfig.paths.zippedPackage -Resolve 18 | Write-Host "packagePath: $packagePath" 19 | $skipFeatureDeployment = $packageConfig.solution.skipFeatureDeployment 20 | 21 | # Connect-PnPOnline $catalogSite -Credentials (Get-Credential) 22 | Connect-PnPOnline –Url $catalogSite –Credentials (Get-Credential) 23 | 24 | # Adding and publishing the App package 25 | If ($skipFeatureDeployment -ne $true) { 26 | Write-Host "skipFeatureDeployment = false" 27 | Add-PnPApp -Path $packagePath -Publish -Overwrite 28 | Write-Host *************************************************** -ForegroundColor Yellow 29 | Write-Host * The SPFx solution has been succesfully uploaded and published to the AppCatalog * -ForegroundColor Yellow 30 | Write-Host *************************************************** -ForegroundColor Yellow 31 | } 32 | Else { 33 | Write-Host "skipFeatureDeployment = true" 34 | Add-PnPApp -Path $packagePath -SkipFeatureDeployment -Publish -Overwrite 35 | Write-Host *************************************************** -ForegroundColor Yellow 36 | Write-Host * The SPFx solution has been succesfully uploaded and published to the AppCatalog * -ForegroundColor Yellow 37 | Write-Host *************************************************** -ForegroundColor Yellow 38 | } -------------------------------------------------------------------------------- /src/WebPart/WebPart.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDom from 'react-dom'; 3 | import { DisplayMode, Version } from '@microsoft/sp-core-library'; 4 | import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; 5 | import { IPropertyPaneConfiguration } from '@microsoft/sp-property-pane'; 6 | import { PropertyPaneConfiguration } from './properties/PropertyPaneConfiguration'; 7 | import { sp } from '@pnp/sp'; 8 | 9 | require('VisioEmbed'); 10 | 11 | import { TopFrame } from './TopFrame'; 12 | import { IWebPartProps } from './IWebPartProps'; 13 | 14 | export default class WebPart extends BaseClientSideWebPart { 15 | 16 | public onInit(): Promise { 17 | 18 | return super.onInit().then(() => { 19 | sp.setup({ spfxContext: this.context as any }); 20 | }); 21 | } 22 | 23 | public render(): void { 24 | 25 | const properties = { 26 | ...this.properties, 27 | width: this.properties.width || '100%', 28 | height: this.properties.height || '50vh', 29 | openHyperlinksInNewWindow: typeof(this.properties.openHyperlinksInNewWindow) === 'undefined' ? true : this.properties.openHyperlinksInNewWindow, 30 | forceOpeningOfficeFilesOnline: typeof(this.properties.forceOpeningOfficeFilesOnline) === 'undefined' ? true : this.properties.forceOpeningOfficeFilesOnline, 31 | enableNavigationHeader: typeof(this.properties.enableNavigationHeader) === 'undefined' ? true : this.properties.enableNavigationHeader, 32 | }; 33 | 34 | const element = React.createElement(TopFrame, { 35 | ...properties, 36 | isReadOnly: this.displayMode === DisplayMode.Read, 37 | context: this.context, 38 | }); 39 | 40 | ReactDom.render(element, this.domElement); 41 | } 42 | 43 | public onPropertyPaneConfigurationStart() { 44 | this.render(); 45 | } 46 | 47 | public onPropertyPaneConfigurationComplete() { 48 | this.render(); 49 | } 50 | 51 | protected get dataVersion(): Version { 52 | return Version.parse('1.0'); 53 | } 54 | 55 | protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { 56 | return PropertyPaneConfiguration.get(this.context, this.properties) 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/loc/strings.d.ts: -------------------------------------------------------------------------------- 1 | declare interface IWebPartStrings { 2 | FieldVisioFile: string; 3 | FieldVisioFileBrowse: string; 4 | FieldZoom: string; 5 | BasicGroupName: string; 6 | BreadcrumbLoading: string; 7 | BreadcrumbStart: string; 8 | FieldWidth: string; 9 | FieldHeight: string; 10 | View: string; 11 | FieldStartPage: string; 12 | PropertyPaneLabelDrawingDisplay: string; 13 | PropertyPaneLabelAppearance: string; 14 | PropertyPaneLabelInteractivity: string; 15 | PropertyPaneLabelAbout: string; 16 | PropertyPaneLabelhideToolbars: string; 17 | PropertyPaneLabelhideDiagramBoundary: string; 18 | PropertyPaneLabelhideBorders: string; 19 | PropertyPaneLabeldisableHyperlinks: string; 20 | PropertyPaneLabeldisablePan: string; 21 | PropertyPaneLabeldisableZoom: string; 22 | PropertyPaneLabeldisablePanZoomWindow: string; 23 | FieldHeightDescription: string; 24 | FieldWidthDescription: string; 25 | FieldStartPageDescription: string; 26 | FieldZoomDescription: string; 27 | FieldConfigureLabel: string; 28 | Error: string; 29 | Edit: string; 30 | placeholderIconTextUnableShowVisio: string; 31 | placeholderIconTextVisioNotSelected: string; 32 | placeholderIconTextPleaseclickBrowse: string; 33 | placeholderIconTextPleaseclickSettings: string; 34 | placeholderIconTextPleaseclickEdit: string; 35 | placeholderIconTextPleaseclickConfigure: string; 36 | messageWasTheFileDeleted: string; 37 | messageArePermissionsMissing: string; 38 | messageCannotResolveFileURL: string; 39 | messageSomethingWentWrongResolveURL: string; 40 | messageVisioFileNotFound: string; 41 | messageVisioFileCannotAccessed: string; 42 | percOfScreen: string; 43 | percOfFrame: string; 44 | centimeters: string; 45 | FieldEnableNavHeader: string; 46 | FieldEnableNavigation: string; 47 | FieldForceOpenOfficeFiles: string; 48 | FieldHyperlinksNewWindow: string; 49 | inches: string; 50 | millimeters: string; 51 | NavigationHome: string; 52 | points: string; 53 | pixels: string; 54 | UploadTo: string; 55 | UrlNotSelected: string; 56 | UrlPickerBrowse: string; 57 | VisioDocument: string; 58 | } 59 | 60 | declare module 'WebPartStrings' { 61 | const strings: IWebPartStrings; 62 | export = strings; 63 | } 64 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/WebSearchTab/WebSearchTab.types.ts: -------------------------------------------------------------------------------- 1 | export interface ISearchSuggestion { 2 | topic: string; 3 | backgroundUrl: string; 4 | } 5 | 6 | export type ImageSize = 'All' | 'Small' | 'Medium' | 'Large' | 'Wallpaper'; 7 | 8 | export type ImageAspect = 'All' | 'Square' | 'Wide' | 'Tall'; 9 | 10 | export type ImageLicense = 'All' | 'Any'; 11 | 12 | /** 13 | * Rows per page 14 | */ 15 | export const ROWS_PER_PAGE = 3; 16 | 17 | /** 18 | * Maximum row height 19 | */ 20 | export const MAX_ROW_HEIGHT = 250; 21 | 22 | /** 23 | * This is the default search suggestions as of Jan 2019. 24 | * I have no idea where Bing gets them. 25 | * But you can provide your own when calling this component 26 | */ 27 | export const DEFAULT_SUGGESTIONS: ISearchSuggestion[] = [ 28 | { 29 | topic: 'Backgrounds', 30 | backgroundUrl: 'https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-01-11.008/background_b4f5f0fd0af42d6dc969f795cb65a13c.jpg' 31 | }, 32 | { 33 | topic: 'Classrooms', 34 | backgroundUrl: 'https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-01-11.008/classroom_a0b3addf2246028cb7486ddfb0783c6c.jpg' 35 | }, 36 | { 37 | topic: 'Conferences', 38 | backgroundUrl: 'https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-01-11.008/conference_b450359b0962cf464f691b68d7c6ecd1.jpg' 39 | }, 40 | { 41 | topic: 'Meetings', 42 | backgroundUrl: 'https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-01-11.008/meeting_694397debfa52bc06a952310af01d59d.jpg' 43 | }, 44 | { 45 | topic: 'Patterns', 46 | backgroundUrl: 'https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-01-11.008/pattern_6e7c8fd91c9b5fa47519aa3fd4a95a82.jpg' 47 | }, 48 | { 49 | topic: 'Teamwork', 50 | backgroundUrl: 'https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-01-11.008/teamwork_5841da2ae9b9424173f601d86e3a252c.jpg' 51 | }, 52 | { 53 | topic: 'Technology', 54 | backgroundUrl: 'https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-01-11.008/technology_9a8a4e09c090c65f4c0b3ea06bd48b83.jpg' 55 | }, 56 | { 57 | topic: 'Scenery', 58 | backgroundUrl: 'https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-01-11.008/scenery_abe5bfb8f3913bd52be279a793472ead.jpg' 59 | } 60 | ]; 61 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/controls/DocumentTile/DocumentTile.module.scss: -------------------------------------------------------------------------------- 1 | @import "../TilesList/TilesList.module.scss"; 2 | 3 | .odItemTile2Image { 4 | display: inline-block; 5 | } 6 | 7 | .odImageFrame2 { 8 | display: block; 9 | position: relative; 10 | overflow: hidden; 11 | } 12 | 13 | .odImageFrame2Image { 14 | position: absolute; 15 | top: 0; 16 | left: 0; 17 | bottom: 0; 18 | right: 0; 19 | } 20 | 21 | .odImageFrame { 22 | display: block; 23 | position: absolute; 24 | top: 0; 25 | left: 0; 26 | bottom: 0; 27 | right: 0; 28 | } 29 | 30 | .odImageStack { 31 | display: block; 32 | position: absolute; 33 | top: 0; 34 | left: 0; 35 | bottom: 0; 36 | right: 0; 37 | overflow: hidden; 38 | } 39 | 40 | .odImageStackTile { 41 | display: block; 42 | position: absolute; 43 | top: 0; 44 | left: 0; 45 | bottom: 0; 46 | right: 0; 47 | //opacity: 0; 48 | } 49 | 50 | .odImageTile { 51 | display: block; 52 | position: absolute; 53 | top: 0; 54 | left: 0; 55 | right: 0; 56 | bottom: 0; 57 | overflow: hidden; 58 | } 59 | 60 | .odImageTile { 61 | display: block; 62 | position: absolute; 63 | top: 0; 64 | left: 0; 65 | right: 0; 66 | bottom: 0; 67 | overflow: hidden; 68 | } 69 | 70 | .odImageTileBackground { 71 | top: 0; 72 | left: 0; 73 | bottom: 0; 74 | right: 0; 75 | width: 100%; 76 | height: 100%; 77 | margin: auto; 78 | background-size: contain; 79 | background-repeat: no-repeat; 80 | background-position: center; 81 | } 82 | 83 | .odImageTileImage { 84 | display: block; 85 | opacity: 1; 86 | position: absolute; 87 | box-sizing: border-box; 88 | } 89 | 90 | .odImageTileImage, a .odImageTileImage { 91 | border: none; 92 | } 93 | 94 | .odImageTile img { 95 | display: block; 96 | } 97 | 98 | .odItemTile2SmallIcon { 99 | position: absolute; 100 | bottom: 0; 101 | left: 0; 102 | margin: 6px; 103 | } 104 | 105 | .fileTypeIcon { 106 | position: relative; 107 | display: inline-block; 108 | } 109 | 110 | .fileTypeIconIcon { 111 | display: inline-block; 112 | vertical-align: middle; 113 | position: relative; 114 | overflow: hidden; 115 | } 116 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss: -------------------------------------------------------------------------------- 1 | @import '~@fluentui/react/dist/sass/References.scss'; 2 | //@import "../PropertyPaneFilePicker.module.scss"; 3 | 4 | /** TILES **/ 5 | .filePickerFolderCardGrid { 6 | overflow: hidden; 7 | font-size: 0; 8 | 9 | :global { 10 | .ms-List-page { 11 | overflow: hidden; 12 | font-size: 0; 13 | } 14 | 15 | .ms-List-surface { 16 | position: relative; 17 | } 18 | } 19 | } 20 | 21 | .filePickerFolderCardTile { 22 | text-align: center; 23 | outline: none; 24 | position: relative; 25 | @include ms-float(left); 26 | } 27 | 28 | .filePickerFolderCardPadder { 29 | position: absolute; 30 | left: 5px; 31 | top: 5px; 32 | right: 5px; 33 | bottom: 5px; 34 | } 35 | 36 | :global(.ms-Fabric--isFocusVisible) .filePickerFolderCardTile:focus:after { 37 | content: ""; 38 | position: absolute; 39 | left: 2px; 40 | right: 2px; 41 | top: 2px; 42 | bottom: 2px; 43 | box-sizing: border-box; 44 | border: 1px solid "[theme:white, default:#{$ms-color-white}]"; 45 | } 46 | 47 | .filePickerFolderCardSizer { 48 | padding-bottom: 100%; 49 | } 50 | 51 | .filePickerFolderCardImage { 52 | width: 100%; 53 | left: 0; 54 | top: 0; 55 | color: "[theme:white, default:#{$ms-color-white}]"; 56 | position: absolute; 57 | bottom: 0; 58 | font-size: 12px; 59 | width: 100%; 60 | } 61 | 62 | .filePickerFolderCardLabel { 63 | background-color: rgba(0, 0, 0, 0.6); 64 | height: 100%; 65 | width: 100%; 66 | top: 0; 67 | color: "[theme:white, default:#{$ms-color-white}]"; 68 | padding: 10px; 69 | position: absolute; 70 | bottom: 0; 71 | font-size: 12px; 72 | left: 0; 73 | width: 100%; 74 | box-sizing: border-box; 75 | font-size: 21px; 76 | font-weight: 600; 77 | 78 | :global .ms-Button-textContainer { 79 | max-width: 100%; 80 | word-break: break-word; 81 | } 82 | 83 | &:hover { 84 | color: "[theme:neutralLight, default:#{$ms-color-neutralLight}]"; 85 | background-color: rgba(0, 0, 0, 0.6); 86 | } 87 | 88 | &:active { 89 | background-color: "[theme:neutralTertiaryAlt, default:#{$ms-color-neutralTertiaryAlt}]"; 90 | color: "[theme:neutralDark, default:#{$ms-color-neutralDark}]"; 91 | } 92 | } 93 | 94 | .documentLibraryBrowserContainer { 95 | padding: 0; 96 | } 97 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/common/utilities/ThemeColorHelper.ts: -------------------------------------------------------------------------------- 1 | interface Window { 2 | __themeState__: any; 3 | } 4 | 5 | declare var window: Window; 6 | 7 | export class ThemeColorHelper { 8 | /** 9 | * Extracts the color from a theme string 10 | * @param value The theme string (e.g.: "[theme:neutralDark, default: #212121]") 11 | */ 12 | public static GetThemeColor(value: string): string { 13 | try { 14 | if (value.indexOf('theme:') > 0) { 15 | // This value has a theme substitution 16 | const themeParts: string[] = value.replace('[', '').replace(']', '').replace('"', '').split(','); 17 | let defaultValue: string = undefined; 18 | let themeValue: string = undefined; 19 | 20 | // Break the theme string into it's components 21 | themeParts.forEach(themePart => { 22 | if (themePart.indexOf('theme:') >= 0) { 23 | themeValue = themePart.replace('theme:', ''); 24 | } else if (themePart.indexOf('default:') >= 0) { 25 | defaultValue = themePart.replace('default:', '').replace('"', '').trim(); 26 | } 27 | }); 28 | 29 | // If there is a theme value, try to read from environment 30 | if (themeValue !== undefined) { 31 | try { 32 | // This should definitely be easier to do in SPFx! 33 | 34 | // tslint:disable-next-line 35 | const themeStateVariable: any = window.__themeState__; 36 | if (themeStateVariable === undefined) { 37 | return defaultValue; 38 | } 39 | const themeState: {} = themeStateVariable.theme; 40 | 41 | if (themeState === undefined) { 42 | return defaultValue; 43 | } 44 | 45 | for (const varName in themeState) { 46 | if (!themeState.hasOwnProperty(varName)) { 47 | continue; 48 | } 49 | 50 | // Cheesy cleanup of variables to remove extra quotes 51 | if (varName === themeValue) { 52 | return themeState[varName].replace('"', '').trim(); 53 | } 54 | } 55 | } catch (error) { 56 | // do nothing 57 | } 58 | 59 | return defaultValue; 60 | } 61 | } 62 | } catch (error) { 63 | 64 | } 65 | 66 | return value; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const gulp = require('gulp'); 4 | const build = require('@microsoft/sp-build-web'); 5 | const del = require("del"); 6 | var path = require('path'); 7 | 8 | build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`); 9 | 10 | gulp.task('full-clean', function (cb) { 11 | del(["lib", "dist", "package", "release", "sharepoint", "temp"]).then(() => cb(), err => cb(err)); 12 | }); 13 | 14 | gulp.task('update-version', function (cb) { 15 | 16 | const fs = require('fs'); 17 | 18 | var src = require('./package.json'); 19 | var version = src.version.split('-')[0]; 20 | 21 | var packageSolutionJson = require('./config/package-solution.json'); 22 | packageSolutionJson.solution.version = version + '.0'; 23 | fs.writeFileSync('./config/package-solution.json', JSON.stringify(packageSolutionJson, null, 2)); 24 | 25 | var webPartManfiestJson = require('./src/WebPart/WebPart.manifest.json'); 26 | webPartManfiestJson.version = version; 27 | fs.writeFileSync('./src/WebPart/WebPart.manifest.json', JSON.stringify(webPartManfiestJson, null, 2)); 28 | 29 | cb(); 30 | }); 31 | 32 | gulp.task('target-cdn', function (cb) { 33 | 34 | const fs = require('fs'); 35 | 36 | var src = require('./package.json'); 37 | var version = src.version.split('-')[0]; 38 | var versionShort = version.split('.').slice(0, 2).join('.'); 39 | 40 | var packageSolutionJson = require('./config/package-solution.json'); 41 | packageSolutionJson.solution.includeClientSideAssets = false; 42 | packageSolutionJson.paths.zippedPackage = "solution/diagram-frame-webpart.sppkg"; 43 | fs.writeFileSync('./config/package-solution.json', JSON.stringify(packageSolutionJson, null, 2)); 44 | 45 | var writeManfiestJson = require('./config/write-manifests.json'); 46 | writeManfiestJson.cdnBasePath = `https://cdn.jsdelivr.net/gh/nbelyh/diagram-frame-releases/${versionShort}`; 47 | fs.writeFileSync('./config/write-manifests.json', JSON.stringify(writeManfiestJson, null, 2)); 48 | 49 | cb(); 50 | }); 51 | 52 | build.tslintCmd.enabled = false; 53 | 54 | var getTasks = build.rig.getTasks; 55 | build.rig.getTasks = function () { 56 | var result = getTasks.call(build.rig); 57 | 58 | result.set('serve', result.get('serve-deprecated')); 59 | 60 | return result; 61 | }; 62 | 63 | build.initialize(gulp); 64 | 65 | build.mergeConfig({ 66 | showToast: false 67 | }); 68 | -------------------------------------------------------------------------------- /docs/description-de.md: -------------------------------------------------------------------------------- 1 | ## Diagram Frame SharePoint Visio web part 2 | --------------------------------------- 3 | 4 | The web part is a specialized widget to display a **Microsoft Visio** diagram in a modern SharePoint page. It is somewhat similar to the "Visio Web Access" web part in "classic" SharePoint. 5 | 6 | In addition to the stock "File Viewer" web part which you could use to display Visio diagram, this one features the following: 7 | 8 | ### File Browser 9 | 10 | File browser, specific to Visio diagrams 11 | 12 | ### Start Page 13 | 14 | You can specify which page to show first. You can specify either page name (like "My Second Page"), This only works if the diagram has more than one page. In case the page you selected does not exist, it will default to the first page. 15 | 16 | ### Select default zoom level 17 | 18 | You can set the default zoom level for the diagram. 19 | 20 | ### Full width and application page mode support 21 | 22 | You can add the web part as an application page. 23 | 24 | ### Support for custom width/height setting 25 | 26 | You can specify the width and height of the diagram. Can be in percents (also percent of the screen) or actual measurement units (like the classic "Visio diagram view"). 27 | 28 | ### Support disabling menu items 29 | 30 | You can optionally hide diagram toolbar, diagram boundary, border 31 | 32 | ### Support disabling some interactivity 33 | 34 | You can optionally disable hyperlinks, zoom, pan, and the navigator 35 | 36 | What is new in version 1.3 37 | -------------------------- 38 | 39 | - Navigation option to enable external links in the new tab 40 | - Navigation option to open office files instead of downloading 41 | 42 | What is new in version 1.2 43 | -------------------------- 44 | 45 | - German localization 46 | - Optional navigation between pages and diagrams on single click (experimental) 47 | 48 | What is new in version 1.1 49 | -------------------------- 50 | 51 | - Enables using the web part as a full width page 52 | - Enables embedding the tab as a Teams tab 53 | - Optimized flickering on the first load 54 | - Optimized experience with file upload (upload defaults to the site document library) 55 | 56 | More Information 57 | ---------------- 58 | 59 | For more information, please visit the web part site: 60 | 61 | [https://unmanagedvisio.com/products/diagram-frame-sharepoint-visio-web-part/](https://unmanagedvisio.com/products/diagram-frame-sharepoint-visio-web-part/) 62 | -------------------------------------------------------------------------------- /docs/description-en.md: -------------------------------------------------------------------------------- 1 | ## Diagram Frame SharePoint Visio web part 2 | --------------------------------------- 3 | 4 | The web part is a specialized widget to display a **Microsoft Visio** diagram in a modern SharePoint page. It is somewhat similar to the "Visio Web Access" web part in "classic" SharePoint. 5 | 6 | In addition to the stock "File Viewer" web part which you could use to display Visio diagram, this one features the following: 7 | 8 | ### File Browser 9 | 10 | File browser, specific to Visio diagrams 11 | 12 | ### Start Page 13 | 14 | You can specify which page to show first. You can specify either page name (like "My Second Page"), This only works if the diagram has more than one page. In case the page you selected does not exist, it will default to the first page. 15 | 16 | ### Select default zoom level 17 | 18 | You can set the default zoom level for the diagram. 19 | 20 | ### Full width and application page mode support 21 | 22 | You can add the web part as an application page. 23 | 24 | ### Support for custom width/height setting 25 | 26 | You can specify the width and height of the diagram. Can be in percents (also percent of the screen) or actual measurement units (like the classic "Visio diagram view"). 27 | 28 | ### Support disabling menu items 29 | 30 | You can optionally hide diagram toolbar, diagram boundary, border 31 | 32 | ### Support disabling some interactivity 33 | 34 | You can optionally disable hyperlinks, zoom, pan, and the navigator 35 | 36 | What is new in version 1.3 37 | -------------------------- 38 | 39 | - Navigation option to enable external links in the new tab 40 | - Navigation option to open office files instead of downloading 41 | 42 | What is new in version 1.2 43 | -------------------------- 44 | 45 | - German localization 46 | - Optional navigation between pages and diagrams on single click (experimental) 47 | 48 | What is new in version 1.1 49 | -------------------------- 50 | 51 | - Enables using the web part as a full width page 52 | - Enables embedding the tab as a Teams tab 53 | - Optimized flickering on the first load 54 | - Optimized experience with file upload (upload defaults to the site document library) 55 | 56 | More Information 57 | ---------------- 58 | 59 | For more information, please visit the web part site: 60 | 61 | [https://unmanagedvisio.com/products/diagram-frame-sharepoint-visio-web-part/](https://unmanagedvisio.com/products/diagram-frame-sharepoint-visio-web-part/) 62 | -------------------------------------------------------------------------------- /docs/website-icons/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/diagram-frame-icon-11.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/website-icons/svgpublishwp.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/website-icons/diagram-frame-icon-11.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/placeholder/PlaceholderComponent.module.scss: -------------------------------------------------------------------------------- 1 | @import '~@fluentui/react/dist/sass/References.scss'; 2 | 3 | .placeholder { 4 | display: flex; 5 | 6 | .placeholderContainer { 7 | align-items: center; 8 | color: "[theme:neutralSecondary, default: #666666]"; 9 | width: 100%; 10 | padding: 80px 0; 11 | 12 | .placeholderHead { 13 | color: "[theme:neutralPrimary, default: #333333]"; 14 | 15 | .placeholderHeadContainer { 16 | height: 100%; 17 | white-space: nowrap; 18 | text-align: center; 19 | } 20 | 21 | .placeholderIcon { 22 | display: inline-block; 23 | vertical-align: middle; 24 | white-space: normal; 25 | 26 | @include ms-fontSize-su; 27 | } 28 | 29 | .placeholderText { 30 | display: inline; 31 | vertical-align: middle; 32 | white-space: normal; 33 | 34 | @include ms-fontWeight-light; 35 | @include ms-fontSize-xxl; 36 | 37 | &.hide { 38 | display: none; 39 | } 40 | } 41 | } 42 | 43 | .placeholderDescription { 44 | width: 65%; 45 | vertical-align: middle; 46 | margin: 0 auto; 47 | text-align: center; 48 | 49 | .placeholderDescriptionText { 50 | color: "[theme:neutralSecondary, default: #666666]"; 51 | font-size: 17px; 52 | display: inline-block; 53 | margin: 24px 0; 54 | font-weight: 100; 55 | } 56 | 57 | button { 58 | font-size: 14px; 59 | font-weight: 400; 60 | box-sizing: border-box; 61 | display: inline-block; 62 | text-align: center; 63 | cursor: pointer; 64 | vertical-align: top; 65 | min-width: 60px; 66 | height: 32px; 67 | user-select: none; 68 | outline: transparent; 69 | border-width: 1px; 70 | border-style: solid; 71 | border-color: transparent; 72 | border-image: initial; 73 | text-decoration: none; 74 | } 75 | } 76 | } 77 | } 78 | 79 | [dir=ltr] .placeholder, 80 | [dir=rtl] .placeholder { 81 | 82 | .placeholderContainer { 83 | 84 | .placeholderHead { 85 | 86 | .placeholderText { 87 | padding-left: 20px; 88 | } 89 | } 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/controls/FolderTile/FolderTile.module.scss: -------------------------------------------------------------------------------- 1 | // @import "../OneDriveTab.module.scss"; 2 | @import "../TilesList/TilesList.module.scss"; 3 | 4 | .folderCover { 5 | display: inline-block; 6 | margin: 3px; 7 | display: -webkit-inline-box; 8 | display: -ms-inline-flexbox; 9 | display: inline-flex; 10 | position: relative; 11 | vertical-align: bottom; 12 | -webkit-box-orient: horizontal; 13 | -webkit-box-direction: normal; 14 | -ms-flex-direction: row; 15 | flex-direction: row; 16 | -webkit-box-align: end; 17 | -ms-flex-align: end; 18 | align-items: flex-end; 19 | } 20 | 21 | .folderCover.isSmall_88d29bd4 { 22 | width: 72px; 23 | height: 52px; 24 | } 25 | 26 | .folderCover.isLarge { 27 | width: 112px; 28 | height: 80px; 29 | } 30 | 31 | .folderCoverBack { 32 | display: block; 33 | position: absolute; 34 | left: -3px; 35 | right: -3px; 36 | bottom: -4px; 37 | 38 | img { 39 | border: none; 40 | padding: 0; 41 | margin: 0; 42 | } 43 | } 44 | 45 | .folderCoverFront { 46 | display: block; 47 | position: absolute; 48 | left: -3px; 49 | right: -3px; 50 | bottom: -4px; 51 | 52 | img { 53 | border: none; 54 | padding: 0; 55 | margin: 0; 56 | } 57 | } 58 | 59 | 60 | .folderCoverFrame { 61 | display: -webkit-inline-box; 62 | display: -ms-inline-flexbox; 63 | display: inline-flex; 64 | position: relative; 65 | -webkit-box-orient: horizontal; 66 | -webkit-box-direction: normal; 67 | -ms-flex-direction: row; 68 | flex-direction: row; 69 | -webkit-box-align: center; 70 | -ms-flex-align: center; 71 | align-items: center; 72 | -webkit-box-pack: center; 73 | -ms-flex-pack: center; 74 | justify-content: center; 75 | overflow: hidden; 76 | max-width: 100%; 77 | max-height: 100%; 78 | -webkit-box-shadow: 0 1px 3px 2px rgba(1, 1, 0, 0.2); 79 | box-shadow: 0 1px 3px 2px rgba(1, 1, 0, 0.2); 80 | background-color: "[theme:white, default:#{$ms-color-white}]"; 81 | min-width: 32px; 82 | min-height: 32px; 83 | } 84 | 85 | .folderCoverContent { 86 | position: absolute; 87 | left: 4px; 88 | right: 4px; 89 | bottom: 4px; 90 | top: 4px; 91 | display: -webkit-box; 92 | display: -ms-flexbox; 93 | display: flex; 94 | -webkit-box-orient: vertical; 95 | -webkit-box-direction: normal; 96 | -ms-flex-direction: column; 97 | flex-direction: column; 98 | -webkit-box-align: center; 99 | -ms-flex-align: center; 100 | align-items: center; 101 | -webkit-box-pack: center; 102 | -ms-flex-pack: center; 103 | justify-content: center; 104 | opacity: 1; 105 | -webkit-transition: opacity 0.2s linear; 106 | transition: opacity 0.2s linear; 107 | } 108 | -------------------------------------------------------------------------------- /src/WebPart/properties/Defaults.ts: -------------------------------------------------------------------------------- 1 | import { WebPartContext } from '@microsoft/sp-webpart-base'; 2 | import { IDefaultFolder } from './IDefaultFolder'; 3 | import { sp } from '@pnp/sp'; 4 | 5 | export class Defaults { 6 | 7 | private static defaultFolder: IDefaultFolder; 8 | public static async getDefaultFolder(context: WebPartContext): Promise { 9 | if (this.defaultFolder) { 10 | return this.defaultFolder; 11 | } 12 | 13 | const teamsContext = context.sdks?.microsoftTeams?.context; 14 | if (teamsContext) { 15 | return this.defaultFolder = { 16 | name: teamsContext.channelName, 17 | relativeUrl: teamsContext.channelRelativeUrl 18 | }; 19 | } 20 | 21 | try { 22 | const lists = await sp.web.lists.select('DefaultViewURL', 'Title').filter('BaseTemplate eq 101 and Hidden eq false').get(); 23 | const firstList = lists[0]; 24 | if (firstList) { 25 | const webUrl = context.pageContext.web.serverRelativeUrl; 26 | let viewUrl = firstList.DefaultViewUrl; 27 | if (viewUrl.startsWith(webUrl)) 28 | viewUrl = viewUrl.substring(webUrl.length); 29 | 30 | const pos = viewUrl.indexOf('/Forms/'); 31 | if (pos >= 0) { 32 | const docLibPath = viewUrl.substring(0, pos); 33 | return this.defaultFolder = { 34 | name: firstList.Title, 35 | relativeUrl: `${webUrl}${docLibPath}` 36 | } 37 | } 38 | } 39 | } catch (err) { 40 | console.warn(`[DiagramFrame] Unable to dtermine default folder using default ${err.message}`, err); 41 | } 42 | 43 | return this.defaultFolder = { 44 | name: undefined, 45 | relativeUrl: undefined 46 | }; 47 | } 48 | 49 | private static defaultWidth; 50 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 51 | public static async getDefaultWidth(context: WebPartContext) { 52 | if (this.defaultWidth) { 53 | return this.defaultWidth; 54 | } 55 | 56 | return this.defaultWidth = '100%'; 57 | } 58 | 59 | private static defaultHeight; 60 | public static async getDefaultHeight(context: WebPartContext) { 61 | 62 | if (this.defaultHeight) { 63 | return this.defaultHeight; 64 | } 65 | 66 | if (context.sdks.microsoftTeams) { 67 | return this.defaultHeight = '100%'; 68 | } 69 | 70 | const pageContext = context.pageContext; 71 | if (pageContext?.list?.id && pageContext?.listItem?.id) { 72 | try { 73 | const item = await sp.web.lists.getById(pageContext.list.id.toString()).items.getById(pageContext.listItem.id).select('PageLayoutType').get(); 74 | if (item['PageLayoutType'] === 'SingleWebPartAppPage') { 75 | return this.defaultHeight = '100%'; 76 | } 77 | } catch (err) { 78 | console.warn(`[DiagramFrame] Unable to dtermine default height using default ${err.message}`, err); 79 | } 80 | } 81 | return this.defaultHeight = '50vh'; 82 | } 83 | 84 | } 85 | -------------------------------------------------------------------------------- /src/WebPart/properties/PropertyPaneSizeFieldComponent.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Dropdown, IDropdownOption, Stack, TextField, Text } from '@fluentui/react'; 3 | import * as strings from 'WebPartStrings'; 4 | 5 | const makeSplitValue = (value: string) => { 6 | const matches = value?.match(/(\d+)\s*(\w+|%)?/); 7 | return { 8 | number: matches?.[1] ?? '', 9 | units: matches?.[2] ?? '' 10 | }; 11 | }; 12 | 13 | export function PropertyPaneSizeFieldComponent(props: { 14 | value: string; 15 | setValue: (value: string) => void; 16 | getDefaultValue: () => Promise; 17 | label: string; 18 | description: string; 19 | screenUnits: string; 20 | }) { 21 | 22 | const screen = `v${props.screenUnits}`; 23 | 24 | const unitsOptions: IDropdownOption[] = [ 25 | { key: screen, text: strings.percOfScreen }, // % of the Screen 26 | { key: '%', text: strings.percOfFrame }, // % of the Frame 27 | { key: 'cm', text: strings.centimeters }, 28 | { key: 'in', text: strings.inches }, 29 | { key: 'mm', text: strings.millimeters }, 30 | { key: 'pt', text: strings.points }, 31 | { key: 'px', text: strings.pixels }, 32 | ]; 33 | 34 | const splitValue = makeSplitValue(props.value); 35 | const [number, setNumber] = React.useState(splitValue.number); 36 | const [units, setUnits] = React.useState(splitValue.units); 37 | 38 | const debounce = React.useRef(0); 39 | 40 | const [valueToSave, setValueToSave] = React.useState(props.value); 41 | React.useEffect(() => { 42 | if (valueToSave) { 43 | props.setValue(valueToSave); 44 | } 45 | }, [valueToSave]); 46 | 47 | const processChanges = () => { 48 | if (number && units) { 49 | setValueToSave(number + units); 50 | } else { 51 | props.getDefaultValue().then(defaultValue => { 52 | const splitDefaultValue = makeSplitValue(defaultValue); 53 | setNumber(splitDefaultValue.number); 54 | setUnits(splitDefaultValue.units); 55 | setValueToSave(defaultValue); 56 | }); 57 | } 58 | debounce.current = 1000; 59 | }; 60 | 61 | React.useEffect(() => { 62 | const timeout = setTimeout(processChanges, debounce.current); 63 | return () => clearTimeout(timeout); 64 | }, [number, units]); 65 | 66 | const onNumberChanged = async (_, val) => { 67 | setNumber(val); 68 | }; 69 | 70 | const onUnitChanged = (_, val) => { 71 | setUnits(val.key); 72 | }; 73 | 74 | return ( 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | {props.description} 85 | 86 | ); 87 | } 88 | -------------------------------------------------------------------------------- /docs/partner-description-de.html: -------------------------------------------------------------------------------- 1 |

Diagrammrahmen SharePoint Visio-Webpart

2 |
3 |

Das Webpart ist ein spezielles Widget zum Anzeigen eines Microsoft Visio-Diagramms auf einer 4 | modernen SharePoint-Seite. Es ähnelt in gewisser Weise dem Webpart „Visio Web Access“ im „klassischen“ SharePoint.

5 |

Zusätzlich zum Standard-Webpart "File Viewer", mit dem Sie ein Visio-Diagramm anzeigen können, bietet 6 | dieses Folgendes:

7 |

Dateibrowser

8 |

Dateibrowser, spezifisch für Visio-Diagramme

9 |

Startseite

10 |

Sie können festlegen, welche Seite zuerst angezeigt werden soll. Sie können beide Seitennamen angeben (z. B. 11 | "Meine zweite Seite"). Dies funktioniert nur, wenn das Diagramm mehr als eine Seite hat. Falls die 12 | ausgewählte Seite nicht existiert, wird standardmäßig die erste Seite angezeigt.

13 |

Standard-Zoomstufe auswählen

14 |

Sie können die Standard-Zoomstufe für das Diagramm festlegen.

15 |

Unterstützung für volle Breite und 16 | Anwendungsseitenmodus

17 |

Sie können das Webpart als Anwendungsseite hinzufügen.

18 |

Unterstützung für benutzerdefinierte 19 | Breiten-/Höheneinstellungen

20 |

Sie können die Breite und Höhe des Diagramms festlegen. Kann in Prozent (auch Prozent des Bildschirms) oder 21 | tatsächlichen Maßeinheiten (wie die klassische „Visio-Diagrammansicht“) angegeben werden.

22 |

Unterstützt das Deaktivieren von Menüelementen

23 |

Sie können Diagrammsymbolleiste, Diagrammgrenze und Rahmen optional ausblenden

24 |

Unterstützen Sie das Deaktivieren einiger 25 | Interaktivität

26 |

Optional können Sie Hyperlinks, Zoom, Pan und den Navigator deaktivieren

27 |

Was ist neu in Version 1.2

28 |
    29 |
  • Deutsche Lokalisierung
    • 30 |
  • Optionale Navigation zwischen Seiten und Diagrammen mit einem Klick (experimentell)
    • 31 |
32 |

Was ist neu in Version 1.1

33 |

– Ermöglicht die Verwendung des Webparts als Seite in voller Breite 34 | – Ermöglicht das Einbetten der Registerkarte als Team-Registerkarte

35 |
    36 |
  • Optimiertes Flackern beim ersten Laden
    • 37 |
  • Optimiertes Erlebnis beim Hochladen von Dateien (Standardwerte für das Hochladen in die Dokumentbibliothek der 38 | Website)
    • 39 |
40 |

Mehr Informationen

41 |

Weitere Informationen finden Sie auf der Website des Webparts:

42 |

https://unmanagedvisio.com/products/diagram-frame-sharepoint-visio-web-part/ 44 |

45 | -------------------------------------------------------------------------------- /docs/partner-description-en.html: -------------------------------------------------------------------------------- 1 |

Diagram Frame SharePoint Visio Web Part

2 |
3 |

The web part is a specialized widget to display a Microsoft Visio diagram on a modern SharePoint 4 | page. It is somewhat similar to the "Visio Web Access" web part in "classic" SharePoint.

5 |

In addition to the stock "File Viewer" web part, which you can use to display Visio diagrams, this one features the 6 | following:

7 |

File Browser

8 |

A file browser specific to Visio diagrams.

9 |

Start Page

10 |

You can specify which page to show first. You can specify either the page name (like "My Second Page"). This only 11 | works if the diagram has more than one page. If the page you selected does not exist, it will default to the first 12 | page.

13 |

Select Default Zoom Level

14 |

You can set the default zoom level for the diagram.

15 |

Full Width and Application Page Mode Support

16 |

You can add the web part as an application page.

17 |

Support for Custom Width/Height Settings

18 |

You can specify the width and height of the diagram. These can be in percent (including percent of the screen) or 19 | actual measurement units (like in the classic "Visio diagram view").

20 |

Support for Disabling Menu Items

21 |

You can optionally hide the diagram toolbar, diagram boundary, and border.

22 |

Support for Disabling Some Interactivity

23 |

You can optionally disable hyperlinks, zoom, pan, and the navigator.

24 |

What's New in Version 1.3

25 |
    26 |
  • Added an optional feature to open hyperlinks in a new window
    • 27 |
  • Added an optional feature to open Office file links instead of downloading by default (added ?web=1 to the URL) 28 |
    • 29 |
  • Optimized flickering on first load
    • 30 |
  • Added an optional navigation header to the web part
    • 31 |
32 |

What's New in Version 1.2

33 |
    34 |
  • German localization
    • 35 |
  • Experimental support for navigation
    • 36 |
  • Default CDN hosting (jsdelivr)
    • 37 |
38 |

What's New in Version 1.1

39 |
    40 |
  • Enables using the web part as a full-width page
    • 41 |
  • Enables embedding the tab as a Teams tab
    • 42 |
  • Optimized flickering on first load
    • 43 |
  • Optimized experience with file upload (uploads default to the site document library)
    • 44 |
45 |

More Information

46 |

For more information, please visit the web part site:

47 |

https://unmanagedvisio.com/products/diagram-frame-sharepoint-visio-web-part/ 49 |

50 | -------------------------------------------------------------------------------- /src/loc/en-us.js: -------------------------------------------------------------------------------- 1 | define([], function() { 2 | return { 3 | BasicGroupName: "Basic Settings", 4 | BreadcrumbLoading: "Loading...", 5 | BreadcrumbStart: "Start", 6 | centimeters: "centimeters", 7 | Edit: "Edit", 8 | Error: "Error", 9 | FieldConfigureLabel: "Configure", 10 | FieldEnableNavHeader: "Display Navigation Path", 11 | FieldEnableNavigation: "Enable Single-Click Navigation", 12 | FieldForceOpenOfficeFiles: "Force Open Office Files", 13 | FieldHeight: "Diagram height", 14 | FieldHeightDescription: "Specify height value and units", 15 | FieldHyperlinksNewWindow: "Open Hyperlinks in New Window", 16 | FieldStartPage: "Initial Page", 17 | FieldStartPageDescription: "Page (name) to activate on load", 18 | FieldVisioFile: "Visio File", 19 | FieldVisioFileBrowse: "Browse...", 20 | FieldWidth: "Diagram width", 21 | FieldWidthDescription: "Specify width value and units", 22 | FieldZoom: "Default Zoom (%)", 23 | FieldZoomDescription: "Zoom level (percents) to set on load", 24 | inches: "inches", 25 | messageArePermissionsMissing: "Are some permissions missing?", 26 | messageCannotResolveFileURL: "Cannot resolve file URL:", 27 | messageSomethingWentWrongResolveURL: "Something went wrong when resolving file URL:", 28 | messageVisioFileCannotAccessed: "The Visio file this web part is connected to cannot be accessed at the URL", 29 | messageVisioFileNotFound: "The Visio file this web part is connected to is not found at the URL", 30 | messageWasTheFileDeleted: "Was the file deleted?", 31 | millimeters: "millimeters", 32 | NavigationHome: "Home", 33 | percOfFrame: "% of the frame", 34 | percOfScreen: "% of the screen", 35 | pixels: "pixels", 36 | placeholderIconTextPleaseclickBrowse: "Please click 'Browse...' Button on configuration panel to select the diagram.", 37 | placeholderIconTextPleaseclickConfigure: "Click 'Configure' button to reconfigure this web part.", 38 | placeholderIconTextPleaseclickEdit: "Please click 'Edit' to start page editing to reconfigure this web part.", 39 | placeholderIconTextPleaseclickSettings: "Please click 'Settings' menu on the Tab to reconfigure this web part.", 40 | placeholderIconTextUnableShowVisio: "Unable to show this Visio diagram", 41 | placeholderIconTextVisioNotSelected: "Visio diagram not selected", 42 | points: "points", 43 | PropertyPaneLabelAbout: "About", 44 | PropertyPaneLabelAppearance: "Appearance", 45 | PropertyPaneLabeldisableHyperlinks: "Disable Hyperlinks", 46 | PropertyPaneLabeldisablePan: "Disable Pan", 47 | PropertyPaneLabeldisablePanZoomWindow: "Disable PanZoom Window", 48 | PropertyPaneLabeldisableZoom: "Disable Zoom", 49 | PropertyPaneLabelDrawingDisplay: "Drawing Display", 50 | PropertyPaneLabelhideBorders: "Hide Borders", 51 | PropertyPaneLabelhideDiagramBoundary: "Hide Diagram Boundary", 52 | PropertyPaneLabelhideToolbars: "Hide Toolbars", 53 | PropertyPaneLabelInteractivity: "Drawing Interactivity", 54 | UploadTo: "Upload To", 55 | UrlNotSelected: "Not selected", 56 | UrlPickerBrowse: "Browse...", 57 | View: "View", 58 | VisioDocument: "Visio Document" 59 | }; 60 | }); -------------------------------------------------------------------------------- /src/loc/de-de.js: -------------------------------------------------------------------------------- 1 | define([], function() { 2 | return { 3 | BasicGroupName: "Grundeinstellungen", 4 | BreadcrumbLoading: "Wird geladen...", 5 | BreadcrumbStart: "Start", 6 | centimeters: "Zentimeter", 7 | Edit: "Editieren", 8 | Error: "Fehler", 9 | FieldConfigureLabel: "Konfigurieren", 10 | FieldEnableNavHeader: "Navigationspfad anzeigen", 11 | FieldEnableNavigation: "Aktivieren der Ein-Klick-Navigation", 12 | FieldForceOpenOfficeFiles: "Office-Dateien sofort öffnen", 13 | FieldHeight: "Diagram Höhe", 14 | FieldHeightDescription: "Specify height value and units", 15 | FieldHyperlinksNewWindow: "Hyperlinks in neuem Fenster öffnen", 16 | FieldStartPage: "Initiale Seite", 17 | FieldStartPageDescription: "Gibt die Seite (Name) an, die beim Start geladen wird.", 18 | FieldVisioFile: "Visio Datei", 19 | FieldVisioFileBrowse: "Öffnen...", 20 | FieldWidth: "Diagram Breite", 21 | FieldWidthDescription: "Specify width value and units", 22 | FieldZoom: "Standard Zoom (%)", 23 | FieldZoomDescription: "Gibt die Zoom Stärke (%) beim laden der Grafik an.", 24 | inches: "Inch", 25 | messageArePermissionsMissing: "Fehlen Berechtigungen zum Öffnen?", 26 | messageCannotResolveFileURL: "Kann die Datei URL nicht auflösen:", 27 | messageSomethingWentWrongResolveURL: "Irgendetwas ist schief gelaufen beim Auflösen der URL:", 28 | messageVisioFileCannotAccessed: "Auf die mit diesem Web Part verknüpfte Visio Datei kann nicht zugegriffen werden.", 29 | messageVisioFileNotFound: "Die mit diesem Web Part verknüpfte Visio Datei wurde nicht gefunden.", 30 | messageWasTheFileDeleted: "Wurde die Datei gelöscht?", 31 | millimeters: "Millimeter", 32 | NavigationHome: "Home", 33 | percOfFrame: "% vom Widgetbereich", 34 | percOfScreen: "% vom Bildschirm", 35 | pixels: "Pixel", 36 | placeholderIconTextPleaseclickBrowse: "Bitte klick auf die 'Öffnen...' Schaltfläche im Konfigurationspanel um das Diagramm auszuwählen.", 37 | placeholderIconTextPleaseclickConfigure: "Klicke auf die 'Konfigurieren' Schaltfläche um dieses Web Part zu konfigurieren.", 38 | placeholderIconTextPleaseclickEdit: "Bitte klick 'Editieren' und starte das Bearbeiten der Seite um den Web Part zu konfigurieren.", 39 | placeholderIconTextPleaseclickSettings: "Bitte klick auf 'Einstellungen' im Tab um dieses Web Part zu konfigurieren.", 40 | placeholderIconTextUnableShowVisio: "Kann das Visio Diagramm nicht anzeigen.", 41 | placeholderIconTextVisioNotSelected: "Noch kein Visio Diagramm ausgewählt.", 42 | points: "Punkte", 43 | PropertyPaneLabelAbout: "Über", 44 | PropertyPaneLabelAppearance: "Aussehen", 45 | PropertyPaneLabeldisableHyperlinks: "Deaktiviere Hyperlinks", 46 | PropertyPaneLabeldisablePan: "Deaktiviere Pan", 47 | PropertyPaneLabeldisablePanZoomWindow: "Deaktiviere PanZoom Fenster", 48 | PropertyPaneLabeldisableZoom: "Deaktiviere Zoom", 49 | PropertyPaneLabelDrawingDisplay: "Zeichnungsansicht", 50 | PropertyPaneLabelhideBorders: "Verstecke Rahmen", 51 | PropertyPaneLabelhideDiagramBoundary: "Verstecke Diagramm Rand", 52 | PropertyPaneLabelhideToolbars: "Verstecke Toolbars", 53 | PropertyPaneLabelInteractivity: "Interaktivität", 54 | UploadTo: "Hochladen auf", 55 | UrlNotSelected: "Nicht ausgewählt", 56 | UrlPickerBrowse: "Öffnen...", 57 | View: "Ansicht", 58 | VisioDocument: "Visio-Dokument" 59 | }; 60 | }); -------------------------------------------------------------------------------- /src/min-sp-controls-react/controls/filePicker/StockImagesTab/StockImages.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import styles from './StockImages.module.scss'; 3 | import { IStockImagesProps } from './IStockImagesProps'; 4 | import { StockImagesEvent, SubmitValue } from './StockImagesModel'; 5 | import { GeneralHelper } from '../../../common/utilities'; 6 | import { IFilePickerResult } from '../FilePicker.types'; 7 | 8 | export class StockImages extends React.Component { 9 | public componentDidMount() { 10 | window.addEventListener("message", this._handleImageIframeEvent); 11 | } 12 | 13 | public componentWillUnmount() { 14 | window.removeEventListener("message", this._handleImageIframeEvent); 15 | } 16 | 17 | public render(): React.ReactElement { 18 | const { language } = this.props; 19 | 20 | const themesColor = `&themecolors=${encodeURIComponent(this.getCurrentThemeConfiguration())}`; 21 | const contentPickerUrl = `https://hubblecontent.osi.office.net/contentsvc/m365contentpicker/index.html?p=3&app=1001&aud=prod&channel=devmain&setlang=${language}&msel=0&env=prod&premium=1${themesColor}`; 22 | 23 | return ( 24 |
25 |
26 |
27 |